CSS 顏色與字型

by1314發表於2024-03-25

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_colors

rgb 或 rgba

color:rgb(255,255,255);
color:rgba(255,255,255,0.7);
rgba作用:具有透明效果,0完全透明,1不透明
三原色數值越大,且數值一致,表現為灰色很淡

HEX 或 HEXA 表示

p{color:rgb(#rrggbb);}
前兩位 rr 表示紅,gg 表示綠,bb 表示藍,01-ff(16進位制)

IE不支援 hexa ,其中透明度也是16進製表示

HSL 或 HSLA

p{color:rgb(色相,飽和度,亮度);}
p{color:rgb(0deg,100%,50%);}
ps: deg 表示度,色相值在0-360度,飽和度調節是顏色深淺,亮度是你關燈還是開燈

字型

字型族:font-family

div{font-family:"微軟雅黑","黑體",sans-serif}

  • 使用英文名字相容性會更好
  • 可以設定多個字型,通常在最後寫上sans-serif(非襯線字型) 或 serif(襯線字型)
  • 如果字型名包括空格必須引號包裹
字型風格:font-style

存在以下數值:

  • normal:預設值
  • italic:斜體,主動尋找斜體字(推薦),如果沒有強制傾斜
  • oblique:斜體,先找到用正常的,之後強制傾斜

字型粗細

div{font-weight:lighter/normal/bold/bolder/數值}
數值越大字型越粗,bolder 很多字型不支援

字型的複合屬性

font:其他屬性 字型大小 字型族
規則:字型大小與字型族必須寫,其中字型大小在第二位字型族在最後一位,各個屬性之間用逗號隔開

相關文章