Article directory
1. Introduction
CSS (cascading style sheet) is a cascading style sheet.
The role of CSS: beautify the page.
Composition: selector + one or more statements. (selector {style; '}). The style contains a key-value pair, attribute: attribute value. The
selector is a tag in html
2. CSS writing style
1. Inline styles (inline styles)
Write directly in the style attribute of the tag
```paragraph tags
``` 2. In-page style
Write in the style tag of the web page
between and to create
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: pink;
font-size: 50px;
border: 5px dashed;
}
div {
color: blue;
font-size: 20px;
background-color: aqua;
}
</style>
</head>
3. External style
Write in a separate CSS file and then reference it in the web page using the link tag
<link rel="stylesheet" href="样式链接">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引用外部样式-->
<link rel="stylesheet" href="../Test/CSS/03 - CSS外部样式.css">
</head>
3. Common selectors
Purpose: Use the selector to find the rules that the corresponding label
style follows.
- Selectors of the same type follow: a. Proximity principle b. Superposition principle
- Different types of selectors:
a. The more targeted the selector is, the higher the priority
b. The weights of the selectors are added together, and the larger one takes precedence; if the weights are the same, the one defined later takes precedence
c. important > within Link > id > Class | Pseudo class | Attribute selection | Pseudo element > Tag > Wildcard > Inherit
1. Tag selector
Find tag tag tag
name based on tag <p>namep {}
/** 标签选择器 **/
p {
color: pink;
font-size: 50px;
border: 5px dashed;
}
<p>段落标签</p>
2. Class Selector
class name <div class="hight">
class selector.hight
/** 类选择器 **/
.hight {
color: red;
font-size: 30px;
}
<div class="hight">第一个容器</div>
<p class="hight">第一段文字</p>
<p class="hight">第二段文字</p>
3. id selector
tag id <p id="main">selector#main {}
/** id选择器 **/
#main {
color: green;
font-size: 10px;
}
<p id="main">第二段文字</p>
4. Parallel selector
The styles of div tags and tags with class hight are modified.
div, .hight {
color: black;
}
<div>容器标签</div>
<div>容器标签</div>
<div>容器标签</div>
<div class="hight">第一个容器</div>
<p class="hight">第一段文字</p>
<p class="hight">第二段文字</p>
<p id="main">第二段文字</p>
5. Composite selector
div tag and the tag class is hight, modify one
div.hight {
color: black;
}
<div>容器标签</div>
<div>容器标签</div>
<div>容器标签</div>
<div class="hight">第一个容器</div>
<p class="hight">第一段文字</p>
<p class="hight">第二段文字</p>
6. Pseudo-class selector
The name of the pseudo-class is not case-sensitive, but needs to start with a colon:
:first-child
ul li:first-child { /*匹配<ul>下的第一个<li>标签*/
color: red;
}
<ul>
<li>CSS定位</li>
<li>CSS元素堆叠</li>
<li>CSS浮动</li>
</ul>
