CSS Basic Tutorial Learning

1.CSS Overview
CSS refers to cascading style sheets (cascading style Sheets)
Style defines how HTML elements are displayed
Styles are typically stored in style sheets
Add a style to HTML 4.0 to solve the problem of separating content from performance
External style sheets can greatly improve productivity
External style sheets are typically stored in CSS files
Multiple style definitions can cascade to a
Styles can be specified in a single HTML element, in the header element of an HTML page,
Or in an external CSS file. You can even reference multiple external style sheets within the same HTML document
2. What style is used when the same HTML element is defined by more than one style?
Generally, all styles are stacked in a new virtual style sheet according to the following rules, where the number 4 has the highest precedence.
1 Browser default settings
2 external style Sheets
3 Internal style sheet (inside 4 inline style (inside HTML elements)
The 3.CSS rules consist of two main parts: selectors, and one or more declarations.
selector {
Declaration1;
Declaration2; ...
Declarationn;
}
　 selectors are usually HTML elements that you need to change the style.
Each declaration consists of an attribute and a value.
H1 {
color:red;
font-size:14px;
}
If the value is a number of words, enclose the value in quotation marks:
p {
font-family: "Sans serif";
}
These are called rules, and there can be more than one statement in a rule. Rules are included in the style sheet.
4. You cannot embed <p> in inline element <span>
The id attribute can only appear once in each HTML document.
5.CSS ID Selector
The ID selector can specify a specific style for an HTML element that is labeled with a specific ID.
　　 The ID selector is defined as "#".
In modern layouts, the ID selector is often used to create a derived selector (That is , one more element in the selector, which is derived. For example, #sidebar is a selector, #sidebar p is derived）
#sidebar p {
Font-style:italic;
Text-align:right;
Margin-top:0.5em;
}

#sidebar H2 {
Font-size:1em;
Font-weight:normal;
}
　Here, unlike other p elements on the page, the P element in the sidebar is handled in a special
At the same time, unlike all other H2 elements on the page, the H2 elements in the sidebar are treated differently.
Category 6.CSS Selector---class
1) in CSS, the class selector is displayed with a dot number:
The. Center {text-align:center} is applied to the following sections.
Because both H1 and P elements have a center class. This means that both will adhere to the rules in the. Center selector.
<H1 class= "center" >
This heading'll be center-aligned

<p class= "center" >
This paragraph'll also be center-aligned.
</p>
2) class can also be used as a derived selector:
. Fancy TD {
Color: #f60;
Background: #666;
}
3) elements can also be selected based on their class
td.fancy {
Color: #f60;
Background: #666;
}
In the example above, a table cell with the class name fancy will be orange with a gray background.
&LT;TD class= "Fancy" >
7.CSS Property Selector
Styling an HTML element with a specified property
Set the style for all elements with the title property:
[Title]
{
color:red;
}
Sets the style for all elements with the lang attribute that contains the specified value, for property values separated by hyphens:
[Lang|=en] {color:red;}
The property selector is especially useful when styling a form that does not have a class or ID:
Input[type= "Text"]
{
width:150px;
Font-family:verdana, Arial;
}
Input[type= "button"]
{
width:120px;
Font-family:verdana, Arial;
}
8.CSS Selector Reference Manual:
Selector description
[attribute] is used to select the element with the specified attribute.
A[target]//Set the style for the <a> element with the target property
{
Background-color:yellow;
}
[Attribute=value] is used to select an element with the specified attributes and values.
A[target=_blank]//Set style for the <a> element of target= "_blank":
{
Background-color:yellow;
}
[Attribute~=value] is used to select the element in the attribute value that contains the specified vocabulary.
[Title~=flower]//Select the Titile property containing the element of the word "flower" and set its style
{
Background-color:yellow;
}
[Attribute|=value] is used to select an element with an attribute value that begins with the specified value, which must be the entire word.
[lang|=en]//Select the element with the Lang attribute value beginning with "EN" and set its style
{
Background-color:yellow;
}
[Attribute^=value] matches the property value to specify each element at the beginning of the value.
div[class^= "test"]//Set the background color of all DIV elements with the class property value beginning with "Test"
{
Background: #ffff00;
}
[Attribute$=value] matches the property value to specify each element at the end of the value.
div[class$= "test"]//Set the background color of all DIV elements with the class property value ending with "test"
{
Background: #ffff00;
}
[Attribute*=value] matches each element of the property value that contains the specified value.
div[class*= "test"]//sets the background color of all DIV elements containing "test" for the class property value
{
Background: #ffff00;
}

CSS Basic Tutorial Learning