cascading style sheets 漢譯層疊樣式表,web標準中的表現標準語言,表現標準語言在網頁中主要對網頁資訊的顯示進行控制,簡單說就是如何修飾網頁資訊的顯示樣式。
目前推薦遵循的是w3c發布的css3.0.
用來表現xhtml或者xml等樣式檔案的計算機語言。
2023年5月21日由w3c正式推出的css2.0
1.內部樣式 :
語法:
注:使用style標記建立樣式時,最好將該標記寫在;
2.外部樣式
語法:
3.內聯樣式(行間樣式,行內樣式,嵌入式樣式)
語法:
這是一段文字
4.@import方式引入樣式檔案
語法:
選擇符
div
說明:
1)每個css樣式由兩部分組成,即選擇符和宣告,宣告又分為屬性和屬性值;
2)屬性必須放在花括號中,屬性與屬性值用冒號連線。
3)每條宣告用分號結束。
4)當乙個屬性有多個屬性值的時候,屬性值與屬性值不分先後順序。
5)在書寫樣式過程中,空格、換行等操作不影響屬性顯示
內聯樣式表的優先級別最高
內部樣式表與外部樣式表的優先順序和書寫的順序有關,後書寫的優先級別高。
選擇符表示要定義樣式的物件,可以是元素本身,也可以是一類元素或者制定名稱的元素.
常用的選擇符有十種左右
型別選擇符,id選擇符,class選擇符,萬用字元,群組選擇符,
包含選擇符,偽類選擇符
1. 元素選擇符/型別選擇符(element選擇器 )
語法:
元素名稱
div
說明:
a)元素選擇符就是以文件語言物件型別作為選擇符,即使用結構中元素名稱作為選擇符。例如body、div、p,img,em,strong,span…等。
b)所有的頁面元素都可以作為選擇符;
用法:1)如果想改變某個元素的預設樣式時,可以使用型別選擇符;
2) 當統一文件某個元素的顯示效果時,可以使用型別選擇符;
2.id選擇器
語法:
#id名
#top
說明:
1)當我們使用id選擇符時,應該為每個元素定義乙個id屬性,
如:2)id選擇符的語法格式是「#」加上自定義的id名
如:#box
3) 起名時要取英文名,不能用關鍵字:(所有的標記和屬性都是關鍵字)
如:head標記
4)乙個id名稱只能對應文件中乙個具體的元素物件,因為id只能定義頁面中某乙個唯一的元素物件。
5) 最大的用處:建立網頁的外圍結構。
3.class選擇器
語法:
.class名
.top
說明:
1)當我們使用類選擇符時,應先為每個元素定義乙個類名稱,
2)類選擇符的語法格式是:「如:
」用法:class選擇符更適合定義一類樣式;
4.*萬用字元
語法:
*
*
說明:通配選擇符的寫法是「*」,其含義就是所有元素。
用法:常用來重置樣式。
5.群組選擇器
語法:
選擇符1,選擇符2,選擇符3
.box,.name
說明:當有多個選擇符應用相同的樣式時,可以將選擇符用「,」分隔的方式,合併為一組。
6.包含選擇器(後代選擇器)
語法:
選擇符1 選擇符2
.box .name
說明:選擇符1和選擇符2用空格隔開,含義就是選擇符1中包含的所有選擇符2;
7.偽類選擇器(偽類選擇符)
語法 :
a:link超連結的初始狀態;
a:visited超連結被訪問後的狀態;
a:hover滑鼠懸停,即滑鼠劃過超連結時的狀態;
a:active超連結被啟用時的狀態,即滑鼠按下時超連結的狀態;
說明:1)當這4個超連結偽類選擇符聯合使用時,應注意他們的順序,正常順序為:
a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超連結的樣式失效;
(愛恨原則【l o v e】 【h a t e】)
2)為了簡化**,可以把偽類選擇符中相同的宣告提出來放在a選擇符中;
例如:a a:hover
表示超連結的三種狀態都相同,只有滑鼠劃過變顏色。
css中用四位數字表示權重,權重的表達方式如:0,0,0,0
型別選擇符的權重為0001
class選擇符的權重為0010
id選擇符的權重為0100
子選擇符的權重為0000
屬性選擇符的權重為0010
偽類選擇符的權重為0010
偽元素選擇符的權重為0001
包含選擇符的權重:為包含選擇符的權重之和
內聯樣式的權重為1000
繼承樣式的權重為0000
HTML學習5 30(第二章)
我採用了華為彩雲字型,字型大小為5,顏色為藍色 我採用預設字型,字型大小為3,顏色為綠色 我採用了隸書字型,字型大小和顏色均預設!什麼也不設定 測試預設字型大小,這裡應該和第一行字型大小一致 測試預設字型大小,size 5 color blue 這裡應該和第一行字型大小一致 測試預設字型大小,siz...
第二章 HTML基礎(上)
一.html語言 標籤 元素 屬性 html hypertest markup language 超文字標記語言 製作網頁的標準語言,標籤構成。標籤由尖括號包圍,比如 通常是成對出現的 單獨出現標籤 標籤巢狀 表示文件型別符合html5標準 1.一級標題比二級標題大 2.段落內容 這是段落,每個段落...
第二章 HTML結構
dtd document type definition 規定了標記語言的規則,使得瀏覽器可以正確的呈現內容。html結構是一種巢狀結構,如同洋蔥,從外到裡。web頁面結構,即dom document object model 樹結構。現在主流的編輯器 ide 都會帶有 提示功能,如webstorm...