[Frontend｜CSS Series Part 1] Basic Concepts and Selectors of CSS Zero-Based Introduction to CSS

insert image description here

Welcome to the first blog post in the CSS Zero Basics series! In this series, we'll learn the basics of CSS (Cascading Style Sheets) together and explore how to add style and layout to web pages. This blog will focus on the basic concepts and selectors of CSS to help you understand the core concepts of CSS.

1. What is CSS?

CSS, or Cascading Style Sheets, is a markup language used to control the style and layout of web pages. It is used in conjunction with HTML, and by adding styles to HTML elements, it is possible to change the appearance and layout of the elements. CSS uses selectors and properties to define style rules that allow us to control the appearance of web pages in a concise and flexible way.

2. Why use CSS

There are several important reasons to use CSS:

a. Separation of style and content: CSS can be used to separate style and content, making the web page structure clearer and easier to maintain. By defining the style in a separate CSS file, we can modify the style without changing the HTML structure, improving development efficiency.

b. Unified style and layout: CSS provides consistent style and layout rules to ensure that the website presents a consistent appearance on different browsers and devices. By defining global styles, we can easily achieve the overall style and layout of the website.

c. Improve accessibility: Using CSS can improve the accessibility of your website. By using proper markup and styling, we can make website content more readable, easier to navigate, and provide a better user experience.

d. Enhance user experience: CSS provides rich style effects and interactive features, which can provide users with a better visual experience. By adding animations, transitions and responsive layouts, we can make websites more engaging and interactive.

3. Syntax of CSS

The basic syntax of CSS consists of selectors and declaration blocks. Selectors are used to select HTML elements to apply styles to, while declaration blocks contain a series of style declarations.

Here is an example of a simple CSS rule:

h1 {
    
    
  color: blue;
  font-size: 24px;
}

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-blU0U9gt-1687925268908) (/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628103111628. png)]

In the above example, h1it is a selector, which means to select all <h1>tags. The part inside the curly braces is the declaration block, which contains two style declarations, which set the text color and font size respectively.

4. How to insert CSS

There are several ways to apply CSS styles to HTML documents:

a. Inline styles: CSS styles can stylebe defined directly in the attributes of HTML elements. For example:

<h1 style="color: blue; font-size: 24px;">Hello, CSS!</h1>

b. Embedded styles:<head> You can use <style>tags to embed CSS styles in the tags of HTML documents . For example:

<head>
  <style>
    h1 {
      
      
      color: blue;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>Hello, CSS!</h1>
</body>

c. External style sheet: CSS styles can be defined in external CSS files and <link>introduced into HTML documents through tags. For example:

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, let's study CSS!</h1>
</body>

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-m9TbanXC-1687925268910) (/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628111652108. png)]

5. Basic concepts of CSS

When working with CSS, there are some basic concepts to understand:

a. Selector: The selector is used to select the HTML element to apply the style to. Common selectors include element selectors, class selectors, ID selectors, attribute selectors, etc.

b. Attributes and values: CSS style rules consist of attributes and corresponding values. The property describes the style property to be set, while the value defines the specific setting of the property.

c. Box model: The box model is a concept used in CSS to describe the layout and size of elements. It consists of content area, padding, border and margin.

d. Fluidity and positioning: CSS provides different layout methods, such as fluid layout, floating layout and positioning layout, which can control the position and arrangement of elements on the page.

6. CSS selectors

A selector is a pattern in CSS for selecting HTML elements to apply styles to. Common selectors include:

a. Element selector: Select an element by the tag name of the HTML element. For example, h1select all <h1>tags.

b. Class selector: Select elements by their class names. A class selector starting .with, for example, .my-classselects all my-classelements with a class.

c. ID selector: Select elements by their IDs. ID selectors #start with, for example, #my-idselect my-idelements with an ID.

d. Attribute selector: Select elements by their attributes. For example, [type="text"]selects all elements typewith an attribute of text.

There are many other types of selectors, including descendant selectors, child element selectors, adjacent sibling selectors, etc., which provide more flexible ways to select elements.

7. Priority of CSS selectors

Conflicts can arise when multiple CSS rules are applied to the same element at the same time. To resolve such conflicts, CSS uses selector precedence to determine which rule will be applied.

The priority of a selector consists of four parts, in order of importance:

a. Inline style: Inline style has the highest priority, that is, stylethe style specified directly in the attribute of the HTML element.

b. ID selector: The ID selector has a higher priority, that is, the style of the element is selected by the ID of the element.

Use a custom name, #prefixed with , and then match the name through the id attribute of the HTML tag

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
      
      
            color: red;
            font-size: 20px;
        }

        h2 {
      
      
            color: green;
        }

        .hello {
      
      
            background: purple;
        }

        .world {
      
      
            font-weight: bold;
        }

        #haha {
      
      
            color: blue;
        }
    </style>
</head>

<body>
    <p>hello world!</p>
    <h2>WEB前端开发</h2>
    <h3>Nodejs开发</h3>
    <hr>
    <p class="hello">welcome to css!</p>
    <div class="hello">程序员小豪</div>
    <div class="world">test</div>
    <hr>
    <h1 id="haha">23333</h1>
</body>

</html>

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-KwMFBCgR-1687925268910)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628113426689. png)]

c. Class selectors, attribute selectors, and pseudo-class selectors: Class selectors and attribute selectors have the same priority, and they are lower than ID selectors.

Pseudo-class selectors display different styles according to different states, and there are four types:

:link unvisited link
:visited the visited link
:hover The mouse hovers over the connection, that is, the movement is on the connection
:active The selected link is activated

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        a:link,
        a:visited {
      
      
            color: green;
            font-size: 13px;
            text-decoration: none;
        }

        a:hover,
        a:active {
      
      
            color: pink;
            text-decoration: underline;
        }

        /*普通的标签也可以使用伪类选择器*/
        p:hover {
      
      
            color: yellow;
        }

        p:active {
      
      
            color: red;
        }
    </style>
</head>

<body>
    <a href="1.html">go!CSS!</a>
    <p>CSS零基础入门</p>
</body>

</html>

insert image description here

d. Element selectors, pseudo-element selectors, and universal selectors: Element selectors and universal selectors have the lowest priority, and they apply to all elements.

The following are commonly used pseudo-element selectors :

:first-letter is the style of the first character
:first-line adds style to the first line
:before The content added at the front of the element content needs to be used with the content attribute
:after The content added at the end of the element content needs to be used with the content attribute

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:first-letter {
      
      
            color: blue;
            font-size: 30px;
        }

        p:first-line {
      
      
            background: green;
        }

        p:before {
      
      
            content: "额额";
        }

        p:after {
      
      
            content: "嗯嗯";
        }
    </style>
</head>

<body>
    <p>test test</p>
    <hr>
    <p>
        gogogogo <br>
        come on css!
    </p>
</body>

</html>

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-h52EzjEO-1687925268910)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628115728816. png)]

e. !important: You can use !important to give a style the highest priority

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style/world.css">

    <style>
        div {
      
      
            font-size: 20px;
        }

        .hello {
      
      
            font-weight: bold;
            color: black !important;
        }

        #world {
      
      
            text-decoration: underline;
            color: green;
        }

        p {
      
      
            color: red;
        }
    </style>
</head>

<body>
    <div class="hello" id="world" style="color:#4190f7">CSS零基础入门</div>
    <p>程序员小豪</p>
</body>

</html>

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-jXcGyojY-1687925268910) (/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628113126102. png)]

By using selectors judiciously and avoiding excessive use of inline styles, you can better control the priority of styles.

css weight

Here is a brief introduction to the responsible selector:

Compound Selector: A compound selector is a selector composed of multiple simple selectors. They are combined by not having spaces or other symbols between selectors. Compound selectors can be used to select elements that satisfy multiple conditions at the same time.
```
.container.main {
      
      
  /* 样式规则 */
}
```
In the above example, .container.mainis a compound selector which selects both containerthe class and mainthe element with the class.
Combinator Selector: A combination selector defines the relationship between selectors by using different symbols and spaces. Composition selectors are used to select elements that satisfy a specific relationship.
- Descendant Selector: Use spaces to select descendants of an element.
```
.container .item {
        
        
  /* 样式规则 */
}
```
  In the above example, .container .itemit is a descendant selector, which selects .containerall elements within the element .item.
- Child Selector: Use >to select immediate child elements.
```
.container > .item {
        
        
  /* 样式规则 */
}
```
  This selector selects .containerall elements that are direct children of the element .item.
- Adjacent Sibling Selector (Adjacent Sibling Selector): Use to +select a sibling element immediately after another element.
```
.sibling + .target {
        
        
  /* 样式规则 */
}
```
  This selector selects .targetthe element that immediately follows .siblingthe element.
- General Sibling Selector: Use to ~select sibling elements that have the same parent as another element.
```
.sibling ~ .target {
        
        
  /* 样式规则 */
}
```
  This selector selects .targetelements that .siblinghave the same parent as the element and that come .siblingafter the element.
Nested Selector: A nested selector is a method of nesting one selector inside another to select elements with a specific relationship. Nested selectors are used for higher readability and maintainability, and can reduce the complexity of selectors.
```
.container {
      
      
  /* 样式规则 */

  .item {
      
      
    /* 样式规则 */
  }
}
```

The following is the css selector weight map

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-0chJmK2F-1687925268911)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628112250182. png)]

We can calculate the weight of the style according to the weight map

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-KusA1Y5V-1687925268911) (/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628112658161. png)]

8. Summary

This blog introduces the basic concepts and selectors of CSS. We learned that CSS is a language used to control the style and layout of web pages. Through selectors and attributes, we can add various styles to HTML elements.

We learned the syntax of CSS, including the composition of selectors and declaration blocks, and how to insert CSS styles into HTML documents. We also learned about the basic concepts of CSS, such as the box model and layout methods.

Finally, we delved into CSS selectors, including common selector types and the concept of precedence.

By mastering these basics, you've taken the first step towards becoming a CSS expert. In the next study, we will learn in depth how to set common style attributes such as color, font, border and background to add more visual effects to web pages.

Please continue to pay attention to me, we will explore more exciting content about CSS style properties in the next issue! If you have any questions, please feel free to ask.