7.26 CSS第一天

標籤：css   文本   像素   字型   family   white   基本選取器   刪除線   :link   

說是明天要默寫哦咯！厲害了 默寫這個單詞是已經有遠離我幾年了 /微笑臉/

 

# CSS 層疊樣式表
### CSS的使用方式
* 在元素的style屬性內  行內式 內聯式
* 寫在 `<style>` 標籤內
* 寫到外部css檔案中，用`<link>`關聯到HTML中，  
* `@import`可以引入css，用於css中引入css 

 

### CSS的長度單位
* px  像素
* em  相對於預設大小 倍數
* 百分比
* pt(磅)  cm(厘米)  mm(毫米)  絕對單位

### 顏色表示
* 顏色的英文單詞

     red  orange yellow  green cyan blue purple black  white  pink gray

* rgb方式

        rgb(123,45,178)
        rgb(0~255,0~255,0~255)
        rgb(百分比，百分比，百分比)
    * rbg(255,0,0)  紅色
    * rbg(255,255,255)   白色
    * rgb(0,0,0)  黑色
    * rgb(100,100,100)  灰色。 只要三個都一樣，就是灰色

* 十六進位
    * #34afa1
    * #ff0000  紅色  可以簡寫 #f00
    * #00ff00  綠色  簡寫  #0f0
    * #0000ff   藍色  簡寫 #00f
    * #ffffff    白色    簡寫 #fff
    * #000000  黑色  簡寫 #000
    * #cccccc   灰色  簡寫 #ccc
    * #336699  簡寫  #369

 

 

 ### CSS注釋
* `/* 注釋 */`

 

### CSS選取器
* 元素選取器   
* ID選取器   #id名
* CLASS選取器  .類名
* 全域選取器   *
* 關聯選取器-後代元素選取器  slecter selecter
* 關聯選取器-子項目選取器    selecter>selecter
* 組合選取器  兩種基本選取器的組合
* 偽類別選取器  love-hate
    * :link
    * :visited
    * :hover
    * :active

### 選取器的優先順序
* ID >CLASS > Tag
* 組合選取器  ID權重100  class權重10  Tag權重1

 

 # CSS的屬性
### 字型屬性
* font-family    襯線字型（serif）  非襯線字型(sans-serif)
* font-style       字型風格  normal(預設)/itailc(斜體)/oblique(強制變斜)
* font-weight  字型粗度    normal(預設)/bold(加粗)/bodler(更粗)/lighter(細)/數字(>=600 粗)
* font-variant  字變形  noraml(預設)/small-caps(小型大寫字母)
* font-size     字型大小
* font  統一設定
        
        font:[style/weight/variant] size family


### 顏色屬性
* color   值：字母/rgb/16進位

### 文字屬性
* letter-spacing  字母間距
* word-spacing  單詞間距
* text-decoration 文本能修飾
    * none
    * underline 底線
    * overline  上劃線
    * line-through  中劃線 刪除線

 

7.26 CSS第一天