web應用程序客戶端界面設(shè)計_第4章(編輯修改稿)
2025-02-24 11:02 本頁面
【文章內(nèi)容簡介】 ： ?行內(nèi)（嵌入）樣式表 ?外部樣式表文件 HEAD STYLE type=text/css 樣式規(guī)則 / STYLE /HEAD 如果希望本網(wǎng)頁內(nèi)的所有同類標簽都采用 統(tǒng)一樣式 ，這時應采用內(nèi)嵌樣式。 22 1 22 422 嵌入樣式表 STYLE type=text/css P { fontfamily:隸書 。 fontsize:18px。 color:FF0000。 } /STYLE /HEAD …… P床前明月光， /P P疑是地上霜。 /P P我是郭德剛， /P P低頭思故鄉(xiāng)。 /P …… 樣式規(guī)則 所有的段落都采用 P 樣式，保證樣式統(tǒng)一 選擇符 樣式表 23 1 23 423 內(nèi)聯(lián)樣式表 如果希望某段文字和其他段落文字顯示風格不一樣 ， 該如何解決 ？ 使用行內(nèi)（內(nèi)聯(lián)）樣式表可以解決 24 1 24 424 行內(nèi)（內(nèi)聯(lián)）樣式表 HTML HEAD TITLE設(shè)置屬性 /TITLE /HEAD BODY P style = color:red。fontsize:30px。fontfamily:隸書 。 這個段落應用了樣式 P 這個段落按默認樣式顯示 /BODY /HTML 為標簽 p指定樣式 本段 P標簽采用了行內(nèi)樣式 25 1 25 425 行內(nèi)（內(nèi)聯(lián)）樣式表 BODY style= backgroundcolor:CCCCCC PIMG src= width=140 height=170 align=left/P H2靜夜思 /H2 H3作者：李白 /H3 P style=color:FF0000。 fontsize:18px。 fontfamily:隸書 。 borderbottomstyle:dashed 床前明月光， BR 疑是地上霜。 BR 我是郭德剛， BR 低頭思故鄉(xiāng)。 /P 查看源代碼 行內(nèi)樣式使用范圍更小，只適用于某一個標簽，對其他標簽不起作用 本段 P標簽采用了行內(nèi)樣式 26 1 26 426 外部樣式表文件 如果希望一個網(wǎng)站中多個頁面的樣式保持一致 ， 如何解決 ？ 使用外部樣式表文件樣式表可以解決 27 1 27 427 外部樣式表文件 ? 根據(jù)樣式文件與網(wǎng)頁的關(guān)聯(lián)方式又分為： – 鏈接（ LINK ）外部樣式表 – 導入（ import）外部樣式表 樣式文件 .css 網(wǎng)頁 2 網(wǎng)頁 3 網(wǎng)頁 1 …… 28 1 28 428 鏈接（ LINK ）外部樣式表 使用 LINK（鏈接）標簽 : HEAD LINK href= rel=stylesheet type=text/css /HEAD 第一步：創(chuàng)建樣式表文件 第二步：把樣式文件和網(wǎng)頁綁定 第三步：瀏覽查看各網(wǎng)頁 樣式文件： 引入的樣式文件 29 1 29 429 導入（ import）外部樣式表 使用 import導入 ，語法： HEAD STYLE TYPE=text/css import 。 /STYLE /HEAD 引入樣式表文件 30 1 30 430 理解樣式表的層疊 ?層疊樣式表背后的概念是，多個樣式定義可以層疊向下通過多個層次來影響文檔。樣式定義的多個層次可以應用于任何文檔。層次的優(yōu)先級別從小到大依次為： – 用戶瀏覽器的設(shè)置 – 外部樣式表 – 嵌入式樣式表 – 內(nèi)聯(lián)樣式 31 1 31 431 創(chuàng)建樣式規(guī)則 ?理解樣式表的第一步就是理解如何正確編寫樣式規(guī)則。 ?每個樣式規(guī)則分為選擇器和規(guī)則本身兩個部分，選擇器用于規(guī)則所應用的元素，規(guī)則本身則指定格式。 ?選擇器 – 元素選擇器 – 類選擇器 – ID選擇器 – 包含選擇器 – 通配選擇器 – 偽類選擇器 – 偽元素選擇器 32 1 32 432 元素選擇器 ?HTML元素是最典型的選擇器類型，任何一個 HTML元素都可以做為選擇器 元素 { 屬性 : 值 。 } h1 { color: red。 } h1 { color: ff0000。 } h2 { color: FF0000。 } h1, h2 { color: ff0000。 } 33 1 33 433 類選擇器 1 ?如果想要把某一個樣式應用到不同的 HTML元素上，可以采用類選擇器來定義，然后在不同標簽中應用它們。 .類名 { 屬性 : 值 。 } html head meta equiv=ContentType content=text/html。 charset=gb2312 / title類選擇器示例 1/title style type=text/css .tt{ fontsize:10pt。 fontfamily:黑體 。 color:800080。 fontweight:b
環(huán)評公示相關(guān)推薦
鄂ICP備17016276號-1