CSS（五）——设置文本样式
发布于: 2021 年 01 月 26 日
1.设置文字的字体
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> .c{ /* 若Times New Roman这种字体系统里没有，则自动选择第二种字体 */ font-family: "Times New Roman",Arial; } .d{ font-family: 微软雅黑，宋体; }</style></head><body><p class="c">Study hard and make progress every day!</p><p class="d">好好学习，天天向上</p></body></html>复制代码
运行结果：
2.设置文字倾斜效果
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> p{ /* 字体倾斜 */ font-style: italic; }</style></head><body><p>Study hard and make progress every day!</p><p>好好学习，天天向上</p></body></html>复制代码
运行结果：
3.设置文字的加粗效果
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> p{ /* 字体加粗 */ font-weight: bold; }</style></head><body><p>Study hard and make progress every day!</p><!-- 设置文字不加粗 --><p style="font-weight: normal;">好好学习，天天向上</p></body></html>复制代码
运行结果：
4.设置英文字母大小写转换
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> .c1{ /* 设置所有单词首字母大写 */ text-transform: capitalize; } .c2{ /* 设置所有单词大写 */ text-transform: uppercase; } .c3{ /* 设置所有单词的首字母小写 */ text-transform: lowercase; }</style></head><body><p>study hard and Make Progress Every Day!</p><p class="c1">study hard and Make Progress Every Day!</p><p class="c2">study hard and Make Progress Every Day!</p><p class="c3">study hard and Make Progress Every Day!</p></body></html>复制代码
运行结果：
5.设置文字的大小
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> p{ /* 设置字体大小 */ font-size: 36px; }</style></head><body><p>Study hard and make progress every day!</p><p>好好学习，天天向上</p></body></html>复制代码
运行结果：
6.设置文字的装饰效果
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> .c1{ text-decoration: none; } .c2{ /* 添加下划线 */ text-decoration: underline; } .c3{ /* 添加删除线 */ text-decoration: line-through; } .c4{ /* 添加上划线 */ text-decoration: overline; }</style></head><body><p class="c1">无装饰</p><p class="c2">下划线</p><p class="c3">删除线</p><p class="c4">上划线</p></body></html>复制代码
运行效果：
7.设置段落首行缩进
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> .c{ /* 段落首行缩进2个文字的大小距离 */ text-indent: 2em; }</style></head><body><p class="c">Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程 [1]。</p></body></html>复制代码
运行结果：
8.设置字词间距
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> p{ /* 设置每个单词之间的距离为20px */ word-spacing: 20px; /* 设置每个字母之间的距离为3px，在CSS中，一个汉字就是一个字母*/ letter-spacing: 3px; }</style></head><body><p>Study hard and make progress every day!</p><p>好好学习，天天向上</p></body></html>复制代码
注意：在 CSS 中，一个中文汉字就是作为一个英文字母设置的，因此，一个中文汉字的距离就是一个 letter 的距离！
运行结果：
9.设置文字的行高；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> p{ /* 首行缩进 */ text-indent:2em; /* 文字的行高距离，默认是1.2到1.5之间 */ line-height: 1.5; }</style></head><body><p>博士论文的题目是："The Algebraic Manipulation of Constraints"。毕业后到IBM工作，设计IBM第一代工作站NeWS系统，但不受重视。后来转至Sun公司。1990年，与Patrick Naughton和Mike Sheridan等人合作“绿色计划”，后来发展一套语言叫做“Oak”，后改名为Java。1994年底，James Gosling在硅谷召开的“技术、教育和设计大会”上展示Java程式。2000年，Java成为世界上最流行的电脑语言。</p></body></html>复制代码
运行效果：
第一行与第二行之间相隔 1.5！
10.设置段落之间的距离
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> p{ border: 1px red solid; }</style></head><body><p>Study hard and make progress every day!</p><p>好好学习，天天向上</p></body></html>复制代码
运行结果：
可以看到浏览器之间有默认的 margin 属性值；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> p{ border: 1px red solid; /* 设置段落之间的距离为2px; */ margin: 2px; }</style></head><body><p>Study hard and make progress every day!</p><p>好好学习，天天向上</p></body></html>复制代码
当我们加上相应的 margin 值时：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> p{ border: 1px red solid; /* 设置段落之间的距离为2px; */ margin: 2px; }</style></head><body><p>Study hard and make progress every day!</p><p>好好学习，天天向上</p></body></html>复制代码
运行结果：
11.设置文本的水平位置
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> .c1{ border: 1px red solid; /* 设置内容向左靠齐 */ text-align: left; } .c2{ border: 1px red solid; /* 设置内容居中 */ text-align: center; } .c3{ border: 1px red solid; /* 设置内容向右靠齐 */ text-align: right; }</style></head><body><p>Study hard and make progress every day!</p><p class="c1">好好学习，天天向上</p><p class="c2">好好学习，天天向上</p><p class="c3">好好学习，天天向上</p></body></html>复制代码
运行结果：
12.设置文字和背景的颜色
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> p{ color:blue; background-color: gray; }</style></head><body><p>Study hard and make progress every day!</p><p>好好学习，天天向上</p></body></html>复制代码
运行结果：
我是【程序员的时光】，热爱技术分享，信仰终身学习，爱健身，会点厨艺的热血青年，我们下期再见！
划线
评论
复制
发布于: 2021 年 01 月 26 日阅读数: 15
版权声明: 本文为 InfoQ 作者【程序员的时光】的原创文章。
原文链接:【http://xie.infoq.cn/article/1dea574dc708e062046092ded】。文章转载请联系作者。
程序员的时光
关注
程序员的路，会越来越精彩！ 2020.04.30 加入
公众号：程序员的时光 记录学习编程的一路时光，从小白到现在也能稳操胜券； 主要从事Java后台开发，数据结构与算法，设计模式等等； 欢迎一起交流，分享经验，学习进步！
评论