css的基本概念ppt課件(編輯修改稿)
2025-06-01 12:06 本頁面
【文章內(nèi)容簡介】 style type=text/css ! one{ fontweight:bold。 /* 粗體 */ } two{ fontsize:30px。 /* 字體大小 */ color:009900。 /* 顏色 */ } /style /head body p id=oneID選擇器 1/p p id=twoID選擇器 2/p p id=twoID選擇器 3/p p id=one twoID選擇器 3/p /*用法錯誤 ID選擇器不支持 class選擇器那樣多風格同時使用 */ /body /html 23 ID選擇器 ? 注意：將 ID選擇器用于多個標記是錯誤的 ， 因為每個標記的 ID 不只是 CSS 可以調用 ，JavaScript等其他腳本語言同樣可以調用 。 如果一個 HTML中有兩個相同的 id的標記 ， 將導致 JavaScript在查找 id時出錯 。 網(wǎng)站建設者在編寫 CSS代碼時 ， 應該養(yǎng)成良好的編寫習慣 ，一個 id最多只能賦予一個 HTML標記 。 24 偽類和偽元素 偽類和偽元素是 特殊的類和元素 ，能自動地被支持 CSS的瀏覽器所識別。偽類區(qū)別開不同種類的元素 (例如， visited links(已訪問的連接 )和 active links(可激活連接 )描述了兩個定位錨 (anchors)的類型 )。 偽元素指元素的一部分 ，例如段落的第一個字母。 偽類或偽元素規(guī)則的形式如 選擇符 :偽類 { 屬性 : 值 } 或 選擇符 :偽元素 { 屬性 : 值 } 偽類和偽元素不應用 HTML的 CLASS屬性來指定 。一般的類可以與偽類和偽元素一起使用，如下 : 選擇符 .類 : 偽類 { 屬性 : 值 } 或 選擇符 .類 : 偽元素 { 屬性 : 值 } 25 定位錨偽類 偽類可以指定 A元素以不同的方式顯示 連接 (links)、 已訪問連接 (visited links)和 可激活連接 (active links)。定位錨元素可給出偽類 link、 visited或 active。 A:link { color: red } A:active { color: blue。 fontsize: 125% } A:visited { color: green。 fontsize: 85% } 首個字母偽元素 首個字母 偽元素用于加大 (drop caps)和其他效果 P:firstletter { fontsize: 300%。 float: left } 26 選擇器的 集體聲明 ? 在聲明各種 CSS選擇器時，如果某些選擇器的風格完全相同，或者部分相同，這時可以利用集體聲明的方法，將風格相同的 CSS選擇器同時聲明，例如 ： ? 全局聲明符 * 27 html head title集體聲明 /title style type=text/css ! h1, h2, h3, h4, h5, p{ /* 集體聲明 */ color:purple。 /* 文字顏色 */ fontsize:15px。 /* 字體大小 */ } , .special, one{ /* 集體聲明 */ textdecoration:underline。 /* 下劃線 */ }/style /head body h1集體聲明 h1/h1 h2 class=special集體聲明 h2/h2 h3集體聲明 h3/h3 h4集體聲明 h4/h4 h5集體聲明 h5/h5 p集體聲明 p1/p p class=special集體聲明 p2/p p id=one集體聲明 p3/p /body /html 28 html head title全局聲明 /title style type=text/css ! *{ /* 全局聲明 */ color: purple。 /* 文字顏色 */ fontsize:15px。 /* 字體大小 */ } , .special, one{ /* 集體聲明 */ textdecoration:underline。 /* 下劃線 */ } /style /head body h1全局聲明 h1/h1 h2 class=special全局聲明 h2/h2 h3全局聲明 h3/h3 h4全局聲明 h4/h4 h5全局聲明 h5/
教學課件相關推薦
鄂ICP備17016276號-1