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