CSS style Sheet Knowledge summary

Classification

|------Inline in the label, accurate control, poor code reuse

|---------style= Style

<style= "background:yellow; width:100px; height:100px;" ></ Div >        <  style= "background:red; width:100px; height:100px;" ></ Div >

|------embedded in the

|---------<style type= "Text/css" ></style>

<style>#first{background:Pink;width:200px;Height:100px;}#second{background:Blue;width:200px;Height:100px;}        </style><DivID= "First">                    </Div>        <DivID= "Second">                    </Div>

|------External individual style files, control is not inline accurate, code reusability is best

|---------<link href= "" rel= "stylesheet" type= "Text/css"/>

#third {    background: purple;     width: 200px;     height: 300px;}

<rel= "stylesheet"  href= "1111.css"/>  <ID= "Third">                    </Div  >

Selector style sheet for selecting element tags: select elements based on tag name

|------Class

|---------. Point

|---------filter elements by class name

|---------can have duplicate names.

. Common {            width: 100px;             height: 100px;             background-color: black;             color: white;        }         . common:hover{            background-color: red;             Color: black;

<Divclass= "Common">I'm the first one to common .</Div>        <Divclass= "Common">I'm a second common .</Div>        <Divclass= "Common">I'm a third common .</Div>

|------ID

|---------#

|---------filter unique elements by ID name

|---------can't have duplicate names.

#third {              width: 100px;               height: 100px;               background-color: green;          }

<id= "Third">                    </Div  >

|------Composite

|---------comma: parallel div,span

|---------spaces: Descendants #list Li

|---------greater than sign: Child selector div>p all P tags in div

div,p {            border: 1px solid red;                    }         #third, #fourth{            border: 1px solid black;        }         #first_ul li{            color:brown;        }         #second_ul li{            color: darkblue;        }         #div_p >p{            color: green;        }

<DivID= "Third">                    </Div>        <DivID= "Fourth">                    </Div><ulID= "First_ul">            <Li>Disorderly One</Li>            <Li>Disorderly One</Li>            <Li>Disorderly One</Li>        </ul>        <ulID= "Second_ul">            <Li>Unordered two</Li>            <Li>Unordered two</Li>            <Li>Unordered two</Li>        </ul>        <DivID= "Div_p">            <P>I'm the first line in the div P element</P>            <P>I'm the second line in the div P element</P>            <P>I'm the third line in the div P element</P>            <Div>I'm the fourth line in the Div div element</Div>        </Div>

|------Property Selector

|---------[Property NAME = property Value]{} Property name can be added |, * and so on to match all attributes have attribute value of the element

|---------attribute selection for form elements

[href= "aa.html"] {            color: red;        }         input[type= "text"]{            background-color: Gainsboro;        }

<ahref= "aa.html">Jump</a>        <inputtype= "text"name=""ID=""value="" /><BR/>        <inputtype= "Password"name=""ID=""value="" />

|------pseudo-Class

|---------four pseudo-classes of a tag

|------------A:link links not visited

|------------links visited by a:visited

|------------a:hover mouse across the link

|------------a:active Selected Links

A:link {            color:red        }        a:visited{            color: black;        }         a:hover{            color: blue;        }         a:active{            color: yellow;        }

<href= "https://www.baidu.com"> jump to Baidu </ a >

CSS style Sheet Knowledge summary