当前位置：网站首页>DW basic course (II)

DW basic course (II)

2022-04-23 21:22:00 【Programmer's simplicity】

1. In the last chapter, we learned about what is html file , So in this chapter, we will explain css The rules , So html Add style to , Every html There is a style sheet , It can be used css To set these attributes involves different aspects of element display , For example, the font of text content 、 Sub number and color , The location of element attributes, etc .CSS Is a first choice HTML Elements , Then set the selected element CSS Property mechanism .CSS The selector and the style to be applied form a line CSS The rules .

2.CSS What are the rules ？

Let's list below , Let's give a list of instructions. We set the paragraph label to blue

HTML Code

  1. <p> This is the paragraph tag </p>  

CSS Code

  1. 1.p{    
  2. 2.    color: blue;    
  3. 3.}    

Browser rendering

 

3. Open the style sheet in the browser and press F12 You can view it in the browser HTML The structure and CSS style .

4. Complete code

  1. <!doctype html><!-- It is html5 Standard web statement -->  
  2. <html><!-- Root element -->  
  3. <head><!-- Head -->  
  4. <meta charset="utf-8"><!-- The character set is uft-8-->  
  5. <title> Untitled Document </title><!-- title -->  
  6.     <link rel="stylesheet" href="Untitled-3.css">  
  7. </head>  
  8.   
  9. <body>  
  10. <!--  This is the web content -->  
  11.     <p> This is the paragraph tag </p>  
  12. </body>  
  13. </html> 

5.CSS Basic grammar

CSS Is a programming language , Since it is a language, there must be its grammatical rules . So next we're going to learn CSS The basic rules of grammar .

CSS The rules consist of two parts ： Selector   and Statement Two parts , The selector refers to the element you want to change the style , Declaration refers to the style part you need to set . The declaration consists of two parts ： Properties and attribute values .

 

Important note ：CSS and HTML The symbols in are all in English , For example, in the rule ":" Colons and ";" A semicolon .

For the basic structure above , We can make the following extensions ：

6. Multiple declarations are contained in one rule

  1. p {   
  2.     color:blue;/* Font color style */  
  3.     font-size: 18px;/* Font size style */  

}

7. Multiple selectors are combined  

for example ： At the same time, label the title h1 h2 h3 Set the same style properties

  1. <h1>hello world</h1>  
  2. <h2>hello world</h2>  
  3. <h3>hello world</h3>  

8.CSS The rules ：

  1. h1,h2,h3{ /* Between selectors , The English status is separated by commas */  
  2.     color: blue; /* Font color style */  
  3.     font-size: 20px;/* Font size style */  
  4. }  

9. Multiple rules apply to a selector

In a nutshell , multiple CSS A rule to change the style of an element .

  1. h1,h2,h3{ /* Between selectors , The English status is separated by commas */  
  2.     color: blue; /* Font color style */  
  3.     font-size: 20px;/* Font size style */  
  4. }  
  5. h1{  
  6.     text-align: center;/* The text content is centered */  
  7. }  

10. For the top 2 Bar rule ,H1 The final style of the label is , The font color is blue , Font size: 20 Pixels , The text content is centered .

版权声明
本文为[Programmer's simplicity]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/110/202204200620389952.html

边栏推荐

猜你喜欢

随机推荐