03 css selectors

Seven kinds of selectors

　　

/ * * 1. tag selector /
			the {
				background-color: #0000FF;
			}
			/ * 2.id selector * /
			#u {
				background-color: red;
			}
			/ * Class 3. Selector: shared between the tag characteristics can use it * /
			.test{
				background-color: pink;
			}
			/ * 4. Combination Selector: selector between the features common to use it * /
			.test, in # {
				font-size:20px;
			}
			/ * * 5. All selector /
			*{
			color: darkgreen;	
			}
			/ * Sub-tab 6. Selector: Sun label can not be selected note: only acting as #u following li tag, and is not applied to a label * /
			#u {
				color: white;
			}
			/ * 7. attribute selector: Specifies tag and containing a specified attribute value attribute value * /
			a[href="#"]{
				color:pink;
			}
			/ * Class selector 8. pseudo: Tags: command * /
			li a:hover{
				color: orangered;
			}

　　Wherein the pseudo-class selectors refer to: https://www.runoob.com/css/css-pseudo-classes.html

Priority selector

Priority is inline style 1000;

Write routines of css

1. Declare css code field

2. Use the selector to select the style you want to add a label

According to demand:

• Use all the selectors for the entire page to add style
• Use class selector to style different labels
• Tag Chooser to add certain types of label style
• Use id selection, and other attribute selector to style selector

3. Writing Style Sheets

3.1 border settings

border:solid red 1px;

　　

3.2 font settings

font-size:10px;
font-family: "blackbody";
font-weight:bold;

　　

3.3 font color settings

color:red;

　　

3.4 Background color settings

background-color:red;

　　

3.5 Background image settings

background-img:url;

　　

3.6 width and height settings

3.7 Floating settings

float:left/right;

　　

3.8 High row (line spacing) is provided

line-height:10px;