css控制器
#1、作用：表格標(biāo)簽是一種數(shù)據(jù)的展現(xiàn)形式，當(dāng)數(shù)據(jù)量非常大的時(shí)候，使用表格的形式來展示被認(rèn)為是最清晰的
?
#2、格式
<table>
? ? <tr>
? ? ? ? <td></td>
? ? </tr>
</table>
?
tr代表表格的一行數(shù)據(jù)
td表一行中的一個(gè)單元格
?
#3、注意點(diǎn)：
表格標(biāo)簽有一個(gè)邊框?qū)傩?#xff0c;這個(gè)屬性決定了邊框的寬度。默認(rèn)情況下這個(gè)屬性的值為0，所以看不到邊框?
?
#4表格屬性
a、寬度和高度
? ? 可以給table和td設(shè)置width和height屬性 ? ?
? ? 1.1 默認(rèn)情況下表格的寬高是按照內(nèi)容的尺寸來調(diào)整的，也可以通過給table標(biāo)簽設(shè)置widht和height來手動(dòng)指定表格的寬高
? ? 1.2 如果給td標(biāo)簽設(shè)置width和height屬性，會(huì)修改當(dāng)前單元格的寬度和高度，只要不超過table的寬高，則不會(huì)影響整個(gè)表格的寬度和高度
?
b、水平對(duì)齊和垂直對(duì)齊
? ? 水平對(duì)齊align可以給table、tr、td標(biāo)簽設(shè)置
垂直對(duì)齊valign只能給tr、td標(biāo)簽設(shè)置
?
? ? ========水平對(duì)齊===========
? ? 取值
? ? align=“l(fā)eft”
? ? align=“center”
? ? align=“right”
?
? ? 2.1 給table標(biāo)簽設(shè)置水平對(duì)齊，可以讓表格在水平方向上對(duì)齊
? ? ? ? ? 強(qiáng)調(diào)：table只能設(shè)置水平方向
? ? 2.2 給tr設(shè)置水平對(duì)齊，可以控制當(dāng)前行所有單元格內(nèi)容都水平對(duì)齊
? ? 2.3 給td設(shè)置水平對(duì)齊，可以控制當(dāng)前單元格內(nèi)容水平對(duì)齊，tr與td沖突的情況下，以td為準(zhǔn)
?
? ? ========垂直對(duì)齊===========
? ? 取值
? ? valign=“top”
? ? valign=“center”
? ? valign=“bottom”
?? ?
? ? 2.4 給tr設(shè)置垂直對(duì)齊可以讓當(dāng)前行所有單元格內(nèi)容都垂直對(duì)齊
? ? 2.5 給td設(shè)置垂直對(duì)齊可以讓當(dāng)前單元格內(nèi)容垂直對(duì)齊
?
c、外邊距和內(nèi)邊距
? ? 只能給table設(shè)置
?
? ? 3.1 外邊距：單元格與單元格之間的間隔，cellspacing="3px"，默認(rèn)值為2px
? ? 3.2 內(nèi)邊距：單元格邊框與文字之間的距離:cellpadding="200px"
?
#5 細(xì)線表格
?細(xì)線表格的制作方式：
? ? ? ? 1、給table標(biāo)簽設(shè)置bgcolor
? ? ? ? 2、給tr標(biāo)簽設(shè)置bgcolor
? ? ? ? 3、給table標(biāo)簽設(shè)置cellspacing="1px"
?
? ? ? 注意：
? ? ? table、tr、td標(biāo)簽都支持bgcolor屬性
?
<table width="200px" height="200px" bgcolor="black" cellspacing="1px">
? ? <tr bgcolor="white">
? ? ? ? <td>姓名</td>
? ? ? ? <td>性別</td>
? ? ? ? <td>年齡</td>
? ? </tr>
?
? ? <tr bgcolor="white" >
? ? ? ? <td>Egon</td>
? ? ? ? <td>male</td>
? ? ? ? <td>18</td>
? ? </tr>
?
? ? <tr bgcolor="white">
? ? ? ? <td>ALex</td>
? ? ? ? <td>male</td>
? ? ? ? <td>73</td>
? ? </tr>
?
? ? <tr bgcolor="white">
? ? ? ? <td>Wxx</td>
? ? ? ? <td>female</td>
? ? ? ? <td>84</td>
? ? </tr>
</table>
?
#6 表格結(jié)構(gòu)
為了方便管理維護(hù)以及提升語義，我們將表格中存儲(chǔ)的數(shù)據(jù)分為四類：
a、表格的標(biāo)題:caption
? ? 特點(diǎn):相對(duì)于表格寬度自動(dòng)居中對(duì)齊
? ? 注意:
? ? ? ? 1.1 該標(biāo)簽一定要寫在table標(biāo)簽里，否則無效
? ? ? ? 1.2 caption一定要緊跟在table標(biāo)簽內(nèi)的第一個(gè)
?
b、表格的表頭信息:thead
? ? 特點(diǎn)：專門用來存儲(chǔ)每一列的標(biāo)題，只要將當(dāng)前列的標(biāo)題存儲(chǔ)在這個(gè)標(biāo)簽中就會(huì)自動(dòng)居中+加粗文字
?
c、表格的主體信息:tbody
? ? 注意：
? ? ? ? 3.1 如果沒有添加tbody，瀏覽器會(huì)自動(dòng)添加
? ? ? ? 3.2 如果指定了thread和tfoot，那么在修改整個(gè)表格的高度時(shí)，thead和tfoot有自己默認(rèn)的高度，不會(huì)隨著
? ? ? ? ? ? 表格的高度變化而變化
?
d、表尾信息:tfoot
?
<html>
<head>
? ? <meta charset="utf-8"/>
</head>
<body>
? ? <table bgcolor="black" border="1" width="300px" height="300px" cellspacing="1px">
?
? ? ? ? <caption>學(xué)員信息統(tǒng)計(jì)</caption>
? ? ? ? <thead>
? ? ? ? ? ? <tr bgcolor="white">
? ? ? ? ? ? ? ? <th>姓名</th>
? ? ? ? ? ? ? ? <th>性別</th>
? ? ? ? ? ? ? ? <th>年齡</th>
? ? ? ? ? ? </tr>
? ? ? ? </thead>
?
? ? ? ? <tbody>
? ? ? ? ? ? <tr bgcolor="white">
? ? ? ? ? ? ? ? <td>egon</td>
? ? ? ? ? ? ? ? <td>male</td>
? ? ? ? ? ? ? ? <td>18</td>
? ? ? ? ? ? </tr>
?
? ? ? ? ? ? <tr bgcolor="white">
? ? ? ? ? ? ? ? <td>egon</td>
? ? ? ? ? ? ? ? <td>male</td>
? ? ? ? ? ? ? ? <td>18</td>
? ? ? ? ? ? </tr>
?
? ? ? ? ? ? <tr bgcolor="white">
? ? ? ? ? ? ? ? <td>egon</td>
? ? ? ? ? ? ? ? <td>male</td>
? ? ? ? ? ? ? ? <td>18</td>
? ? ? ? ? ? </tr>
? ? ? ? </tbody>
?
? ? ? ? <tfoot>
? ? ? ? ? ? <tr bgcolor="white">
? ? ? ? ? ? ? ? <td>3</td>
? ? ? ? ? ? ? ? <td>3</td>
? ? ? ? ? ? ? ? <td>3</td>
? ? ? ? ? ? </tr>
? ? ? ? </tfoot>
? ? </table>
?
</body>
</html>
?
#6 單元格合并
a、水平向上的單元格colspan
? ? 可以給td標(biāo)簽添加一個(gè)colspan屬性，來把水平方向的單元格當(dāng)做多個(gè)單元格來看待
? ? <td colspan="2"></td>
?
b、垂直向上的單元格rowspan
? ? 可以給td標(biāo)簽設(shè)置一個(gè)rowspan屬性，來把垂直方向的的單元格當(dāng)成多個(gè)去看待
?
#注意注意注意:
1、由于把某一個(gè)單元格當(dāng)作了多個(gè)單元格來看待，所以就會(huì)多出一些單元格，所以需要?jiǎng)h掉一些單元格
2、一定要記住，單元格合并永遠(yuǎn)是向后或者向下合并，而不能向前或向上合并
?
#1 好處：代碼量少；代碼解耦合度高；擴(kuò)展性好
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <style>
? ? ? ? h1,p {
? ? ? ? ? ? color: pink;
? ? ? ? ? ? font-size: 24px;
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ? </style>
</head>
<body>
?
<h1>天凈沙·秋思</h1>
<p>錦瑟無端五十弦，一弦一柱思華年。</p>
<p>莊生曉夢(mèng)迷蝴蝶，望帝春心托杜鵑。</p>
<p>滄海月明珠有淚，藍(lán)田日暖玉生煙。</p>
<p>此情可待成追憶，只是當(dāng)時(shí)已惘然。</p>
</body>
</html>
?
#2 CSS語法
?
?
#3 CSS的四種引入方式
a、行內(nèi)式（不推薦使用，沒有體現(xiàn)CSS的優(yōu)勢(shì)）
<p >Egon是一個(gè)非常了不起的人</p>
?
b、嵌入式
<head>
? ? <style>
? ? ? ? p {
? ? ? ? ? ? color: red;
? ? ? ? ? ? font-size: 50px;
? ? ? ? ? ? text-align: center
? ? ? ? }
? ? </style>
</head>
?
?
c、外部樣式表之導(dǎo)入式（不推薦使用，網(wǎng)絡(luò)差的情況，效果會(huì)延遲，導(dǎo)致用戶體驗(yàn)不好；先加載html，再導(dǎo)入css）
<head>
? ? <style>
? ? ? ? /*形式一：*/
? ? ? ? /*@import "css/mystyle.css";*/
? ? ? ? /*形式二：*/
? ? ? ? @import url("css/mystyle.css");
? ? </style>
</head>
?
d、外部樣式表之鏈接式（推薦使用；企業(yè)開發(fā)中使用這種方式；直接將文件拖進(jìn)html）
<head>
? ? <link rel="stylesheet" href="css/mystyle.css"> ? #默認(rèn)type="text/css"
</head>
?
#4 CSS注釋
/*這是注釋*/
?
#1、作用：根據(jù)指定的id名稱，在當(dāng)前界面中找到對(duì)應(yīng)的唯一一個(gè)的標(biāo)簽，然后設(shè)置屬性
?
#2、格式
id名稱 {
? ? 屬性：值;
}
?
#3、注意點(diǎn)：
a、在企業(yè)開發(fā)中如果僅僅只是為了設(shè)置樣式，通常不會(huì)使用id，在前端開發(fā)中id通常是留給js使用的
b、每個(gè)標(biāo)簽都可以設(shè)置唯一一個(gè)id，id就相當(dāng)于人/標(biāo)簽的身份證，因此在同一界面內(nèi)id絕不能重復(fù)
c、引用id一定要加#
d、id的命名只能由字符、數(shù)字、下劃線組成，且不能以數(shù)字開頭，更不能是html關(guān)鍵字如p，a，img等?
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
? ? <title>id選擇器</title>
? ? <style>
? ? ? ? #p1 {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? #p2 {
? ? ? ? ? ? color: green;
? ? ? ? }
? ? ? ? #p3 {
? ? ? ? ? ? color: blue;
? ? ? ? }
? ? </style>
</head>
?
<body>
<p id="p1">大多數(shù)人的帥，都是浮在表面的，是外表的帥</p>
<p id="p2">而EGON，不僅具備外表帥，內(nèi)心更是帥了一逼</p>
<p id="p3">EGON就是我，我就是EGON</p>
</body>
?
</html>
?
#1、作用：根據(jù)指定的類名稱，在當(dāng)前界面中找到對(duì)應(yīng)的標(biāo)簽，然后設(shè)置屬性
?
#2、格式：
.類名稱 {
? ? 屬性：值;
}
?
#3、注意點(diǎn)：
1、類名就是專門用來給某個(gè)特定的標(biāo)簽設(shè)置樣式的
2、每個(gè)標(biāo)簽都可以設(shè)置一個(gè)或多個(gè)class（空格分隔），class就相當(dāng)于人/標(biāo)簽的名稱，因此同一界面內(nèi)class可以重復(fù)
3、引用class一定要加點(diǎn).
4、類名的命名規(guī)則與id的命名規(guī)則相同
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
? ? <title>id選擇器</title>
? ? <style>
? ? ? ? .p1 {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? .p2 {
? ? ? ? ? ? font-size: 50px;
? ? ? ? }
? ? ? ? .p3 {
? ? ? ? ? ? text-decoration: underline;
? ? ? ? }
?
? ? </style>
</head>
?
<body>
<p class="p1 p2">第一行內(nèi)容</p>
<p class="p2 p3">第二行內(nèi)容</p>
<p class="p1 p3">第三行內(nèi)容</p>
</body>
?
</html>
?
小tip：輸入‘#000’? --> 左側(cè)點(diǎn)擊選擇顏色?
?
#1、作用：根據(jù)指定的標(biāo)簽名稱，在當(dāng)前界面中找到所有該名稱的標(biāo)簽，然后設(shè)置屬性
?
#2、格式：
標(biāo)簽名稱 {
? ? 屬性：值;
}
?
#3、注意點(diǎn)：
1、只要是HTML的標(biāo)簽都能當(dāng)做標(biāo)簽選擇器
2、標(biāo)簽選擇器選中的是當(dāng)前界面中的所有標(biāo)簽,而不能單獨(dú)選中某一標(biāo)簽
3、標(biāo)簽選擇器，無論嵌套多少層都能選中
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>標(biāo)簽選擇器</title>
?
? ? <style type="text/css">
? ? ? ? p {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <p>EGON美麗的外表下其實(shí)隱藏著一顆騷動(dòng)的心</p>
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>這顆心叫做七巧玲瓏心，男人吃了會(huì)流淚，女人吃了會(huì)懷孕</p>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? ? </li>
? ? </ul>
?
</body>
</html>
?
#1、作用：選擇所有標(biāo)簽
?
#2、格式：
* {
? ? 屬性：值；
}
?
#3、注意點(diǎn)：
1、在企業(yè)開發(fā)中一般不會(huì)使用通配符選擇器：由于通配符選擇器是設(shè)置界面上所有的標(biāo)簽的屬性，所以在設(shè)置之前會(huì)遍歷所有的標(biāo)簽，如果當(dāng)前界面上的標(biāo)簽比較多，那么性能就會(huì)比較差。
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>通配符選擇器</title>
?
? ? <style type="text/css">
?
? ? ? ? * {
? ? ? ? ? ? color: red;
? ? ? ? }
?
? ? </style>
</head>
<body>
? ? <h1 >我是標(biāo)題</h1>
? ? <p >我是段落</p>
? ? <a href="#">我是超鏈接</a>
</body>
</html>
?
#1、作用：找到指定標(biāo)簽的所有后代（兒子，孫子，重孫子、、、）標(biāo)簽，設(shè)置屬性
?
#2、格式：
? ? 標(biāo)簽名1 xxx {
? ? ? ? 屬性：值;
? ? }
?
#3、注意：
a、后代選擇器必須用空格隔開
b、后代不僅僅是兒子，也包括孫子、重孫子
c、后代選擇器不僅僅可以使用標(biāo)簽名稱，還可以使用其他選擇器比如id或class
d、后代選擇器可以通過空格一直延續(xù)下去
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? div p {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? #id1 li p {
? ? ? ? ? ? font-size: 50px;
? ? ? ? }
?
? ? ? ? div ul li a {
? ? ? ? ? ? font-size: 100px;
? ? ? ? ? ? color: green;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <p>我是body下的段落1</p>
? ? <!--如果想為div內(nèi)所有標(biāo)簽都設(shè)置屬性，無論用id還是class都不合理，因?yàn)楫?dāng)div內(nèi)的標(biāo)簽過多，我們無法加那么多id或者class-->
? ? <div id="id1" class="part1">
? ? ? ? <p>我是div下的段落1</p>
? ? ? ? <p>我是div下的段落2</p>
? ? ? ? <ul>
? ? ? ? ? ? <li class="aaa">
? ? ? ? ? ? ? ? <p class="ccc">我是ul>li下的段落1</p>
? ? ? ? ? ? ? ? <p class="ddd">我是ul>li下的段落</p>
? ? ? ? ? ? ? ? <a href="">點(diǎn)我啊1</a>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <a href="#">點(diǎn)我啊2</a>
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? </div>
? ? <p>我是body下的段落2</p>
</body>
</html>
?
#1、作用：找到制定標(biāo)簽的所有特定的直接子元素，然后設(shè)置屬性
?
#2、格式：
? ? 標(biāo)簽名1>標(biāo)簽名2 {
? ? ? ? 屬性：值;
? ? }
?
先找到名稱叫做"標(biāo)簽名稱1"的標(biāo)簽，然后在這個(gè)標(biāo)簽中查找所有直接子元素名稱叫做"標(biāo)簽名稱2"的元素
?
#3、注意：
a、子元素選擇器之間需要用>符號(hào)鏈接，并且不能有空格
? ? 比如div >p會(huì)找div標(biāo)簽的所有后代標(biāo)簽，標(biāo)簽名為">p"
b、子元素選擇器只會(huì)查找兒子，不會(huì)查找其他嵌套的標(biāo)簽
c、子元素選擇器不僅可以用標(biāo)簽名稱，還可以使用其他選擇器,比如id或class
d、子元素選擇器可以通過>符號(hào)一直延續(xù)下去
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? body>p {
? ? ? ? ? ? color: green;
? ? ? ? }
?
? ? ? ? div>p {
? ? ? ? ? ? color: red;
? ? ? ? }
?
? ? ? ? .aaa>a {
? ? ? ? ? ? font-size: 100px;
? ? ? ? }
?
? ? ? ? div>ul>li>.ddd {
? ? ? ? ? ? color: blue;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <p>我是body下的段落1</p>
? ? <!--如果想為div內(nèi)所有標(biāo)簽都設(shè)置屬性，無論用id還是class都不合理，因?yàn)楫?dāng)div內(nèi)的標(biāo)簽過多，我們無法加那么多id或者class-->
? ? <div id="id1" class="part1">
? ? ? ? <p>我是div下的段落1</p>
? ? ? ? <p>我是div下的段落2</p>
? ? ? ? <ul>
? ? ? ? ? ? <li class="aaa">
? ? ? ? ? ? ? ? <p class="ccc">我是ul>li下的段落1</p>
? ? ? ? ? ? ? ? <p class="ddd">我是ul>li下的段落2</p>
? ? ? ? ? ? ? ? <a href="">點(diǎn)我啊1</a>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <a href="#">點(diǎn)我啊2</a>
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? </div>
? ? <p>我是body下的段落2</p>
</body>
</html>
?
#1、作用：給所有滿足條件的標(biāo)簽設(shè)置屬性
?
#2、格式：
? ? 選擇器1,選擇器2 {
? ? ? ? 屬性：值;
? ? }
?
#3、注意：
1、選擇器與選擇器之間必須用逗號(hào)來鏈接
2、選擇器可以使用標(biāo)簽名稱、id、class
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? .part1,h1,a {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <h1>哈哈啊</h1>
? ? <p class="part1">我是段落</p>
? ? <p id="p1">我是段落</p>
? ? <p class="part1">我是段落</p>
? ? <a href="#">我是我</a>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
?
</body>
</html>
?
#1、作用：給所有選擇器選中的標(biāo)簽中，相交的那部分標(biāo)簽設(shè)置屬性
?
#2、格式：
? ? 選擇器1選擇器2 {
? ? ? ? 屬性：值;
? ? }
?
#3、注意：
1、選擇器與選擇器之間沒有任何鏈接符號(hào)
2、選擇器可以使用標(biāo)簽名稱、id、class
3、交集選擇器在企業(yè)開發(fā)中并不多見，了解即可，因?yàn)?#xff1a;p.part1 完全可以用.part1取代
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <style>
? ? ? ? a.part2 {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <h1>哈哈啊</h1>
? ? <p class="part1">我是段落1</p>
? ? <p class="part2">我是段落2</p>
? ? <p class="part1">我是段落3</p>
? ? <a href="#" class="part2">a標(biāo)簽1</a>
? ? <a href="#">a標(biāo)簽2</a>
? ? <a href="#">a標(biāo)簽3</a>
? ? <a href="#">a標(biāo)簽4</a>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
</body>
</html>
?
# 同級(jí)別
:first-child? ? p:first-child? ? 同級(jí)別的第一個(gè)
:last-child? ? p:last-child? ? 同級(jí)別的最后一個(gè)
:nth-child(n)? ? ? ? ? ? ? ? ? ? 同級(jí)別的第n個(gè)
:nth-last-child(n)? ? ? ? ? ? 同級(jí)別的倒數(shù)第n個(gè)
?
#1、同級(jí)別的第一個(gè)
#1.1 示范一
p:first-child {?
? ? color: red;
}
代表：同級(jí)別的第一個(gè)，并且第一個(gè)要求是一個(gè)p標(biāo)簽
?
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
? ? <p>我是段落6</p>
</div>
?
這樣的話第一個(gè)p和div中的第一個(gè)p都變成紅色，
?
#1.2 示范二
p:first-child {
? ? color: red;
}
代表：同級(jí)別的第一個(gè)，并且第一個(gè)要求是一個(gè)p標(biāo)簽
?
<h1>w我是標(biāo)題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
? ? <p>我是段落6</p>
</div>
?
這樣的話只有div中的第一個(gè)p變紅，因?yàn)樵谟性赿iv內(nèi)同一級(jí)別的第一個(gè)才是p
?
注意點(diǎn)：
? ? :fist-child就是第一個(gè)孩子，不區(qū)分類型
?
#2、同級(jí)別的最后一個(gè)
p:last-child {
? ? color: red;
}
代表：同級(jí)別的最后一個(gè)，并且最后一個(gè)要求是一個(gè)p標(biāo)簽
?
<h1>我是標(biāo)題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
? ? <p>我是段落6</p>
</div>
<p>我是段落7</p>
這樣的話只有6跟7都變紅
?
#3、同級(jí)別的第n個(gè)
p:nth-child(3) {
? ? color: red;
}
代表：同級(jí)別的第3個(gè)，并且第3個(gè)要求是一個(gè)p標(biāo)簽
?
<h1>我是標(biāo)題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
? ? <p>我是段落6.1</p>
? ? <p>我是段落6.2</p>
? ? <h1>我是標(biāo)題</h1>
</div>
<p>我是段落7</p>
這樣的話只有“我是段落2”變紅
?
#4、同級(jí)別的倒數(shù)第n個(gè)
p:nth-last-child(3) {
? ? color: red;
}
代表：同級(jí)別的倒數(shù)第3個(gè)，并且第3個(gè)要求是一個(gè)p標(biāo)簽
<h1>我是標(biāo)題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
? ? <p>我是段落6.1</p>
? ? <p>我是段落6.2</p>
? ? <h1>我是標(biāo)題</h1>
</div>
<p>我是段落7</p>
這樣的話只有“我是段落6.1”和“我是段落5”被選中
?
:first-of-type? ? ? ? ? ? ? ? ? ? 同級(jí)別同類型的第一個(gè)
:last-of-type? ? ? ? ? ? ? ? ? ? 同級(jí)別同類型的最后一個(gè)
:nth-of-type(n)? ? ? ? ? ? ? ? ? ? 同級(jí)別同類型的第n個(gè)
:nth-last-of-type(n)? ? ? ? ? ? 同級(jí)別同類型的倒數(shù)第n個(gè)
?
<h1>我是標(biāo)題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
? ? <p>我是段落6.1</p>
? ? <p>我是段落6.2</p>
? ? <h1>我是標(biāo)題</h1>
</div>
<p>我是段落7</p>
#1、同級(jí)別同類型的第一個(gè)
p:first-of-type {
? ? color: red;
}
“我是段落1”和“我是段落6.1”被選中
?
#2、同級(jí)別同類型的最后一個(gè)
p:last-of-type {
? ? color: red;
}
“我是段落7”和“我是段落6.2”被選中
?
#3、同級(jí)別同類型的第n個(gè)
p:nth-of-type(2) {
? ? color: red;
}
“我是段落2”和“我是段落6.2”被選中
?
#4、同級(jí)別同類型的倒數(shù)第n個(gè)
p:nth-last-of-type(2) {
? ? color: red;
}
“我是段落5”和“我是段落6.1”被選中
?
:only-of-type? ? ? ? ? ? ? ? ? ? 同類型的唯一一個(gè)
:only-child ? ? ? ? ? ? ? ? ? ? ? ? 同級(jí)別的唯一一個(gè)
?
#1、同類型的唯一一個(gè)
p:only-of-type {
? ? color: red;
}
?
<h1>我是標(biāo)題</h1>
<div>
? ? <p>我是段落6.1</p>
? ? <p>我是段落6.2</p>
? ? <h1>我是標(biāo)題</h1>
</div>
<p>我是段落7</p>
?
“我是段落7“被選中
?
#2、同級(jí)別的唯一一個(gè)
p:only-child {
? ? color: red;
}
?
<h1>我是標(biāo)題</h1>
<div>
? ? <p>我是段落6.1</p>
</div>
<p>我是段落7</p>
“我是段落6.1”被選中
?
#1、作用：給指定選擇器后面緊跟的那個(gè)選擇器選中的標(biāo)簽設(shè)置屬性
?
#2、格式
選擇器1+選擇器2 {
? ? 屬性：值;
}
?
#3、注意點(diǎn)：
1、相鄰兄弟選擇器必須通過+號(hào)鏈接
2、相鄰兄弟選擇器只能選中你緊跟其后的那個(gè)標(biāo)簽，不能選中被隔開的標(biāo)簽
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? /*相鄰兄弟選擇器*/
? ? ? ? h1+p {
?? ? ? ? ? color: red;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <h1>我是標(biāo)題1</h1>
? ? <a href="">有了這個(gè)標(biāo)簽，p就不再是緊跟h1標(biāo)簽了,但通用兄弟選擇器仍然能選中</a>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <h1>我是標(biāo)題2</h1>
? ? <p>我是段落</p>
?
</body>
</html>
?
#1、作用：給指定選擇器后面的所有選擇器中的所有標(biāo)簽設(shè)置屬性
?
#2、格式：
選擇器1~選擇器2 {
? ? 屬性：值;
}
?
#3、注意點(diǎn)：
1、通用兄弟選擇器必須用~來鏈接
2、通用兄弟選擇器選中的是指選擇器后面的某個(gè)選擇器選中的所有標(biāo)簽
無論有沒有被隔開，都可以被選中
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? /*通用兄弟選擇器*/
? ? ? ? h1~p {
?? ? ? ? ? color: red;
? ? ? ? }
?
? ? </style>
</head>
<body>
? ? <h1>我是標(biāo)題1</h1>
? ? <a href="">有了這個(gè)標(biāo)簽，p就不再是緊跟h1標(biāo)簽了,但通用兄弟選擇器仍然能選中</a>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <h1>我是標(biāo)題2</h1>
? ? <p>我是段落</p>
?
</body>
</html>
?
?
#1、作用：根據(jù)指定的屬性名稱找到對(duì)應(yīng)的標(biāo)簽，然后設(shè)置屬性
?? ? ? 該選擇器，最常用于input標(biāo)簽
?
#2、格式與具體用法：
? ? [屬性名]
? ? 其他選擇器[屬性名]
? ? [屬性名=值]
? ? [屬性名^=值]
? ? [屬性名$=值]
? ? [屬性名*=值]
?
?
? ? 例1：找到所有包含id屬性的標(biāo)簽
? ? ? ? [id]
?? ?
? ? 例2：找到所有包含id屬性的p標(biāo)簽
? ? ? ? p[id]
?? ?
? ? 例3：找到所有class屬性值為part1的p標(biāo)簽
? ? ? ? p[class="part1"]
?? ?
? ? 例4：找到所有href屬性值以https開頭的a標(biāo)簽
? ? ? ? a[href^="https"]
?? ? ? ?
? ? 例5：找到所有src屬性值以png結(jié)果的img標(biāo)簽
? ? ? ? img[src$="png"]
?? ? ? ?
? ? 例6：找到所有class屬性值中包含part2的標(biāo)簽
? ? ? ? [class*="part"]?
?
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? [id] {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? p[id] {
? ? ? ? ? ? font-size: 30px;
? ? ? ? }
? ? ? ? p[class="part1"] {
? ? ? ? ? ? color: green;
? ? ? ? }
? ? ? ? a[href^="https"] {
? ? ? ? ? ? font-size: 50px;
? ? ? ? }
? ? ? ? img[src$="png"] {
? ? ? ? ? ? width: 100px;
? ? ? ? }
? ? ? ? [class*="part"] {
? ? ? ? ? ? text-decoration: line-through;
? ? ? ? }
?
? ? </style>
</head>
<body>
? ? <h1 id="id1">哈哈啊</h1>
? ? <p id="id2">我是段落</p>
? ? <p class="part1">我是段落</p>
? ? <p class="xxx part2 yyy">我是段落</p>
? ? <a href="#">我是我</a>
? ? <a href="http://www.baidu.com">http://www.baidu.com</a>
? ? <a href="https://www.baidu.com">https://www.baidu.com</a>
? ? <img src="1.png" >
? ? <img src="2.jpg" >
? ? <p>我是段落</p>
? ? <p>我是段落</p>
?
</body>
</html>
?
?
#1、作用：常用的幾種偽類選擇器。
?
#1.1 沒有訪問的超鏈接a標(biāo)簽樣式：
a:link {
? color: blue;
}
?
#1.2 訪問過的超鏈接a標(biāo)簽樣式：
a:visited {
? color: gray;
}
?
#1.3 鼠標(biāo)懸浮在元素上應(yīng)用樣式：
a:hover {
? background-color: #eee;?
}
?
#1.4 鼠標(biāo)點(diǎn)擊瞬間的樣式：
a:active {
? color: green;
}
?
#1.5 input輸入框獲取焦點(diǎn)時(shí)樣式：
input:focus {
? outline: none;
? background-color: #eee;
}
?
#2 注意：
1 a標(biāo)簽的偽類選擇器可以單獨(dú)出現(xiàn)，也可以一起出現(xiàn)
2 a標(biāo)簽的偽類選擇器如果一起出現(xiàn)，有嚴(yán)格的順序要求，否則失效
? ? link，visited，hover，active
3 hover是所有其他標(biāo)簽都可以使用的
4 focus只給input標(biāo)簽使用
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? a:link {
? ? ? ? ? ? color: #cccccc;
? ? ? ? }
? ? ? ? a:visited {
? ? ? ? ? ? color: #55BBBB;
? ? ? ? }
? ? ? ? a:hover {
? ? ? ? ? ? color: green;
? ? ? ? }
? ? ? ? a:active {
? ? ? ? ? ? color: red;
? ? ? ? }
?
? ? ? ? input:hover {
? ? ? ? ? ? outline: none;
? ? ? ? ? ? background-color: #cccccc;
?
? ? ? ? }
?
? ? </style>
</head>
<body>
<a href="https://www.baidu.com/a/b/c/d.html">點(diǎn)擊我</a>
<input type="text">
</body>
</html>
?
#1、常用的偽元素。
#1.1 first-letter：雜志類文章首字母樣式調(diào)整
例如：
p:first-letter {
? font-size: 48px;
}
?
#1.2 before
用于在元素的內(nèi)容前面插入新內(nèi)容。
例如：
?
p:before {
? content: "*";
? color: red;
}
在所有p標(biāo)簽的內(nèi)容前面加上一個(gè)紅色的*。
?
#1.3 after
用于在元素的內(nèi)容后面插入新內(nèi)容。
例如：
?
p:after {
? content: "?";
? color: red;
}
在所有p標(biāo)簽的內(nèi)容后面加上一個(gè)藍(lán)色的?。
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? p:first-letter {
? ? ? ? ? ? font-size: 50px;
? ? ? ? }
? ? ? ? /*兩個(gè)冒號(hào)與一個(gè)是一樣的，老版本用的是一個(gè)冒號(hào)，考慮到兼容性推薦使用一個(gè)冒號(hào)*/
? ? ? ? a::after {
? ? ? ? ? ? content: "?";
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? a:before {
? ? ? ? ? ? content: "-";
? ? ? ? ? ? color: green;
? ? ? ? }
?
? ? </style>
</head>
<body>
<p>英雄不問出處，流氓不論歲數(shù)</p>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
</body>
</html>
?
?
#1、定義：給某一個(gè)元素設(shè)置一些屬性，該元素的后代也可以使用，這個(gè)我們就稱之為繼承性
?
#2、注意：
? ? 1、只有以color、font-、text-、line-開頭的屬性才可以繼承
? ? 2、a標(biāo)簽的文字顏色和下劃線是不能繼承別人的
? ? 3、h標(biāo)簽的文字大小是不能繼承別人的，會(huì)變大，但是會(huì)在原來字體大小的基礎(chǔ)上變大
?? ?
? ? ps:打開瀏覽器審查元素可以看到一些inherited from。。。的屬性
#3、應(yīng)用場(chǎng)景：
? ? 通常基于繼承性統(tǒng)一設(shè)置網(wǎng)頁的文字顏色，字體，文字大小等樣式
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
?
? ? ? ? div {
? ? ? ? ? ? color: red;
? ? ? ? ? ? font-size: 50px;
? ? ? ? }
?
?
? ? </style>
</head>
<body>
?
<div>
? ? <h1>我是標(biāo)題</h1>
? ? <p><a href="#">偶的博愛</a></p>
? ? <ul>
? ? ? ? <li>導(dǎo)航1</li>
? ? ? ? <li>導(dǎo)航2</li>
? ? ? ? <li>導(dǎo)航2</li>
? ? </ul>
</div>
?
<div>
? ? <div>
? ? ? ? <p>aaaa</p>
? ? </div>
? ? <div>
? ? ? ? <p>bbbb</p>
? ? </div>
</div>
?
?
</body>
</html>
?
?
#1、定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理沖突的一種能力，即如果有多個(gè)選擇器選中了同一個(gè)標(biāo)簽?zāi)敲磿?huì)有覆蓋效果
?
#2、注意：
1、層疊性只有在多個(gè)選擇器選中了同一個(gè)標(biāo)簽，然后設(shè)置了相同的屬性，
才會(huì)發(fā)生層疊性
ps：通過谷歌瀏覽器可以查看到，一些屬性被劃掉了
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
?
? ? ? ? p {
? ? ? ? ? ? color: red;
? ? ? ? }
?
? ? ? ? .ppp {
? ? ? ? ? ? color: green;
? ? ? ? }
?
? ? </style>
</head>
<body>
?
<p class="ppp">我是段落</p>
?
?
</body>
</html>
?
#1、定義：當(dāng)多個(gè)選擇器選中同一個(gè)標(biāo)簽，并且給同一個(gè)標(biāo)簽設(shè)置相同的屬性時(shí)，如何層疊就由優(yōu)先級(jí)來確定
?
#2、優(yōu)先級(jí)
? ? 整體優(yōu)先級(jí)從高到底：行內(nèi)樣式>嵌入樣式>外部樣式
?
? ? 行內(nèi)樣式并不推薦使用，所以我們以嵌入為例來介紹優(yōu)先級(jí)
?
1、大前提：直接選中?>?間接選中(即繼承而來的)
#1、以下為直接選中
? ? <style type="text/css">
? ? ? ? #id1 {
? ? ? ? ? ? color: red;
? ? ? ? }
?
? ? ? ? .ppp {
? ? ? ? ? ? color: green;
? ? ? ? }
?
? ? ? ? p {
? ? ? ? ? ? color: blue;
? ? ? ? }
? ? </style>
?
#2、以下為間接選中
? ? <style type="text/css">
? ? ? ? ul {
? ? ? ? ? ? color: yellow;
? ? ? ? }
? ? </style>
?
?
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <p id="id1" class="ppp">我是span</p>
? ? ? ? </li>
? ? </ul>
?
?
2、如果都是間接選中，那么誰離目標(biāo)標(biāo)簽比較近，就聽誰的
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? /*離目標(biāo)近*/
? ? ? ? li {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? /*離目標(biāo)遠(yuǎn)*/
? ? ? ? ul {
? ? ? ? ? ? color: yellow;
? ? ? ? }
?
? ? </style>
</head>
<body>
?
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <p id="id1" class="ppp">我是span</p>
? ? ? ? </li>
? ? </ul>
</body>
</html>
?
3、如果都是直接選中，并且都是同類型的選擇器，那么就是誰寫的在后面就聽誰的
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? p {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? /*同樣都是標(biāo)簽選擇器，誰寫在后面誰生效*/
? ? ? ? p {
? ? ? ? ? ? color: yellow;
? ? ? ? }
?
? ? </style>
</head>
<body>
?
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <p id="id1" class="ppp">我是span</p>
? ? ? ? </li>
? ? </ul>
</body>
</html>
?
4、如果都是直接選中，并且是不同類型的選擇器，那么就會(huì)按照選擇器的優(yōu)先級(jí)來層疊
? ? id >?類?>?標(biāo)簽?>?通配符(也算直接選中)?>?繼承?>?瀏覽器默認(rèn)（即沒有設(shè)置任何屬性）
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? /*打開瀏覽器依次去掉優(yōu)先級(jí)高的來進(jìn)行驗(yàn)證*/
? ? ? ? #id1 {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? .ppp {
? ? ? ? ? ? color: green;
? ? ? ? }
? ? ? ? p {
? ? ? ? ? ? color: blue;
? ? ? ? }
? ? ? ? * {
? ? ? ? ? ? color: yellow;
? ? ? ? }
? ? ? ? li {
? ? ? ? ? ? color: #7e1487;
? ? ? ? }
?? ? ? ?
? ? </style>
</head>
<body>
?
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <p id="id1" class="ppp">我是span</p>
? ? ? ? </li>
? ? </ul>
</body>
</html>
?
5、優(yōu)先級(jí)之!important
#1、作用：還有一種不講道理的!import方式來強(qiáng)制指定的屬性的優(yōu)先級(jí)提升為最高，但是不推薦使用。因?yàn)榇罅渴褂?import的代碼是無法維護(hù)的。
??
#2、注意：
? ? 1、!important只能用于直接選中，不能用于間接選中
? ? 2、!important只能用于提升被指定的屬性的優(yōu)先級(jí)，其他屬性的優(yōu)先級(jí)不會(huì)被提升
? ? 3、!important必須寫在屬性值分號(hào)的前面
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? /*打開瀏覽器依次去掉優(yōu)先級(jí)高的來進(jìn)行驗(yàn)證*/
? ? ? ? #id1 {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? .ppp {
? ? ? ? ? ? color: green;
? ? ? ? }
? ? ? ? p {
? ? ? ? ? ? color: blue;
? ? ? ? }
? ? ? ? * {
? ? ? ? ? ? color: yellow !important;
? ? ? ? }
? ? ? ? li {
? ? ? ? ? ? color: #7e1487;
? ? ? ? }
?
? ? </style>
</head>
<body>
?
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <p id="id1" class="ppp">我是span</p>
? ? ? ? </li>
? ? </ul>
</body>
</html>
?
6、優(yōu)先級(jí)之權(quán)重計(jì)算
?
#1、強(qiáng)調(diào)
如果都是直接選中，并且混雜了一系列其他的選擇器一起使用時(shí)，則需要通過計(jì)算機(jī)權(quán)重來判定優(yōu)先級(jí)
?
#2、計(jì)算方式
#1、id數(shù)多的優(yōu)先級(jí)高
#2、id數(shù)相同，則判定類數(shù)多的優(yōu)先級(jí)高
#3、id數(shù)、class數(shù)均相同，則判定標(biāo)簽數(shù)多的優(yōu)先級(jí)高
#4、若id數(shù)、class數(shù)、標(biāo)簽數(shù)均相同，則無需繼續(xù)往下計(jì)算了，誰寫在后面誰的優(yōu)先級(jí)高
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? #id1 #id2 #id3 .ppp{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? #id2 #id3.aaa p{
? ? ? ? ? ? color: purple;
? ? ? ? }
?
? ? ? ? #id1.ccc>.bbb>.aaa>p {
? ? ? ? ? ? color: pink;
? ? ? ? }
?
? ? ? ? #id1 .aaa .ppp {
? ? ? ? ? ? color: green;
? ? ? ? }
?
? ? ? ? #id2 .aaa p {
? ? ? ? ? ? color: yellow;
? ? ? ? }
?
? ? ? ? div ul li p {
? ? ? ? ? ? color: blue;
? ? ? ? }
?
? ? ? ? div ul p {
? ? ? ? ? ? color: cyan;
? ? ? ? }
?
? ? </style>
</head>
<body>
? ? <div id="id1" class="ccc">
? ? ? ? <ul id="id2" class="bbb">
? ? ? ? ? ? <li id="id3" class="aaa">
? ? ? ? ? ? ? ? <p class="ppp">我是段落</p>
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? </div>
</body>
</html>
總結(jié)
- 上一篇： 【工业机器人】工业机器人最全面基础知识科
- 下一篇： 软件测试岗位考核指标,(最新整理)测试人