JavaWeb之CSS詳解

2016/10/21 8:50:01 閱讀：1736 發布者：1736

CSS的簡介

1、CSS概述及作用

　　CSS：Cascading Style Sheets）是層疊樣式表用來定義網頁的顯示效果。可以解決html代碼對樣式定義的
重復，提高了后期樣式代碼的可維護性，并增強了網頁的顯示效果功能。
作用：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。

2、 CSS和HTML的結合（*****）（四種）

　　CSS與HTML的結合方式

　　1.style屬性方式：

　　利用標簽中style屬性來改變每個標簽的顯示樣式。

　　例：　　

<p style="background-color:#FF0000; color:#FFFFFF"> 
        p標簽段落內容。 
</p>

　　該方式比較靈活，但是對于多個相同標簽的同一樣式定義比較麻煩，適合局部修改。

　　2.style標簽方式：（內嵌方式）

　　在head標簽中加入style標簽，對多個標簽進行統一修改。　　

<head> 
    <style type="text/css"> 
        p { color:#FF0000;} 
    </style> 
</head>

　　該方式可以對單個頁面的樣式進行統一設置，但對于局部不夠靈活。

　　3.導入方式：（常用的方式）

　　前提是已經存在一個定義好的CSS文件。網頁的一部分樣式需要用到，那么就用到這種方式。

　　例：

<style type="text/css"> 
    @import url(css_3.css); 
    div { color:#FF0000;} 
</style>

　　定義一個外部的CSS文件（.css）結尾的。
@import url("css文件的地址");需要寫在<style>標簽的內部

　　注：url括號后面必須要用分號結束。如果導入進來的樣式與本頁面定義的樣式重復，以本頁定義樣式為準。

　　4.鏈接方式：（常用的方式）

　　通過head標簽中link標簽來實現，前提也是先要有一個已定好的CSS文件。

　　例：　　

<link rel="stylesheet" type="text/css" href="css_3.css" />

　　<link rel="stylesheet" type="text/css" href="CSS文件的地址" > ，
不能寫在<style>內部，寫在<head>標簽的內部。
rel：代表當前的文件和引入文件的關系。
type：類型
href：CSS的地址

　　注：可以通過多個link標簽鏈接進來多個CSS文件。重復樣式以最后鏈接進來的CSS樣式為準。

3、CSS樣式優先級和代碼規范

　　1.CSS的優先級

　　（一般情況下）從上到下，由外到內，優先級從低到高的。
特殊情況：標簽名選擇器 < class選擇器 < ID選擇器 < style屬性

　　2. CSS的代碼規范

　　（1）選擇器名稱{屬性名:屬性值;屬性名:屬性值;...}

　　（2）屬性與屬性之間用分號隔開
（3）屬性與屬性值直接按用冒號連接

　　（3）如果一個屬性有多個值，值與值直接用空格隔開
例子　

div{border:值1 值2 值3}

4、CSS的選擇器（*****）

　　1.選擇器：

　　編寫的CSS代碼作用在哪個標簽上。

　　2.基本選擇器：

　　（1）標簽名選擇器

　　每一個標簽都定義了class屬性和id屬性。用于對標簽進行標識，方便對標簽進行操作。
在定義的中，多個標簽的class屬性值可以相同，而id值要唯一，因為JavaScript中經常用。

　　（2）class選擇器：（常用的）
在標簽中定義class屬性并賦值。通過標簽名.class值對該標簽進行樣式設置。
例：
相同標簽設置不同樣式的時候，用class進行區分。

p.pclass_1 {color:#FF0000;} 
p.pclass_2 {color:#0000FF;}

<p class="pclass_1">P標簽樣式</p> 
<p class="pclass_2">P標簽樣式</p>

不同標簽進行相同設置的時候，用class進行統一定義。

.classname {color:#00FF00;} 

<p class="classname">P標簽樣式</p> 
<div class="classname">DIV標簽樣式</div>

　　（3）id選擇器：
與class選擇器類似，但格式不同，選擇器的名稱為：#id值。
例：

#pid { color:#0000FF;} 
<p id="pid">P標簽樣式</p>

　　注：多個標簽同樣可以定義相同的id值，但是對于JavaScript對標簽元素的獲取就會出錯。
所以形成習慣，確保id值的唯一性對于以后的數據庫設計也很有好處。

　　優先級（特殊）：
標簽名選擇器 < class選擇器 < ID選擇器 < style屬性

　　3.擴展選擇器：

　　（1）關聯選擇器：多個標簽之間產生關系。

　　標簽是可以嵌套的，要讓相同標簽中的不同標簽顯示不同樣式，就可以用此選擇器。　　

　　例：　　

p { color:#00FF00;} 
p b { color:#FF000;} 
<p>P標簽<b>劉德華</b>段落樣式</p> 
<p>P標簽段落</p>

　　注：中間用空格隔開

　　（2）組合選擇器：對多個不同的選擇器設置相同的樣式　　

p,div { color:#FF0000;} 
<p>P標簽顯示段落。</p> 
<div>DIV標簽顯示段落</div>

　　注：中間用逗號隔開
（3）偽元素選擇器：CSS定義好的選擇器
如果使用超鏈接的4個狀態，使用的順序： L V H A　　

　　其實就在html中預先定義好的一些選擇器。稱為偽元素。是因為CSS的術語。

　　格式：標簽名：偽元素。類名標簽名。類名：偽元素。都可以。

　　a:link 超鏈接未點擊狀態。 text-decoration: none;

　　a:visited 被訪問后的狀態。

　　a:hover 光標移到超鏈接上的狀態（未點擊）。

　　a:active 點擊超鏈接時的狀態。

　　使用順序 L – V – H - A

　　p:first-line 段落的第一行文本。

　　p:first-letter 段落中的第一個字母。

　　p:focus 具有焦點的元素。IE6瀏覽器不支持，在FireFox中可以看到效果。

　　CSS的簡單練習（查閱文檔）

table { 
font-family: 隸書; 
font-size:14px; 
color:black; 
border-width: 1px; 
border-color: gray; 
border-collapse: collapse; 
width: 200px; 
} 
table th { 
border-width: 1px; 
padding: 8px; 
border-style: solid; 
border-color: gray; 
background-color: #dedede; 
} 
table td { 
border-width: 1px; 
padding: 8px; 
border-style: solid; 
border-color: gray; 
background-color: #ffffff; 
}

5、CSS的布局（了解）

　　1.盒子模型

　　在進行布局前需要把數據封裝到一塊一塊的區域內，這個區域的專業術語叫盒子。

　　　　邊框（border）分為上下左右

　　　　內邊距（padding）分為上下左右

　　　　外邊距（margin）分為上下左右

　　2.CSS布局漂浮屬性　

　　float（漂浮）

　　　　none :　默認值。對象不飄浮
left :　文本流向對象的右邊
right :　文本流向對象的左邊

　　clear（清除）

　　　　none :　默認值。允許兩邊都可以有浮動對象
left :　不允許左邊有浮動對象
right :　不允許右邊有浮動對象
both :　不允許有浮動對象

　　3.CSS布局定位屬性

　　position
static :　默認值。無特殊定位，對象遵循HTML定位規則
absolute :　將對象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對
于其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據 body 對象。
而其層疊通過 z-index 屬性 relative :　對象不可層疊，但將依據 left ， right ， top ， bottom 等
屬性在正常文檔流中偏移位置

上一篇 html5標簽css3的常用樣式

下一篇 css3選擇器