定义CSS
1.1 定義CSS的基本語法
在生活中，我們描述一個對象的時候，比如一個學生的基本情況，可以這樣進行描述：
李敏{
年齡:18;
性別:男;
身高:175：
}
通過這樣的描述把一個學生的基本信息都表達清楚了，其中的要素有3個：姓名、屬性和屬性值。每一組屬性和屬性值都描述了學生這個對象某方面的一個特性。同樣，CSS用于網頁元素的某方面特性的設置，因此我們可以采用類似上面這樣的描述方法來通過CSS設置網頁的顯示效果。例如：
1級標題{
字體:黑體;
大小:24像素;
顏色:黑色；
}
因為實際的代碼都采用了英文書寫，所以可以得到如下代碼：
h1{
font-family:黑體；
font-size:24px;
color:black;
}
這就是CSS代碼。可見，CSS代碼非常簡單，只要理解了它的含義，很快就可以掌握。CSS就是由“對象”、“屬性”和“值”3個基本部分組成的。
CSS基本語法：選擇器{屬性1:屬性值; 屬性2:屬性值;...}
?
1.2 CSS基本選擇器
在CSS的3個組成部分中，“對象”是很重要的，它指定了對哪些網頁元素進行樣式設置。所以，它有一個專門的名稱——選擇器（selector）。所有的HTML語言中的標記樣式都是通過不同的CSS選擇器進行控制的。用戶只需要通過選擇器對不同的HTML標簽進行選擇，并賦予各種樣式的聲明，即可實現各種效果。
在CSS中，有幾種不同的選擇器，可分為基本選擇器和復合選擇器。基本選擇器有3種，復合選擇器是通過對基本選擇器進行組合構成的。
基本選擇器包括3種，分別是HTML標記選擇器、類選擇器和ID選擇器。
1.2.1HTML標記選擇器
網頁是由HTML標記組成的，CSS的HTML標記選擇器的作用就是聲明哪些HTML標記采用了哪些CSS樣式。所以，網頁中的任何一個HTML標記都可以作為相應的標記選擇器的名稱。例如div選擇器就是聲明當前頁面中所有的<div>標記的顯示效果，例如下面的代碼：
<style>
div(標記選擇器){
border-width:10px;
border-color:red;
margin:20px;
}
</style>
上述CSS代碼聲明了HTML頁面中所有的<div>標記，采用的邊框寬度都是10px，邊框顏色都為紅色，外邊距都為20px。
1.2.2 類選擇器
使用HTML標記選擇器可以設置頁面中所有相同標記的統一格式，但如果需要對相同標記中某些個別標記做特殊效果設置，使用HTML標記選擇器就無法實現了，需要引入其他的選擇器。
類(class)選擇器允許以一種獨立于文檔元素的方式來指定樣式。class選擇器的對象名稱可以由用戶自定義，屬性和屬性值的設置和HTML標記選擇器相同。類選擇器語法結構：
.classname{property:value;}
【示例】類選擇器應用
<!-- .html文件 -->
<html>
<head>
<meta charset="utf-8">
<title>類選擇器示例</title>
<link href="new_file.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="a1"> a </div>
<div class="a2"> b </div>
<div> c </div>
</body>
</html>
<!-- .css文件 -->
div{
border-style: dashed;
border-width: 5px;
border-color: yellow;
margin: 10px;
}
.a1{
border-style:solid;
border-width:1px;
border-color:red;
margin: auto;
}
.a2{
border-style: dotted;
border-width: 1px;
border-color: blue;
margin: 20px;
}
在HTML網頁中可以同時使用多個class選擇器。
1.2.3 ID選擇器
其實ID選擇器跟類選擇器(class selector)的功能一樣，兩者主要的區別在于它們的語法和用法不同。ID選擇器在HTML頁面中必須唯一，針對性更強。另外，ID選擇器對于javascript操縱HTML元素有幫助。
基本語法：#IDname{property:value;}
ID選擇器不能用于多個標記。因為每個標記定義的id不只是CSS來調用的，javascript等其他頁面腳本語言都可能進行調用。那么，當一個頁面中出現多個相同的id時，將導致調用出錯。所以，在設計網頁時，應該考慮到id選擇器被調用的特點。
?
1.3 CSS復合選擇器
1.3.1 交集選擇器
交集選擇器是由兩個選擇器直接連接構成，結果是二者各自元素范圍的交集。其中第一個選擇器必須是標記選擇器，第二個選擇器必須是類選擇器或者ID選擇器。兩個選擇器之間必須連續寫，不能有空格。交集選擇器語法結構為：h1.class{property:value;}
【交集選擇器示例】
<html>
<head>
<meta charset="utf-8">
<title>交集選擇器示例</title>
<style type="text/css">
div{
border-style: dashed;
border-width: 1px;
}
div.a1{
border-color: red;
background:#999999
}
.a1{
background: #33ffcc;
}
</style>
</head>
<body>
<div> 普通效果 </div>
<div class="a1"> 交集選擇器效果 </div>
<p class="a1">類選擇器效果</p>
</body>
</html>
1.3.2 并集選擇器
另一種復合選擇器是并集選擇器，它的特點是對各種基本選擇器所選擇的范圍同時選中，任何形式的基本選擇器都可以作為并集選擇器的一個組成部分。并集選擇器語法結構為：h1,h2,class{property:value;}
【示例】并集選擇器應用
<html>
<head>
<meta charset="utf-8">
<title>并集選擇器示例</title>
<style type="text/css">
div{
border-style: dashed;
border-width: 1px;
}
h1,h2,div{
background:#999999;
}
</style>
</head>
<body>
<div> 并集選擇器效果 </div>
<h1> 并集選擇器效果 </h1>
<h2> 并集選擇器效果 </h2>
</body>
</html>
1.3.3 后代選擇器
CSS選擇器可以通過嵌套的方式對特殊位置的HTML標記進行聲明，如<div>標記中包含<p>標記，就可以通過后代選擇器進行控制。后代選擇器的寫法是嵌套外層的標記寫在前面，內層的標記寫在后面，中間用空格隔開。內層的標記稱為外層標記的后代。后代選擇器語法結構如下：div p{property:value;}
【示例】后代選擇器應用
<html>
<head>
<meta charset="utf-8">
<title>并集選擇器示例</title>
<style type="text/css">
div{
border-style: solid;
border-width: 1px;
border-color: red;
}
p{
background:#999999;
}
div p{
background:#ffff99;
border-style: solid;
border-width: 1px;
border-color: blue;
}
</style>
</head>
<body>
<div> 不是后代選擇器效果 </div>
<p> 不是后代選擇器效果 </p>
<div> 后代選擇器效果 <p>效果</p> </div>
</body>
</html>
后代選擇器不僅可以使用標記選擇器進行嵌套，也可以使用類選擇器和ID選擇器。
轉載于:https://www.cnblogs.com/jacinthcc/p/4684305.html
總結
- 上一篇： mysql中sql语句
- 下一篇： 最后一片蓝海的终极狂欢-写在Win10发