css的基本概念ppt課件-在線瀏覽
2025-06-22 12:06本頁面
【正文】 標題 /H1 /BODY /HTML 8 CSS的基本語法 ? 樣式表項的組成： 選擇符、選擇屬性、定義屬性值 選擇符 { 屬性 1:值 1。 屬性 3:值 3。 例如： H1 {text align:center。 } 9 樣式定義的語法 H1 {textalign:center。因此每一種 HTML標記的名稱都可以作為相應的標記選擇器名稱。color:red} ? 使所有用 H1標記符修飾的內容都居中和用紅色顯示。如果希望其中的某一個不產生變化，這時僅靠標記選擇器是不夠的，還要引入類別 (class)選擇器。 . c l a s s c o l o r : g r e e n 。 { } 類別選擇器 屬性 值 屬性 值 聲明 聲明 類別名稱 15 html head titleclass選擇器 /title style type=text/css .one{ color:red。 /* 文字大小 */ } .two{ color:green。 /* 文字大小 */ } .three{ color:cyan。 /* 文字大小 */ } /style /head body p class=oneclass選擇器 1/p p class=twoclass選擇器 2/p p class=threeclass選擇器 2/p h3 class=twoh3同樣適用 /h3 /body/html 16 html head titleclass選擇器與標記選擇器 /title style type=text/css ! p{ /* 標記選擇器 */ color:blue。 } .special{ /* 類別選擇器 */ color:red。 /* 文字大小 */ } /style /head body pclass選擇器與標記選擇器 1/p pclass選擇器與標記選擇器 2/p pclass選擇器與標記選擇器 3/p p class=specialclass選擇器與標記選擇器 4/p pclass選擇器與標記選擇器 5/p pclass選擇器與標記選擇器 6/p /body /html 17 類別選擇器 ? 標記名 . 類名 { 屬性 : 值 …} 可以通過 class選擇器和標記選擇器配合使用 表示 標記名中的 class屬性為 類名 的標記符都采用所定義的樣式。 fontsize:18px。 /* 紅色 */ fontsize:23px。 } /style/head body h3標記選擇器 .class1/h3 h3標記選擇器 .class2/h3 h3 class=special標記選擇器 .class3/h3 h3標記選擇器 .class4/h3 h3標記選擇器 .class5/h3 p class=special使用于別的標記 /p/body/html 19 例如，我們打算讓某一些段落縮進 ，另一些段落縮進 ，我們知道段落采用 P這個標記。 /* 顏色 */ } .two{ fontsize:22px。 21 ID選擇器 ? idname { property: value…} 表示任何 ID屬性為 idname的標記符都采用所定義的樣式。 id c o l o r : y e l l o w 。 { } ID 選擇器 屬性 值 屬性 值 聲明 聲明 22 html head titleID選擇器 /title style type=text/css ! one{ fontweight:bold。 /* 字體大小 */ color:009900。 如果一個 HTML中有兩個相同的 id的標記 ， 將導致 JavaScript在查找 id時出錯 。 24 偽類和偽元素 偽類和偽元素是 特殊的類和元素 ，能自動地被支持 CSS的瀏覽器所識別。 偽元素指元素的一部分 ，例如段落的第一個字母。一般的類可以與偽類和偽元素一起使用，如下 : 選擇符 .類 : 偽類 { 屬性 : 值 } 或 選擇符 .類 : 偽元素 { 屬性 : 值 } 25 定位錨偽類 偽類可以指定 A元素以不同的方式顯示 連接 (links)、 已訪問連接 (visited links)和 可激活連接 (a
教學課件相關推薦
鄂ICP備17016276號-1