標籤：
一個網頁中存在哪些內容由HTML決定，而這些內容長成什麼樣子由CSS決定;
CSS是Cascading Style Sheet這幾個單詞的英文縮寫，翻譯成中文是層疊樣式表。CSS能夠讓網頁製作者有效定製，改善網頁的效果。
CSS是對HTML的補充， 網頁製作者曾經為無法很好的控制網頁的顯示效果而倍感苦惱，CSS的出現解決了這個問題;之前寫出漂亮的網頁需要用到大量HTML的屬性;
CSS實現了網頁內容和頁面效果的徹底分離;這句話的意思就是我們在寫CSS代碼的時候，基本上不去影響HTML;
Ctrl+j彈出智能提示的快速鍵;
三種方式向HTML頁面中寫入CSS代碼;
1.內聯樣式表，
在HTML標籤中寫入CSS代碼;<p style="background:red;font-size:xx-large">今天天氣好晴朗</p>
優點:比較靈活，想給誰設定就給誰設定; 缺點：如果要使得其他段落文字也是這樣的效果，要寫很多重複的代碼;
2.內建樣式表，需要在head標籤內寫
<head>
<style type = "text/css">
p{ font-size:xx-small;} //給HTML中所有P標籤設定樣式
</style>
</head>
優點：可以給大批的標籤一次性設定樣式; 缺點：是給單獨的某一個標籤設定樣式的話比較麻煩;
外部樣式表link：
<link href = "Test.css" rel = "stylesheet" /> 這段代碼如果不想寫的話，可以將那個css檔案直接拖到這個HTML頁面
link和style是平級的關係，都在head裡面;
三種方法的優先順序是 內聯樣式表>內建樣式表>外部樣式表;
樣式規則的選取器(通過怎樣的途徑來獲得頁面上要設定樣式的元素)
HTML選取器;
<head>
<style type = "text/css">
p{background-color:yellow; font-size:xx-small;} //給HTML中所有P標籤設定樣式
</style>
</head>
類別選取器：//獲得指定class的HTML標籤;需要給要設定樣式的元素的class屬性賦值
<tt class = "tt1">床前明月光，疑是地上霜，舉頭望明月，低頭思故鄉</tt>
<tt class = "tt2">床前明月光，疑是地上霜，舉頭望明月，低頭思故鄉</tt>
<head>
<style type = "text/css">
tt.tt1{ background-color:red; }//給HTML中所有P標籤設定樣式,也可以去掉tt,寫.tt1
tt.tt2{ background-color:green; }
</style>
</head>
ID選取器:
ID選取器用法跟類別選取器用法差不多，類別選取器前面用.，ID選取器前面加#
<p id = "p1">今天天氣好晴朗</p>
<p id = "p2">今天天氣好晴朗</p>
<p id = "p3">今天天氣好晴朗</p>
<head>
<style type = "text/css">
#p1{ background-color:red;}
#p2{ background-color:green;}
</style>
</head>
當某些元素使用同一個樣式的時候，我們使用類別選取器，class;
盡量不要給標籤賦值同一個id,要保證每一個id都是唯一的。
總而言之，單一給元素樣式的時候，用id,給同一類相同的樣式的時候就用class；
關聯選取器，
<head>
<style type = "text/css">
p em{ background-color:red;}
</style>
</head>
<p><em>今天天氣好晴朗</em></p>
<em>今天天氣好晴朗</em>
<em>今天天氣好晴朗</em>
只有第一行背景顏色變紅了，
組合選取器：
<head>
<style type = "text/css">
h1,h2,h3,h4,h5,h6,td{ background-color:red;}
</style>
</head>
<h1>我是一個粉刷匠</h1>
<h2>我是一個粉刷匠</h2>
<h3>我是一個粉刷匠</h3>
<h4>我是一個粉刷匠</h4>
<h5>我是一個粉刷匠</h5>
<h6>我是一個粉刷匠</h6>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
虛擬元素選取器
是指對同一個HTML元素的各種狀態和其所包括的部分內容的一種定義方式。
例如，對於超連結標籤(<a></a>)的正常狀態 (沒有任何動作前)，被訪問過的狀態，選中狀態，游標移到超連結文本上的狀態，對於段落的首字母和首行，都可以使用虛擬元素選取器來定義
目前常用的虛擬元素有以下幾種
A：active 選中超連結時的狀態
A：hover 游標移動到超連結上的狀態
A：link 超連結的正常狀態
A：visited 瀏覽過的超連結狀態
P：first-line 段落中的第一行文本
P：first-letter 段落中的第一個字母
Css當中的屬性非常多，大體可以分為以下幾類：字型，背景，文本，位置，布局，邊緣，列表
字型：
Font-family:該屬性用於設定字型系列
Font-size:該屬性定義文字的大小， 絕對大小的設定xx-small,x-small,small,medium,large,x-large,xx-large
font-style:該屬性用於定義字型樣式為Normal,Italic,Oblique
text-decoration:該屬性用於在文本中條件底線，上劃線，中劃線
font-weight:該屬性用於設定粗體字的磅值，normal,bold,bolder,lighter,100-900
背景：
Repeat-x和Repeat-y 分別在水平或者垂直方向上重複
Background-attachment:確定背景映像是否隨內容滾動 設定為fixed時，表示固定背景映像，為scroll時，表示映像跟隨內容的移動而移動
Background-position:指定背景映像的水平位置和垂直位置，水平位置的取值可以是left,center,right,也可以是數值，垂直的取值可以是top,center,bottom
body{
background-image:url(1.jpg);
Background-attachment:fixed;
Background-color:yellow;
}
我們在網頁當中排列元素的時候，所有元素都遵循一個規則，就是從上到下依次去排列，不會有一個重合的，從上到下，從左至右。
由於html元素(比如div)遵循文檔流，自己佔一層，如果要在這一層裡有別的二個div,那麼要使這3個div脫離文檔流的控制;
<head>
<style type = "text/css">
div {
height : 300px;
width : 300px;
}
div.div1 {
background-color:red;
top:100px; //距離頂端
left:100px;
position:absolute;/*絕對位置，到哪就是哪*/ 破換文檔流
z-index:3; //z-index越大，越顯示在外面;
}
div.div2 {
background-color:yellow;
top:130px;
left:130px;
position:absolute;
z-index:2;
}
div.div3 {
background-color:green;
top:160px;
left:160px;
position:absolute;
z-index:1;
}
</style>
</head>
<body>
<div class = "div1"></div>
<div class = "div2"></div>
<div class = "div3"></div>
</body>
<head>
<style type = "text/css">
.div {
right : 0px;
bottom : 0px;
position:fixed; //固定;
background-color:green;
height:300px;
width:300px;
}
</style>
</head>
<body>
<div class="div1"></div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> //把網頁變長
</body>
文本：
文本的屬性包括：文字間距，對齊，上標，下標，相片順序，首行縮排
Word-spacing:設定單詞之間的間距
Letter-spacing:設定字元之間的間距
Text-align:設定文本的水平對齊，取值可以是left,right,center,justfy
Text-indent:設定第一行文本的縮排值；
Line-height:設定文本所在行的行高;
寫網頁的時候，其實就是一個蓋房子的過程;寫網頁的時候，也是一個個div堆積起來的，網站中用到了大量的div,看到的小模組就是一個div
盒子模型，一個盒子就是一個div。盒子跟網頁，或者說盒子跟div之間的距離用margin表示，margin-top left right bottom
盒子和盒子裡面的 內容之間的距離用padding，還有一個border屬性指的是盒子的邊框;
margin{上，右，下，左};
如果唯寫三個，{上，左右，下}
如果唯寫二個，{上下，左右}
如果唯寫一個，{上下左右}
*{margin:0px;} *表示獲得所有標籤; margin: 0px; 表示上右下左全部是0;
padding也是這個道理 padding,margin可以寫在div裡; 有些網頁左邊和右邊有一部分是空白的,
<head>
<style type = "text/css">
.divindex{
width:900px;
height:800px;
background-color:yellow;
margin:0px auto; //置中顯示，上下為0，左右自動調整;如果靠右的話，float:right
}
.divlogo{
width:900px;
height:100px;
background-color:red;
}
.divcontent{
width = 900px;
height = 300px;
background-color:green;
}
.divPicture{
width = 300px;
height = 300px;
background-color:blue
float:left; //不加這句靠左漂浮的話，不能達到.divPicture，.divText在.divcontent上填充的效果，會一上一下，因為要遵循文檔流;
}
.divText{
width = 300px;
height = 600px;
background-color:purple
float:left;
}
</style>
</head>
<body>
<div class = "divindex">
<!-- logo -->
<div class = "divlogo">
<img src="image/11.jpg" height = 100px width = 900px/>
</div>
<!-- content -->
<div class = "divContent">
<div class = "divPicture"> divText,divPicture漂浮在divContent上;
</div>
<div class = "divText"> </div>
</div>
</div>
</body>
寫網頁的時候我們都是先把局給一塊一塊布好，再往裡面填內容;我們怎麼區分一塊一塊，一般都給每一塊div一個背景顏色;最終寫完之後把背景顏色去掉;
<head>
<style type = "text/css">
* { margin:0px; font-size:12px; }
div.divindex{ height:380px; width:290px; background-color:yellow; float:right; }
div.div1{ width = 290px; height:35px; background-color:blue; color:white; text-align:center; // padding:5px;給div加padding他自己也會變大。因此加在P上 }
div.div1 p{ padding:8px font-size :18px; }
#table1{ width:290px; }
td.td2{ color：#246DB2; padding: 6px; border-bottom: 1px dashed #000000; }
td.td3{ color：red; font-weight:bolder; border-bottom: 1px dashed #000000; text-align:right; }
</style>
</head>
<body>
<div class="divindex">
<table id = "table1">
<tr>
<td><div class="div1"><p>.Net培訓開班資訊</p></div></td>
</tr>
<tr>
<td class="td2">北京，2014年5月5號</td>
<td class="td3">預約報名中</td>
</tr>
<tr>
<td class="td2">北京，2014年5月5號</td>
<td class="td3">預約報名中</td>
</tr>
<tr>
<td class="td2">北京，2014年5月5號</td>
<td class="td3">預約報名中</td>
</tr>
<tr>
<td class="td2">北京，2014年5月5號</td>
<td class="td3">預約報名中</td>
</tr>
</table>
</div>
</body>
有時候設定樣式外面內建樣式表不行，不妨試試內聯樣式表;
導航
<head>
<title></title>
<style type = "text/css">
*{margin:0px; }
div{
background-color:yellow;
height:30px;
width:800px;
margin: 0px auto
}
ul li{
float:left //漂浮，可以使得它不是向下排列
list-style:none; //可以去掉ul中li的點
width : 150px //可以使得它排列很均勻，不是貼在一起;
line-height:30px//可以讓導航的字下來;
}
A hover{
font-size : x-large;
background-color : pink;
}
</style>
</head>
<body>
<div>
<ul>
<li>公司簡介</li>
<li>企業文化</li>
<li>產品介紹</li>
<li>交易大廳</li>
<li>聯絡我們</li>
</ul>
</div>
</body>
15-02-20 CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
