CSS style sheet summary CSS (Cascading Style Sheet) can be written after learning

First, we will introduce some basic knowledge:

What is a style selector:

Selector {/* selector is the style selector */
Property: value;/* color: red ;*/
Property: value;/* font-size: 4 cm ;*/
...
} Selector: when defining a style rule, you must specify the webpage element that is affected by this style rule. The webpage element defined in a rule is selector ), that is, select the webpage element that the style rule acts on.

 

Association selector:

The Association selector is only a string given by two or more single selectors separated by spaces.
Because of the stacked order rules, their priority is higher than a single selector.
It must be used by association, and there must be no reverse order
As long as the relationship can be maintained, no matter how many layers

 

Style rule inheritance:

All HTML tags nested in an HTML Tag inherit the style rules set by the outer tag.

 

End with a semicolon;
<& Lt; & #60;
> & Gt; & #62;

 

Four CSS setting methods: inline style sheet: Use the style attribute inline in HTML element labels
Style can be added for each HTML Tag
Embedded style sheet: Use the HTML <style> label to embed CSS into HTML.
Controls all styles on the current page
External style sheets: Define the style sheets in a document suffixed with .css and connect them to HTML using link elements in HTML.
Multiple pages can be used
Input style sheet: You can input a style file to another style file, or enter a style file to the <style> element.
@ Import URL (CSS file)
Their priority levels:
Inline is higher than other, and other is related to the loading order

 

Style Sheet summary:

Selector priority: the Union selector (the multilevel selector is similar to [# ID Div classa {}]) >#id selector> class selector> HTML Tag Selector

The selector that is directly written in the tag> <style> tag <style> and the outsourcers who work after the tag;

 

In addition, in terms of webpage optimization, multiple images are usually displayed on one page to reduce requests and improve webpage response;

 

 

Font: [<font style >||< font deformation >||< font bold>]? <Font size> [/<Row Height>]? <Font family>

Description of a property value
Font-family any font family names can be used, such as times and Serif, and assignment values of multiple families can be used, separated by commas, to prevent selection of nonexistent font families
The font-size font size can be absolute, relative, length, or percentage.
Font-style font style normal (normal), italic (italic) or oblique (Skew)
Font-weight font bold normal, bold, bolder Or lighter
Font-variant font deformation normal (normal) or small-caps (small capital letters)

 

Common Control text attributes in CSS: the letter-spacing letter interval must conform to the length format and allow negative values.
Word-spacing text interval This value must conform to the length format and allow negative values
Text-decoration text modifier underline (underline), overline (upper line), line-through (strikethrough), blink (blinking), or use none by default
Text-align horizontal arrangement of left, right, center, or justify
Text-indent text indent This value must be a length or a percentage, if the percentage is determined by the width of the upper element
The line-height line height can accept a value that controls the interval between text baselines. When the value is a number, the row height is obtained by multiplying the font size of the element by the number. The percentage value depends on the font size of the element. Negative values are not allowed.

 

Common attributes of background control in CSS: the background-color background color value is set in the same way as the color attribute value, or the transparent (transparent) value is used.
Background-image background image URL or none)
The background-repeat backgrounds are repeat, repeat-X, repeat-y, and no-repeat.
Background-Attachment Background attachment scroll (rolling) or fixed (fixed)
The percentage and length of background-position horizontal keywords (left, center, right) and vertical keywords (top, center, bottom) can also be used to arrange the position of the background image.

Background: <background color >|| <background image >||< background repetition >||< background attachment >||< background position>

Apply multiple icons to the same image:

Multiple icons are placed in the same image. By defining the background of a block and calling small icons at different positions in the same image, the advantage is that the number of requests to the server can be reduced, this speeds up page access.

 

Border style: attribute values used by each side Style

Dotted: dotted border
Dashed: Broken Line border
Solid: Straight-line Border
Double: double-line Border
Groove: Groove border
Ridge: backbone border
Inset: border of embedded Effects
Outset: the border of the protruding Effect
You can use the Border Width attribute border-width to set the width of the upper and lower sides of the border. This attribute uses one to four values to set the border of an element. The value is a keyword or length, negative value length is not allowed.
If the four values are given, they are applied to the pattern of the top, right, bottom, and left border respectively.
If only one value is given, it will be applied to each edge.
If two or three values are given, the omitted value is equal to the logarithm. This attribute is omitted from the top Border width, Right Border width, Bottom Border width, and Left Border width.
You can also use the border-top-width, border-bottom-width, border-left-width, and border-right-width attributes to separately set the width of each edge. In addition to the length unit value, you can also use medium (default), thin (fine than medium), or thick (coarse than medium) values.

 

Common attributes of the Control List in CSS: ul unordered list ol ordered list

 

List-style-type: Set the symbol type of the pilot list item. You can set multiple types of symbols with the values of disc, circle, and square.
List-style-image uses images as custom list symbols
List-style-position determines the degree to which the list item is indented.