前端網頁學習day46(組合選擇器 屬性選擇器 盒模型 a標籤,img標籤,list標籤 偽類選擇器)
阿新 • • 發佈：2018-12-11
前端網頁學習(html)
DAY46
今日內容:
css組合選擇器
屬性選擇器
盒模型 盒模型佈局
a標籤、img、list標籤
偽類選擇器
css組合選擇器
特性: 每個選擇器位可以為任意基本選擇器或選擇器組合
群組選擇器:可以控制多個
div, .s, section{ color: red; }子代選擇器: 用>連線
body > div{ color:orange; }後代選擇器: 空格連線 包含子代
body a{ text-decoration: none; }相鄰選擇器: 用 + 連線
span + section{ background-color: pink; }兄弟選擇器: 用 ~ 連線
div~section{ background-color: brown; }交集選擇器: 即是選擇器1 又是 選擇器2
i.s{ color: yellow; }多類選擇器
.d1.d2.d3{ color: #000 }組合選擇器優先順序
同目錄結構下:
子代與後代優先順序相同 body >div 等同於 body div
相鄰與與兄弟優先順序相同 div + span 等同於 div ~ span
最終樣式採用邏輯後的樣式值
不同目錄結構下
- 根據選擇器權值進行比較
- 權值為標籤權重之和
- 權重: *:1 div:10 class:100 id:1000 !important: 10000
- 權值比較時,關心的是值的大小,不關心位置與具體選擇器名
- id永遠比class大,class永遠比標籤大
- 控制的是同一目標,才具有可比性
屬性選擇器
屬性選擇器的權重等同於class選擇器
有屬性class的所有標籤
[class]{ color: orange; }有屬性class且值為d2的所有標籤(值不影響權重)
[class="d2"]{ color: pink; }交集選擇器
div且class=“d2”,增加了權重
div[class="d2"]{ color: blue; }屬性開頭匹配: ^=
屬性結尾匹配: $=
屬性模糊匹配: *=
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>屬性選擇器</title> <style> /*屬性開頭: ^= */ /*屬性結尾: $= */ /*屬性模糊匹配: *= */ [class ^= 'he']{ color: yellow; } [class $= 'ld']{ color: tan; } [class *='owo']{ color: cyan; } [class][dd]{ color:brown; } </style> </head> <body> <div class="d1">0000 <div class="d2">12345</div> <!-- dd為自定義屬性 --> <div class="helloworld" dd>helloworld</div> </div> </body> </html>
盒模型 盒模型佈局
盒模型
組成: margin + border + padding + content
content = width * height
- 四個成員均具有自身獨立顯示區域 不相互影響
- margin/padding外邊距/內邊距控制佈局
- border控制邊框
- content控制內容
padding與content共有背景顏色
content內容顯示區域
/*值設定*/ .box{ /*控制四個方位*/ /*margin:20px; padding: 30px;*/ /*第一個值:上下 第二個值:左右*/ /*margin: 10px 20px; padding: 30px 40px;*/ /*上 左右 下*/ /*margin: 10px 20px 30px; padding: 30px 40px 50px;*/ /*上 左 右 下*/ margin: 10px 20px 30px 40px; padding: 30px 40px 50px 60px; /*總結*/ /*1.規定起始 2.順時針 3.不足找對面*/ }邊界圓角
/*單角設定*/ .box{ /*一個固定值: 橫縱*/ /*border-top-left-radius: 100px; */ /*二個固定值: 橫 縱*/ /*border-bottom-left-radius:100px 50px; */ /*百分比賦值*/ border-top-left-radius: 100%; } /*整體賦值*/ .box{ /*不分方位(橫縱)*/ /*左上為第一個角,順時針,不足找對角*/ /*border-radius: 30px 60px 120px;*/ /*區分橫縱*/ /*1. /前控制橫向,/後控制縱向*/ /*2. 橫向又可以分為1,2,3,4個值,縱向依然*/ /*border-radius: 100px/50px;*/ /*左上橫10 右上橫100 右下橫50 左下橫100 / 縱向全為*/ border-radius: 10px 100px 50px /50px; }盒模型佈局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型佈局</title> <style> /*做頁面必備reset操作*/ html,body{ margin: 0; } .box, .wrap{ width: 200px; height: 200px; background-color: red; } .wrap{ background-color: orange; } /*影響自身佈局*/ /* .box{ margin-top: 30px; margin-left: 100px; }*/ /*影響兄弟佈局*/ /*margin-bottom影響上下兄弟,儘量別對margin-right進行設定*/ /*margin-right影響左右兄弟,儘量別對margin-bottom進行設定*/ .box{ margin-bottom: 30px; /*margin-right: 100px;*/ } /*display:顯示方式*/ /*塊:block*/ /*內聯:inline*/ /*內聯塊:inline-block*/ .box, .wrap{ display: inline-block; /*vertical-align: top;*/ } /*盒模型佈局坑,只出現在和margin-top相關的地方*/ /*兄弟坑*/ .s1, .s2{ width: 100px; height: 100px; background-color: pink; } /*重疊取大值*/ .s1{ margin-bottom: 20px; } .s2{ margin-top: 20px; } /*父子坑*/ .sup{ width: 200px; height: 200px; background-color: cyan; } .sub{ width: 100px; height: 100px; background-color: orange; } /*父子top重疊,取大值*/ .sup{ margin-top: 50px; } .sub{ margin-left: 50px; /*margin-top: 50px;*/ } /*解決盒模型經典佈局坑*/ /*1.將父級固定*/ .sup{ /*border-top: 1px solid transparent;*/ /*保證顯示區域不變 200*200*/ /*height: 199px;*/ } /*2.通過padding*/ .sup{ padding-top:50px; height: 150px; } </style> </head> <body> <div class="box"></div> <div class="wrap"></div> <!-- 坑 --> <section class="s1"></section> <section class="s2"></section> <div class="sup"> <div class="sub"></div> </div> </body> </html>
a標籤、img、list標籤
a標籤: 超連結標籤
基本使用:
<a href="https://www.baidu.com">前往百度</a>./或省略代表當前檔案路徑,可以訪問與該檔案路徑下的所有檔案及資料夾
<a href="./temp/temp.html">前往temp頁面</a>屬性
title: 滑鼠懸浮的文字提示
target: _blank ,以空白標籤位來開啟目標頁面
<a href="http://sina.com.cn" title="新浪網" target="_blank">前往新浪</a>其他應用場景: mailto | sms | tel
<a href="mailto:[email protected]">資訊給zero</a>錨點
<a href="#tag">前往底部</a> br * 100 <!-- 設定一個錨點 --> <!-- .bottom做底部佈局的區域 --> <div class="bottom"> <!-- <a name="tag">...</a> --> <i id="tag"></i> <div id="tag2"></div> ... </div>img標籤
src可以連線本地及網路圖片
alt資源載入失敗時的文字提示
title圖片的文字資訊(滑鼠懸浮時展示)
<img src="http://pic5.photophoto.cn/20071228/0034034901778224_b.jpg" alt="風景圖片" title="雪山圖片">list列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>a_img_list</title> </style> </head> <body> <!-- list列表 --> <!-- 有序列表 --> <style type="text/css"> ol, ul { margin: 0; padding: 0; list-style: none;; } </style> <ol> <li>列表項</li> <li>列表項</li> <li>列表項</li> </ol> <!-- 無序列表 --> <ul> <li>列表項</li> <li>列表項</li> <li>列表項</li> </ul> </body> </html>
偽類選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>偽類選擇器</title> <style type="text/css"> a{ color: #333; text-decoration: none; } /* :link為一個整體,代表超連結初始狀態 */ a:link{ color:orange; } /* :hover滑鼠懸浮*/ a:hover{ color: green; /*滑鼠樣式*/ cursor: pointer; } /* :active活動狀態中(被滑鼠點選中)*/ a:active{ color: red; } /* :visited訪問過的 */ a:visited{ color: cyan; } /*普通標籤運用 :hover :active */ .box{ width: 200px; height: 200px; background-color: red; } .box:hover{ background-color: orange; cursor: pointer; } .box:active{ width: 300px; height: 300px; border-radius: 100px; background-color: yellowgreen; } .txt:before{ content: "我是字首~~~"; } .txt:after{ content: ">>>我是字尾"; } /*偽類可以單獨出現*/ /*:after{ content: "哈哈"; }*/ /*位置偽類*/ /*1.位置從1開始*/ /*2.*/ /*先匹配位置,在匹配型別: 找到所有結構下的第二個標籤,如果剛好是div,那麼匹配成功 -- */ div:nth-child(2){ color: orange; } /*先確定型別,在匹配位置*/ /*先將頁面中所有的div找出,在匹配那些在自己結構層次下的第二個div*/ div:nth-of-type(2){ color: cyan; } /*取反偽類*/ :not([d]){ color: red; } </style> </head> <body> <!-- 1.a標籤的四大偽類 --> <a href="./123.html">訪問頁面</a> <a href="http://www.baidu.com">訪問百度</a> <div class="box">box</div> <!-- 2.內容偽類 --> <div class="txt">原來的文字</div> <!-- 3.位置偽類 --> <div class="wrap"> <span>span1</span> <div>div1</div> <div>div2</div> </div> <!-- 4.取反偽類 --> <span d>12345</span> <span dd>67890</span> </body> </html>
以上為本次學習內容