CSS Syntax Summary

In the process of learning CSS, it is important to understand and master the grammar of CSS, and summarize the relevant syntax here.

First, the CSS wording:

CSS Code

Selector {    Property name: Property value}

Second, where to write:

There are three ways: inline style, inner style, external style.

inline style

Write directly within the HTML tag and write in the style attribute

<! DOCTYPE html>
Internal style

Written inside the header tag, inside the style label

<! DOCTYPE html>
External styles

Introduced in the head with a link tag, placed in a CSS file

<! DOCTYPE html>
CSS Code

. exp{    height:30px;    width:20px;    Background-color: #123456;    box-shadow:0 0 1px #132478;}
Third, note:

CSS Code

. exp{    background: #123444;    /* Background color, note with this symbol */    height:90px;    width:80px;    Comments in CSS cannot be used with this symbol, unlike HTML}
Note:

In writing, the browser's private properties are placed in front, and the standard attributes are placed behind. The private attribute needs to be prefixed with:<chrome/safari> plus-webkit-,<firefox> plus-moz-,<ie> plus-ms-,<opera> plus-o-.

Four, attribute value syntax:


Five, the combination of symbols:

1, the number of spaces and order must be consistent

< ' font-size ' > < ' font-family ' > Legal value: 12px Arial Illegal value: 12px   or Arial 12px
2, && quantity must be consistent, order random

<length>&&<color> legal value: Green 2px  or  2em blue illegal value: Blue  or  5em
3, | | Must appear one, order-independent

underline| | overline| | linethrough| | Blink legal Value: Underline  or  overline underline
4, | There can only be one

<color>|transparent legal Value: #123456  or  transparent illegal value: #aabb33 transparent
5, [] grouping effect, as a whole

Bold [thin| | <length>]     legal value: Bold thin  or  bold 3px
Seven, quantity symbol:

1. No

<length>    can only appear once legal value: 1px  or  10em illegal value: 1px 3em 5px
2, + can appear one or more times

<color-stop>[,<color-stop>]+ Legal value: #fff, Red,yellow  or  blue,red 50%,black illegal value: #123456
3,? May or may not appear

Inset &&<color> legal value: Inset #123445  or  #abcd33
4. {} Basic elements can appear several times (at least several times, up to a few times)

<length>{2,4}    appears at least two times, up to four legal values: 1px 3em  or  1px 3px 5em Illegal value: 3px
5, * can occur 0 times, 1 or more times

<time>[,<time>]* legal value: 1s     appears 0 times 1s,5ms    appears 1 times
6, # appears 1 or more times, in the middle with "," separated

<time>#    equivalent to    <time>[,<time>]* legal value: 2s,4s,8s illegal value: 2s 4s
Eight, @ Rule syntax:

1, @ identifier XXX;

2. @ identifier xxx{}

Commonly used for:

@media-Responsive layouts
@keyframe intermediate steps for describing animations
@font-face Introducing External fonts

