CSS常見屬性

CSS常見屬性

文字屬性

font-style

• 做用：規定文字樣式
• 格式：font-style: italic;
• 取值：
  • normal：正常的，默認就是正常的
  • italic：傾斜的

font-weight

• 做用：規定文字粗細
• 格式：font-weight: bold;
• 單詞取值：
  • bold 加粗
  • bolder 比加粗還要粗
  • lighter 細線， 默認就是細線
• 數字取值：
  • 100 - 900之間整百的數字

font-size

• 做用：規定文字大小
• 格式：font-size: 30px;
• 取值：px（像素 pixel）

font-family

• 做用：規定文字字體
• 格式：font-family: "楷體";
• 取值：各類字體名稱
• 注意點：
  • 若是取值是中文， 須要用雙引號或者單引號括起來
  • 設置的字體是用戶電腦裏面已經安裝的字體

字體屬性補充

• 若是設置的字體不存在，那麼系統會使用默認的字體來顯示
• 默認通常使用宋體
• 若是設置的字體不存在，而咱們又不想用默認的字體來顯示，能夠給字體設置備選方案
  • 格式：font-family: "字體1", "備選方案1", ... ;
• 若是想給中文和英文分別單獨設置字體，怎麼辦？
  • 但凡是中文字體，裏面都包含了英文
  • 但凡是英文字體，裏面都沒有包含中文
  • 也就是說中文字體能夠處理英文，而英文字體不能處理中文
• 注意點：若是想給界面中的英文單獨設置字體，那麼英文的字體必須寫在中文的前面

文字屬性縮寫

• 縮寫格式：

  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 什麼都沒有，最多見的用途就是用於去掉超連接的下劃線

text-align

• 做用：設置文本水平對齊方式
• 格式：text-align: center;
• 取值：
  • left 左
  • right 右
  • center 中

text-indent

• 做用：設置文本縮進
• 格式：text-indent: 2em;
• 取值：2em，其中em是單位，一個 em 表明縮進一個文字的寬度

顏色屬性

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

• 格式：color: 值;

• 取值：

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

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

    • 格式：rgb(0, 0, 0)
    • 三個數字分別表明三原色的紅色、綠色、藍色顯示的亮度
    • 這其中的每個數字它的取值是 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);
    只要讓紅色/綠色/藍色的值都同樣就是灰色

  • rgba

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

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

    • 例如：

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

  • 十六進制

    • 經過十六進制來表示顏色其實本質就是RGB
    • 十六進制中是經過每兩位表示一個顏色
    • 例如：#FFEE00，FF表示R，EE表示G，00表示B
    • 在 CSS中 只要十六進制的顏色每兩位的值都是同樣的，那麼就能夠簡寫爲一位，例如：#FFEE00 至關於 #FE0