Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code


❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this articleCSS Basics and Selectors introduction


1. How many ways can THE CSS be loaded? 2. What does @import do? How to use it? 3. How many CSS selectors are common? 4. What are the usage scenarios for ID and class selectors? 5. What does @charset do? 6. Describe the difference between SRC and href. 7. What is the difference between using link and @import when importing pages? CSS and common. CSS have the following contents. After the introduction of index.css in HTML, it is found that the color and size of the page font do not change at all. /* index.css */ @import "common.css" body {font size: 12px} /* common.css */ body {color: red; } ✅ common.css file path may be wrong. Check elements to see if there is an error to locate the problem. ✅ @ import "url"; Must be followed by a semicolon. The body font in ✅ index.css is changed to:. ❌ font: 12pxCopy the code

🙋 on the question “refer to the answer in detail”, please click here to view access!


Introduction: Through the first three articles in this series, we have a more detailed understanding of HTML. In the next series of articles, we’ll take a step-by-step, detailed look at CSS.

By then, I’m sure we’ll be able to write any static page we see with ease and formality.


1 CSS definitions

CSS (Cascading Style Sheets) : Used to control the presentation of HTML.

CSS determines how good a page looks and how cool the animation looks.

HTML+CSS is the basic composition of a static page. It’s like a girl who has basic body features (HTML) and then dresses herself up: makeup, hair, and clothes (CSS).


2 Working principles of the CSS

Again review article: “(01) truism input from the URL to the page to show what happened behind | Web front knowledge”

  • First, when we type a URL into the browser and press Enter, the browser sends a request to the server, and the server returns the corresponding data — HTML — to the browser.

  • The browser then takes the data and loads the page to parse the HTML. How to parse: The browser gets the string, it does some encoding and so on, parses the string into a “tree” structure, and creates a DOM, called a DOM tree (because it’s a document structure, like a “tree”).

  • Then, as the HTML is parsed, the browser loads the CSS. For example, when parsing to the code selected in the following box:

The browser will request the server again to retrieve the style.css file.

  • The synchronized CSS file is then downloaded. Once downloaded, the browser parses the CSS file to make it a “CSS tree.” The browser then does a calculation, matching the “DOM tree” to the “CSS tree” to create a new “tree.” The tree has two nodes: one is what its elements are; The other is the specific parameters of the element: width, height, position, size, border, and so on.

  • After the browser gets the tree, it “renders” it.

We get a rich set of data that tells us where every element on the page is and how it relates to each other — children, neighbors, and so on. At this point, I can take a sketchpad and “draw.”

  • Finally, a colorful page unfolds in front of us:


3 Introduction of CSS in HTML

3.1 External Style Sheets: Yes<link>“Chained” CSS (as shown above)

Inside the , add the tag immediately below the

tag.

  • In the tag, rel=”stylesheet”, the “rel attribute” specifies the relationship between the HTML file and the linked file, meaning that we are linking a “stylesheet” — stylesheet.

  • The style sheet can be placed in the href (Hypertext Reference) — either using relative links (the.css file used in the above example contains all the CSS associated with it, so make sure the file path is correct) or a full URL.

3.2 External Style Sheets: “Import” styles with @import

<style>
  @import url("index.css");      /* ① */
  @import url(index.css);        / * (2 * /
  @import "index2.css";          / * (3) * /
  @import url("landscape.css") screen and (orientation:landscape); / * 4 * /
</style>
Copy the code

Formally, the @import approach is similar to the “chaining” method of importing CSS files from the outside.

The format ①②③ can be, the effect is the same. Note that for “imports” of multiple.css files or urls, semicolons; It must not be spared.

In this example, media query restrictions are added in the middle and the second half.

  • screenUnder a screen with a browser;
  •  and (orientation:landscape)The “display orientation” for mobile devices is “landscape”.

💡 The English word for portrait is: portrait.

3.3 Internal style sheet: placed in the head element<style>In the label

As the example in the previous article:

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <title>The HTML form</title>
  <style>
    #txa {
      width: 300px;
      height: 200px;
      margin-left: -12px;
    }
  </style>
</head>
<body>...Copy the code

3.4 Inline Style: Write directly in the style attribute of the element’s opening tag

<p style="background: yellow; font-family: sans-serif;">Oli is a good guy!</p>
Copy the code

Note:

  • Note the semicolon and quotation marks;

  • It is not recommended in general but only in certain circumstances.

🏆 Summary: It is recommended to use to link to the CSS.


4 Introduction to CSS selectors

CSS selectors are used to “locate” HTML elements that we want to give “styles” and “rules”.

CSS “styles”, “rules”, we can split understanding:

h1 {color: red; background: yellow; }Copy the code

4.1 Element selectors

p {
  color: yellow;
}
div {
  background: yellow;
}
p.div {
  font-family: sans-serif;
}
Copy the code

4.2 ID selector

Id locates a unique element on the page (as in the example from the previous article) :

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <title>The HTML form</title>
  <style type="text/css">
    #txa {                                        /* ① */
      width: 300px;
      height: 200px;
      margin-left: -12px;
    }
  </style>
</head>
<body>
…
  <div>
    <label for="txa">Comment on:</label>
    <textarea id="txa" name="article">A good man!<! - (2) -- -- >  
    </textarea>                         
  </div>
…
Copy the code

💡 annotation:

  • In ② id=”txa” : the “ID attribute” is a way of identifying elements as “unique”. Elements with ids have one feature: you can link them directly and style them individually. ❗️ But note: ids are unique, an element cannot have more than one ID, and multiple elements cannot have the same ID on a page. The id name cannot contain Spaces.

  • For #txa: to select an element by ID in ①, use a # character before the ID name.

4.3 Class selectors

🔗 source code and effect display

“Class” : can be directly understood as a football club, in which all members (elements) must follow a uniform code – for example, attending business events must wear the same dress.

Creating a “class” is a two-step process:

  • Add a class attribute to the HTML element so that it can be added to the “class”.

❗️ Note: An element can join multiple classes, that is, a person can join multiple clubs. Separate each class name with a space.

<ul>
  <li class="first">fine</li>
  <li class="second">thank you</li>
  <li class="third done">and you</li>
</ul>
Copy the code
  • Select this “class” in THE CSS (❗️ note: The format is class with one before the class name.Characters).
.first {
  font-weight: bold;
}
.done {
  text-decoration: line-through;
}
Copy the code

🏆 Summary: When you want to apply a style to multiple elements, add them all to the same “class”. Class is used. But if only one element needs this style, use id.

4.4 Wildcard selector

This selector can be matched with any element, like a “wildcard”. Such as:

* {
  color: yellow;
}
Copy the code

This “rule” allows the color value of all elements in the document to be yellow.

4.5 Attribute selector

Attribute selector matches elements based on their attributes and attribute values. The English word for attribute is attribute.

4.5.1 [attr]

🔗 source code and effect display

To select an element based on its attributes, use the [] symbol to box the attribute name of the element:

li[class] {
  color: red;
  background: yellow;
}
Copy the code

Select all li elements with an unlimited class attribute and make their text red and background yellow.

4.5.2 [attr = val]

🔗 source code and effect display

That is, directly use the [] symbol to box “attribute” and its corresponding “attribute value”, which is used to select elements according to the specific attribute and its value:

li[class="second"] {
  color: red;
  background: yellow;
}
Copy the code

Select all li elements with the class attribute value second and make their text red and background yellow.

❗️ Note: This selection format is required to match the “attribute value” exactly, no more, no less, without any form of shorthand.

Example: Select all li elements with class attribute value third done and make their text red and background color yellow.

li[class="third done"] {
  color: red;
  background: yellow;
}
Copy the code

– Cannot be shortened to:

li[class="third"] {
  color: red;
  background: yellow;
}
Copy the code

4.5.3 [attr ~ = val]

🔗 source code and effect link

That is, use the [] symbol to box the “attribute”, the symbol ~, and the “attribute value” to be styled with it to select elements “by partial attribute value” :

li[class~="done"] {
  color: red;
  background: yellow;
}
Copy the code

Select all li elements with class values containing done and make their text red and background yellow.

4.5.4 ^ $ *

1. ^

🔗 source code and effect display

li[class^="se"] {
  color: red;
  background: yellow;
}
Copy the code

Select all li elements that begin with se for the entire class attribute value and make their text red and background yellow.

2. $

🔗 source code and effect display

li[class$="ne"] {
  color: red;
  background: yellow;
}
Copy the code

Select all li elements that end in NE for the entire class attribute value and make their text red and background yellow.

3. *

🔗 source code and effect display

li[class*="ir"] {
  color: red;
  background: yellow;
}
Copy the code

Select all li elements that contain the ir string in the class attribute value so that the text is red and the background color is yellow.

💡 mnemonic: ^ starts to the left of the smiley face (^^), so remember that the attribute value begins with a certain character; The $dollar sign is like a wagging tail, so it can be remembered as an attribute value ending with a certain character; * Asterisks, like stars, are strings, so they can be remembered as a string contained in the property value.

4.5.5 Language Value Matching

🔗 source code and effect display

<! DOCTYPEhtml>
<html lang="zh">                        
<head>                                   
  <meta charset="utf-8">                    
  <title>Thank you language</title>            
</head>                                 
<body>                                  
  <h1>Thank you language</h1>              
  <dl>
    <dt>English</dt> 
    <dd lang="en">Thank you.</dd>
    <dt>Japanese</dt> 
    <dd lang="ja">Charms and commuting.</dd>
    <dt>French</dt>
    <dd lang="en">Merci.</dd>
    <dt>Australian English</dt>
    <dd lang="en-au">Thank you very much.</dd>
  </dl>        
</body>                                           
</html>
Copy the code

Select all elements whose lang attribute is equal to en or begins with en- and make their text red and background yellow.

*[lang|="en"] {
  color: red;
  background: yellow;
}
Copy the code

❗️ Note: The attribute selector above is often used to match language values.


Postscript: Basic selectors are covered in this article. In the next article, we will take a closer look at the following selectors and their surroundings — pseudo-class selectors, pseudo-element selectors, and combinatorial selectors.

CSS knowledge and miscellaneous, only calm down to work, with a line of code one by one to break it will not float on the surface.

I waste time, time will waste me.

I wish you good, QdyWXS ♥ you!