CSS入門(二)
一、組合選擇器
每個選擇器位可以是任意基礎選擇器或選擇器組合
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; }