Home > Developer > Web Develop
1.css Selector
Selectors, also known as selectors, define which parts of the document will be affected.
-1. Element selector
Wildcard character: *{}
The following example (TEST.CSS) matches all the labels in the document
* { background-color: blue;}In general, we will use wildcards when HTML is initialized, as in the example below, with both the top and left margins set to 0
* { padding: 0; margin: 0;}Class selection apply:. Class Name {}
In the following example, the contents of the P tag are changed to green
1 The index.html code is as follows2 <! DOCTYPE html>3 4 5 <meta charset= "UTF-8" >6 <title></title>7 <link rel= "stylesheet" href= "Css.css" type= "Text/css"/>8 9 <body>Ten <p class= "HP" >haha</p> One <span>hehe</span> A </body> - - the The CSS.CSS code is as follows - *{ - padding:0; - margin:0; +} - + . HP{ A Color:Green; at}
ID selector: #id名称 {}
The following example turns the span label content to purple
The index.html code is as follows <! DOCTYPE html>{ padding: 0; margin: 0;} . HP { color:green;} #hs { color: purple;}Type selector (tag Selector): label {}
The following example turns the LI tag content to red
The index.html code is as follows <! DOCTYPE html>{padding:0;margin:0; }. HP{Color:Green;}#hs{Color:Purple;}Li{Color:Red;}
-2. Relationship Selector
-child element selector: Father > Son
-Brother Selector: yourself ~ your brother
1. Does not work in itself
2. The previous element does not work
Example: The following code only the second and third H3 labels will change color
The inde.html code is as follows <! DOCTYPE html>{ color: Brown ;}-Adjacent selector: e+f
In the following example, the third row and the last line change color
The index.html code is as follows <! DOCTYPE html>{ color: Red ;}-Include selector: EF
In the example below, all of the ul,li tag contents turn red
The inde.html code is as follows <! DOCTYPE html>{ color: red;}-3. Property Selector
1. Properties
2. Wording:
1) Current element [attribute]{}
Example: haha discoloration and hehe does not change color
<! DOCTYPE html>{ color: red; } a[href= "" " </style>2) current element [attribute = ' property value ']{}
Example, the first Baidu tag will turn red
<! DOCTYPE html>{ color: red; } </style>-4. Pseudo-Class selectors
-Definition: It allows a style to be set for a certain state of the HTML tag
1) Element: Link: Sets the style of hyperlink a before it is accessed
2) Element: visited: Set hyperlink a style whose link address has been accessed obsolete
3) Element: Hover: Sets the style of the element when it hovers over it
4) Element: Active: Sets the style of the element when it is activated by the user (the event between mouse click and release)
Note
1) a:hover must be located after A:link and a:visited, a:active must be located after a:hover
2) The Reliable Order is: l (link) ov (visited) e H (hover) A (active) te (active), that is, using love,hate two words to memorize
Example:
<! DOCTYPE html>{font-size:50px; }ul Li A:link{Color:Blue; }ul Li a:visited{Color:Red; }ul Li A:hover{Color:Yellow; }ul Li A:active{Color:Purple; }</style>
-5. Pseudo-Object selectors
-1. Element: before{}: Sets what occurs before the object, used in conjunction with the content property, and must define the content property.
-2. Element: after{}: Sets what happens after the object. Used in conjunction with the Content property, and the content property must be defined.
Priority of selector:! Important> inline >ID> class > tags | pseudo-Class | Property selector > Pseudo-object > Inherit > Wildcard
Note:! Important to be written after the attribute value, preceded by a semicolon.
Cases:
p{
Color:red!important;
}
<! DOCTYPE html>{/*1*/Color:red!important; }P span{/* up*/Color:Blue; }p. SC{/*1+10*/Color:Aqua; }P #si{/*1+100*/Color:Green; }</style>
2.css background, color, border
1. Background: solid color, picture
Background-attchment: Whether the background image is fixed or scrolled along with the rest of the page.
Background-color: Setting the background color of an element
Background-image: Set the picture to the background
Background-position: Set the starting position of the background picture
Background-repeat: Whether and how the background picture repeats
<! DOCTYPE html>{ background-image: url ("pic/timg1.jpg"); Background-repeat: no-repeat; background-position: Center top; background-attachment: fixed; } </style>2. Border
Border-width: Border Width
Border-style: Border Style
Border-color: Border Color
Border-radius: Setting rounded borders
Box-shadow: Setting Diagonal shadows
Boder-image: Border background picture
3. Color
1. Color values
1.color name (indicated by color name): color:red;
2.HEX (hexadecimal numerical notation): color: #ff0000;
3.RGB (primary color: red, green and blue)
4.RGBA (primary color + opacity [0.0-1.0])
5. Transparent Color: color:transparent
2. Properties
Opacity:<number> setting an object's opacity
1: Opaque
0: Fully Transparent
Example:
<! DOCTYPE html>{width:200px;Height:200px;Background-color:Antiquewhite;Border-width:5px;Border-color:Aqua;Border-top-color:Red;Border-style:Solid;Border-left-style:Dashed;Border-radius:5px;Box-shadow:5px 5px 10px rgba (0,0,0,0.2); }</style>
CSS Basics 2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
