Front-end webpage learning 2 (css introduction and selector)

CSS

CSS introduction

Css:
Cascading style sheet/cascading table
style style:
expansion, lower case, selector and braces, colon and key value, with spaces
structure:
selector + multiple declarations

Selector

Selector: single selector and composite selector

Single selector

Single selector: tag selector, class selector, id selector, wildcard selector

1. The label selector
defines the label selector:

 p {
    
    
            color: blue;
        }

Call selector: automatic call

1. Definition method: label name {}
2. Features: Choose a certain type of label. You can quickly set the style globally. But can’t differentiate settings

2. Class selector

Define the class selector:

.red {
    
    
            color: red;
        }

Call selector:
single class name call:

<p class="red">gaoyang</p>

Multi-class name call:

<p class="red font">gaoyang</p>

1. Definition: .Class name
2. Class name cannot use tag name
3. Long names can be separated by horizontal lines
4. Cannot use pure numbers and Chinese
5. Separate multiple categories with spaces.
   Function: Differentiate settings

3. The id selector
defines the id selector:

#gaoyang {
    
    
            color: black;
            font-size: 30px;
            background-color: blanchedalmond;
            width: 150px;
        }

Invoke the selector:

<div id="gaoyang">gaoyang</div>

1. Definition method: #define
2. Call with id
3. The call is one-time
4. Usually used with js

4. The wildcard selector
defines the wildcard selector:

* {
    
    
            color: darkmagenta;
            font-size: 10px;
        }

Call selector: automatically call the
definition applies to all label elements

Compound selector

Compound selectors: descendant selectors, sub-selectors, union selectors, pseudo-class selectors
1. Descendant selectors (including selectors):
select descendants through spaces, which can be any selector, and you can jump to select to
define descendant selectors :

ol li {
    
    
            color: red;
        }
.nav li a {
    
    
            color: gold;
        }

2. Child selector:
Go to> to select a parent son. Instead of defining child selectors for descendants
:

.d1>a {
    
    
            color: indianred;
        }

3. Union selector:
 Select multiple sets of tags, define the same style, and declare uniformly.
 The descendant selectors and sub-selectors can be nested.
 Use and separate different labels.
 It is usually written vertically.

		a,
        li {
    
    
            font-size: 30px;
        }

4. Pseudo-class selector:
 Add effects to some selectors
 Link pseudo-category/structural pseudo-category
 Use: split
link pseudo-category:

	a:link 所有未选过的链接
	a:visited 选择所有已访问的链接
	a:hover 位于其上的链接
	a:active 活动链接（鼠标按下未弹起的链接）

 Declare in order to take effect
 Write a{}
focus pseudo-class first:
 Select form elements

Input:focus