| float | 輸入樣式表 | Cpoyright | |
| clear | DIV+CSS的好處 | 我的部落格 | |
| margin | 樣式規則的選取器 | 給我發郵件 | |
| padding | 教程未完待續。。。 | LAMP培訓專家 |
DIV本身有容器的性質，它裡面可以嵌套任何HTML代碼。但<p></p>中不能嵌套<div>標籤
不過即使<p></p>中嵌套了<div>，瀏覽器也不會報錯。另外利用更換CSS，可實現頁面換膚功能
將樣式作用於螢幕或投影儀上<style media="screen, projection"> p {color:red} </style>
作為一個網頁，頁面的長度最好不要超過三屏，如果內容特別多的話，就可以把它做成選項卡
在<style>中是不會執行HTML代碼的，所以用來注釋HTML代碼的<!-- -->在<style>中不起作用
寫樣式時，通常會在<style>中加上<!--...//-->。如<style> <!-- p {color:red} //--> </style>
若瀏覽器不支援樣式，那麼這裡面的內容就會顯示出來。若支援的話，<!--...//-->則不起作用
輸入樣式表【CSS樣式分為：內聯式樣式表、內置樣式表、外部樣式表、輸入樣式表】
使用CSS中的@import語句將外部樣式表檔案，輸入到<style>標籤或CSS檔案中
demo.css內容：div {color:yellow; font-size:4cm;}
test.css內容：p {color:green; font-size:3cm;} @import url(demo.css);
<html>
<!--
<head> <link rel="stylesheet" type="text/css" href="test.css"/> </head>
<head> <style>@import url(test.css);</style> </head>
<head> <style><!-- @import url(test.css); //--></style> </head>
<head> <style>p {color:green; font-size:3cm;} @import url(demo.css);</style> </head>
-->
<body>
<p>aaaaaaaaaaa</p>
<div>bbbbbbbb</div>
</body>
</html>
樣式規則的選取器
HTML selector：直接在{}前面寫HTML標籤，此時{}中定義的CSS效果只作用於該HTML標籤上。如p {color:red}只作用於<p></p>中
CLASS selector：舉例p.one {color:red}以及p.two {color:grey}，應用時<p class="one">aaa</p>以及<p class="two">bbb</p>
再如.one {color:red}以及.two {color:grey}，應用時<p class="one">aaa</p>以及<h2 class="one">bb<h2>
ID selector：舉例#one {color:red}以及#two {color:grey}，應用時<p id="one">aaa</p>以及<p id="two">bbb</p>
每個HTML標籤中都有id屬性，但在同一個頁面中所有的id屬性都是不能重複的
若頁面中只有一個HTML標籤會用到該樣式的話，則將其定義成ID的。若可能被多個標籤使用的話，則做成CLASS的
關聯選取器：舉例center p em {color:red}，應用該CSS時則要求<center>標籤中必須有<p>標籤，而<p>標籤中必須有<em>標籤
所以這三種應用方式都是無效的，即<p><em>bbb</em></p>，<p>aaa</p><em>bbb</em>，<em><p>aaa</p></em>
只有<center><p><em>bbb</em></p></center>才會有效顯示CSS效果
再如.one .two em {color:red}，應用時<center class="one"><p class="two"><em>bbb</em></p></center>有效
又如#one .two em {color:red}，應用時<center id="one"><p class="two"><em>bbb</em></p></center>有效
組合選取器：舉例p,div,h2,.one,#two {color:red}，此時<p>、<div>、<h2>以及各標籤的class和id屬性都可以使用該CSS樣式
應用時<p>aaaaaa</p><div>bbb</div><em class="one">cccc</em><b id="two">dddddd</b>有效
關聯選取器中是用空格隔開的，組合選取器中是用逗號隔開的
虛擬元素選取器：是指對同一個HTML元素的各種狀態和其所包含的部分內容的一種定義方式
比如<a>標籤作為連結，它有各種狀態，滑鼠放上去是一種狀態，滑鼠離開又是一種狀態，滑鼠點擊後又是一種狀態
而且並不是所有標籤都有虛擬元素，比如常用的<a>標籤有虛擬元素，<p>標籤也有。<p>段落的第一行文本或第一個字母
對應同一個標籤的虛擬元素的不同狀態，都要一一定義它們的CSS效果，下面以<a>標籤為例
正常狀態a:link {font-size:1cm; color:red}，游標移動到連結上的狀態a:hover {font-size:5cm; color:green}
訪問過的狀態a:visited {font-size:2cm; color:yellow}，應用時<a href="http://www.lampuser.com">LAMP</a>
也可以讓<a>的虛擬元素和CLASS一起使用，如a.one:link {font-size:1cm; color:red}
應用時<a class="one" href="http://www.lampuser.com">LAMP</a>即可。。所以對於這六個選取器，可以靈活使用
DIV+CSS的好處
DIV承載的是網頁的內容，CSS承載的是網頁的樣式，其優點如下
①便於改版
②提高易用性
③Table布局不夠靈活
④使得表現和內容分離
⑤更好的控制頁面配置
⑥結構清晰，易被搜尋引擎搜尋
搜尋引擎會繞過CSS而直接到頁面中取得想要的內容。搜尋引擎只關心內容，不關心頁面樣式
若頁面中大量使用<table>布局，那麼搜尋引擎會花很多時間很大的代價才能得到想要的資訊，並且<table>也特別占頻寬
另外搜尋引擎爬到頁面後，會首先尋找<h1>---<h6>標題文字，其中<h3>最有利於搜尋引擎尋找到，所以通常用<h3>作為標題
margin：外邊距的標籤屬性
舉例.bianjv {margin-bottom:1cm; margin-top:2cm; margin-left:3cm; margin-right:4cm}，應用時<p class="bianjv">aaa</p>即可
它等同於.bianjv {margin:1cm 2cm 3cm 4cm;}。另外也可自動布局，如.bianjv {margin:auto 0px}或者.bianjv {margin-left:auto}等等
使用margin綜合設定如.bianjv {margin:1cm 2cm 3cm;}也是可以的，它會自動匹配到margin-bottom和margin-top和margin-left屬性上
padding：內邊距的標籤屬性
舉例td {padding-left:1cm; padding-right:2cm; padding-top:3cm; padding-bottom:4cm;}
應用<table border="1"><tr><td>aaaaaaaa</td></tr></table>，這時<td>aaa</td>就會自動套用該CSS效果
float：指定文本或映像或某地區相對於另一地區的對齊，取值為none或left或right
舉例.one {float:right;}，應用時<p class="one">aaa</p>
clear：指定元素的身邊是否允許有浮動的元素，取值為none或left或right或both
舉例.one {float:right; clear:left;}，應用時<b>aaa</b><b class="one">bbb</b>
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
