Css basics,

Source: Internet
Author: User

Css basics,

1. When the same HTML element is defined by more than one style, the priority is as follows:
1) inline style (inside the html element)
2) Internal style sheet (inside the 3) external style sheets
4) browser default settings

2.css rules mainly consist of selectors and one or more declarations.
Example: h1 {color: red; font-size: 14px ;}
If the value is a number of words, you need to quote the value
P {font-family: "sans serif ";}

3. selector Group
Example: share the same declaration for all titles
H1, h2, h3, h4, h5, h6 {
Color: green;

4. derived Selector

li strong {font-style: italic;font-weight: normal;}

<P> <strong> bold Chinese, not italic. This rule is not included in the list. </strong> </p>
<Li> <strong> italics. This is because the strong element is located in the li element. </Strong> </li>
<Li> normal font. </Li>

5. id selector (the id attribute can only appear once in each HTML document)
# Red {color: red ;}
# Green {color: green ;}
The p element whose id attribute is red is displayed in red, while the p element whose id attribute is green is displayed in green.

Use the id selector to create a derived Selector
# Sidebar p {
Font-style: italic;
Text-align: right;
Margin-top: 0.5em;
The above style will only apply to paragraphs that appear in the element where id is sidebar.

6. class selector
1) the class selector is displayed with a dot
. Center {text-align: center}
All HTML elements with the center class are centered.

2) the class can also be used as a derived selector.
. Fancy td {
Color: # f60;
Background: #666;
The table unit with the class name fancy will be orange with a gray background.

7. Attribute Selector
Color: red;
Set styles for all elements with the title attribute

[Title ~ = Hello] {color: red ;}
Set styles for all elements that contain the title attribute of the specified value

[Lang | = en] {color: red ;}
Set the style of all elements that contain the lang attribute of the specified value

input[type="text"]{width:150px;display:block;margin-bottom:10px;background-color:yellow;font-family: Verdana, Arial;}input[type="button"]{width:120px;margin-left:35px;display:block;font-family: Verdana, Arial;}

Set a style for a form

8. Three Ways to insert a style sheet
External style sheet
<Link rel = "stylesheet" type = "text/css" href = "mystyle.css"/>
Internal style sheet
<Style type = "text/css">
Hr {color: sienna ;}
P {margin-left: 20px ;}
Body {background-image: url ("images/back40.gif ");}
Inline Style
<P style = "color: sienna; margin-left: 20px">
This is a paragraph
Multiple styles
If a selector is set by both an external style sheet and an internal style sheet
In this case, the internal style sheet is prioritized, and the internal style sheet does not inherit the external style sheet.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.