用CSS设置文字文本样式

简介: 今天这篇文章就是来和大家简单聊聊用CSS设置文字文本样式。

「这是我参与2022首次更文挑战的第7天,活动详情查看:[2022首次更文挑战](https://juejin.cn/post/7052884569032392740?utm_source=feed_5&utm_medium=feed&utm_campaign=gengwen202201_yq "https://juejin.cn/post/7052884569032392740?utm_source=feed_5&utm_medium=feed&utm_campaign=gengwen202201_yq")」

好久不见,甚是想念!

大家好!

 <b>我是微风洋洋 </b> 今天这篇文章就是来和大家简单聊聊用CSS设置文字文本样式,希望大家读完有所收获,那我辛苦码字也就值了。如果你觉得对你有一丢丢启发的话,不妨 <b>点赞、收藏、关注</b>支持一下,你的支持将是我继续创作的最大动力。下一篇将开始介绍用CSS3设置颜色与背景和图像,到时不见不散~~~

# 一、字体属性

字体属性是用于控制网页文本字符的显示方式,例如控制文字的大小、粗细以及使用的字体类型等。

## 1.font-family属性

下面的代码用来设置标记`<h1>`的font-family属性。

```

<style type="text/css" >

h1 {

font-family: "微软雅黑","仿宋_GB2312","楷体_GB2312";

}

</style>

```

## 2.font-size属性

font-size属性用于控制文字的大小,它的取值分为4种类型——绝对大小、相对大小、长度值以及百分数。

示例

代码

```

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<body>

<div style="font-size:18pt">设置容器fontsize:18pt

<p style="font-size:larger">相对大小:larger</p>

 

<p style="font-size:smaller">相对大小:smaller</p>

 

<p style="font-size:medium">绝对大小:medium</p>

 

<p style="font-size:10pt">绝对大小:10pt</p>

</div>

</body>

</html>

 

```

效果

![QQ截图20220207185246.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b614fac8532443792832a850642f558~tplv-k3u1fbpfcp-watermark.image?)

## 3.font-style属性

font-style属性确定指定元素显示的字形。

font-style属性的值包括normal、italic和oblique 3种。

示例

代码

```

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<body>

<p style="font-style:normal"> This is a font-style(normal) test </p>

 

<p style="font-size:20px;font-style:italic">This is a font-style(italic) test </p>

 

<p style="font-size:20px;font-style:oblique">This is a font-style(oblique) test </p>

</body>

</html>

 

```

效果

![QQ截图20220207185533.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc919c3ba5c14289bf72e1ee6cbf2573~tplv-k3u1fbpfcp-watermark.image?)

## 4.font-variant属性

font-variant属性用于在浏览器上显示指定元素的字体变体。该属性可以有3个值:normal、small-caps和inherit。

 

## 5.font-weight属性

font-weight属性定义了字体的粗细值,它的取值可以是以下值中的一个——normal、bold、bolder和lighter,默认值为normal。

示例

代码

![QQ截图20220207185905.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14237f0aaff0438180c72b5bf5a99649~tplv-k3u1fbpfcp-watermark.image?)

 

效果

![QQ截图20220207185922.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/555c84a86b33438aa8d669559852abc2~tplv-k3u1fbpfcp-watermark.image?)

 

## 6.font复合属性

使用font属性可一次性设置前面介绍的各种字体属性(属性之间以空格分隔)。在使用font属性设置字体格式时,字体属性名可以省略。

font属性的排列顺序是:font-weight、font-variant、font-style、font-size和font-family。

示例

代码

![QQ截图20220207190112.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a80b8ce0e1874e86a4a414cd7b8eb21c~tplv-k3u1fbpfcp-watermark.image?)

 

# 二、文本属性

## 1.word-spacing和letter-spacing属性

word-spacing用于设定单词之间的间隔,它的取值可以是normal或具体的长度值,也可以是负值;默认值为normal,表示浏览器根据最佳状态调整字符间距。

 

letter-spacing属性和word-spacing类似,它的值决定了字符间距(除去默认距离外)。它的取值可以是normal或具体的长度值,也可以是负值;默认值为normal,也就是说,如果将letter-spacing设置为0,它的效果并不与normal相同。

示例

代码

```

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<body>

<p style="word-spacing:normal">Welcome to CSS3 World (word-spacing:normal)</p>

<p style="word-spacing: 10px">Welcome to CSS3 World (word-spacing:10px)</p>

<p style="word-spacing:normal">欢迎使用CSS3 (汉字,word-spacing:normal) </p>

<p style="word-spacing:10px">欢迎使用CSS3(汉字,word-spacing:10px) </p>

<p style="letter-spacing:normal">Welcome to CSS3 World (letter-spacing:normal) </p>

<p style="letter-spacing:3px">Welcome to CSS3 World (letter-spacing:3px)</p>

<p style="letter-spacing:normal">欢迎使用CSS3(汉字,letter-spacing:normal) </p>

<p style="letter-spacing:3px">欢迎使用CSS3 (汉字,letter-spacing:3px) </p>

</body>

</html>  

```

效果

![QQ截图20220207190316.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d29c1236a9544165a9b10a42d2ea0976~tplv-k3u1fbpfcp-watermark.image?)

## 2.text-align属性

 text-align属性指定了所选元素的对齐方式(类似于HTML标记符的align属性),取值可以是left、right、center和justify,分别表示左对齐、右对齐、居中对齐和两端对齐。

 

## 3.text-indent属性

  text-indent属性可以对特定选项的文本进行首行缩进,取值可以是长度值或百分比。

 

## 4.line-height属性

  line-height属性决定了相邻行之间的间距(或者说行高),其取值可以是数字、长度或百分比,默认值是normal。

 

## 5.text-decoration属性

 text-decoration属性可以对特定选项的文本进行修饰,它的取值为none、underline、overline、line-through和blink,默认值为none,表示不加任何修饰。

 

## 6.text-transform属性

  text-transform属性用于转换文本,取值为capitalize、uppercase、lowercase和none,默认值是none。

 

## 7.text-shadow属性

  text-shadow属性用于向文本添加一个或多个阴影,取值为color、length、opacity,其语法为:

**text-shadow: X-Offset Y-Offset shadow color。**

 

## 8.word-wrap 属性

  允许超过容器的长单词换行到下一行。

 

## 9.word-break 属性

  用来处理如何自动换行。它的取值为normal、break-all和keep-all。

 

综合示例1

代码

```

<!DOCTYPE HTML>

<html>

<head>

<meta charset=utf-8>

<style>

div#r1 {

word-break: normal;

}

 

div#r2 {

word-break: break-all;

}

 

div#r3 {

word-wrap: normal;

}

 

div#r4 {

word-wrap: break-word;

}

 

div#tshadow {

/* 设置字体阴影 */

font-size: 18px;

text-shadow: 2px 2px 3px #ff0000;

}

</style>

</head>

<body>

<div id="r1">what is the fourth technological revolution? New energy, bio-technology, information technology, networking

...

</div>

<hr/>

<div id="r2">what is the fourth technological revolution? New energy, bio-technology, information technology, networking

...

</div>

<hr/>

<div id="r3">http://www.myrunsky.com/news/day20160202/local/index.html

</div>

<hr/>

<div id="r4">U:http://www.myrunsky.com/news/day20160202/local/index.html

</div>

<hr/>

<div id="tshadow">what is the fourth technological revolution?

</div>

</body>

</html>

 

```

效果

![QQ截图20220207191008.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5de010d91104438bf33138326144591~tplv-k3u1fbpfcp-watermark.image?)

 

综合示例2

代码

```

<!-- demo1407.html -->

<!DOCTYPE html >

<html>

<head>

<meta charset=" utf-8">

<style type="text/css">

:root {

/* 伪类选择器,设置页面背景颜色 */

background-color: #CCCCCC;

}

 

h2 {

/* 设置居中对齐 */

text-align: center;

}

 

div, p {

/* 标记选择器,首行缩进2个字体高 */

text-indent: 2em;

}

 

.type1 {

/* 类选择器,设置字符间距 */

letter-spacing: 5px;

}

 

div#region {

/* 设置行符间距 */

line-height: 160%;

}

</style>

</head>

<body>

<h2>人类三次技术革命回望</h2>

 

<p>一、蒸汽机"改变了世界"</p>

 

<div id="region">工具革新在技术革命中占有主要地位,是产业革命的导火线。1733年,英国兰开夏工人发明了飞梭,1764年,织布工人哈格里沃斯发明了珍妮纺车,效率提高八倍。……

</div>

<div> 17世纪的科学革命已经提出"用火提水的发动机"原理,在专家和生产者大量研究和实验的基础上,1776年,瓦特制成了高效能蒸汽机,1785年,蒸汽机开始生产。……

</div>

 <p> 二、电力技术"开创一个新纪元"</p>

 

<div>电力技术革命起源于欧洲,完成在美国。1866年,德国维•西门子发明电机后曾给他在伦敦的弟弟写信"电力技术很有发展前途,它将会开创一个新纪元"。

1876年美国庆祝独立100周年之际,在费城举办了有37个国家参加的国际博展会上,美国展出了大功率发<br/>动机和电动机。继西门子之后,贝尔于1876年发明电话,爱迪生于1879年发明电灯,这三大发明"照亮了人类实现电气化的道路"。

</div>

<p>三、计算机———人类大脑的延伸</p>

 

<div class="type5">1944年,美国在国防部领导下开始研制计算机,1946年制成世界上第一台电子数字计算机ENIAC,开辟了一个计算机科学技术新纪元,拉开信息技术革命序幕。……

</div>

 

<div>一些经济学家认为,现在用"生产力=(劳动者+劳动工具+劳动对象)×科技"的公式表示已经不够,新的公式应该是<span class="type1">生产力=(劳动者+劳动工具+劳动对象)</span>的高科技次方",即科技对生产力三要素所起的作用不只是用乘法按倍数计算,而是按幂级数增长。

</div>

</body>

</html>

 

```

效果

![QQ截图20220207191138.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/948a7bea9f244061bcd28da6f2b86d72~tplv-k3u1fbpfcp-watermark.image?)

 

 

# 三、总结

用CSS来设置文字文本样式应该是最基础的一部分了,CSS本身不是特别难,就是知识点有点多、有些零碎,不需要死记硬背,重要的是要经常使用,使用的多了自然也就记住了,死记硬背反而效果不是很好,多敲敲代码就好了。

相关文章
|
1天前
|
前端开发
css实现风车样式
css实现风车样式
10 0
|
5天前
|
前端开发 开发者
深入了解 CSS 伪类:优化页面样式与交互
深入了解 CSS 伪类:优化页面样式与交互
39 2
|
19天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
16 0
|
1月前
|
Web App开发 移动开发 前端开发
【CSS】<Cascading Style Sheets>CSS3常用样式属性
【1月更文挑战第22天】【CSS】<Cascading Style Sheets>CSS3常用样式属性
|
1月前
|
编解码 前端开发 JavaScript
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(三)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能
|
1月前
|
前端开发 开发者 容器
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(二)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能
|
1月前
|
移动开发 前端开发 开发者
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(一)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能
|
1月前
|
前端开发 程序员 容器
CSS样式文件和class类名命名规范参考
CSS样式文件和class类名命名规范参考
17 0
|
1月前
|
前端开发
CSS中class的样式赋值方法详解
CSS中class的样式赋值方法详解
15 0
|
1月前
|
Web App开发 前端开发
CSS:字体和文本样式
CSS:字体和文本样式
31 0