css樣式表

標籤：調用   添加   imp   標籤   int   複雜   連結   nbsp   link   

一、定義及其分類
1.what:
層疊樣式表是一種用來表現HTML(標準通用編輯語言的一個應用)或XML(標準通用標記語言 (SGML)的一個子集)等檔案樣式的電腦語言。
2.why:
css標準中重新定義了HTML中原來的文字顯示樣式，增加了一些新概念，如類、層等，可以對文字重疊、定位等。在css還沒有引入到頁面設計之前，傳統的HTML語言等實現頁面美化在設計上是十分麻煩的，例如要設計頁面中文字的樣式，如果使用傳統的HTML語句來設計頁面就不得不在每個需要設計的文字上都定義樣式。css的出現改變了這一傳統模式。
3.how:
css中包括三部分內容:選擇符，屬性，屬性值
選擇符{屬性:屬性值;}
1.選擇符:又稱選取器，所有HTML語言中的標記都是通過不同的css選取器進行控制的。
2.屬性:主要包括字型屬性、文字屬性、背景屬性、布局屬性、邊界屬性、清單項目屬性、表格屬性等內容。其中一些屬性只有部分瀏覽器支援，因此使css屬性的使用變得更加複雜/
3.屬性值:為某屬性的有效值。屬性與屬性值之間用":"分號隔開。當有多個屬性時，使用";"分隔。
舉例:
<style>
h2{
font-family:宋體;
color:red;
}
</style>
注: h2 為選取器; font-family 為屬性; 宋體 為屬性值

1.css選取器:常用的有標記選取器，類別選取器，id選取器等。
1）.標記選取器:(又叫元素選取器，類型選取器)
what:HTML頁面是由很多標記組成的，例像標記<img>、超連結標記<a>、表格標記<table>等。而css標記選取器就是聲明頁面中哪些標記採用css樣式。
how:
舉例:
<style>
a{
font-size:9px;
color:#F93;
}
<style>
2）.類別選取器:
what: 點(.)+類別名稱
why:使用標記選取器有局限性。如果聲明標記選取器，那麼頁面中所有該標記內容都會發生變化。假設頁面中有3個<h2>標記，若想每個<h2>的顯示效果都不一樣，則可以使用類別標記器。
how:1.類別選取器的HTML標記，只需使用class屬性來聲明即可。
2.在HTML標籤中，可以應用多種類別選取器，這樣可以使HTML同時載入多個類別選取器的樣式。在多種類別選取器之間用空格進行分割，例如:<h2 class="one two">。
注:1.瀏覽器按照html文檔順序讀取各個樣式表，後面的樣式表會覆蓋掉前面樣式表的相同屬性的樣式。
2.在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正確地處理多類別選取器。
舉例:

運行結果:

3）.id選取器
what:id選取器是通過HTML頁面中的id屬性來選擇添加樣式，與類別選取器基本相同。
how:1."#"+id 屬性值
命名id選取器要以"#"號開始，後加HTML標記中的id屬性值。
2.由於HTML頁面中不能包含兩個相同的id標記，因此定義的id選取器也就只能使用一次。
注:這裡可能會出現這種情況，可能很多朋友不理解。:

id選取器舉例:

運行結果:

 

關係:
1.什麼時候使用id選取器，什麼時候使用class選取器?
答:根據它們的特性。W3C這樣規定的，在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。這樣，一般網站分為頭，體，腳部分，因為考慮到它們在同一頁面只會出現一次，所以用id。如果你定義一個顏色為紅色的class，在同一個頁面要使用很多次，就用class定義。另外，當頁面中用到js或者動態調用對象的時候，要用到id，所以根據自己的情況運用。
2. 三原則，優先順序等等

二、HTML中引入css的四種方式及其比較(行內樣式，內嵌式，連結式，匯入式)
1.行內樣式:
行內樣式是比較直接的一種樣式，直接定義在HTML標記之內，通過style屬性來實現。(這種方式初學者容易接受，但是靈活性不強)
舉例:

運行結果:

2.內嵌式:
內嵌式樣式表就是在頁面中使用<style></style>標記將css樣式包含在頁面中。它沒有行內標記樣式標記表現的直接，但是能夠使頁面更加規整。
舉例:

運行結果:

3.連結式:
連結外部css樣式表是最常用的一種引用方式，它通過將css樣式定義在一個單獨的檔案中，然後在HTML中通過<link>標記引用，是一種最為有效使用css樣式的方式。
<link>標記的文法結構如下:
<link rel=‘stylesheet‘ href=‘path‘ type=‘text/css‘>
參數說明:
rel:定義外部文檔和調用文檔間的關係。
href:css文檔的絕對或相對路徑。
type:指的是外部檔案的MIME類型。(多用途互連網郵件擴充類型。是設定某種副檔名的檔案用一種應用程式來開啟的方式類型，當該副檔名檔案被訪問的時候，瀏覽器會自動使用指定應用程式來開啟。多用於指定一些用戶端自訂的檔案名稱，以及一些媒體檔案開啟檔案。)

舉例:

運行結果:

4.匯入樣式(不建議使用)
匯入樣式和連結樣式比較相似，採用@import樣式匯入CSS樣式表，在HTML初始化時，會被匯入到HTML或者CSS檔案中，成為檔案的一部分，類似第二種內嵌樣式。
@import在html中使用，如下：
<style type="text/css">
@import url(style.css);
</style>

@import在CSS檔案中引用CSS使用，如下：
@import "css.css";

 

四種方法比較:
1.行內樣式:比較容易令初學者接收，但是靈活性不強。並且會導致HTML頁面不乾淨，檔案體積大，不利於蜘蛛爬行，後期維護也不方便。
2.內嵌式:與行內樣式相比，內嵌式樣式更加便於維護。但是每個網站都不可能由一個網頁構成，而每個頁面中相同的HTML標記又都要求有相同的樣式，此時使用內嵌式樣式顯得笨重。而連結式樣式表即可解決這一問題。
3.實現了頁面架構代碼與表現CSS代碼的完全分離，使得前期製作和後期維護都十分方便

四種css引入的優先順序:
1.就近原則
2.理論上：行內>內嵌>連結>匯入
3.實際上：內嵌、連結、匯入在同一個檔案頭部，誰離相應的代碼近，誰的優先順序高

css樣式表