CSS學習

豬鼻青年發表於2020-12-21
CSS

這裡寫自定義目錄標題

css學習

這篇文章我們開始css的學習。首先我們先了解css一個什麼的東西。
css就是層疊樣式表（英文全稱是Cascading Style Sheets)）。
css的作用是能夠對網頁中元素位置的排版進行畫素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力。
一般css我們分為三個階段：
第一階段 行內樣式表（首次提出結構和樣式相分離)
用法： 在標籤內新增一個style屬性
第二階段 內部樣式表
用法： 在head標籤裡面新增一個style標籤
第三階段 外部樣式表（完全實現了結構和樣式的相分離）
用法： 在外部新建一個CSS為字尾的檔案 然後使用link標籤進行引入。
優先順序
就近原則（顯示）
行內 > (link style誰在後面)
執行順序是
從上到下依次執行同樣的屬性 後面的會覆蓋前面的

css的常規樣式一般分為：1.顏色的表現形式
2.背景樣式
3.字型樣式
今天先將這三個樣式。

顏色的表現形式

  1.英文字元   （提前定義好的）
  2.十六進位制    (使用#開頭)
  3.rgb         （三原色）  取值範圍 0-255
  4.rgba       a是透明度   

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201221015715126.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyODU4NDU5,size_16,color_FFFFFF,t_70)
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201221015731100.jpg)

### 背景樣式
  background-color   背景顏色 
  background-image   背景圖片
           url（）
  background-repeat   背景圖片平鋪
           repeat   預設  X Y都平鋪
           repeat-x   橫向平鋪
           repeat-y   縱向平鋪
           no-repeat  不平鋪
  background-size     背景圖片大小
           1.  value1   value2   px 寬 高
           2.  %     %              寬高
           3.  cover  等比放大  鋪滿全部區域為止
           4.  contain 等比放大 直到背景影像的右邊或者下邊停止  
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201221015928398.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyODU4NDU5,size_16,color_FFFFFF,t_70)
### 字型樣式

font-size 字型的大小
單位 px 畫素 絕對單位
em 相對單位 相對於父元素的字型大小
font-family 字型的型別
color 字型顏色（前面不加font）
font-weight 取值範圍是100-900 900是加粗效果 bold == 900
font-style 字型傾斜 italic
text-decoration: 字型劃線
underline 下劃線
overline 上劃線
line-through 中劃線
text-indent: 2em; 首行文字縮排
text-align 水平位置
line-height 行高
（當一行的行高等於父級的高度的時候 就會產生垂直居中的一個效果）
letter-spacing 字型間隙
在這裡插入圖片描述

尺寸標籤

width 寬度
height 高度
寬度和高度設定 目前只能使用在塊級元素上 行級元素不起作用

最後再說一下這個css的選擇器，因為這是學習css最基本也是要長期打交道的一個知識點。

CSS中的選擇器

  標籤選擇器
     直接寫上標籤名 
  id選擇器
     1.在標籤中設定一個通用屬性 id  並且給好id名
     2.在樣式表中   通過  #id名{}  進行使用
     *注意*：
        1.id選擇器是唯一的，但是這個唯一不是說一個id名只能出現一次，而是說一個標籤裡面只能有id名
        2.要注意按照程式設計規範，id名在一個檔案中有且只有一個（存在）
  類選擇器
     又稱class選擇器
     1.在標籤中設定一個通用屬性class  並且給好類名
     2.在樣式表中  通過 .class名{}  進行使用
     *注意*
        class選擇器 可以有多個類名  不同類名可以寫不同的樣式
  萬用字元選擇器
     可以改變所有標籤的樣式 用法：  *{}
  優先順序
        id  >  class  > 標籤   >  *

選擇器的命名規範

     1.  要做到見名知意
     2.  不能以數字開頭(class選擇器必須以字母開頭)
     3.  不能用中文字元

​ 最後一條命名規範一定要牢記

相關文章