CSS 文本和字体属性、列表属性
本节关于常用 CSS 文本样式属性、段落和行相关属性、列表属性
一、常用文本样式属性
![图片[1]-CSS 文本和字体属性、列表属性【前端三剑客之一基础课程】-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
暂无评论内容