CSS入門(二)
摘要：
一、組合選擇器
每個選擇器位可以是任意基礎選擇器或選擇器組合
1.群組選擇器
可以一次性控制多個選擇器
選擇器之間用 逗號 (,)隔開
div,.d1,#div{
color:red;
}
2.子代(後代)選擇器
一次性控制一個選...
一、組合選擇器
每個選擇器位可以是任意基礎選擇器或選擇器組合
1.群組選擇器
- 可以一次性控制多個選擇器
- 選擇器之間用 逗號 (,)隔開
div,.d1,#div{
color:red;
}
2.子代(後代)選擇器
- 一次性控制一個選擇器(邏輯最後的那個選擇器)，前置位的選擇器是修飾性選擇器
- 子代選擇器必須為一級父子關係，後代選擇器可以為一級，也可以多級父子巢狀關係
子代選擇器用>連線
body>div{
color:red;
}
注：控制body下的div選擇器
後代選擇器用空格連線
div .d2{
color:red;
}
注：控制div下只要有d2的選擇器
3.相鄰(兄弟)選擇器
- 一次性控制一個選擇器(邏輯最後的那個選擇器)，前置位的選擇器是修飾性選擇器
- 相鄰選擇器必須為直接相鄰關係，兄弟選擇器可以為直接相鄰或間接相鄰關係
相鄰選擇器用+連線
.d11+.d22{
color:red;
}
注：控制的是d22選擇器
兄弟選擇器用~連線
.d11~.d33{
color:yellow;
}
注：控制的是d33選擇器
4.交集選擇器
- 選擇器之間 沒有 任何的連線符
- 瞭解即可
div.s{
color: yellow;
}
注：既是div選擇器又是s選擇器
html：
<div class="s">這是交集選擇器</div>
5.多類名選擇器
- 一次性控制一個選擇器(邏輯最後的那個選擇器)，前置位的選擇器是修飾性選擇器
- 只是為了更精確
.d1.d2{
color: tan;
}
.d1.d2.d3{
color: #123
}
二、組合選擇器的優先順序
1.同目錄結構下
-
子代與後代優先順序相同
例子：body>div == body div -
相鄰與兄弟優先順序相同
例子：div+span == div~span
2.不同目錄下
根據選擇器的權值進行比較，權值為標籤權重之和
| 選擇器 | 權重 |
|---|---|
| 通配(*) | 1 |
| 標籤(div) | 10 |
| 類、屬性(class) | 100 |
| id | 1000 |
| !import | 10000 |
注：只有控制的是同一目標才具有可比性
- 權值比較時，關心的是值的大小，不關心位置與具體選擇器名
- id永遠比class大，class永遠比標籤大。
/*10*/
div{
color: red;
}
/*20*/
div div{
color: yellow;
}
.d2{
color: blue;
}
/*.d2抵消，剩10*/
div .d2{
color: orange;
}
/*等價與div .d2,權值相同，位置決定*/
.d1 div{
color: pink;
}
/*又多10*/
div .d1 div{
color: tan;
}
/*不具有可比性*/
div .d1 >div{
color: green;
}
/*高於一切class及標籤*/
#dd1 div {
color: #000;
}
三、屬性選擇器
屬性選擇器的權值 == class選擇器的權重
有屬性class的所有標籤
[class]{
color: orange;
}
/*有屬性class且值為d2的所有標籤(值不影響權重)*/
[class="d2"]{
color: pink;
}
/*是div且class="d2"，增加了權重*/
div[class="d2"]{
color: blue;
}
子串匹配屬性選擇器
模糊搜尋
[calss ^= 'he']{
color: yellow;
}
[calss $= 'ld']{
color: tan;
}
[class *= 'ow']{
color: cyan;
}
- [attr]：匹配擁有attr屬性的標籤
- [attr=val]：匹配擁有attr屬性，屬性值為val的標籤
- [attr^=val]：匹配擁有attr屬性，屬性值以val開頭的標籤
- [attr$=val]：匹配擁有attr屬性，屬性值以val結尾的標籤
- [attr*=val]：匹配擁有attr屬性，屬性值包含val的標籤
四、盒模型
- 廣義：文件中所有功能性及內容性標籤，及文件中所有顯示性標籤
- 狹義：文件中以塊級形式存在的標籤
盒模型由四個成員組成：margin+border+padding+content
- 四個成員均有自身獨立顯示區域，相互之間不影響(視覺上感覺有影響)
- margin(外邊距),padding(內邊距)，他們兩個負責控制佈局
- border控制邊框
- content控制內容
塊級元素和內聯元素
塊級元素：
- 總是在新行上開始，佔據一整行 ；
- 高度，行高以及外邊距和內邊距都可控制；
- 寬度預設是它的容器的100%，除非設定一個寬度
- 它可以容納內聯元素和其他塊元素。
內聯元素：
- 和其他元素都在一行上 ；
- 高，行高及外邊距和內邊距部分可改變；
- 寬度只與內容有關；
- 行內元素只能容納文字或者其他行內元素。
- 外邊界只能對左右起作用，內邊距都起作用
display:顯示方式
- 塊：block
- 內聯：inline
- 內聯塊：inline-block
1.content
- 通過設定width與height來規定content
- 塊級標籤可以設定自身寬高，預設寬為父級寬、高為0，高度可以由內容決定
- 內聯標籤不可以設定自身寬高，預設均為0，寬高由內容決定(可以通過設定display:block改成塊標籤)
2.border
- border組成：border-width(寬度),border-color(顏色),border-style(風格)三部分組成。
- 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
| 風格 | 解釋 |
|---|---|
| solid | 實線 |
| dashed | 虛線 |
| dotted | 點狀線 |
| double | 雙實線 |
| groove | 槽狀線 |
| ridge | 脊線 |
| inset | 內嵌效果線 |
| outset | 外凸效果線 |
border整體設定： border:1px solid red;
設定 border-color: transparent; 會透出背景顏色
3.padding和margin
- padding和margin都具有的成員：X-left、X-right、X-top、X-bottom
- 整體設定
| 賦值個數 | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 | 左右 |
| 3 | 上 | 左右 | 下 |
| 4 | 上 | 右 | 下 | 左 |
規律：從上開始，順時針賦值，不足找對面
使用谷歌瀏覽器頁面除錯工具
.box{
width: 100px;
height: 100px;
padding: 10px;
background: red;
}
html:
<div class="box"></div>
通過上圖可以看出：
padding與content公有背景顏色，紅色區域為102*120
content區域為100*100
五、邊界圓角
border-radius(含義是“邊框半徑”)
1.整體設定
border-radius可以同時設定一個到四個值，如果設定1個值，表示四個圓角都使用這個值，如果設定2個值，表示左上左上角和右下角使用第1個值，右上角和左下角使用第二個值。如果設定三個值，左上角第1個值，右上角，左下角第2個值，右下角第三個值。值設定的是圓角的水平半徑和垂直半徑，單位可以是任意css合法度量值。
| 賦值個數(值型別：長度 | 百分比) | 解釋 |
|---|---|
| 1 | 左上 右上 左下 右下 |
| 2 | 左上 右下 | 右上 左下 |
| 3 | 左上 | 右上 左下 | 右下 |
| 4 | 左上 | 右上 | 右下 | 左下 |
border-radius:30px;
總結：左上為第一個角，順時針，不足找對角
使用斜槓(/)可以設定第二組值，第一組值表示水平半徑，第二組值表示垂直半徑，分別可以設定一到四個值。
border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;
2.單角設定
| 成員 | 解釋 |
|---|---|
| border-top-left-radius | 左上 方位 |
| border-top-right-radius | 右上 方位 |
| border-bottom-left-radius | 左下 方位 |
| border-bottom-right-radius | 右下 方位 |
六、a，img，list標籤
1.超連結
<a href='要跳轉的地址'>超連結文字</a>
1.1 a標籤的屬性
- href：代表連結一個url地址
url除了可以是網頁外，還可以是其它的檔案。還可以設定為網頁中的某一個位置(錨點). 還可以是Email地址(mailto)，電話(tel)，簡訊(sms)
- title：滑鼠懸浮的文字提示
- target：規定何處開啟連結文件
target=_blank： 將連結內容在新的瀏覽視窗中開啟。 target=_self：將連結的內容，顯示在目前的視窗中。 target=_parent：將連結的內容，當成檔案的上一個畫面。 target=_top：這個引數可以解決新內容被舊框窗包圍的困擾，使用這引數，會將整個畫面重新顯示成連結的畫面內容。
1.2 相對路徑：
./或省略代表當前檔案所在路徑，可以訪問與該檔案同路徑下的所有檔案及資料夾 ../代表上一級目錄
1.3 a標籤的reset操作
a {
color: #333;
text-decoration: none;
outline: 0;
}
1.4 錨點
用<a name=“”>定義，例如：<a name=“here1”>第一部分</a>， 使用<a href=“#here1”>跳轉到第一部分</a>超連結就可以定位到網頁中的“第一部分”這個位置。
1.5 滑鼠樣式
{
cursor: pointer;
}
常用：
text文字選擇器
crosshair十字架
wait等待
help幫助
pointer 小手
2.圖片
<img src="圖片地址" title="" alt="">
2.1 常用屬性
- alt -- 代表影象的替代文字(異常解釋)
- src -- 代表一個影象源(就是影象的位置)
- title 提示資訊
- border – 代表圖片邊框的寬度
- height -- 代表一個影象的高度
- width -- 代表一個影象的寬度
- usemap 將影象定義為客戶器端影象對映。
3.列表
3.1 html列表標籤
-
<ul></ul>代表HTML無序列表 ，裡面每一列表項使用<li>標籤定義 -
<ol></ol>代表HTML有序列表 ，裡面每一列表項使用<li>標籤定義屬性 start 規定有序列表的起始值。 type規定在列表中使用的標記型別。(1 a AiI) reversedH5新新增 降序
-
<li></li>代表HTML列表專案，每個列表項使用一對<li></li>標記 -
<dl></dl>定義了定義列表（definition list） -
<dt></dt>標籤定義了定義列表中的專案（即術語部分） -
<dd></dd>在定義列表中定義條目的定義部分。
3.2 css列表屬性
- list-style-type
disc實心點 circle圓圈 square小方框 decimal數字 lower-roman 小寫羅馬字 upper-roman 大寫羅馬字 lower-alpha 小寫字母 upper0alpha 大寫字母
- list-style-position 位置
inside標示在li裡面 outside標示在li外面
- list-style-image 使用圖片 url(./123.gif)
- list-style 複合屬性
list-style: type position image list-style: none
七、偽類選擇器
偽類以冒號(:)開頭
1.a標籤的四大偽類
- :link：未訪問狀態
- :hover：懸浮狀態
- :active：活躍狀態(滑鼠按下不動的狀態)
- :visited：已訪問狀態( 瀏覽器快取 )
普通標籤也可以運用 :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.內容偽類
結合content使用，可以單獨出現
- :before：內容之前
- :after：內容之後
.txt:before{
content: "我真帥~~~"
}
.txt:after{
content: "~~~我是真的帥"
}
*:after{
content:"hehe"
}
3.位置(索引)偽類
位置從1開始
- :nth-child(n)：位置優先，再匹配型別
- :nth-of-type(n)：型別優先，再匹配位置
注：找到所有結構下的第2個標籤，如果剛好是div那麼匹配成功
div:nth-child(2){
color: green;
}
注:先將頁面中所有div找出，在匹配哪些在自己結構層次下的第二個div
div:nth-of-type(2){
color: cyan;
}
應用場景：
在同一目錄下都是同一型別，用 :nth-child(n)
在同一目錄下有多種型別的標籤，用 :nth-of-type(n)
4.取反偽類
- :not(a)：對a進行取反
[d]{
color:red;
} d標籤控制的是紅色
:not([d]){
color:red;
} 除了d標籤控制的其它都是紅色
span:not([d]){
color:red;
} 是sapn標籤並且沒有d的，都是紅色
八、盒模型佈局
- 佈局方位：margin-left、margin-right、margin-top、margin-bottom
- 影響自身佈局：margin-left、margin-top(自身位置改變)
- 影響兄弟佈局：margin-right、margin-bottom(自身位置不變)
margin-bottom影響上下兄弟，儘量別對margin-right進行設定
margin-right影響左右兄弟，儘量別對margin-bottom進行設定
佈局坑
盒模型佈局坑只出現在margin-top相關的地方
1.兄弟坑
上下兩個模型重疊時取最大值(這裡取30px)
.s1{
margin-bottom: 20px;
}
.s2{
margin-top: 30px;
}
2.父子坑
將子模型移動到中間
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重疊，取最大值。
解決盒模型經典佈局坑：
方法1.將父級固定(子級無法拖動)
.sup{
border-top:1px solid transparent;
/*保證顯示區域200*200*/
height:199px;
}
方法2.通過padding
.sup{
padding-top:50px;
height:150px;
}