CSS文字样式相关属性(DAY11)

今天这篇文章会介绍CSS文字大小、文字粗细、字体和字型,这些都是有关文字样式的相关属性:

文字大小

属性:font-size:

  • 绝对尺寸:设定指定的文字大小
    xx-large、x-large、large、medium、small、x-small、xx-small
    (依序为由大到小)
  • 相对尺寸:依照父元素文字大小调整
    larger、 smaller(比父元素大、小)
  • 常用尺寸单位:
    px(像素)
    em(倍数乘以根元素的 px 值。若根元素为16px,现今元素设为2em就等於32px)
  • 百分比(%):
    100%:与父元素字型大小相同
    50%:比父元素缩小1/2倍
    200%:比父元素放大2倍

文字粗细

属性:font-weight:

  • normal:预设值
  • bold:粗体
  • bolder:较父元素更粗
  • lighter: 较父元素更细
  • 100~900(小~大)

字体

属性:font-style:

  • normal :预设值
  • italic:斜体

字型

属性:font-family:

  • font-family:Microsoft JhengHei(微软正黑体)
    文字的字型当然还有非常多种,可以到网路上找寻更多的字体样式!

文字样式速写法

属性:font:

  • font:italic bold ,Microsoft JhengHei, 30px;
    补充:font-size和font-family 必需在font属性中给定

结语

这篇文章介绍了CSS文字的属性,font-size、font-weight、font-style、font-family、font,这些都是拿来调整文字样式的。下一篇将会介绍表格框线的样式和清单的样式,在前面html文章中只有介绍到表格框线的broder属性、无序清单、有序清单的type属性等,接下来会介绍例如:表格的框线设定为虚线,而在清单中我可以使用img来代替符号等非常多的效果!


<<:  Day10_HTML语法7

>>:  pip install安装套件时遇到『use_2to3 is invalid』错误

Day 28 | AI & 深度学习的应用

剩下几天的时间,要再分享其它实作内容似乎有些困难,那麽大家轻松一点,今天就来谈谈我们所学这些技术的应...

[Day 10]从零开始学习 JS 的连续-30 Days---阵列与物件混合应用

阵列与物件混合应用 例子:有两家宠物店,一间叫miee宠物店,店里有10只猫与5只狗,可以宠物寄宿。...

Day 25 Figma 设计档的多啦时光机 - 档案历史纪录与版本控制

大家应该都有这样的经验:辛辛苦苦做了一、二个小时的进度,因为没有养成随时存档的好习惯,当突然遇到软件...

Python Flask 架站笔记 第1天 基本介绍

一年多前有去外面上课(怕干扰课程招生我就不说是哪一门课程了),因为工作主要内容是数据分析,这方面的开...

Day29_CSS3

突然回到CSS好像有点跳tone,主要是因为在CSS & Javascript的基础不够熟练...