Basic concepts of the CSS

CSS is not a language, but a cascading style sheet that describes how HTML elements should be displayed, just as we girls put on beautiful makeup and clothes in order to show off our beauty.

Use CSS in several ways

1. The inline

Use it directly inside HTML tags, look at examples, and set text colors and backgrounds

Copy the code

The advantage of this approach is that it is intuitive, convenient, fast, supposedly efficient, and can be used as a simple way to debug bugs, but there is also a disadvantage: other tags want to use this style. You can’t reuse styles, you have to write them again, and there are a lot of styles written directly into this tag, which makes the code look particularly congested and ugly, so it’s not recommended.

2. The embedded

To address the drawbacks of the first approach, we can extract these styles centrally and place them in the style tag of the head tag, again looking directly at the example

<meta charset="utf-8"> <title></title> <style> p { color:pink; background-color:gray; font-size: large; font-family: "arial narrow"; } </style> </head>Copy the code

If you look at all these properties, all p’s work, it’s not mandatory to put it in the head, it’s valid if I put it in other places, it’s recommended to put it in the head but there are disadvantages: It’s just solve the problem of the label reuse in an HTML document, but if there are multiple HTML files with the same style, you need to write it again in each HTML file, if the style changed, you need to go to each HTML file to change again, as you all know, our programmers are very lazy, so the third way to solve the problem

3. Reference the CSS externally

The second way is to save all CSS styles in the same extension file with the suffix. CSS.

In the previous example, we created a CSS file and wrote the style of the P tag in the file

Then create two HTML files to reference it

Note: I’m using the relative href address here, either absolute or relative, as long as I find it

Basic CSS Syntax

The basic syntax is simple, but…

A style rule has three parts: a selector, a property, and a value.

For example, a title color can be defined as:

h1 { color: orange; }
Copy the code

A:

The selector points to the HTML element that you want to style.

In CSS style rules:

  • Between each attribute and its value"Key-value pair"form
  • All property Settings are usedCurly bracesenclosed
  • Between attribute name and attribute valueThe colonThe connection
  • Between multiple key-value pairsA semicolonseparate

Such as:

h2{
  color: red;
  background: #ccc;
  font-size: 16px;
}
Copy the code

Selector classification (more on next time)

  1. Selector is the name of the tag, and all the examples in this article are the name of the tag
  2. Selector is a class property
  3. Selector is an ID property
  4. Selector is another type property

, etc.

CSS comment

We all know what comments are for

  1. CSS comments are the same as C/C ++ multi-line comments
  2. HTML is <! — Comment content –>
  3. Python is # comment content

Cascading and inheritance of CSS styles

1. Cascade

The cascading order begins by classifying the rules according to origin. \

The final look of a web page is the result of a combination of different styles.

Form a cascade through three main sources of style:

  • CSS style \ created by the page’s author

  • The browser’s default CSS style \

  • User – defined CSS styles for browsing pages

The specific priorities are as follows:

Rules set by page author > User Rules > Browser rules

2. The inheritance

Inheritance refers to the way properties flow through the page. Unless otherwise defined, child elements usually adopt the characteristics of the parent element.

Example:

<html> <head> <style> .father { color: red; font-size: 24px; } < / style > < / head > < body > < div class = "father" > < div class = "son" > child element < / div > < / div > < / body > < / HTML >Copy the code

Results:

\

Because the second div (child element) is inside the outer div (parent element) and has no additional definition of its own, it will take whatever style is assigned to the outer div.