CSS 文本和字体属性、列表属性
本节关于常用 CSS 文本样式属性、段落和行相关属性、列表属性
一、常用文本样式属性
![图片[1]-CSS 文本和字体属性、列表属性 - hao415资讯论坛【前端三剑客之一基础课程】-hao415资讯论坛](https://hao415.com/wp-content/uploads/2023/04/50-1-1024x415.png)
1、color 属性
- color 属性可设置文本内容的字体颜色
2. color 属性主要可以用 英语单词、十六进制、rgb()、rgba() 等表示法
注：英语单词表示法，如：color:red;仅用于学习或测试使用，工作中基本不用这样的形式，需要精准
color: red;
color: skyblue;2、color 属性 – 十六进制表示法
- 十六进制表示法是所有设计软件中都通过的颜色表示法
- 设计师会给我们在设计图上标注的颜色，通常为十六进制表示
/*
ff: 最小值是00 ，最大值是ff
光学显示器三原色：红绿蓝
我们日常画画时是：红黄蓝
*/
color: #ff0000;- 如：十六进制 ff 就是十进制的 255，每种颜色分量都是 0~255 的数字
- 如果颜色值是两两相同，并且能有三对，
#aabbcc的形式，可以简写为#abc
color:#cc0066 可以简写成 color:#c06;
color:#ff43dd 不能写成 color:f43d;常用的十六进制表示法
| 色值 | 描述 |
| #000 | 黑色 |
| #fff | 白色 |
#ccc 、#333 、#2f2f2f、#666、#ddd | 灰色 |
3、color 属性 – rgb() 表示法
- rgb 中三个数字的范围是 0-255 之间
- rgb 是光学显示器三原色：红（red ）、绿（green）、 蓝（blue） 三个单词的缩写
/*
rgb()三个值分别表示：红色,绿色,蓝色
最小值：0
最大值：255 （红色）
*/
color: rgb(255, 0, 0);
/* 白色 */
color: rgb(255, 255, 255);
/* 黑色 */
color: rgb(0, 0, 0);4、color 属性 – rgba() 表示法
- 颜色也可以用 rgba() 表示法，rgba 中前三个数字的范围是 0-255 之间，表示的是颜色
- 最后一个参数表示颜色透明度介于 0 到 1 之间
- 0 表示纯透明，1 表示纯实心（不透明），从 0-1 值越大，透明度越低
- rgba() 表示法从 IE9 开始兼容
color: rgba(255, 0, 0, 0.35);5、font-size 属性，字体大小
- font-size 属性用来设置文字的字体字号大小，单位通常为 px（像素）、%百分比
- 移动端还会学习 em、rem、vw、vh 单位
font-size: 20px; /* 字体大小 20px */- 网页文字正文字号通常是 16px
- 浏览器最小支持 12px 字号，也就是你设置的字体小于 12px，默认都会以 12px 大小显示
- 面试题：如何在页面显示小于 12px 的字体？（学到动画会讲）
%（百分比）单位
百分比相对于父元素的 font-size 大小而言
<style>
p {
font-size: 20px; /*字体大小*/
}
p span {
font-size: 200%; /*相当于 40px*/
}
</style>
<body>
<p><span>字体</span>大小以百分比为单位，相对的是父元素font-size大小</p>
</body>6、font-weight 属性
- font-weight 属性设置字体的粗细程度
- 通常用 normal 和 bold 两个值，或其对应数字 400 与 700 来表示
/* 正常粗细 与400等值 */
font-weight: normal;
/* 加粗，与700等值 */
font-weight: bold; 当我们使用数字来表示粗细时
- 数字大小介于 1-1000（包含）之间，更大的数字比更小的数字表示的字体要相对粗些
- 最终的粗细要在当前字体可行的精细范围之内
<style>
div {
font-weight: 400; /*正常粗细*/
}
div span {
font-weight: lighter;
}
div .bold {
font-weight: bold;
}
</style>
<body>
<div>
<span class="bold">我是加粗过的</span> 我正常粗细，<span
>我比父级字体细？</span
>
</div>
</body>7、font-style 属性
- font-style 属性设置字体的倾斜
| 属性 | 描述 |
| normal | 取消倾斜，如：把天生倾斜的 i、em 等标签设置为 不倾斜 |
| italic | 设置为倾斜字体（常用） 如果当前字体没有可用的斜体版本，会选用（ oblique ）替代 |
| oblique | 设置为倾斜字体（用常规字体模拟，不常用） |
<qc style="color:#f8f8f8;background:#333"><style>
p i {
font-style: normal; /*取消倾斜*/
}
.line1 {
font-style: italic; /*倾斜字体*/
}
.line2 {
font-style: oblique; /*倾斜字体*/
}
</style>
<body>
<p><i>我是normal下修正过来的,不倾斜</i></p>
<p class="line1">我是italic下的倾斜</p>
<p class="line2">我是oblique下的倾斜</p>
</body></qc>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![Flex、Grid 布局面试题答案解析[Flex、Grid 布局]-hao415资讯论坛](https://hao415.com/wp-content/uploads/2023/07/WX20230706-112207@2x.png)
![CSS 定位面试题答案解析[css定位技术]-hao415资讯论坛](https://hao415.com/wp-content/uploads/2023/07/WX20230706-185440@2x.png)
暂无评论内容