CSS樣式表知識總結
阿新 • • 發佈：2018-08-10
adf aid 大於 d+ pre sheet 選擇 order 重用
分類
|------內聯 寫在標簽裏面，控制精確，代碼重用性差
|---------style=樣式
<div style="background: yellow; width: 100px; height: 100px;"></div> <div style="background: red; width: 100px; height: 100px;"></div>
|------內嵌 嵌在頁面的<head></head>裏，控制沒有內聯的精確，代碼重用性好
|---------<style type="text/css"></style>
<style> #first{background: pink; width: 200px; height: 100px;} #second{background: blue; width: 200px; height: 100px;} </style> <div id="first"> </div> <div id="second"> </div>
|------外部 單獨的樣式文件，控制沒有內聯的精確，代碼重用性最好
|---------<link href="" rel="stylesheet" type="text/css"/>
#third{ background: purple; width: 200px; height: 300px; }
<link rel="stylesheet" href="1111.css" /> <div id="third"> </div>
選擇器 樣式表用來選取元素 標簽：根據標簽名選中元素
|------class
|---------.點
|---------根據class名來篩選元素
|---------可以有重復的名字
.common{ width: 100px; height: 100px; background-color: black; color: white; } .common:hover{ background-color: red; color: black;
<div class="common"> 我是第一個common </div> <div class="common"> 我是第二個common </div> <div class="common"> 我是第三個common </div>
|------id
|---------#
|---------根據id名來篩選唯一的元素
|---------不能有重復的名字
#third{ width: 100px; height: 100px; background-color: green; }
<div id="third"> </div>
|------復合
|---------逗號：並列 div,span
|---------空格：後代 #list li
|---------大於號：子元素選擇器 div>p div中所有p標簽
div,p{ border: 1px solid red; } #third,#fourth{ border: 1px solid black; } #first_ul li{ color:brown; } #second_ul li{ color: darkblue; } #div_p>p{ color: green; }
<div id="third"> </div> <div id="fourth"> </div> <ul id="first_ul"> <li>無序一</li> <li>無序一</li> <li>無序一</li> </ul> <ul id="second_ul"> <li>無序二</li> <li>無序二</li> <li>無序二</li> </ul> <div id="div_p"> <p>我是div中的第一行p元素</p> <p>我是div中的第二行p元素</p> <p>我是div中的第三行p元素</p> <div>我是div中的第四行div元素</div> </div>
|------屬性選擇器
|---------[屬性名 = 屬性值]{} 屬性名後邊可以加 |、*等 代表匹配所有屬性有屬性值的元素
|---------表單元素的屬性選取
[href="aa.html"]{ color: red; } input[type="text"]{ background-color: gainsboro; }
<a href="aa.html">跳轉</a> <input type="text" name="" id="" value="" /><br /> <input type="password" name=""id=""value="" />
|------偽類
|---------a標簽的四個偽類
|------------a:link 未訪問的鏈接
|------------a:visited 已訪問的鏈接
|------------a:hover 鼠標劃過鏈接
|------------a:active 已選中的鏈接
a:link{ color:red } a:visited{ color: black; } a:hover{ color: blue; } a:active{ color: yellow; }
<a href="https://www.baidu.com">跳轉到百度</a>
CSS樣式表知識總結