福彩北京快3走势图

JavaEE 之 網頁美化技術 CSS(2)

資料 ? 青牛 ? 于 2019-06-28 14:24:43 ? 828 閱讀

1.3 CSS選擇器

通過上面的小案例我們可以通過CSS來設置標簽的樣式,那么現在如果需要發生改變,我想前 兩句一個顏色,后兩句一個顏色,或者一句一個顏色怎么辦呢?

這時候你就需要使用CSS的標簽選擇器功能了;

1.3.1 什么是標簽選擇器呢?

標簽選擇器就是CSS可以讀取HTML標簽的一些屬性,來選擇哪些標簽適用于哪些樣式的一種 規則;

比如我們剛才寫的樣式就是設定了 p 標簽的字體顏色和樣式,其他標簽是不會被影響的,這就 是選擇器的作用;

1.3.2 選擇器的分類:

1.3.2.1 標簽選擇器
file
1.3.2.2 類選擇器
file
標簽的class屬性的值可以重復,所以通過class屬性可以獲取一個或者多個標簽,從而來設置他 們的樣式

比如,現在有一個需求是將剛才的詩前兩句藍色后兩句綠色就可以用這個類選擇器

代碼 :
file
注意類選擇器是 .類名 前面有個點需要注意

效果
file
1.3.2.3 ID選擇器
file
這個選擇器是通過HTML設置的id屬性來獲取表單,但是需要注意的是一個HTML頁面中每個 標簽的ID屬性是唯一的,所以這個選擇器每次只能獲取一個標簽

這個選擇器的用途非常多,比如我們現在希望詩句的每行都擁有一個顏色的話就可以使用這 個選擇器;

HTML代碼:
file
file
file
效果
file
通過CSS不同選擇器的設置,我們可以靈活的控制頁面標簽的樣式,但是CSS也不要應用過多, 因為非專業人事操作CSS,其實就是在浪費時間做五彩斑斕的黑;

1.3.3 CSS選擇器優先級

ID選擇器 優先于 類選擇器

類選擇器 優先于 標簽選擇器

它的特點就是哪個選擇器的影響范圍小就先執行哪個選擇器

問題 : 標簽選擇器是否也遵循“就近原則”?

不遵循,無論是哪種方式引入CSS樣式,一般都遵循ID選擇器 > class類選擇器 > 標簽選

擇器的優先級

1.4 CSS選擇器練習

開心餐廳頁面美化
file
file
1.4.1 業務需求

設置不同的標題顏色 如何做菜為紅色,其他的標題都為藍色

網頁素材
file
file
file
1.4.2 代碼實現

1.4.2.1 把圖片素材放到項目的img文件夾下
file
1.4.2.2 修改頁面添加CSS效果
file
file
file
file
1.4.2 需求升級

如果想在一段文字中設置不同的樣式,或者凸顯某些文字的話怎么辦呢?

這時你需要一個span標簽
file
從代碼可以看出,span標簽可以將一部分文字包裹住統一設置樣式,所以在做一些字體需求的 時候用它是再合適不過了;
file
1.5 其他CSS樣式介紹

1.5.1 字體顏色,粗細,大小CSS

你可以通過設置一下屬性來改變字體的形態:
file
此處我們常用的有font-size屬性,調整字體大小 和font-weight屬性調整字體粗細

font-size 中需要注意的事就 字體大小的值的單位是px

px代表像素的意思

font-weight屬性中需要注意的就是如何變成粗體字
file
除了設置字體外,還可以對文本其他屬性進行設置

file
color我們已經使用過了,此處就不再細說了;

1.5.2 字體對齊方式CSS

text-align 這是設置文本的對其方式
file
right 代表右對齊

效果如下:
file
文本對其方式除了居中外還有其他樣式:

file

版權聲明:原創作品,允許轉載,轉載時務必以超鏈接的形式表明出處和作者信息。否則將追究法律責任。來自海牛部落-青牛,http://hainiubl.com/topics/36797
點贊
成為第一個點贊的人吧 :bowtie:
回復數量: 0
    暫無評論~~
    • 請注意單詞拼寫,以及中英文排版,參考此頁
    • 支持 Markdown 格式, **粗體**、~~刪除線~~、`單行代碼`, 更多語法請見這里 Markdown 語法
    • 支持表情,可用Emoji的自動補全, 在輸入的時候只需要 ":" 就可以自動提示了 :metal: :point_right: 表情列表 :star: :sparkles:
    • 上傳圖片, 支持拖拽和剪切板黏貼上傳, 格式限制 - jpg, png, gif,教程
    • 發布框支持本地存儲功能,會在內容變更時保存,「提交」按鈕點擊時清空
    Ctrl+Enter
    福彩北京快3走势图
    股票涨跌说明什么 qq游戏麻将 快乐时时彩彩票平台注册 四川麻将血战到底的打法 秒速飞艇预测 四川麻将技巧 股票涨跌计算方式 上海哈灵麻将安卓版官方下载 配资通 广东快乐十分出号走