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é)
 
                            
                        - 上一篇: 【工业机器人】工业机器人最全面基础知识科
- 下一篇: 软件测试岗位考核指标,(最新整理)测试人
