Front end 2CSS laminated style sheet

Front-end
CSS 2d

What is CSS?
CSS is used to adjust label styles.
Cascading style sheets

css comments
/Single-line comment/
/
Multi-line comment
Multi-line comment
/

/* This is the style sheet of the blog garden homepage*/

/*Top navigation bar style start*/

/*Top navigation bar style end*/


The grammatical structure of css
 selector {attribute 1: value; attribute 2: value; attribute 3: value}

three ways to introduce css
 1. File import type (also the most standardized form)
 2. Use the style tag to write css code directly in the head
 3. Inline type (least recommended)

css process
 1. How to find tags
 
 2. How to set styles
 
How to find tags
 1. Basic selector
 
 2. Combination selector
 
 3. Pseudo-element selector
 
 4. Pseudo-type selector

A tag should have it Attribute
id unique identification
class attribute

basic selector

/label selector/< /p>

p{ color:red;}

Class selector (emphasis)

.c1{ color:yellow; }

Global selector: *. Not much used

combination selector

1 descendant selector: div Internally nested spans will be modified

div span{ color: red;}

2 son selector: only the first span of the nest within the div is modified; multi-level nesting does not work

div>span {
color: aqua;
}

3 The adjacent selector: the one immediately below . Note that the bottom is not the inside!

div+span {color: orange; }

4 brother selection Detector: all the tags below at the same level. Do not include nesting

div
span within the div 
inside the div The first p The span within the first p within the div 
The span within the div 
The first p within the div  The span within the first p within the div 

attribute selector

[]There are three search levels

p>

1. Have a certain attribute name

[hobby] {background-color: red; color: orange;}

2. Have a certain Attribute name and attribute value

[hobby="jdb"] {background-color: pink;}

3. Have a certain attribute name and attribute value A certain tag

Find the input tag input that has an attribute name of hobby and a value of jdb input[hobby="jdb"] {background-color: greenyellow; }

< h5 id="Let these three tags unify the color divspanp"> Make these three tags unify the color: div,span,p

You can also do this:

Pseudo-category selector (: separation) makes the label click a color change

4 types:

label (to be clickable. For example, a tag has a URL; p does not work): link/hover/active/visited

/*connection state*/a:link {#a means a tag color: pink ;}/*Mouse hovering state*/(Use a lot) a:hover {color: red; }/*Mouse click state*/a:active {color: purple; }/*The state after the visit*/a: visited {color: dimgrey;}

The focus state of the input box was clicked

input:focus {background-color: orange;}

< p>

Mouse hover:

input:hover{ background-color: red;}

pseudo element selector

first-letter and after

Set attributes to the front of paragraph p
p:first-letter {
content:’ $
color: gold;
}

Behind + content

p:after {
content:
color: red;
}

Note: Use the attributes set by the pseudo-element selector (the symbols added by css are not ordinary text), which is not selected ! !

Selector priority (multiple selectors change one content)

1. In the case of the same selector: the principle of proximity 2. In the case of different selectors: in-line> id selector>class selector>tag selector (the higher the precision, the higher the priority)