css 類選擇器 id選擇器 html選擇器 萬用字元選擇器 父子選擇器
阿新 • • 發佈：2018-12-26
1、css使用的基本語法：
選擇器 {
屬性1：屬性值；
屬性2：屬性值；
屬性3：屬性值；
.
.
.
}
2、Css使用的必要性：
（1）、統一網頁不同個體的風格
（2）、可以使用濾鏡
3、Css中常用的4種選擇器：
（1）、類選擇器，又叫class選擇器：
類選擇器格式：
. 類選擇器{
屬性名：屬性值;
……
}
（2）、id選擇器：
Id選擇器格式：
#id選擇器{
屬性名：屬性值;
……
}
（3）、html元素選擇器：
html元素選擇器格式：
Html元素名稱{
屬性名：屬性值;
……
}
（4）、萬用字元選擇器
* {
屬性名：屬性值;
……
}
（5）、父子選擇器
#id1 span {
color:red;
font-size:60px;
font-style : italic ;
}Ø Css檔案可以使用在各種檔案中，如 .php, .html, .jsp, .asp, .net；
Ø 各種選擇器優先順序比較：Id選擇器 > class選擇器 > html選擇器 > 萬用字元選擇器；
Ø 父子選擇器可以有多級，但實際開發中最好不要超過三層；
Ø 父子選擇器有嚴格的層級關係；
Ø 父子選擇器不侷限於什麼型別的選擇器：
如：
#id1 span
.s1 #id1 font
Div #id1 .s1
這些形式均可以；
Ø 一個元素可以同時被id,class選擇器修飾；
<span class="style1" id="id2">樣式1一</span>
Ø 同一個元素不能同時被兩個id選擇器修飾，一個元素只能有1個id選擇器，但可以有多個class選擇器； <span class="style1 style2">樣式1一</span>
Ø 當修飾同一個元素的多個類選擇器發生衝突時，則以寫在css檔案中的後面的哪個類選擇器為準；
Ø 在css檔案中，如果有多個class、id選擇器，他們有相同的部分，我們可以把相同的css樣式放在一起；
5、說明：
css檔案本身也會被瀏覽器下載到本地，才能顯示效果。
例項：
<html>
<head>
<title>第二講程式碼</title>
<!--css 部分可以單寫一個檔案(外聯css)，然後引入，也可以直接嵌入到該html檔案中（內聯css）-->
<!--一個html檔案可以引入多個css檔案，多寫幾行即可-->
<link rel="stylesheet" type="text/css" href="a1.css" >
<link rel="stylesheet" type="text/css" href="a2.css" >
</head>
<body>
<!--<span> 屬性用來組合行內元素（中間部分可看做一個整體），以便通過樣式來格式化它們-->
<b>1、使用css統一網頁不同元素風格,類選擇器</b><br><br><br>
<span class="style1" style ="font-family:華文新魏">樣式一</span>
<br/><br/>
<span class="style1">樣式二</span>
<br/><br/>
<span class="style1">樣式三</span>
<br/><br/>
<span class="style2">樣式四</span>
<br/><br/>
<span class="style2">樣式五</span>
<br/><br/>
<span class="style2">樣式六</span>
<br/><br/>
<b>2、id選擇器</b><br><br><br>
<span id="id1">樣式七</span>
<br/><br/>
<span id="id1">樣式八</span>
<br/><br/>
<span id="id1">樣式九：不打算把課程包括資料初步設計課程不健康報報價</span>
<br/><br/>
<b>3、html選擇器控制超連結</b><br><br><br>
<a href="http://www.baidu.com" >百度</a><br>
<a href="http://www.sohu.com" target="_blank">搜狐</a><br>
<a href="http://www.taobao.com" target="_blank">淘寶</a><br><br><br>
<b>4、對同一種html元素，分類顯示問題</b><br><br><br>
<b class="cls1">11223344556677889900</b>
<br><br>
<b class="cls2">qqwweerrttyyuuiioopp</b>
<br><br>
<b>5、萬用字元選擇器</b><br><br><br>
<!--如果希望所有的元素都符合某一樣式，可以使用萬用字元選擇器，但它的優先順序是最低的。-->
<!--見.css檔案，以網頁邊距屬性margin為例-->
<b>6、父子選擇器</b><br><br><br>
<span id="id1"><span>標<span>題</span>：</span>不打算把課程<font>包括數</font>據初步設計課程不健康報報價</span>
<br/><br/>
<b>7、一個元素被多種選擇器修飾</b><br><br><br>
<span class="style1" id="id2">樣式1一</span>
<br/><br/>
<span class="style1">樣式1二</span>
<br/><br/>
<span class="style1">樣式1三</span>
<br/><br/>
<b>8、一個元素被多個class選擇器修飾</b><br><br><br>
<span class="style1 style3">樣式1一</span>
<br/><br/>
<span class="style1">樣式1二</span>
<br/><br/>
<span class="style1">樣式1三</span>
<br/><br/>
<b>9、合併css檔案選擇器</b><br><br><br>
<!--在css檔案中，如果有多個class、id選擇器，他們有相同的部分，我們可以把相同的css樣式放在一起；
把各個類選擇器的公共部分，單獨抽取寫為一份，這樣可以減少css的冗餘-->
<span class="ad_1">恩格斯v輸入個人</span>
<br/><br/>
<span class="ad_2">v都是v二嘎v是v上造成至</span>
<br/><br/>
<span class="ad_3">說v發多少v分DVD大幅度v別的服不</span>
<br/><br/>
<b>2、濾鏡技術,不好用，沒能明白</b><br><br><br>
<div>
<img src="b1.jpg" >
<img src="b2.jpg" >
<img src="b3.jpg" >
<img src="b4.jpg">
<img src="b5.jpg">
<img src="b6.jpg">
<img src="b7.jpg">
<img src="b8.jpg">
</div>
</body>
</html>a1.css
/*.style1 叫做 類選擇器*/
.style1 {
color:green;
font-size:30px;
}
.style2 {
color:red;
font-size:40px;
}
/*id選擇器的使用*/
#id1{
color:yellow;
font-size:50px;
}
/*html選擇器，使網頁字型預設顯示為橙色 */
body{
color:orange;
}
img{
width:300px;
filter :gray;
}
/*html選擇器控制超連結*/
a:link{ /*偽類link設定 a 物件在未被訪問前的樣式。*/
color:red;
text-decoration : none;/*去掉文字裝飾效果，這裡指下劃線*/
font-size:24px;
}
a:hover{ /*偽類hover設定物件在其滑鼠懸停時的樣式*/
color:blue;
text-decoration :underline;/*新增下劃線*/
font-size:35px;
}
a:visited { /*偽類visited設定 a 物件在其連結地址已被訪問過時的樣式*/
color:#c0ff00;
font-size:50px;
}
a:active { /*偽類active設定物件在被使用者啟用(在滑鼠點選與釋放之間發生的事件)時的樣式。*/
color:#40ff00;
font-size:50px;
}
/*同一種元素的分類顯示*/
b.cls1{
color:#c0ff00;
font-size:50px;
}
b.cls2{
color:#40ff00;
font-size:53px;
}
/*萬用字元選擇器*/
*{
/*margin-top:0px; /* 消除外部上邊距*/
/*margin-right:0px;
margin-bottom:0px;
margin-left:0px;*/
/*margin:0px;*/
/*margin: 10px 20px;*/
/*margin: 10px 20px 30px;*/
margin: 10px 20px 30px 40px;
/*margin取值含義：如果提供全部四個引數值，將按上－右－下－左的順序作用於四邊（以順時針順序）。
如果只提供一個，將用於全部的四邊。
如果提供兩個，第一個用於上－下，第二個用於左－右。
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。
*/
}
*{
/*padding-top:0px; /* 消除元素內部上邊距*/
/*padding-right:0px;
padding-bottom:0px;
padding-left:0px;*/
/*padding:0px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px;*/
padding: 10px 20px 30px 40px;
/*padding取值含義：如果提供全部四個引數值，將按上－右－下－左的順序作用於四邊（以順時針順序）。
如果只提供一個，將用於全部的四邊。
如果提供兩個，第一個用於上－下，第二個用於左－右。
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。
*/
}
/*父子選擇器（包含選擇器）*/
#id1 span {
color:red;
font-size:60px;
font-style : italic ;
}
#id1 span span { /*一定要注意層次關係*/
color:green;
}
#id1 font{
font-size:100px;
}
#id2 {
font-weight : bold;
font-style : italic ;
}
/*一個元素被多個class選擇器修飾*/
.style3 {
font-weight : bold;
text-decoration :line-through;
background : red;
}
/*合併css檔案選擇器*/
/*在css檔案中，如果有多個class、id選擇器，他們有相同的部分，我們可以把相同的css樣式放在一起；
把各個類選擇器的公共部分，單獨抽取寫為一份，這樣可以減少css的冗餘*/
/*我們可以把某個css檔案中的選擇器公有的部分，獨立出來寫一份；
例如以下三個選擇器：
*/
/*廣告一*/
.ad_1{
width:20px;
height:30px;
background:red;
float:left;
margin:3px;
}
/*廣告二*/
.ad_2{
width:30px;
height:40px;
background:red;
float:left;
margin:3px;
}
/*廣告三*/
.ad_3{
width:40px;
height:50px;
background:red;
float:left;
margin:3px;
}
/*由以上三個選擇器可進行以下改寫：*/
/*廣告一*/
.ad_1{
width:200px;
height:30px;
}
/*廣告二*/
.ad_2{
width:300px;
height:40px;
}
/*廣告三*/
.ad_3{
width:400px;
height:50px;
}
/*將以上三個選擇器的重合部分寫入以下選擇器*/
.ad_1,.ad_2,.ad_3{ /*注意用逗號隔開，否則就成了父子選擇器了*/
background:red;
float:left;
margin:3px;
}
/*注意，經過以上改造的選擇器還和原來一樣使用，新生成的選擇器 不需要出現在html檔案中，會自動識別重合屬性*/