### CSS常用的四種選擇器
**n????????類選擇器**
~~~
.類選擇器名{
屬性名：屬性值；
}
~~~
**n????????ID選擇器**
~~~
#選擇名{
屬性名：屬性值；
}
~~~
**n????????HTML元素選擇器**
~~~
表單{
屬性名：屬性值；
}
~~~
**n????????通配符選擇器**
**適用于全局，但優先級最低**
~~~
{
屬性名：屬性值；
}
~~~
**優先級排列：ID》類》HTML》通配符**
**?????????父子選擇器**
****
**/父子選擇器/**
~~~
#id1 span{
color:red;
font-style:italic;
}
#id1 span span{
color:green;
}
~~~
**注意：**
1、父子選擇器可以有多級，但是在實際開發中不要超過3層
2、有嚴格的層級關系；
3、類選擇器和ID選擇器都可以有父子選擇器，，可以組合，如 #id ?.s1 span ? ;
**?????????一個元素可以同時有ID選擇器和類選擇器**
**例子：**
**<span class="s1" id="id2">新聞一</span>**
**?????????一個元素最多有一個ID選擇器，但可以有多個類選擇器。**
**例子：**
**<span class="s1 s2"id="id2">新聞三</span> 。**
**當s1s2有沖突時，以那個為準：以他們在CSS文件中的位置，以位置靠后的哪個。**
**綜合實例：**
~~~
<html>
<head>
<title>CSS四種常用選擇器</title>
<!--引入我們的CSS-->
<link rel="stylesheet" type="text/css" href="slector.css"/>
</head>
<body>
類選擇器：<br/>
<span class="s1" id="id2">新聞一</span>
<span class="s1">新聞二</span>
<span class="s1 s2" id="id2">新聞三</span>
<span class="s1">新聞四</span><br/>
ID選擇器：<br/>
<span id="id1">這是一條<span>很<span>重要</span></span>的新聞</span><br/>
北京你好！！！！！！<br/>
<!--控制連接-->
<a href="">點我點我快點</a>
<a href="">點我點我快點</a>
<a href="">點我點我快點</a><br/>
<p class="one">從來沒有對你這么認真過！</p><br/>
<p class="two">從來沒有對你這么認真過！!!!!</p><br/>
</body>
</html>
~~~
~~~
.s1{
background-color:pink;
font-weight:bold;
font-size:20px;
color:black;
}
/*ID選擇器*/
#id1{
background-color:silver;
font-size:50px;
color:black;
}
/*HTML選擇器*/
body{
color:orange;
}
/*a超鏈接標記*/
a:link{
font-size:24px;
color:black;
text-decoration:none;
}
a:hover{
text-decoration:underline;
font-size:40px;
color:green;
}
a:visited{
color:red;
}
p.one{
color:blue;
font-size:50px;
}
p.two{
color:green;
font-size:20px;
}
/*通配符選擇器*/
*{
/*margin-top:0px;
margin-left:0px;*/
margin: 10px 30px;
/*margin :如果一個值（上右下左 順時針）
2 上下，左右
3
*/
}
/*父子選擇器*/
#id1 span{
color:red;
font-style:italic;
}
#id1 span span{
color:green;
}
/*對新聞1做特別的修飾*/
#id2{
color:red;
font-style:italic;
}
/*新聞三再配置一個類選擇器*/
.s2{
font-style:italic;
text-decoration:underline;
}
~~~
****
**n????????行內元素及塊元素**
**從案例可以看出行內元素它只占顯示自己內容的寬度并不換行**
**塊元素不管自己的內容右多少，會占據正行，換行顯示。**
**?????????常見的行內元素<a> <span> <nput>**
**?????????塊元素 <p> <div>**
**Display:block? 轉換為塊元素**
**Display:inline 轉換為行內元素**
**n????????CSS 之間的相互引用**
**n????????標準流和非標準流**
**流：html元素在網頁中顯示順序**
**標準流:在html文件，寫在前面的元素在前面顯示，寫在元素后面的在后面顯示**
**非標準流：在html中，當某個元素脫離的標準流。**
**n????????CSS中的盒子模型**
簡單案例
~~~
body{
/*1px 邊框寬度 solid 實線 red 顏色*/
border:1px solid red;
width:500px;
height:500px;
font-size:12px;
/*讓body自動居中*/
margin:0 auto;/*第一個用于上下，第二個用于左右。 auto 表示自動居中*/
}
/*盒子模型*/
.div1{
width:70px;
height:77px;
border:1px solid blue;
/*margin-top:5px;
margin-left:5px;
*/
margin:5px 0px 0px 5px;
}
/*子模型*/
.div1 img{
width:50px;
height:50px;
margin:5px 0px 0px 10px;
padding-bottom:5px;
}
a{
margin-left:10px;
}
~~~
~~~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 盒子模型案例 </title>
<link rel="stylesheet" type="text/css" href="box1.css"/>
</head>
<body>
<div class="div1">
<img src="3.jpg"/><br/>
<a href="">雅安祈福</a>
</div>
</body>
</html>
~~~
子模型img相對于div1又是一個盒子模型。所以這里使用padding和margin是一樣的
效果 圖
- 前言
- HTML（第一天）
- HTML（第二天）
- DIV+CSS(第一天）
- DIV+CSS(第二天）
- DIV+CSS(第三天）
- DIV+CSS(第四天）
- PHP開發環境配置說明
- PHP基礎數據類型及運算符介紹
- 走進PHP函數
- 走進位運算
- 走進數組及相關數組函數
- 面向對象的編程（類與對象)
- 面向對象的編程(類成員方法用法）
- 構造方法，析構方法
- static，global用法
- 靜態方法
- 面向對象的編程方法
- 接口方法
- 接口VS繼承、final、const
- 錯誤及異常處理機制、錯誤日志
- HTTP協議深度剖析
- 文件下載
- PHP數據庫編程
- 數據庫編程（2）
- 超全局變量
- Zend studio 開發環境入門
- 雇員管理系統（1）
- 雇員管理系統（2）
- 會話技術(cookie session)
- 會話技術 session場景使用介紹！
- PHP.in中session和cookie的配置說明
- PHP文件編程
- 報表及繪圖技術
- 報表及繪圖技術（jpgraph庫使用，Linux安裝及配置說明）
- XML基本語法及DTD介紹
- XML編程（Dom技術）
- XML編程（Xpath技術,simpleXml技術）基礎入門
- 網上支付平臺PHP版本
- javascript基礎入門