CSS的字体属性

color属性

规定文本颜色

html 复制代码
<p id="p1">文本颜色</p>
   <p id="p2">文本颜色</p>
   <p id="p3">文本颜色</p>
   <p id="p4">文本颜色</p>
css 复制代码
#p1{
color: red;
}

#p2{
color: #ff0000;
}

#p3{
color: rgb(255, 0, 0);
}

#p4{
color: rgba(255,0,0,.5);
}

font-size属性

设置文本的字体大小(单位px)

css 复制代码
font-size: 20px;

font-weight属性

设置文本的粗细

normal:默认粗细

bold: 定义粗体文字

bolder: 定义更粗的字符

lighter: 定义更细的字符

100~900: 定义由细到粗,400等同于默认,700等同于bold

html 复制代码
  <p id="p1">文本颜色</p>
   <p id="p2">文本颜色</p>
   <p id="p3">文本颜色</p>
   <p id="p4">文本颜色</p>
   <p id="p5">文本颜色</p>
   <p id="p6">文本颜色</p>
css 复制代码
#p1{
font-weight: normal;
}

#p2{
font-weight: bold;
}

#p3{
font-weight: bolder;
}

#p4{
font-weight: lighter;;
}

#p5{
    font-weight: 400;
}

#p6{
    font-weight: 700;
}

font-style属性

指定文本的字体样式

normal: 默认值

italic: 定义斜体

html 复制代码
<p id="p1">文本颜色</p>
   <p id="p2">文本颜色</p>
css 复制代码
#p1{
font-style: normal;
}

#p2{
font-style: italic;
}

font-family属性

定义元素字体

html 复制代码
   <p id="p1">文本颜色</p>
   <p id="p2">文本颜色</p>
css 复制代码
#p1{
font-family: 微软雅黑;
}

#p2{
font-family: 宋体;
}
相关推荐
向葭奔赴♡4 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
银安9 小时前
CSS排版布局篇(4):浮动(float)、定位(position) 、层叠(Stacking)
前端·css
wsWmsw17 小时前
[译] 浏览器里的 Liquid Glass:利用 CSS 和 SVG 实现折射
前端·css·svg
银安17 小时前
CSS排版布局篇(2):文档流(Normal Flow)
前端·css
折翼的恶魔19 小时前
前端学习之样式设计
前端·css·学习
街尾杂货店&21 小时前
css word-spacing属性
前端·css
Never_Satisfied1 天前
在JavaScript / HTML中,line-height是一个CSS属性
javascript·css·html
前端Hardy2 天前
HTML&CSS&JS:纯前端图片打码神器:自定义强度 + 区域缩放,无需安装
前端·javascript·css
这可不简单2 天前
前端性能优化:从浏览器渲染原理到实战(告别 “知其然不知其所以然”)
前端·css·面试
小小前端_我自坚强2 天前
Tailwind CSS 详解
css·程序员·开源