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: 宋体;
}
相关推荐
用户458203153179 分钟前
CSS 层叠层 (@layer) 详解:控制样式优先级新方式
前端·css
GISer_Jing3 小时前
透过浏览器原理学习前端三剑客:HTML、CSS与JavaScript
前端·javascript·css·html
昔人'4 小时前
css`text-wrap:pretty`
前端·css
@大迁世界5 小时前
这个 CSS 特性,可能终结样式冲突
前端·css
zwjapple6 小时前
css变量的使用。
css
川石课堂软件测试6 小时前
CSS中常用的几种定位。
开发语言·css·python·网络协议·http·html·pytest
詩句☾⋆᭄南笙6 小时前
CSS美化网页元素
前端·css·html
程序0076 小时前
HTML+JS+CSS实现汽车官网
javascript·css·html
.生产的驴9 小时前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
软件技术NINI17 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html