CSS style Sheets

CSS refers to cascading style sheets, which define how elements in the HTML are displayed
Styles are usually stored in style sheets, and styles are added to HTML4.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, and multiple style definitions can cascade

When the same HTML element is defined by more than one style
1. Default settings for browsers
2. External style sheet
3. Internal style sheet 4. Inline style sheet Up and down priority increases.

CSS syntax consists of two main parts: selectors, and one or more declarations
Selectors are usually the elements that you need to change the style
Each declaration consists of an attribute and a value
such as the style sheet for H1 tag elements h1{color:red;font-size:14px}
Note that each line tries to describe only one property, enhances readability, and double-quotes when multiple words are on a duty
Group selectors, separate multiple selectors with commas to share a style sheet
H1,h2,table{color:green}
CSS has an inheritance relationship, all attributes of the parent tag element are inherited by the inner child tag element, and when you need to get rid of the parent tag element attribute, define the label property style individually.

Derived selectors
Defines a style by the context in which the element is located, that is, a nested relationship that contains both the tag element in the selector
H2 strong{color:red}
<p><strong> won't affect me </strong></p>

ID Selector
The ID selector can specify a specific style for a specific HTML element.
The ID selector is defined in #.
#id {color:red;}
The ID selector is typically used in conjunction with a derived selector
#id p{color:red;}
The P tag element within the label element of the specified ID is red

Class Selector
class to display with a dot number, define the class name within the tag element, and display it according to the style sheet of the same class name
. Center{text-align:center}
<H1 class= "center" > Center Note the first character of the class name cannot be a number
Class selectors can also be used to make derived selectors
. Fancy td{color:red;} Here is fancy contains TD
td.fancy{color:red;} Here is TD contains Fancy

Property Selector
You can set a style for an HTML tag element that has a specified property
[Title] {color:red;} Property has the title tag element all turned red
[Title~=hello] {color:red;} property The title value contains the specified value when the style is applied, note whether it contains a property that is not equal to, and that is applicable to spaces split
[Title|=hello] {color:red} is the same as above, but whether it contains a judgment based on the addition of a space, the hyphen-is divided into two parts to determine

Attribute selectors are especially important for form label elements that do not have id,class

Three ways to insert a style sheet
1. External style sheet
2. Internal style sheet
3. Inline style sheet
The Style style property is defined directly inside the tag element, but is not flexible because the display is made at the same time as the style

Note that when the same attribute is defined by the same selector in a different style sheet, the property value is inherited from a more specific style.

CSS Background
Background
Background-color
Background-imag:url (. gif);
backgroubd-repeat:repeat-x/y background tile in x or y direction
Backgroubd-position:center background position
Background-attachment:fixed cancels the association of the background picture with the display layer document, that is, the background picture does not scroll with the previous German scroll

Text
Text-indent Indent
Text-algin level on its
Word-spacing Word Interval
Letter-spacing Letter Spacing
Text-transform character conversions can be used to handle case
text-decoration text decoration blink flashing, underline underline

Font
Font-family Specifying font families

Four Status of links
A:link a common breach of access
A;visited has been visited
A:hover the mouse pointer over the
A:active the moment the connection is clicked

Pseudo class
The four states of the connection are pseudo-classes

. Before h1{} insert
. After h1{}

CSS style Sheets