Learning html from scratch (6) learning CSS, adding styles for webpages, and css from scratch

Learning html from scratch (6) learning CSS, adding styles for webpages, and css from scratch
I. Understanding CSS styles

1 <! Doctype html> 2 Understanding CSS styles
CSS is called "Cascading Style Sheet )",
It is mainly used to define the display style of HTML content in the browser, such as the text size, color, and font bold.
Run the following code:
p{   font-size:12px;   color:red;   font-weight:bold;}
One advantage of using CSS styles is that by defining a style, the text at different web pages can have a uniform font, font size, or color.
Try: Use the css style code to modify the font size
In the editor8Row Modification
"Font-size: 12px;" is "font-size: 20px ;"
Observe the changes in the result window.
Font-size: 20px; semicolon;You cannot forget.
Ii. Advantages of CSS styles
1 <! Doctype html> 2 Advantages of CSS styles
Why is css style used to set the appearance style of a webpage? The Editor contains a piece of text.Cool Internet","Timely and considerate services",
"Fun and easy to learn"The text color of the three phrases is set to red, then you can set the style by setting the style, and you only need to write a css style statement.
Step 1: Use <span> </span> to enclose the three phrases. (See code editor.13Rows)
Step 2: Write the following code: (see the code editor .)7-8Rows)
span{    color:red;}
Check whether the text color in the window is red.
Try: now we want to change the text color of "Cool Internet", "timely and considerate service", and "interesting and easy to learn" to blue.
In the editor Section8Line. modify the code.color:red;Iscolor:blue;

  

 
   

     Do not forget the semicolon after the color: blue; Statement 
    ; 
   
 
   

 
   

     Explanation: 
   
 
   

 
   

 
   

     Span { 
    
 
    
Color: blue; <! -- I am a color --> 
    
 
    
Font-size: 20px; <! -- I am the font size --> 
    
 
    
Font-weight: bolder; <! -- I can bold the font --> 
    
 
    
} 
   
 
   

 
   

     Span is not fixed. You can replace it with any letter, as long as it can be consistent. 
   
 
   

 
   

     Aqua light green 
    
 
    
Black 
    
 
    
Blue 
    
 
    
Fuchsia purple red 
    
 
    
Gray 
    
 
    
Green 
    
 
    
Lime green yellow 
    
 
    
Maroon 
    
 
    
Navy blue 
    
 
    
Olive 
    
 
    
Purple 
    
 
    
Red 
    
 
    
Silver 
    
 
    
Teal blue-green 
    
 
    
White 
    
 
    
Yellow 
   
 
   


  
Iii. CSS code syntax
1 <! Doctype html> 2 CSS code syntax
Css styles consist of selector and declaration, and Declaration is composed of attributes and values, as shown in:

Selector: Specifies the elements on the webpage that apply style rules. In this example, the text of all the segments (p) on the webpage turns blue, other elements (such as ol) are not affected.
Declaration: the Declaration is in the English braces "{}", and the attribute and value are separated by the English colon. When there are multiple statements, they can be separated by semicolons (;), as shown below:
p{font-size:12px;color:red;}
Note:
1. The last statement may not contain semicolons, but it is generally added for future modification convenience.
2. To make it easier to read Styles, you can write each code in a new line, as shown below:
p{   font-size:12px;   color:red;}
Try again: Add css code to make the Code effective
Observe the Code Editor8-10Line, css code is incomplete, so the three css Code does not play a role, please complete the code.
Indicates whether the code has a semicolon;Lost.
Iv. CSS annotation code
1 <! Doctype html> 2 CSS annotation code
Like in Html comments, there are comments in CSS: Use/* Comment statement */(Used in Html)<! -- Comment -->). Like the following code:

Try it: add a comment statement to the CSS style code to indicate the role of the Code.
1. In the editor8Font-size of the row: 12px; Add"Set the text font size to 12px"Comment.
2. In the editor9The color: red of the row.Set the text color to red"Comment.
Whether the code you write is like the following code:

Comment shortcut: Ctrl +/: quickly comment on the current row
Shift + ctrl +/: Add/**/Symbol quickly at the current position
Annotation is a good habit of programming. To become a good software engineer, you must develop good programming habits;