Front-end Basics 2: CSS functions and CSS selectors

The HTML element

Lang = “en” language
Cascading Style Sheet ##CSS Cascading Style Sheet
First point: What does CSS do
Number two: how does CSS relate to HTML
# 3: How to select HTML tags with CSS (CSS selector)

CSS functions: Beautify HTML structure

How does CSS relate to HTML

(CSS introduction)

Four ways of introduction :(interview questions)

The inline type
- Introduce styles as tag attributes
- Weight: 1000
```
<div style="color: red; font-size: 30px"> div tags < / div >Copy the code
```
- “color: red; Font-size: 30px
- Color: name of the CSS property -red: value of the CSS property
- embedded
  - Write the CSS code inside the style element, and use the CSS selector to select the HTML element and add the CSS style to the element
```
<style>
div,p {
color: red;
}
</style>
Copy the code
```
Outside the chain
- Put the CSS code in a separate CSS file, and then use the link tag to introduce the CSS file to the HTML page,link in the head
```
<link rel="stylesheet" href="style.css">
Copy the code
```
- Link: label name
- Rel: Property name
- Stylesheet: Attribute values stylesheet (must be written)
- Href: Link property
- Type = “text/ CSS” tells the browser that it is a CSS file

The import type

@import”url”; Both introduce a single CSS file

    <style>
    @import "style.css";
</style>
Copy the code

In work, the outer chain type is most commonly used, and occasionally the inline type is used.

The difference between external chain and import (interview questions)

Outside the difference between the chain and the import type, outside the chain link label, introducing the import type with @ import introduction – placed the position of the difference: the outer chain directly to write in our head tag, need import type on the style tags or style file – loaded in a different order: External links and HTML pages are loaded at the same time, and imported pages can be loaded only after all the pages are loaded.

CSS selectors

Basic selector

Element selector (tag selector)
- Use labels directly as selectors
- Weight: 1.
```
div{color:red; font-size:30px; } <div>div tag </div>Copy the code
```
The ID selector
- To use the ID attribute value of an HTML element as a selector, prefix the tag’s attribute value with a #
- The ID selector can style HTML elements with specific IDS.
- Id is unique
- The ID selector is used in conjunction with js
- The weight of 100
```
    <style>
    #div1{
        color: brown;
    }
</style>
<body>
<div id="div1">div tag </div> </body>Copy the code
```
The class selector
- To use the class tag value of an HTML element as a selector, prefix the tag value with “.
- Weight: 10
- Class selectors are used to describe the style of a set of elements. Class selectors differ from ID selectors in that class allows an HTML element to have multiple tag attribute values (class names) in multiple elements, separated by Spaces
- Class names can be reused (reuse)
- An HTML element can have multiple CLSS values at the same time, separated by Spaces
```
    <style>
    .div1{
        color: aqua;
        background: greenyellow;
    }
</style>
<body>
<div class="div1">div tag </div> <p class="div1">p tag </p> </body>Copy the code
```
Wildcard selector “*”
- Matches all HTML elements
- Generally not used
- Weight 0 to 1

Relational selector

Descendant selector
- Syntax: E F G (separated by Spaces)
- Select all F elements contained within the E element
- Weight base selectors added together
```
ul img{ width: 80px; height: 80px; background: darkcyan; } ` ` `Copy the code
```
Subset selector
- Syntax: E>F Selects all F elements that are children of E
- Weight Sum of all selectors
- The parent selector is used to determine the range of values
- The subset selector is the element we want to style
- Subset selectors must be immediate parent-child relationships
- The subset selector can only select children, not grandchildren, whereas the descendant selector will select all descendants that match the bar, including children, grandchildren, and grandchildren’s grandchildren
```
    <style>
    ul>li{
        color: rosybrown;
        font-size: 90px;
        background: chartreuse;
    }
    li>span{
        color: thistle;
    }
</style>
Copy the code
```
Adjacent selector
- Grammar: E + F
- Select the F element immediately after the E element
- Weight Sum of all selectors
```
    <style>
    h3+span{
        color: thistle;
    }
</style>
Copy the code
```

Sibling selector

Grammar: E ~ F
Select all F elements after the E element

    <style>
    h3~span{
        color: thistle;
    }
</style>
Copy the code

Intersection selector
- Grammar: e.c. with our fabrication: lassName
- When two selectors belong to the same element, we can use the intersection selector to select the element exactly
- Weight: Sum of weights of all combinatorial selectors
- The intersection selector is a combination of two selectors: the tag selector and the class selector combination is commonly used when the tag selector and the class selector are combined, the tag selector should be placed in front of the intersection selector without any symbols or Spaces
```
 <style>
    div.div1{
        color: navy;
        font-size: 60px;
    }
</style>
Copy the code
```
Union selector
- Syntax: E,F,G{CSS style} Select all E elements F elements and G elements
- What it does: The same CSS style can be added to multiple HTML elements at once
- Weight: The grouping selector divides different HTML into groups. Weights are calculated independently, not superimposed
```
    <style>
    div,span{
        color: hotpink;
    }
</style>
Copy the code
```

Property selector

Syntax [attribute name = attribute value]{}
Weight 10

       <style>
        /*[title="skr"]{*/ /*color: navy; */ /*background: yellow; */ /*}*/ [class="div1"]{
            background: violet;
        }
    </style>
Copy the code

Pseudo class selector

When an element is in a certain state, such as the state of a mouse pointer or mouse click
E:link Sets the default style of hyperlink A, the style before it is accessed
E:hover sets the style of the element when the mouse is hovering
E:visited Sets the style when hyperlinks are visited
E: Active sets the style of the element when it is activated (the event that occurs between mouse click and release)
E:focus Sets the style of the element when it gets focus (generally used with form elements)
E: Checked Sets the state of the E element. (for input type radio and checkbox)
E:enabled Indicates the available E element. (Typically used with form elements)
E:disabled Selects each E element in the disabled state (typically used for form elements)
E:firstchild matches E, the firstchild of the parent element
E:lastchild matches E, the lastchild of the parent element
E: NTH (n) matches the NTH child E of the parent element
E: nthlastChild (n) matches the penultimate child E of the parent element

Front-end Basics 2: CSS functions and CSS selectors

The HTML element

CSS functions: Beautify HTML structure

How does CSS relate to HTML

Four ways of introduction :(interview questions)

The difference between external chain and import (interview questions)

CSS selectors

Basic selector

Relational selector

Property selector

Pseudo class selector

Related Posts

Sorting algorithm – Insert sort series and performance test

Big Data is the future, Oracle, SQL Server yesterday?

Flask Operation Mysql database – flask-SQLalchemy extension