【css的簡單引入】——適合新人小白

css是什麼???

css=層疊樣式表 它是用來裝飾body中的內容(博主認爲 css可以比喻成“裝修”)

一、引入方式

1 外部樣式表 <link rel="stylesheet " href="css/style.css" />
2內部樣式表 <style>...</style>
3行間樣式 標籤的style 屬性<body style="background-color: #2AC845;">
4導入樣式 @import url(01.css)

二、語法規則

中文版

選擇器{
屬性: 屬性值;
屬性2: 屬性值2;
}
找到頁面上的元素{
改變什麼屬性:改變成什麼值;
}

對應代碼
    div{
     color:red;  
    }
    .yellow{
     color: yellow;
    }

三、選擇器

①元素選擇器
命名規範
1 不能用中文或數字
2 以英文開頭,不能以數字開頭
3 要做到見名知意
4不能有空格
5駝峯命名法 如果是組合詞 從第二個單詞首字母大寫

② ID選擇器
頁面只能出現一次
③類選擇器
分類,同一個元素可以有多個,可以重複使用

接下來是一個具體實例

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
    div{
     color:red;  
    }
    .yellow{
     color: yellow;
    }
    #bule{
     color: blue;
    }
  </style>
 </head>
 <body>
  <div class="yellow" id="bule">我是第一個div</div>
  <div>我是第二個div</div>
  </body>
</html>

運行結果如下圖

在這裏插入圖片描述

重點來了

如果我做了一點點的改動,例如這樣

<div class="yellow">我是第一個div</div>
在這裏插入圖片描述

再改動一點呢?
<div>我是第一個div</div>

在這裏插入圖片描述

優先級

根據這個例子,我們很容易發現他們的優先級

id> 類 >元素(權重: 100 10 1)

行間樣式大於id
!important 比行間樣式要高(權重最高,一般不要使用)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章