1. The combination of CSS and HTML

1.1 The first

Set "key:value value;" on the style attribute of the label to modify the label style.

需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。
<body> 
 <div style="border: 1px solid red;">div 标签 1</div> 
 <div style="border: 1px solid red;">div 标签 2</div> 
 <span style="border: 1px solid red;">span 标签 1</span> 
 <span style="border: 1px solid red;">span 标签 2</span> 
</body>

1.2 The second

In the head tag, use the style tag to define various css styles you need. The format is as follows:
xxx { Key: value value; Key: value value; }

Multiple declarations: If you want to define more than one statement, you need to separate each statement with a semicolon.
Although there is no need to add a semicolon at the end of the last statement (but try to add a semicolon at the end of each statement)

需求 2：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title> <!--style 标签专门用来定义 css 样式代码-->
	<style type="text/css"> 
		div {
     
     
			border: 1px solid red;
		}

		span {
     
     
			border: 1px solid red;
		}
    </style>
</head>
<body>
   <div>div 标签 1</div>
   <div>div 标签 2</div>
   <span>span 标签 1</span> 
   <span>span 标签 2</span>
</body>
</html>

1.3 The third

Write the css style as a separate css file, and then import it through the link tag to reuse it.
Use of html <link rel="stylesheet" type="text/css" href="./styles.css" />tags into css style file.
1. CSS file
Create a .css file and no longer need <style type="text/css"> </style>tags.

div {
    
    
   border: 1px solid red;
}

span {
    
    
   border: 1px solid red;
}

2.html file code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title> 
link 标签专门用来引入 css 样式代码
    <link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
	<div>div 标签 1</div>
	<div>div 标签 2</div>
	<span>span 标签 1</span> 
	<span>span 标签 2</span>
</body>
</html>

2. CSS selector

2.1 Tag name selector

The format of the tag name selector is:
tag name { 　　attribute: value; 　　attribute: value; }

<style type="text/css"> 
	div {
     
     
		border: 1px solid yellow;
		color: blue;
		font-size: 30px;
	}

	span {
     
     
		border: 5px dashed blue;
		color: yellow;
		font-size: 20px;
	} 
</style>

<div>div 标签 1</div>

2.2 id selector

Add a #, followed by the attribute value of id

<style type="text/css"> 
	#id001 {
     
     
		color: blue;
		font-size: 30px;
		border: 1px yellow solid;
	}

	#username {
     
     
		color: red;
		font-size: 20px;
		border: 5px blue dotted;
	} 
</style>

<div id="id001">div 标签 1</div>
<div id="username">div 标签 2</div>

2.3 class selector

Add one ., Which means the attribute value of the class

<style type="text/css"> 
	.class01 {
     
     
    color: blue;
    font-size: 30px;
    border: 1px solid yellow;
}

   .username {
     
     
    color: grey;
    font-size: 26px;
    border: 1px solid red;
} 
</style>

<div class="class01">div 标签 class01</div>
<div class="username">div 标签</div>

2.4 Combination selector

The format of the combo selector is:

Selector 1, Selector 2, Selector n { attribute: value; attribute: value; } The combination of selectors allows multiple selectors to share the same css style code.

<style type="text/css"> 
	.class01 , #id01{
     
      
		color: blue; 
		font-size: 20px; 
		border: 1px yellow solid; 
    } 
</style>

2.5 Examples seen:

Case1: Only div tags can use class01 style

div.class01{
    
    
	color: blue; 
	font-size: 20px; 
	border: 1px yellow solid; 
}

Case2: When a tag has a son tag div, and a son tag div has a son tag span, then this tag can use the class01 style

.class01 div span{
    
    
	color: blue; 
	font-size: 20px; 
	border: 1px yellow solid; 
}

2.6 Discrimination of id selector and class selector

1. The difference between id and class

id is equivalent to a person’s ID card and cannot be repeated
The class is equivalent to the name of the person can be repeated
An html tag can only be bound to one id name
One html tag can be bound to multiple class names

2. The difference between id selector and class selector

id selector starts with #
The class selector starts with

3. CSS commonly used styles:

Font color color: red;
color can be written with color names such as black, blue, red, green, etc.
Colors can also be written with rgb value and hexadecimal representation value: such as rgb(255,0,0), #00F6DE, if you write Hexadecimal value must add #
Width
: 19px;
width can write pixel value: 19px;
also can write percentage value: 20%;
Height
: 20px;
height can be written in pixel value: 19px;
you can also write in percentage value: 20%;
Background
-color:#0F2D4C
Font style
color: #FF0000; font color red
font-size: 20px; font size
Red, 1 pixel, solid border
border: 1px solid red;
DIV centered
margin-left: auto;
margin-right: auto;
Text
-align: center;
Hyperlink to underline
text-decoration: none;
Table thin line
table{ border: 1px solid black; / Set the border / border-collapse: collapse; / Combine the borders / }

td,th{ border: 1px solid black; / set border / }
List removal modification
the {
list-style: none;
}

CSS technology initial learning