CSS全稱(chēng): cascading style sheets
談?wù)刢ss偽類(lèi)與偽元素 這是我見(jiàn)過(guò)最全的偽類(lèi)和偽元素總結(jié)
先來(lái)個(gè)練習(xí)題壓壓驚！
image.png
鏈接狀態(tài)偽類(lèi)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽類(lèi)測(cè)試</title>
<style type="text/css">
code {
background-color: #f9f2f4;
color: #c7254e;
padding-left: 2px;
padding-right: 2px;
margin-right: 5px;
}
a:link {
color: #0477C0;
text-decoration: none;
}
a:visited {
color: gray;
}
a:hover {
color: red;
}
a:active {
color: green;
}
</style>
</head>
<body>
<ul>
<li><code>:link</code>設(shè)置 a 元素在未被訪(fǎng)問(wèn)前的 CSS 樣式</li>
<li><code>:visited</code>設(shè)置 a 元素在其鏈接地址已被訪(fǎng)問(wèn)過(guò)時(shí)的 CSS 樣式</li>
<li><code>:hover</code>設(shè)置元素在其鼠標(biāo)懸停時(shí)的 CSS 樣式</li>
<li><code>:active</code>設(shè)置元素在被用戶(hù)激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的 CSS 樣式</li>
</ul>
<ul>
<li><a href="#1">鏈接1</a></li>
<li><a href="#2">鏈接2</a></li>
<li><a href="#3">鏈接3</a></li>
<li><a href="#4">鏈接4</a></li>
</ul>
</body>
</html>
結(jié)構(gòu)化偽類(lèi)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>結(jié)構(gòu)偽類(lèi)測(cè)試</title>
<style type="text/css">
.item:first-child {
border-top: 1px solid red;
}
.item:last-child {
border-bottom: 2px solid gray;
}
.item:nth-child(even) {
color: red;
}
.item:nth-child(2n+1) {
color: blue;
}
.item:nth-child(4) {
background: #f5f5f5;
}
.item:nth-last-child(5) {
background: #ccc;
}
</style>
</head>
<body>
<ul class="list">
<li class="item">HTML</li>
<li class="item">CSS</li>
<li class="item">Javascript</li>
<li class="item">Sass</li>
<li class="item">Less</li>
<li class="item">Node.js</li>
</ul>
<p>“:nth-child(n)”糯崎，n可以是數(shù)字（4）主到、關(guān)鍵詞（odd,even）或公式（2n+1）</p>
</body>
</html>
上面代碼的實(shí)際效果如下圖：
image.png
再來(lái)個(gè)練習(xí)題醒醒腦！
image.png
文本首行縮進(jìn)兩個(gè)字符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>設(shè)置文本樣式</title>
<style>
p {
font-size: 18px;
color: #999;
line-height: 1.5em;
}
.text {
text-indent: 2em;
}
</style>
</head>
<body>
<!--
請(qǐng)?jiān)O(shè)置 class 為 text 的 p 的樣式，要求如下：
* 文字大小為“18px”蚌斩，顏色為“#999”
* 行高為“1.5倍”
* 首行縮進(jìn)兩個(gè)文字
-->
<p class="text">我是帶有class為text的段落</p>
<p>我是沒(méi)有設(shè)置class為text段落</p>
</body>
</html>
絕對(duì)單位和相對(duì)單位
一個(gè)相素對(duì)應(yīng)一個(gè)點(diǎn)拆挥，對(duì)于高清屏一個(gè)相素對(duì)應(yīng)更多的點(diǎn)！
image.png
