JavaWeb之CSS詳解

CSS的簡介

1、CSS概述及作用

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

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

　　CSS與HTML的結合方式

　　1.style屬性方式：

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

　　例：　　 

<span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="background-color:#FF0000; color:#FFFFFF"</span><span style="color: #0000ff">></span><span style="color: #000000">
        p标签段落内容。
</span><span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>

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

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

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

<span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">=”text/css”</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">
        p </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">#FF0000</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #000000">}</span>
    <span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>

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

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

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

　　例：

<span style="color: #0000ff"><</span><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">
    @import url(css_3.css);
    div </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">#FF0000</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #000000">}</span>
<span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>　　

　　定義一個外部的CSS檔案（.css）結尾的。
　　@import url("css檔案的位址");需要寫在

　　註：url括號後面必須要用分號結束。如果匯入進來的樣式與本頁面定義的樣式重複，以本頁定義樣式為準。

　　4.連結方式：（常用的方式）

　　透過head標籤中link標籤來實現，前提也是先要有一個已定好的CSS檔案。

　　例：　　

<span style="color: #0000ff"><</span><span style="color: #800000">link </span><span style="color: #ff0000">rel</span><span style="color: #0000ff">="stylesheet"</span><span style="color: #ff0000"> type</span><span style="color: #0000ff">="text/css"</span><span style="color: #ff0000"> href</span><span style="color: #0000ff">="css_3.css"</span> <span style="color: #0000ff">/></span>

　　 ，不能寫在

 

　　註：可以透過多個link標籤連結進來多個CSS檔案。重複樣式以最後連結進來的CSS樣式為準。

3、CSS樣式優先權和代碼規範

　　1.CSS的優先順序

　　（一般情況下）從上到下，由外到內，優先級從低到高的。
　　 特殊情況：標籤名稱選擇器

　　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進行區分。

<span style="color: #000000">p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}</span>

<span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">class</span><span style="color: #0000ff">=”pclass_1”</span><span style="color: #0000ff">></span>P标签样式<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">class</span><span style="color: #0000ff">=”pclass_2”</span><span style="color: #0000ff">></span>P标签样式<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>

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

<span style="color: #000000">.classname {color:#00FF00;}

</span><span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">class</span><span style="color: #0000ff">=”classname”</span><span style="color: #0000ff">></span>P标签样式<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">=”classname”</span><span style="color: #0000ff">></span>DIV标签样式<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

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

<span style="color: #000000">#pid { color:#0000FF;}
</span><span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">id</span><span style="color: #0000ff">=”pid”</span><span style="color: #0000ff">></span>P标签样式<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>

　　註：多個標籤同樣可以定義相同的id值，但是對於JavaScript對標籤元素的取得就會出錯。所以形成習慣，確保id值的唯一性對於以後的資料庫設計也很有好處。

　　優先權（特殊）：
　　標籤名稱選擇器

　　3.擴充選擇器：

　　（1）關聯選擇器：多個標籤之間產生關係。
　　中間用空格隔開
　　（2）組合選擇器：對多個不同的選擇器設定相同的樣式
　　中間用逗號隔開
　　（3）偽元素選擇器：CSS定義好的選擇器〟『連結的4個狀態，使用的順序： L V H A

 

5、CSS的版面（了解）

* 盒子模型