CSS language introduction: CSS is “cascading style sheet”. Is a markup language used to (enhance) control web page styles and allow separation of style information from web page content.

Selectors: The browser determines which HTML elements (tags) are affected by CSS styles based on the selectors. Property: Is the name of the style you want to change, and each property has a value. Properties and values are separated by colons and surrounded by curly braces, thus forming a complete style declaration, e.g. P {color: blue} Multiple declarations: If you want to define more than one declaration, you need to separate each declaration with a semicolon. Although the last statement may end without a semicolon, try to include a semicolon at the end of each statement. For example:

P (selector) {color (attribute) :red (value); Font-size :30px; } Note: it is best to describe only one property per line CSS comment: /* Comment content */Copy the code

The first method of combining CSS and HTML is to set key:value value; , modify the label style.

<div>div tag 2</div> <span> SPAN tag 1</span> <span> SPAN tag 2</span>Copy the code

Requirement 1: Define two div and SPAN tags, and change the style of each div tag to 1 pixel border, solid line, and red. For example:

<body> <div style="border: 1px solid red;" <div style="border: 1px solid red;" "> <span style="border: 1px solid red; "> <span style="border: 1px solid red; </span> </body>Copy the code

Q: The downside of this approach? 1. If there are too many labels. There are many styles. It’s a lot of code. 2. Very poor readability. 3.Css code is not reusable enough to be dialectable.

Second: in the head tag, use the style tag to define any CSS styles you need. The format is as follows: XXX {Key: value value; }

<div>div tag 2</div> <span> SPAN tag 1</span> <span> SPAN tag 2</span>Copy the code

Requirement 1: Define two div and SPAN tags, and change the style of each div tag to 1 pixel border, solid line, and red. For example:

<! PUBLIC DOCTYPE HTML "- / / / / W3C DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd" > < HTML > < head > < meta  http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <! <style type="text/ CSS "> /* this is all CSS code */ div{border: 1px solid blue; } span{ border: 1px solid red; } </style> </head> <body> <div>div tag 1</div> <div>div tag 2</div> <span> SPAN tag 1</span> <span> SPAN tag 2</span> </body> </ HTML > Css comment /* This is the code comment of Css */Copy the code

Problem: Disadvantages of this approach. 1. You can reuse the CSS code only on the same page, not multiple pages. 2. It is not convenient to maintain. There will be thousands of pages in the actual project, and we need to modify each page. It’s too much work.

Third: define CSS in a separate file and import it. Import CSS style files using HTML tags.

CSS selector Tag name selector Tag name selector is in the following format:

Tag name {attribute: value; }Copy the code

Requirement 1: Change the font color to blue and font size to 30 pixels on all div tags. Border is 1 pixel yellow solid line. Change the font color of all SPAN tags to yellow and font size to 20 pixels. The border is a 5 pixel blue dotted line. For example:

<! DOCTYPE HTML < HTML > <head> <meta charset="UTF-8"> <title>CSS selector </title> <style type="text/ CSS "> Value; */ div{border: 1px yellow solid;} border: 1px yellow solid; color: blue; font-size: 30px; } span{ color: yellow; font-size: 20px; border: 5px blue dashed; } </style> </head> <body> <! Requirement 1: Change the font color to blue and font size to 30 pixels on all div tags. Border is 1 pixel yellow solid line. Change the font color of all SPAN tags to yellow and font size to 20 pixels. The border is a 5 pixel blue dotted line. --> <div>div tag 1</div> <div> Div tag 2</div> <span> SPAN tag 1</span> <span> SPAN tag 2</span> </span> </span>Copy the code

Id selector The id selector is of the following format: #id attribute value {attribute: value; } Requirement 1: Define two div tags, the first div tag with id ID001, and then change the font color to blue and font size to 30 pixels according to the ID attribute CSS style. Border is 1 pixel yellow solid line. The second div tag defines the ID as ID002, and then defines the CSS style to change the font color to red and font size to 20 pixels based on the ID attribute. The border is a 5-pixel blue dotted line. For example:

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> </title> <style type="text/ CSS "> #id001{color: blue; font-size: 30px; border: 1px yellow solid; } #id002{ color: red; font-size: 20px; border: 5px blue dotted; } < / style > < / head > < body > < div id = "id001" > div tags 1 < / div > < div id = "id002" > div tags 2 < / div > < / body > < / HTML >Copy the code

Class type selectors are of the following format:.class property values {property: values; } Requirement 1: Change the span or div tag to class01, font color to blue, font size to 30 pixels. Border is 1 pixel yellow solid line. Requirement 2: Change the div tag with the class attribute value to class02 and the font color to gray with a font size of 26 pixels. The border is a 1 pixel solid red line. For example:

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title> <title> <style type="text/ CSS ">. Class01 {color: RGB (51, 51, 51); blue; font-size: 30px; border: 1px yellow solid; } .class02{ color: red; font-size: 26px; border: 1px red solid; } </style> </head> <body> <div class="class01">div tag class01</div> <div class="class01">div tag </div> <span <span> <span> <span> <span> </span>Copy the code

Combinatorial selector Combinatorial selector formats are: selectors 1, 2, n{property: value; } Requirement 1: Modify class= “class01” div tags and all SPAN tags with id= “id01” font color blue, font size 20 pixels. Border is 1 pixel yellow solid line. For example:

<! DOCTYPE HTML > < HTML > <head> <meta charset="UTF-8"> <title> <title> <style type="text/ CSS ">.class01, #id01{ color: blue; font-size: 20px; border: 1px yellow solid; } </style> </head> <body> <div class="class01">div tag class01</div> <br /> <span id="id01"> SPAN tag </span> <br /> The < div > div tags < / div > < br / > < div > div tags id01 < / div > < br / > < / body > < / HTML >Copy the code

Common style: 1, color color: red; RGB (255,0,0), #00F6DE, if the hexadecimal value must be added # 2, width:19px; The width can be written in pixels: 19px; You can also write percentages: 20%; 3, Height :20px; Height can be written in pixels: 19px; You can also write percentages: 20%; 4, background-color:#0F2D4C 5, font :# FF0000; Font-size: 20px; 6, red 1 pixel solid border: 1px solid red; 7, DIV center margin-left: auto; margin-right: auto; 8, text center: text-align: center; 9, hyperconnect to underline text-decoration: none; Table {border: 1px solid black; / set border/border-collapse: collapse; /} td,th {border: 1px solid black; } {list-style: none; }