前端快速入門(三)--CSS

小幀心dê承諾發表於2020-12-25

CSS樣式

層疊樣式表

1.css也是標記語言,設定HTML頁面中的文字內容,圖片的外形以及版面的排版顯示,css 頁面的佈局更靈活
2.樣式規則:
兩部分組成:選擇器 {宣告}
3.選擇器:

  • 用於指定CSS樣式的HTML標籤,花括號內是對這個物件設定的具體的樣式
  • 屬性和屬性值 鍵值對出現
  • 字型大小 文字顏色
  • 屬性和屬性值之間使用:分開
  • 多個宣告之間使用;分開
  • 所有的樣式,都包含在style標籤內,表示的是樣式表,style一般在</head/ >上面

強制推薦使用選擇器,屬性名,屬性值關鍵字全部使用小寫字母,特殊情況除外
在這裡插入圖片描述
行內CSS+內部CSS+外部CSS
在這裡插入圖片描述
效果
在這裡插入圖片描述
CSS寫法優缺點

  1. 行內CSS,書寫方便。侷限性太大,只能控制這個標籤自身。而且無法實現樣式和結構的分離
  2. 內部CSS,可以掌控整個html的內部標籤,僅侷限於當前HTML,但是無法實現樣式和結構的徹底分離
  3. 外部CSS,書寫繁瑣。沒有侷限性,只要是哪個HTML需要裡面的樣式都可以引用,實現了結構和樣式的徹底分離

總結:

  1. 這三種樣式都可以使用
  2. 論控制範圍:外部CSS>內部CSS>行內CSS
  3. 使用頻率:工作(外部CSS),學習(內部CSS)

樣式格式的組成:

  1. 選擇器:選擇標籤的一個工器
  2. 樣式屬性以及屬性值以鍵值對形式書寫(屬性:屬性值;)

注意:標籤屬性和樣式屬性的區分

  • 標籤屬性:這個標籤自身具有的一些特徵
  • 標籤屬性:這個標籤自身具有的一些特徵

選擇器

  • 基礎選擇器
  • 複合選擇器

基礎選擇器

標籤選擇器

直接使用標籤的名稱作為選擇器進行使用,可以使用標籤選擇器選擇一個HTML中的所有該標籤

標籤名{
	樣式內容
}

類選擇器

類是指分類,將具有相同樣式的標籤先全部劃分為一類,給所有這類標籤使用class屬性設定同一個類名,然後在css裡面使用.類名作為選擇器

.類名{}
	樣式內容

多類名選擇器

給一個標籤可以設定多個class值,這多個class值之間使用空格隔開,寫樣式可以給這個標籤具有的任何一個類名書寫都能作用到,但是相同的樣式屬性哪個類名在後面以哪個為主。

<標籤 class="類名1 類名2 ...."></標籤>

Id選擇器

給某個標籤設定一個Id屬性,然後在CSS中使用#Id名作為選擇器。注意,因為同一個html檔案中所有標籤Id的唯一性,導致Id選擇器只能控制一個標籤的樣式,和行內標籤作用類似。

#Id名{
	樣式內容
}

萬用字元選擇器

使用*作為選擇器可以選擇中,這個HTML中的所有標籤,謹慎使用。

 *{
            樣式內容
        }

總結

萬用字元>類選擇器>標籤選擇器>Id選擇器

注意!
在使用class或者Id的時候,命名規範明確,不能直接使用標籤名稱或者一些特殊的關鍵字,以字母或_開頭,大小寫嚴格區分。在命名時見名思意

相關文章