The CSS profile

Cascading Style Sheets (full English: Cascading Style Sheets) is a computer language used to represent document styles such as HTML (an application of STANDARD Common Markup Language) or XML (a subset of Standard Common Markup Language). CSS can not only statically decorate web pages, but also dynamically format web elements with various scripting languages. CSS has pixel level precise control over the layout of elements in web pages, supports almost all font size styles, and has the ability to edit web objects and model styles.

Selector {declaration 1; Statement 2; }Copy the code

Example:

h1 {
    font-size:12px;
    color:#F00;
}

Copy the code

The “; “after the last declaration of CSS It may or may not be written, but, for the sake of the W3C standard specification, it is recommended that the end of the last statement be “; “. All of them.

Basic usage – Style elements

Inline style

By writing a style attribute directly on the element

<h1> Change the title color </h1>Copy the code

The effect of this statement is to adjust the color of the title

Operation effect:

Internal style

Use the selector to select elements in the current document and add styles uniformly

<style type="text/ CSS "> } h1{ color:red; } </style> <h1> </h1>Copy the code

Complete sample code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1{ color: red; } < / style > < title > < / title > < / head > < body > < h1 > content < / h1 > < / body > < / HTML >Copy the code

Effect screenshot:

So we decorate the H1 with an internal style.

External style

Separate the content of the style label unified definition in a CSS file, CSS file, do not need to write the style tag, directly write the style.

Define the style CSS file

The CSS code is stored in a stylesheet with a.css extension. HTML files reference stylesheets with the.css extension

h1{
   color:red;
}

Copy the code

Introduce CSS documents into HTML

The < head >... <link href=" CSS file location "rel="stylesheet" type="text/ CSS" />... </head>Copy the code
<h1> Tags that require styles </h1>Copy the code

Sample:

↓ This is a CSS file

↓ This is the HTML code

05. HTML file calls the H1red. CSS file in the same folder CSS by To color change the H1 header

Complete code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="css/h1red.css" rel="stylesheet" Type = "text/CSS" / > < / head > < body > < h1 > need style tag < / h1 > < / body > < / HTML >Copy the code

Effect screenshot:

Tag selection

<h1> First level title </h1>Copy the code
h1{
    color: cornflowerblue;
}

Copy the code

Complete code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> h1{ color: blue; } < / style > < / head > < body > < h1 > primary title < / h1 > < h1 > primary title < / h1 > < h2 > secondary title < / h2 > < h2 > secondary title < / h2 > < h2 > secondary title < / h2 > < / body > < / HTML >Copy the code

Effect screenshot:

From the screenshot above we can see that all the first level headings are blue because we have set the color of all the H1 tags, which is tag selection.

Class selection

<h1> </h1> </h2>Copy the code
.colorblue{
    color: cornflowerblue;
}

Copy the code

Complete code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .colorblue{ color: cornflowerblue; } < / style > < / head > < body > < h1 > primary title < / h1 > < h2 > secondary title < / h2 > < h2 > secondary title < / h2 > < h2 > secondary title < / h2 > < h3 > 3 title < / h3 > < / body > < / HTML >Copy the code

Effect screenshot:

From the above figure, we can see that all the titles of class= “colorblue” are blue, regardless of the level of the title, while other non-colorblue classes do not change color, which is the class selection.

Id choose

<h2> Secondary title </h2>Copy the code
#idh2{
    color: red;
}

Copy the code

Complete code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #aa{ color: red; } < / style > < / head > < body > < h1 > primary title < / h1 > < h2 > secondary title < / h2 > < h3 > 3 title < / h3 > < h2 > secondary title < / h2 > < / body > < / HTML >Copy the code

Operation effect screenshot:

From the screenshot above, it is not difficult to find that only the title with id= “aa” has changed color, regardless of the level of the title, just look at whether id= “aa”, that is the ID selection

Writing is not easy, if it is helpful to you, thank you for your support!



Come on!

Work together!

Keafmd