<day05>字体和文本样式
2022/7/13 23:24:31
本文主要是介绍<day05>字体和文本样式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
字体大小
浏览器默认文字大小是16px,单位一定要设置,否则无效 font-size: 16px;
字体粗细
bold 加粗;lighter 变细;纯数字:100-900整百数 font-weight: lighter;
字体样式
italic 倾斜;normal(默认值) 正常 font-style: italic;
字体
font-family: '楷体'; 如果有多个字体,中间用逗号隔开 font-family: '楷体', '黑体'; 以第一个字体为准,如果电脑没有这个字体,就显示下一个 (网络开发时,尽量使用系统常见自带的字体,保证不同用户浏览器都能正常显示)
复合写法
语法 font:style weight size famliy 例如 font: italic bold 20px '楷体'; (只能省略前两个,省略了相当于设置了默认值)
同时设置单写和连写形式
要把单写的样式写在连写的下面,否则连写样式会覆盖单写样式 如: font-style: italic; font: 20px '楷体'; 连写样式中虽然没有设置font-style,但不写即为默认值,会覆盖上面的样式
文本缩进
①数字+px ②数字+em (1em=当前标签的font-size的大小) text-indent: 32px; 推荐使用: text-indent: 2em; (如当前标签的字体大小是16px,那么2em就是2x16=32px)
文本水平居中
如果需要让文本水平居中,text-align给文本所在的标签设置()文本父元素 left 居左 center 居中 right 居右 text-align:right;
文本修饰
text-decoration:none; underline 下划线(常用) line-through 删除线(不常用) overline 上划线(几乎不用) none 无装饰线(最常用) none经常用于清除a标签默认的下划线
行高
line-height:20px; 取值:数字+px 倍数(当前标签font-size的倍数) line-height:2; 让单行文本垂直居中 line-height:文本父元素的高度
样式的层叠问题
同一个标签设置了相同的样式,如何渲染?
样式会层叠(覆盖),写在最下面的会生效
css 层叠样式表
层叠就是叠加的的意思,样式可以一层一层的叠加
p { color: pink; color: red; } 最终显示是red
这篇关于<day05>字体和文本样式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行