1. What is css?
It is mainly used to set the appearance style of html page text content, picture shape, version layout, etc.
Two, css syntax rules
Syntax:
selector declaration statement;
div {
width: 200px;
}
div is the selector, and
the attribute key-value pair in curly braces is the attribute name: attribute value
2. How to import css style
1. Inline style – inline
syntax:
<div style="width: 100px;height: 100px;"></div>
Applicable to: Adding special styles to individual elements
Disadvantages: The scope of action is small, try not to use it
2. Internal Styles – Embedded (Inline)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
div {
width: 200px;
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>
Open a style tag separately in the head, write selectors and attribute key-value pairs Applicable
: when a single html document needs a special style
Advantage: Compared with the inward style, the code can be used
3. External style-external link type, when imported, the file extension is .css
<head>
<link rel="stylesheet" href="css文件的路径" type="text/css">
</head>
Can be imported using relative path or absolute path.
rel attribute : the relationship between the current file and the linked document, only stylesheet is supported by all browsers, and the type of external file is a css file;
applicable to: when multiple html documents have the same style
Creation steps :
1. Create a new file with the extension .css, and save the file in the css folder of the website directory
2. Open the newly created .css file, and set the encoding method @charset "utf-8";
3. In the html Files with the suffix .css linked in the document:
<link rel="stylesheet" href="css文件的路径" type="text/css">
Third, the priority of the style sheet
Inline style > Internal style > External style
The principle of proximity is closer to the label style
4. Style selector
* < div < class < id
通配符 < 元素选择器 < class选择器 < id选择器
1. Wildcard selector *: used alone to match all elements (labels) 0
<style>
* {
padding: 0;
margin: 0;
}
</style>
2. Element selector – label selector, type selector: 1
In the structure: <tag name></tag name>
<div>内容</div>
In style: tag name {css style}
<style>
div {
width: 200px;
padding:2px;
}
</style>
The padding and margin of all elements are set to 0 in the wildcard selector, and
the padding of the div is set to 2px in the element selector, so the padding that is effective for the div element is now 2px.
3. class selector – class selector 10
In structure: <tag name class=”class name”></tag name>
in style: .class name{css style}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 200px;
padding:2px;
background-color: red;
}
.box {
width: 500px;
padding:5px;
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<div class="box">内容</div>
</body>
</html>
The class name has a weight of 10, so the same style as the wildcard selector and element selector above will be replaced by the class name selector
Page:
The naming convention of the selector:
3.1. The name should be as meaningful as possible;
3.2 The name is recommended to start with English letters, letters, numbers, and hyphens (-_);
3.3 Other characters except hyphens cannot be used (including spaces);
3.4 No pure numbers, Cannot start with numbers or Chinese characters;
3.5 Class names are case-sensitive;
4.id selector 100
In structure: <tag name id=”id name”></tag name>
In style: #id name{css style}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 200px;
padding: 2px;
background-color: red;
}
.box {
width: 500px;
padding: 5px;
background-color: blue;
color: #fff;
}
#boxId{
width: 100px;
background-color: #ccc;
color: #fff;
}
</style>
</head>
<body>
<div class="box" id="boxId">内容</div>
</body>
</html>
The weight of the id selector is 100, so the same styles of the wildcard selector, element selector, and class name selector above will be replaced by the class name selector Page
:
Note: the id name can only appear once on this page;
5. The priority of the selector: Generally speaking, the greater the weight of the selector, the higher the priority;
1. The full stack of basic selectors from small to large is:
wildcard selector (0) < label selector (1) < class selector (10) < id selector (100) < interline style (1000) 2
. If the selectors have the same weight, the content written later will overwrite the content written earlier
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 200px;
padding: 2px;
background-color: red;
}
.box {
width: 500px;
padding: 5px;
background-color: blue;
color: #fff;
}
#boxId {
width: 100px;
background-color: #ccc;
color: #fff;
}
#boxId {
width: 100px;
background-color: pink;
color: #fff;
}
</style>
</head>
<body>
<div class="box" id="boxId">内容</div>
</body>
</html>
For the element whose id is boxId above, two sets of styles are written using the id selector, the latter has the same style as the front, and the latter will replace the former css style.
6. The interline style has the highest priority but not higher! Important
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 200px;
padding: 2px;
background-color: red;
}
.box {
width: 500px;
padding: 5px;
background-color: blue;
color: #fff;
}
#boxId {
width: 100px;
background-color: #ccc;
color: #fff;
}
#boxId {
width: 100px;
background-color: pink;
color: #fff;
font-size: 12px !important;
}
</style>
</head>
<body>
<div class="box" id="boxId" style="font-size: 26px;">内容</div>
</body>
</html>
Although inline styles have the greatest weight, they are not !important.
5. Priority
The greater the weight of the selector, the higher the priority. When the weight is the same, who will be displayed later.
Basic selector weight:
wildcard selector 0, label selector 1, class selector 10, id selector 100
composite selection The weight calculation method of the compound selector: the weights of all single accounts that make up the composite selector are accumulated
. box div{} 10+1 =11
#box .box p{} 100+10+1=111
The priority of the interline style is high Based on the priority of the id selector;
the weight of inheriting CCTV is 0; the style set in the child element will override the inherited style;
define it in the style! important, takes precedence over inline styles