CSS入門(二)
[TOC]
一飒炎、組合選擇器
每個(gè)選擇器位可以是任意基礎(chǔ)選擇器或選擇器組合
1.群組選擇器
- 可以一次性控制多個(gè)選擇器
- 選擇器之間用逗號(hào)(,)隔開
div,.d1,#div{
color:red;
}
2.子代(后代)選擇器
- 一次性控制一個(gè)選擇器(邏輯最后的那個(gè)選擇器)，前置位的選擇器是修飾性選擇器
- 子代選擇器必須為一級(jí)父子關(guān)系，后代選擇器可以為一級(jí)沟使，也可以多級(jí)父子嵌套關(guān)系
子代選擇器用>連接
body>div{
color:red;
}
注：控制body下的div選擇器
后代選擇器用空格連接
div .d2{
color:red;
}
注：控制div下只要有d2的選擇器
3.相鄰(兄弟)選擇器
- 一次性控制一個(gè)選擇器(邏輯最后的那個(gè)選擇器)愚争，前置位的選擇器是修飾性選擇器
- 相鄰選擇器必須為直接相鄰關(guān)系，兄弟選擇器可以為直接相鄰或間接相鄰關(guān)系
相鄰選擇器用+連接
.d11+.d22{
color:red;
}
注：控制的是d22選擇器
兄弟選擇器用~連接
.d11~.d33{
color:yellow;
}
注：控制的是d33選擇器
4.交集選擇器
- 選擇器之間沒有任何的連接符
- 了解即可
div.s{
color: yellow;
}
注：既是div選擇器又是s選擇器
html：
<div class="s">這是交集選擇器</div>
5.多類名選擇器
- 一次性控制一個(gè)選擇器(邏輯最后的那個(gè)選擇器)访敌，前置位的選擇器是修飾性選擇器
- 只是為了更精確
.d1.d2{
color: tan;
}
.d1.d2.d3{
color: #123
}
二凉敲、組合選擇器的優(yōu)先級(jí)
1.同目錄結(jié)構(gòu)下
-
子代與后代優(yōu)先級(jí)相同
例子：body>div == body div -
相鄰與兄弟優(yōu)先級(jí)相同
例子：div+span == div~span
2.不同目錄下
根據(jù)選擇器的權(quán)值進(jìn)行比較，權(quán)值為標(biāo)簽權(quán)重之和
| 選擇器 | 權(quán)重 |
|---|---|
| 通配(*) | 1 |
| 標(biāo)簽(div) | 10 |
| 類寺旺、屬性(class) | 100 |
| id | 1000 |
| !import | 10000 |
注：只有控制的是同一目標(biāo)才具有可比性
- 權(quán)值比較時(shí)爷抓，關(guān)心的是值的大小，不關(guān)心位置與具體選擇器名
- id永遠(yuǎn)比class大阻塑，class永遠(yuǎn)比標(biāo)簽大蓝撇。
/*10*/
div{
color: red;
}
/*20*/
div div{
color: yellow;
}
.d2{
color: blue;
}
/*.d2抵消，剩10*/
div .d2{
color: orange;
}
/*等價(jià)與div .d2,權(quán)值相同陈莽，位置決定*/
.d1 div{
color: pink;
}
/*又多10*/
div .d1 div{
color: tan;
}
/*不具有可比性*/
div .d1 >div{
color: green;
}
/*高于一切class及標(biāo)簽*/
#dd1 div {
color: #000;
}
三渤昌、屬性選擇器
屬性選擇器的權(quán)值 == class選擇器的權(quán)重
有屬性class的所有標(biāo)簽
[class]{
color: orange;
}
/*有屬性class且值為d2的所有標(biāo)簽(值不影響權(quán)重)*/
[class="d2"]{
color: pink;
}
/*是div且class="d2"，增加了權(quán)重*/
div[class="d2"]{
color: blue;
}
子串匹配屬性選擇器
模糊搜索
[calss ^= 'he']{
color: yellow;
}
[calss $= 'ld']{
color: tan;
}
[class *= 'ow']{
color: cyan;
}
- [attr]：匹配擁有attr屬性的標(biāo)簽
- [attr=val]：匹配擁有attr屬性走搁，屬性值為val的標(biāo)簽
- [attr^=val]：匹配擁有attr屬性独柑，屬性值以val開頭的標(biāo)簽
- [attr$=val]：匹配擁有attr屬性，屬性值以val結(jié)尾的標(biāo)簽
- [attr*=val]：匹配擁有attr屬性私植，屬性值包含val的標(biāo)簽
四群嗤、盒模型
- 廣義：文檔中所有功能性及內(nèi)容性標(biāo)簽，及文檔中所有顯示性標(biāo)簽
- 狹義：文檔中以塊級(jí)形式存在的標(biāo)簽
盒模型由四個(gè)成員組成：margin+border+padding+content
- 四個(gè)成員均有自身獨(dú)立顯示區(qū)域兵琳，相互之間不影響(視覺上感覺有影響)
- margin(外邊距),padding(內(nèi)邊距)狂秘，他們兩個(gè)負(fù)責(zé)控制布局
- border控制邊框
- content控制內(nèi)容
塊級(jí)元素和內(nèi)聯(lián)元素
塊級(jí)元素：
- 總是在新行上開始，占據(jù)一整行躯肌；
- 高度者春，行高以及外邊距和內(nèi)邊距都可控制；
- 寬度缺省是它的容器的100%清女，除非設(shè)定一個(gè)寬度
- 它可以容納內(nèi)聯(lián)元素和其他塊元素钱烟。
內(nèi)聯(lián)元素：
- 和其他元素都在一行上；
- 高，行高及外邊距和內(nèi)邊距部分可改變拴袭；
- 寬度只與內(nèi)容有關(guān)读第；
- 行內(nèi)元素只能容納文本或者其他行內(nèi)元素。
- 外邊界只能對(duì)左右起作用拥刻，內(nèi)邊距都起作用
display:顯示方式
- 塊：block
- 內(nèi)聯(lián)：inline
- 內(nèi)聯(lián)塊：inline-block
1.content
- 通過設(shè)置width與height來規(guī)定content
- 塊級(jí)標(biāo)簽可以設(shè)置自身寬高怜瞒，默認(rèn)寬為父級(jí)寬、高為0般哼，高度可以由內(nèi)容決定
- 內(nèi)聯(lián)標(biāo)簽不可以設(shè)置自身寬高吴汪，默認(rèn)均為0，寬高由內(nèi)容決定(可以通過設(shè)置display:block改成塊標(biāo)簽)
2.border
- border組成：border-width(寬度),border-color(顏色),border-style(風(fēng)格)三部分組成蒸眠。
- border-width成員：border-left-width漾橙、border-right-width、border-top-width楞卡、border-bottom-width
- border-color成員：border-left-color霜运、border-right-color、border-top-color蒋腮、border-bottom-color
- border-style成員：border-left-style觉渴、border-right-style、border-top-style徽惋、border-bottom-style
| 風(fēng)格 | 解釋 |
|---|---|
| solid | 實(shí)線 |
| dashed | 虛線 |
| dotted | 點(diǎn)狀線 |
| double | 雙實(shí)線 |
| groove | 槽狀線 |
| ridge | 脊線 |
| inset | 內(nèi)嵌效果線 |
| outset | 外凸效果線 |
border整體設(shè)置：border:1px solid red;
設(shè)置border-color: transparent;會(huì)透出背景顏色
3.padding和margin
- padding和margin都具有的成員：X-left、X-right座韵、X-top险绘、X-bottom
- 整體設(shè)置
| 賦值個(gè)數(shù) | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 | 左右 |
| 3 | 上 | 左右 | 下 |
| 4 | 上 | 右 | 下 | 左 |
規(guī)律：從上開始，順時(shí)針賦值誉碴，不足找對(duì)面
使用谷歌瀏覽器頁(yè)面調(diào)試工具
.box{
width: 100px;
height: 100px;
padding: 10px;
background: red;
}
html:
<div class="box"></div>
1.png
2.png
通過上圖可以看出：
padding與content公有背景顏色宦棺，紅色區(qū)域?yàn)?02*120
content區(qū)域?yàn)?00*100
五、邊界圓角
border-radius(含義是“邊框半徑”)
1.整體設(shè)置
border-radius可以同時(shí)設(shè)置一個(gè)到四個(gè)值黔帕，如果設(shè)置1個(gè)值代咸，表示四個(gè)圓角都使用這個(gè)值，如果設(shè)置2個(gè)值成黄，表示左上左上角和右下角使用第1個(gè)值呐芥，右上角和左下角使用第二個(gè)值。如果設(shè)置三個(gè)值奋岁，左上角第1個(gè)值思瘟，右上角，左下角第2個(gè)值闻伶，右下角第三個(gè)值滨攻。值設(shè)置的是圓角的水平半徑和垂直半徑，單位可以是任意css合法度量值。
3.png
| 賦值個(gè)數(shù)(值類型：長(zhǎng)度 | 百分比) | 解釋 |
|---|---|
| 1 | 左上 右上 左下 右下 |
| 2 | 左上 右下 | 右上 左下 |
| 3 | 左上 | 右上 左下 | 右下 |
| 4 | 左上 | 右上 | 右下 | 左下 |
border-radius:30px;
4.png
總結(jié)：左上為第一個(gè)角光绕，順時(shí)針女嘲，不足找對(duì)角
使用斜杠(/)可以設(shè)置第二組值，第一組值表示水平半徑诞帐，第二組值表示垂直半徑欣尼，分別可以設(shè)置一到四個(gè)值。
border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;
2.單角設(shè)置
| 成員 | 解釋 |
|---|---|
| border-top-left-radius | 左上 方位 |
| border-top-right-radius | 右上 方位 |
| border-bottom-left-radius | 左下 方位 |
| border-bottom-right-radius | 右下 方位 |
六景埃、a媒至，img，list標(biāo)簽
1.超鏈接
<a href='要跳轉(zhuǎn)的地址'>超鏈接文字</a>
1.1 a標(biāo)簽的屬性
- href：代表鏈接一個(gè)url地址
url除了可以是網(wǎng)頁(yè)外谷徙，還可以是其它的文件拒啰。還可以設(shè)置為網(wǎng)頁(yè)中的某一個(gè)位置(錨點(diǎn)).
還可以是Email地址(mailto)，電話(tel)完慧，短信(sms)
- title：鼠標(biāo)懸浮的文本提示
- target：規(guī)定何處打開鏈接文檔
target=_blank： 將鏈接內(nèi)容在新的瀏覽窗口中打開谋旦。
target=_self： 將鏈接的內(nèi)容，顯示在目前的窗口中屈尼。
target=_parent：將鏈接的內(nèi)容册着，當(dāng)成文件的上一個(gè)畫面。
target=_top：這個(gè)參數(shù)可以解決新內(nèi)容被舊框窗包圍的困擾脾歧，使用這參數(shù)甲捏，會(huì)將整個(gè)畫面重新顯示成鏈接的畫面內(nèi)容。
1.2 相對(duì)路徑：
./或省略代表當(dāng)前文件所在路徑鞭执，可以訪問與該文件同路徑下的所有文件及文件夾
../代表上一級(jí)目錄
1.3 a標(biāo)簽的reset操作
a {
color: #333;
text-decoration: none;
outline: 0;
}
1.4 錨點(diǎn)
用<a name=“”>定義司顿，例如：<a name=“here1”>第一部分</a>，
使用<a href=“#here1”>跳轉(zhuǎn)到第一部分</a>超鏈接就可以定位到網(wǎng)頁(yè)中的“第一部分”這個(gè)位置兄纺。
1.5 鼠標(biāo)樣式
{
cursor: pointer;
}
常用：
text 文字選擇器
crosshair 十字架
wait 等待
help 幫助
pointer 小手
2.圖片
<img src="圖片地址" title="" alt="">
2.1 常用屬性
- alt -- 代表圖像的替代文字(異常解釋)
- src -- 代表一個(gè)圖像源(就是圖像的位置)
- title 提示信息
- border – 代表圖片邊框的寬度
- height -- 代表一個(gè)圖像的高度
- width -- 代表一個(gè)圖像的寬度
- usemap 將圖像定義為客戶器端圖像映射大溜。
3.列表
3.1 html列表標(biāo)簽
<ul></ul>代表HTML無序列表 ，里面每一列表項(xiàng)使用<li>標(biāo)簽定義-
<ol></ol>代表HTML有序列表 估脆，里面每一列表項(xiàng)使用<li>標(biāo)簽定義屬性 start 規(guī)定有序列表的起始值钦奋。 type 規(guī)定在列表中使用的標(biāo)記類型。(1 a A i I) reversed H5新添加 降序 <li></li>代表HTML列表項(xiàng)目疙赠，每個(gè)列表項(xiàng)使用一對(duì)<li></li>標(biāo)記<dl></dl>定義了定義列表（definition list）<dt></dt>標(biāo)簽定義了定義列表中的項(xiàng)目（即術(shù)語(yǔ)部分）<dd></dd>在定義列表中定義條目的定義部分付材。
3.2 css列表屬性
- list-style-type
disc 實(shí)心點(diǎn)
circle 圓圈
square 小方框
decimal 數(shù)字
lower-roman 小寫羅馬字
upper-roman 大寫羅馬字
lower-alpha 小寫字母
upper0alpha 大寫字母
- list-style-position 位置
inside 標(biāo)示在li里面
outside 標(biāo)示在li外面
- list-style-image 使用圖片 url(./123.gif)
- list-style 復(fù)合屬性
list-style: type position image
list-style: none
七、偽類選擇器
偽類以冒號(hào)(:)開頭
1.a標(biāo)簽的四大偽類
- :link：未訪問狀態(tài)
- :hover：懸浮狀態(tài)
- :active：活躍狀態(tài)(鼠標(biāo)按下不動(dòng)的狀態(tài))
- :visited：已訪問狀態(tài)(瀏覽器緩存)
普通標(biāo)簽也可以運(yùn)用 :hover :active
.box{
width: 200px;
height: 200px;
background-color: red;
}
.box:hover{
background-color: orange;
cursor: pointer;
}
.box:active{
width: 400px;
border-radius: 50%;
}
2.內(nèi)容偽類
結(jié)合content使用圃阳，可以單獨(dú)出現(xiàn)
- :before：內(nèi)容之前
- :after：內(nèi)容之后
.txt:before{
content: "我真帥~~~"
}
.txt:after{
content: "~~~我是真的帥"
}
*:after{
content:"hehe"
}
3.位置(索引)偽類
位置從1開始
- :nth-child(n)：位置優(yōu)先伞租，再匹配類型
- :nth-of-type(n)：類型優(yōu)先，再匹配位置
注：找到所有結(jié)構(gòu)下的第2個(gè)標(biāo)簽限佩，如果剛好是div那么匹配成功
div:nth-child(2){
color: green;
}
注:先將頁(yè)面中所有div找出葵诈，在匹配哪些在自己結(jié)構(gòu)層次下的第二個(gè)div
div:nth-of-type(2){
color: cyan;
}
應(yīng)用場(chǎng)景：
在同一目錄下都是同一類型裸弦，用 :nth-child(n)
在同一目錄下有多種類型的標(biāo)簽，用 :nth-of-type(n)
4.取反偽類
- :not(a)：對(duì)a進(jìn)行取反
[d]{
color:red;
} d標(biāo)簽控制的是紅色
:not([d]){
color:red;
} 除了d標(biāo)簽控制的其它都是紅色
span:not([d]){
color:red;
} 是sapn標(biāo)簽并且沒有d的作喘，都是紅色
八理疙、盒模型布局
- 布局方位：margin-left、margin-right泞坦、margin-top窖贤、margin-bottom
- 影響自身布局：margin-left、margin-top(自身位置改變)
- 影響兄弟布局：margin-right贰锁、margin-bottom(自身位置不變)
margin-bottom影響上下兄弟赃梧，盡量別對(duì)margin-right進(jìn)行設(shè)置
margin-right影響左右兄弟，盡量別對(duì)margin-bottom進(jìn)行設(shè)置
布局坑
盒模型布局坑只出現(xiàn)在margin-top相關(guān)的地方
1.兄弟坑
上下兩個(gè)模型重疊時(shí)取最大值(這里取30px)
.s1{
margin-bottom: 20px;
}
.s2{
margin-top: 30px;
}
2.父子坑
將子模型移動(dòng)到中間
html:
<div class="sup">
<div class="sub"></div>
</div>
.sup{
width: 200px;
height: 200px;
background-color: cyan;
}
.sub{
width: 100px;
height: 100px;
background-color: orange;
}
坑：
.sup{
margin-top:50px;
}
.sub{
margin-top50px;
margin-left:50px;
}
父子top重疊豌熄，取最大值授嘀。
解決盒模型經(jīng)典布局坑：
方法1.將父級(jí)固定(子級(jí)無法拖動(dòng))
.sup{
border-top:1px solid transparent;
/*保證顯示區(qū)域200*200*/
height:199px;
}
方法2.通過padding
.sup{
padding-top:50px;
height:150px;
}
