HTML5教程-CSS常見屬性-李南江

配套視頻下載地址

CSS常見屬性

文字屬性

font-style

• 做用: 規定文字樣式

• 格式: font-style: italic;

• 取值:

  • normal ： 正常的， 默認就是正常的

  • italic :  傾斜的

• 快捷鍵:

  • fs font-style: italic;

  • fsn font-style: normal;

font-weight

• 做用: 規定文字粗細

• 格式: font-weight: bold;

• 取值:

  • 單詞取值:

  • bold 加粗

  • bolder  比加粗還要粗

  • lighter 細線， 默認就是細線

  • 數字取值：

  • 100-900之間整百的數字

• 快捷鍵

  • fw font-weight:;

  • fwb font-weight: bold;

  • fwbr  font-weight: bolder;

font-size

• 做用: 規定文字大小

• 格式: font-size: 30px;

• 取值: px(像素 pixel)

• 快捷鍵

  • fz font-size:;

  • fz30 font-size: 30px;

font-family

• 做用: 規定文字字體

• 格式: font-family:"楷體";

• 取值: 各類字體名稱

• 快捷鍵:

  • ff font-family:;

• 注意點:

  • 若是取值是中文， 須要用雙引號或者單引號括起來

  • 設置的字體必須是用戶電腦裏面已經安裝的字體

字體屬性補充

• 若是設置的字體不存在, 那麼系統會使用默認的字體來顯示

  • 默認通常使用宋體

• 若是設置的字體不存在, 而咱們又不想用默認的字體來顯示怎麼辦?

  • 能夠給字體設置備選方案

  • 格式:font-family:"字體1", "備選方案1", ...;

• 若是想給中文和英文分別單獨設置字體, 怎麼辦?

  • 但凡是中文字體, 裏面都包含了英文

  • 但凡是英文字體, 裏面都沒有包含中文

  • 也就是說中文字體能夠處理英文, 而英文字體不能處理中文

• 注意點: 若是想給界面中的英文單獨設置字體, 那麼英文的字體必須寫在中文的前面

• 補充在企業開發中最多見的字體有如下幾個

  • 中文: 宋體/黑體/微軟雅黑

  • 英文: "Times New Roman"/Arial

• 還須要知道一點, 就是並非名稱是英文就必定是英文字體,由於中文字體其實都有本身的英文名稱, 因此是否是中文字體主要看能不能處理中文

  • 宋體 SimSun

  • 黑體 SimHei

  • 微軟雅黑 Microsoft YaHei

文字屬性縮寫

• 縮寫格式:

  font: style weight size family;

• 例如:

  font:italic bold 10px "楷體";

• 注意點:

  • 在這種縮寫格式中有的屬性值能夠省略

  • sytle能夠省略

  • weight能夠省略

  • 在這種縮寫格式中style和weight的位置能夠交換

  • 在這種縮寫格式中有的屬性值是不能夠省略的

  • size不能省略

  • family不能省略

  • size和family的位置是不能順便亂放的, size必定要寫在family的前面, 並且size和family必須寫在全部屬性的最後

文本屬性

text-decoration

• 做用: 給文本添加裝飾

• 格式: text-decoration: underline;

• 取值:

  • underline 下劃線

  • line-through 刪除線

  • overline 上劃線

  • none 什麼都沒有, 最多見的用途就是用於去掉超連接的下劃線

• 快捷鍵:

  • td  text-decoration: none;

  • tdu text-decoration: underline;

  • tdl text-decoration: line-through;

  • tdo text-decoration: overline;

text-align

• 做用: 設置文本水平對齊方式

• 格式: text-align: center;

• 取值:

  • left 左

  • right 右

  • center 中

• 快捷鍵:

  • ta text-align: left;

  • tar text-align: right;

  • tac text-align: center;

text-indent

• 做用: 設置文本縮進

• 格式: text-indent: 2em;

• 取值: 2em, 其中em是單位, 一個em表明縮進一個文字的寬度

• 快捷鍵:

  • ti text-indent:;

  • ti2e text-indent: 2em;

顏色屬性

• 在CSS中如何經過color屬性來修改文字顏色

• 格式: color: 值;

• 取值:

  • 第一個數字就是用來設置三原色的光源元件紅色顯示的亮度

  • 第二個數字就是用來設置三原色的光源元件綠色顯示的亮度

  • 第三個數字就是用來設置三原色的光源元件藍色顯示的亮度

  • 這其中的每個數字它的取值是0-255以前, 0表明不發光, 255表明發光, 值越大就越亮

    紅色: rgb(255,0,0);
    綠色: rgb(0,255,0);
    藍色: rgb(0,0,255);
    黑色: rgb(0,0,0);
    白色: rgb(255,255,255);
    灰色: rgb(200,200,200);
    只要讓紅色/綠色/藍色的值都同樣就是灰色

  • 英文單詞

  • 通常狀況下常見的顏色都有對應的英文單詞, 可是英文單詞可以表達的顏色是有限制的, 也就是說不是全部的顏色都可以經過英文單詞來表達

  • rgb

  • rgb其實就是三原色, 其中r(red 紅色) g(green 綠色) b(blue 藍色)

  • 格式: rgb(0,0,0)

• 
  

  • rgba

  • rgba中的rgb和前面講解的同樣, 只不過多了一個a.

  • a表明透明度, 取值是0-1, 取值越小就越透明

  • 例如:

    color: rgba(255,0,0,0.2);

• 
  

  • 十六進制

  • 經過十六進制來表示顏色其實本質就是RGB

  • 十六進制中是經過每兩位表示一個顏色

  • 例如: #FFEE00 FF表示R EE表示G 00表示B

  • 什麼是十六進制?

  • 十六進制和十進制同樣都是一種計數的方式

  • 在十進制中取值範圍0-9, 逢十進一

  • 在十六進制中取值範圍0-F, 逢十六進一

    十進制   0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
    十六進制 0 1 2 3 4 5 6 7 8 9  a  b  c  d  e  f

• 
  

  • 十六進制和十進制轉換的公式

  • 用十六進制的第一位*16 + 十六進制的第二位 = 十進制

    15 == 1*16 + 5 = 21
    12 == 1*16 + 2 = 18
    FF == F*16 + F == 15*16 + 15 == 240 + 15 = 255
    00 == 0*16 + 0 = 0

• 
  

  • 122334

  • 123456;

  • 1.5十六進制縮寫

  • 在CSS中只要十六進制的顏色每兩位的值都是同樣的, 那麼就能夠簡寫爲一位

  • 例如: #FFEE00 == #FE0

  • 注意點:

  • 1.若是當前顏色對應的兩位數字不同, 那麼就不能簡寫

  • 2.若是兩位相同的數字不是屬於同一個顏色的, 也不能簡寫