1. Introduction to CSS Technology
css is a cascading style form. Is a markup language used to enhance control over web page styles and to allow style information to be separated from web page content.
1.2CSS grammar rules
Selector: The browser determines the HTML element tags that are affected by the css style based on the Selector.
Attribute: is the name of the style you want to change, and each attribute has a value.
Multiple declarations: If multiple declarations are defined, separate them with semicolons.
How 1.3CSS and HTML are combined
First
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--Requirement 1: Define two div,span Tags, modify each div The style of the label is: 1 pixel border, solid line, red.-->
<div style="border: 1px solid red;">div Label 1</div>
<div style="border: 1px solid red;">div Label 2</div>
<span style="border: 1px solid red;">span Label 1</span>
<span style="border: 1px solid red;">span Label 2</span>
</body>
</html>There are drawbacks to writing only HTML code:
1. If there are too many labels. There are many styles. There will be a lot of code.
2. Poor readability
3.HTML code is not reusable
Second
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style Labels are designed to define css Style Code-->
<style type="text/css">
/* Requirement 1: Define two div and span tags, modify the style of each div tag separately: 1 pixel border, solid line, red.*/
div {
border: 1px solid red;
}
span {
border: 1px solid red;
} </style>
</head>
<body>
<div>div Label 1</div>
<div>div Label 2</div>
<span>span Label 1</span>
<span>span Label 2</span>
</body>
</html>You can see that the second method has much better code volume and code reuse than the first.
However, there are some drawbacks:
1. Code can only be reused within the same page, or not in place for code reuse.
2. It is inconvenient to maintain, there will be many such pages in the actual development, which will take a lot of work to modify.
Third
1.CSS Content
div{
border: 1px solid yellow;
}
span{
border: 1px solid red;
}2.HTML file code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link Labels are designed to be introduced css Style Code-->
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div>div Label 1</div>
<div>div Label 2</div>
<span>span Label 1</span>
<span>span Label 2</span>
</body>
</html>This method solves the first and second problems perfectly.
1.4 CSS Selector
1.4.1 Tag Name Selector:
Label name {
Attribute: value;
}
1.4.2id selector
#id attribute value {
Attribute: value;
}
The id selector allows us to selectively use this style based on the id attribute we set.
1.4.3class selector
.class attribute value {
Attribute: value;
}
Class selector: Allows us to use this style selectively and effectively based on the class properties that we define.
1.4.4 Combination Selector
Selector 1, Selector 2, Selector n{
Attribute: value;
}
Combinatorial selectors allow us to select multiple selectors to use a single css code.
1.5 Common Styles
1. Font color
color: red；
2. Width
width: 10px；/width: 10%；
3. Height
height: 10px；/height: 10%；
4. Background color
background-color: red；
5. Font Styles
Color:#FF0000; Font color
font-size:10px; font size
6. Red one-pixel solid border
border: 1px solid red；
7.div centered
margin-left: auto；
margin-right: auto；
8. Centered text
text-align: center；
9. Underline hyperlinks
text-decoration: none；
10. Table Thin Lines
table{
border:1px solid black; Set Border
border-collapse; Merge Borders
}
td,th{
border:1px solid black;
}
11. List Removal Modification
ul{
list-style: none；
}
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css Common Styles.html</title>
<style type="text/css">
div {
color: red;
border: 1px yellow solid;
width: 300px;
height: 300px;
background-color: green;
font-size: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
table {
border: 1px red solid;
border-collapse: collapse;
}
td {
border: 1px red solid;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
</ul>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<a href="http://Www.baidu.com ">Baidu</a>
<div>I am div Label</div>
</body>
</html>