CSS Basic syntax

1.CSS use

• Link introduces an external CSS file

• <link rel="stylesheet" type="text/css" href="./style.css">

• <style></style>Write in HTML

• <style>    p { color:red }</style>

• Use the Style property of an HTML element

• <p style="color:red;"</p>

2 CSS Format composition

• The selector is responsible for scoping, the element collection declaration to be modified consists of a property name and a property value, in the middle with a colon connection (property name: Property value), to set the specific style
• CSS consists of selectors and one or more declarations, with semicolons between multiple declarations

选择器{  属性名:属性值;  属性名:属性值;}

4.3 css annotations

/*注释内容*/

4.4 CSS Basic length units

• Multiple of the default font size for EM multiples
• Px:pixel, pixels, the smallest unit displayed on the screen for web design, intuitive and convenient;
• Percentage
• Pt:point, is a standard length unit, 1pt=1/72 inches, for the printing industry, very simple to use;
• CM cm
• mm mm

4.5 CSS Color units

Colorname:red/green/bue/purple/orange/yellow/pink/skyblue

RGB Digital RGB (34,45,23) RGB (20%, 57%, 100%)

16 Binary #abcdef #f90 #ccc

Background-color:rgb (100, 200, 50);
Background-color:rgb (100%, 50%, 10%);

Background-color: #ab1234;
Background-color: #abcdef;

5 CSS Selector

The first thing to be clear: any element has a class and ID

Tag name Selector
TagName {

}

H1 {
Color:green;
font-size:60px;
}

Class name
. className {

}

1 /*class Selector * /2 . First-item {3 width:900px;4         }5 6 . Item {7 width:700px;8 padding:20px;9 border:1px solid #369;Ten         } One         <Pclass= "Item">Satan Safin record card is health Lafarge</P> A         <Pclass= "First-item Item">Satan Safin record card is health Lafarge</P>

class Selector

ID Selector
#idName {

}

/*id Selector *        /#myFriend {            color: #f90;        }        /*<id= "Myfriend"> satan safin Record card health Lafarge </  P>* *

ID Selector

Global selector (for all elements)
* {

}

Combining descendant elements
Selector Selector

. list Li {
border:1px solid Orange;
}

Combining child elements
Selector > Selector Find the contents under the list element and look for the child elements of the list, and if the child element Li has elements below it, the style will not be modified.

. list>li {
border:1px solid Orange;
}

Group
Selector, selector, selector

/* Group selector or or*/
H1,hr,p,.item {

}

Multi-criteria
P.item

class = "Item" under the P element.

6 Selector Priority

ID > CLASS > TagName > *

Number of Combo selectors

7 CSS properties commonly usedFont

• Font-family

• Font-size

• Font-weight Normal/bold

• Font-style Normal/italic

• Font-variant Normal/small-caps

• Font Composite Properties

Color

• Color

text

• Word-spacing

• Letter-spacing

• Text-align:left/center/right

• Vertical-align:baseline/middle ....

• Line-height Line Height

• Text-decoration:none/overline/underline/line-through

• Text-indent:2em

• Word-wrap:break-word

• Overflow-wrap Word-wrap's alias CSS3

• White-space Pre Pre-wrap

CSS Basic syntax