html day2 --CSS基礎

阿新 • • 發佈：2018-12-18

一、CSS簡介

注意：text-align/text-decoration/text-indent

CSS(cascading style sheets)WEB標準中的表現標準語言,表現標準語言在網頁中主要對網頁資訊的顯示進行控制，簡單說就是如何修飾網頁的顯示樣式。---級聯樣式表、層疊樣式表

目前推薦遵循的是W3C釋出的CSS3.0

css3在包含了所有css2.0所支援的基礎上改變了改進，css遵循的是模組式開發，釋出的時間不是一個點而是一個時間段。

1998年5月21日由w3C正式推出的css2.0

(在css1的基礎上增加了高階功能，浮動，定位，高階選擇器等（子選擇器，相鄰選擇器，通用選擇器）

1996年推出CSS1

包含非常基本的屬性，比如字型，顏色、空白邊

歷史

在使用CSS之前，Web開發人員依賴於一些特定的HTML標籤和屬性來增強網頁的視覺體驗，而依賴表格來進行佈局設計。

和樣式有關的一些HTML標籤：

<basefont> 定義整個網頁文件的字型
<font> 定義一個具體的字型型別，顏色和它所包含的文字大小
<center> 水平居中它所包含的元素
<big> 使文字變大
<strike> 為文字新增刪除線

和樣式有關的一些HTML屬性：

bgcolor 定義元素的背景色
text 定義文字顏色
margin 定義元素的邊距

在頁面整體佈局的設計上曾經廣泛使用表格 <table> 元素。因為表格提供了一個視覺化的網格（grid）使得建立列、對齊和定位頁面中的各個元素要相對直觀一些；

這些樣式和佈局方法有很多缺點：

（1）內建的HTML元素和屬性，使得表現和內容繫結在一起，如果要提供多樣式的網頁，必然要提供多份HTML文件內容

（2）HTML表格的程式碼相當繁瑣，需要很多公式化標籤，吃力不討好

（3）HTML表格標記用法是語義錯誤的：表格應該只是用來組織多維資料的，而不是用來佈局的

（4）改變佈局需要更改標記：如果我們想把左邊的列移到右邊，我們得修改HTML文件結構

（5）HTML表格容易出現語法錯誤：行和列需要遵循嚴格的排序和巢狀關係

（6）HTML表格標記用法可讀性差：需要使用巢狀表格來支援列中有列的佈局，結構將變得非常複雜

這就是為什麼內建HTML樣式和使用表格進行佈局在實踐中已經逐漸被拋棄，轉而使用div+CSS來代替的原因。

內容和表現分離的好處：

(1)同一份文件可以擁有不同的呈現，提高了文件的可複用性和設計靈活性

(2) 內容和樣式分離使得HTML文件精簡清晰，可讀性高

(3) 由於瀏覽器會快取靜態檔案如CSS/JS，這將有助於提高網站效能和SEO評估

(4) 程式碼的可維護性好

二、css語法

選擇符{屬性:屬性值; 屬性:屬性值;}

選擇符：表示要定義樣式的物件

1）每個CSS樣式由兩部分組成，即選擇符和宣告，宣告又分為屬性和屬性值；

2）屬性必須放在{}內；

3）屬性與屬性值用冒號連線

4）當一個選擇符有多個屬性時，用分號隔開；

5）當一個屬性有多個屬性值時，用空格分隔；

6）使用空格、換行不影響css樣式的顯示。

簡單樣式

width:value+px；設定標籤的寬度

height:value+px;設定標籤的高度

background:#colorValue; 設定標籤的背景顏色

color:#colorValue；設定文字顏色；而不是font-color

border:1px solid #colorValue; 設定標籤的邊框

邊框型別：solid實線邊框 double雙線邊框 dashed虛線（v. 猛衝/猛擲） dotted點狀線（v. 點綴佈滿）

樣式表分類

樣式:內部樣式外部樣式和內聯樣式

1.內部樣式

語法:

css語句

</style>

注：使用style標記建立樣式時，最好將該標記寫在<head></head>裡面;

2.外部樣式

外部樣式的建立及呼叫（@charset "utf-8";在外部樣式表文件內使用。指定該樣式表使用的字元編碼。該規則後面的分號是必需的，如果省略了此分號，會生成錯誤資訊。）

a:外部樣式表的建立。 b:外部樣式表的匯入。

*方法一

<link rel="stylesheet" type="text/css" href="目標檔案的路徑及檔名全稱" />

說明：使用link元素匯入外部樣式表時，需將該元素寫在文件頭部，即<head>與</head>之間。

*方法二

@import url(目標檔案的路徑及檔名全稱);

</style>

注：@和import之間沒有空格 url和小括號之間也沒有空格；必須結尾以分號結束；

兩種匯入樣式的區別

link和import匯入外部樣式的區別：

差別1：

link屬於XHTML標籤，而@import完全是CSS提供的一種方式。 link標籤除了可以載入CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連線屬性等，@import就只能載入CSS。

差別2：

載入順序的差別：當一個頁面被載入的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被載入，而@import引用的CSS會等到頁面全部被下載完再被載入。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式。

差別3：

相容性的差別：@import是CSS2.1提出的，所以老的瀏覽器不支援，@import只在IE5以上的才能識別，而link標籤無此問題。

差別4：

使用dom控制樣式時的差別：當使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的

3.內聯樣式表（行間樣式，行內樣式，嵌入式樣式）

語法：<標籤 style="屬性:屬性值 ; 屬性:屬性值;"></標籤>

樣式表的優先順序

內聯樣式表的優先級別最高，內部樣式表與外部樣式表的優先順序和書寫的順序有關，後書寫的優先級別高

下面的優先順序高

三、選擇符（選擇器）

1）元素選擇符/型別選擇符（element選擇器 )

語法：元素名稱{屬性：屬性值；}

說明：元素選擇符就是以文件語言物件型別作為選擇符，即使用結構中元素名稱作為選擇符。例如body、div、p,img,em,strong,span等。

用法：當統一或者改變文件某類元素的顯示效果時，可以使用型別選擇符；

2) id選擇器

語法：#id名{屬性：屬性值;}

說明：

1）使用id選擇符時，應該為每個元素定義一個id屬性

2）id選擇符的語法格式是：#id名{}

3）起名時要取英文名，不能用關鍵字(所有的標記和屬性都是關鍵字)

4）一個id名稱只能對應文件中一個具體的元素物件，因為id只能定義頁面中某一個唯一的元素物件。

5) 最大的用處：建立網頁的外圍結構。

3）class選擇器

語法：.class名{屬性：屬性值;}

說明：使用類選擇符時，為每個元素定義一個類名稱，語法格式是：

<div class=“top”></div>，在css中使用方式為：.top{}

用法：1）class選擇符更適合定義一類樣式；

div.top{} p.top{}：p標籤下的有top類的那個元素

2 ）一個標記可以設定多個class名

語法：<標記 class="名稱1 名稱2" ></標記>

3）class名可以重複，class屬性可以有多個屬性值，中間用空格分割

4）群組選擇器

語法：選擇符1，選擇符2，選擇符3{屬性：屬性值;}

說明：當有多個選擇符應用相同的樣式時，可以將選擇符用“，”分隔的方式，合併為一組。

5）包含選擇器/後代選擇符

語法：選擇符1 選擇符2{屬性：屬性值;}----------選擇符2只要是在選擇符裡面就可以了，不一定是子類，可以是祖孫類

說明：選擇符1和選擇符2用空格隔開，含義就是選擇符1中包含的所有選擇符2;

6）偽類選擇器(偽類選擇符)

語法： :link{屬性：屬性值;}超連結的初始狀態;

:visited{屬性：屬性值;}超連結被訪問後的狀態;

:hover{屬性：屬性值;}滑鼠懸停，即滑鼠劃過超連結時的狀態;(div ,p,span,li等等)

:active{屬性：屬性值;}超連結被啟用時的狀態，即滑鼠按下時超連結的狀態;

說明：
1）當這4個超連結偽類選擇符聯合使用時，應注意他們的順序，正常順序為：a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超連結的樣式失效；

2）使用與超連結相關的偽類選擇符時，應為a元素定義href屬性;

7）萬用字元

語法：*{屬性：屬性值；}

說明：通配選擇符的寫法是“*”，其含義就是所有元素。

用法：常用來重置樣式

全域性樣式

*{margin:0;padding:0;}

margin:0 auto; 讓子元素相對父元素水平居中顯示

header會繼承body的寬高，body會繼承html的寬高，html會繼承瀏覽器硬體頁面的寬高

選擇符權重

3.對文字的設定是可以繼承的，對border和bg的設定不能整合

css中用四位數字表示權重，權重的表達方式如：0，0，0，0

型別選擇符的權重為 0001

偽元素選擇符的權重為 0001

class選擇符的權重為 0010

屬性選擇符的權重為 0010

偽類選擇符的權重為 0010

id選擇符的權重為 0100

內聯樣式的權重為 1000

萬用字元的權重為 0000

子選擇符（>）的權重為 0000

繼承樣式的權重為 0000

兄弟選擇符的權重為 0000

包含選擇符的權重：為包含選擇符的權重之和

擴充套件：

1.偽類選擇符：

2.子選擇器（IE6不支援）

子元素選擇器只能選擇作為某元素的子元素的元素，子選擇器使用了大於號（這個大於號的權重是0，子結合符）;

子結合符兩邊可以有空白符，因此，以下寫法都沒有問題：h1 > strong h1> strong h1 >strong h1>strong

3.相鄰兄弟選擇器（IE6不支援） +：

如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器，相鄰兄弟選擇器使用加號“+”做為連線符。

普通兄弟選擇器（IE6不支援） ~：

普通兄弟選擇器選取所有指定元素的兄弟元素,使用”~”作為連線符。向下找不會向上找

屬性選擇器

選擇器[att][att] 匹配所有具有att屬性的元素。
選擇器[att=val] 匹配所有att屬性等於“val”的元素。
選擇器[att~=val]選擇具有att屬性且屬性值為包含val的字串的元素(如果忽略了波浪號，則說明需要完成完全匹配)。
選擇器[att|=val]選擇具有att屬性且屬性值為以val開頭並用連線符"-"分隔的字串的E元素。

浮動：float可以使塊狀元素並列顯示，給所有需要並列顯示的元素（如圖片和文字對齊時總有點錯位）都新增浮動。

子元素可以把父元素撐大，但當設定浮動時，不會把body撐大，元素設定浮動之後，會脫離正常文件流。

高度塌陷：如果父元素在沒有設定高度時，高度為0，叫父元素的高度塌陷；

解決辦法：，在設定浮動的元素下面設定