整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
先，我们来学习CSS设置文本的对齐方式。
通过CSS，可以设置文本的水平和垂直对齐方式。（有案例的效果演示）
文本水平对齐，我们前面的课程曾经接触过——使用 text-align 这个样式属性来实现。它的属性值有三个：left，right，center，分别表示文本水平居左，居右，居中。
我们来举个例子。
在 005 目录下创建 alignment-spacing.html 文件，构建基础代码，添加一个 h1 元素和三个 p 元素，分别填入一些文本。
<h1>浠浠呀老师，学前端的大专生就业难吗？</h1>
<p>
no, 不难，只要你能力过关、项目经验过关、人品过关，企业就会录用你。
</p>
<p>
你可以在面试的时候，着重介绍一下你的开发能力、技术能力以及你对技术理解，让别人挑不出毛病，那学历这块是可以自动忽略的。
</p>
<p>
我在面试别人的时候也是这样，如果这个人的技术能力和过往经验真的征服了我，我不是很在他乎他的学历。
</p>
我们可以给三个段落文本，设置不同的水平对齐方式，给三个 p 元素定义 class 属性，值分别为 a，b，c。
在这个目录下再创建一个 mystyle-2.css 文件，定义 p.a (读作p点a) 选择器，声明样式 text-align: left (不要读冒号)。定义 p.b 选择器，声明样式 text-align: center。定义 p.c 选择器，声明样式 text-align: right。
p.a {
text-align: left;
}
p.b {
text-align: center;
}
p.c {
text-align: right;
}
在浏览器中预览效果，三个段落分别左、中、右对齐了。
当 text-align 属性被设置为 justify [ˈdʒʌstɪfaɪ]时，每一行都被拉长，使每一行都有相等的宽度，而且左右边界是对齐的，就像杂志和报纸排版一样。
注释掉全部样式，定义 p 选择器，声明样式 text-align: justify。
我们看，貌似没有什么效果。
为了演示，给第一个段落添加单词 no, (读作no 英文的逗号) 。再给 p 元素声明一个样式 width: 200px。
再看效果，三个段落的两侧都是对齐的。
假如注释掉这个样式，
很明显，右侧不再对齐显示了。
除了水平对齐，还可以设置文本的垂直对齐。通过声明 vertical-align 属性来实现。值有五个：
baseline，基线对齐。
text-top，文本顶部对齐。
text-bottom，文本底部对齐。
sub，下角标对齐。
super，上角标对齐。
在 html 文件中添加一个 h1 元素，5个 p 元素。填入一些文本。在每个段首添加一个 img 元素，引入本地的一个小图片，图片的宽高都为 9px。给每个图片元素定义 class 属性，值分别为 a，b，c，d，e。
在样式表中，定义 img.a 选择器，声明样式 vertical-align: baseline。
baseline 是如何对齐的呢？看效果，在垂直方向好像是居中对齐。
实际上，baseline 是基于四线三格倒数第二行对齐的。对于英文文本才有意义。
比如，将 1 修改为 fight 1。
基线在这，文本中的图片就基于它来对齐。
再定义 img.b，img.c，img.d，img.e 四个选择器，给他们都声明 vertical-align 属性，值分别为 text-top，text-bottom，sub，super 。
看看效果，图片垂直方向上，已经相对于文本顶部、底部、上角标、下角标的位置对齐了。
接下来，我们学习如何设置文本的间距。
通过 CSS，可以实现文本缩进、文字或字母间距、行高、单词间距和处理空白。（有案例的效果演示）
聊起文本缩进，你还记得以前是如何实现自然段首行缩进的吗？可以发弹幕告诉大家！
通过声明 CSS 的 text-indent 属性也可以实现。使⽤长度值或百分⽐来设置⽂本缩进。
长度值可以使⽤绝对单位或相对单位。绝对单位就是 px，比如缩进 50px；相对单位最常用的是 em，缩进的宽度为字符宽度的倍数，一般设置为 2em，就是空两格。
字符宽度——如果是中文方块字，也可以称为字体大小，它是通过 font-size 属性来设置的，这个属性在后面 CSS 字体课程中会详细介绍。
百分⽐缩进宽度，是根据⽗元素的宽度计算得到。这个很少使用。
给 p 元素声明 text-indent 属性，值为 2em。
仔细观察，每个自然段缩进貌似不是2个字的宽度，这是为什么呢？
你应该想到了，把 text-align: justify 注释一下，就是我们要的效果了。
letter-spacing 属性用于指定中文文字或英文字母之间的空隙。
在样式中，定义 h1 选择器，声明样式 letter-spacing: 5px。
这样，标题文字间就有了 5px 的空隙。
line-height 属性用于指定行与行之间的高度，也就是行高。属性值常用的有三个：
第一，normal，也是默认值，浏览器会根据字符大小自动设置一个行高。
第二，一个数字，比如 1.5。此数字与当前的字符大小相乘计算得到。推荐使用。
第三，绝对值，比如 20px，-5px。设置固定的行间距。
在没有设置 line-height 属性时，我们看到每一行的间距是这样的。
回到样式代码，给 p 元素声明样式 line-height: normal。
我们看到效果没有变化。
修改 line-height 属性值为 1。
再来看，每个段落的行间距消失了。
再次修改 line-height 为 10px，行与行之间叠加到了一起。
是不是和你理解的行高不一样呢？看来，我们得需要仔细研究一下：行高到底是如何计算的。
这是两行中文和英文混合的文本。
在文字顶端画一条线，取名叫顶线。在文字底端画一条线，取名叫底线。在文字中间画一条线，取名叫中线，再画一条英文的基线。上一行文字的底线，到下一行文字的顶线，他们之间的空隙称为行距。
实际上，line-height 设置的行高值，是两行基线的距离。
这里你可能会问，基线不是英文文本才有的吗？其实，不管文本里有没有英文，基线都是一直存在的。
了解了这个原理，你就能理解 line-height: 1，为啥没有行距了。因为 1 乘以文字的高度，结果还是文字的高度。而文字的高度，恰好等于两行基线之间的距离，所以行距为 0。
word-spacing 属性用于指定文本中单词的间距，只对英文有效。
给 p 元素再声明一个 word-spacing: 20px 样式。
我们看，单词 no 和 fight 后面就有了 20个像素的间距。
white-space 属性指定了如何处理元素内部的空白。有一个常用的值，nowrap，不管包含文本的元素宽度是多少，文本都不会换行，直到遇见 <br> 标签为止。
给 p 元素再声明一个 white-space: nowrap 样式。
此时，每个段落都在一行显示了。虽然我们给 p 元素声明了 width: 200px，他也会视而不见，继续倔强的在一行显示。
文章配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=63
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "文本格式" link.
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
参阅 CSS 颜色值 查看完整的颜色值。
一个网页的背景颜色是指在主体内的选择：
实例
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。
文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
实例
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
实例
a {text-decoration:none;}
尝试一下 »
也可以这样装饰文字：
实例
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
我们不建议强调指出不是链接的文本，因为这常常混淆用户。
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
实例
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
尝试一下 »
文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
实例
p {text-indent:50px;}
更多实例
指定字符之间的空间
这个例子演示了如何增加或减少字符之间的空间。
指定行与行之间的空间
这个例子演示了如何指定在一个段落中行之间的空间
设置元素的文本方向
这个例子演示了如何改变元素的文本方向。
增加单词之间的空白空间
这个例子演示了如何增加一个段落中的单词之间的空白空间。
在元素内禁用文字环绕
这个例子演示了如何禁用一个元素内的文字环绕。
垂直对齐图像
这个例子演示了如何设置文本的垂直对齐图像。
添加文本阴影
这个例子演示了如何设置文本阴影。
所有CSS文本属性。
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
.HTML的骨架
在编写html时我们们首先要写出以下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>不要被这一大长串吓到，在VSCode编译器中html文件第一行打出“!”便会自动得到这些代码。我们来认识一下这些标签都是什么。
<!DOCTYPE html> html文件第一行必须是DTD（Document Type Definition，文档类型声明），不写DTD会引发浏览器的一些兼容问题。
<html lang="en">
.
.
.
</html><html></html>标签对，将<head></head>标签对和<body></body>标签对放入其中，lang属性为网页语言，英语为en，中文为zh。
注意：head标签对和body标签对需要在html标签对中缩进
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><head></head>标签对中是网页的配置，而并非网页头部
head标签对中<meta charset="UTF-8">为设置字符集，<meta>标签为元标签，表示网页的基础配置；
UTF-8为制作网页所使用的字符集，与gb2312的区别可参考下图。
在<head></head>中的<title></title>中书写网页的标题，文字会显示在浏览器的标签栏上。title也是搜索引擎收录网站时显示的标题，所以我们需要合理的设置title以吸引用户的点击。
使用meta标签设置网页关键词和描述，name属性非常关键，用来设置meta的具体功能。
<meta name="Keywords" content="关键词1，关键词2，关键词3">
<meta name="Description" content="页面描述是搜索引擎显示的简介词语"><body></body>标签对中用来写网页的主要内容，包括网页头部，内容，页脚等等。
2、标签
html叫做“超文本标记语言”，超文本标记就是标签，这些标签拥有不同的功能。
标签通常成对儿出现；但meta标签为单标签，只有起始标签。
标签可以给文字设置不同的“语义”。
1.标题标签
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5> <h6>六级标题</h6>实际显示效果如图。
搜索引擎非常看重<h1></h1>标签的内容，应该将重点内容比如网页的logo等放到<h1></h1>中以加大其权重。<h1></h1>标签一般只能放置一个，否则会被搜索引擎视为作弊。
六级标题虽然很像普通文本进行了加粗，但不应该仅仅为了加粗而使用<h6></h6>标签对。
2.段落标签——p标签对
<p>段落标签，p是英语paragraph的意思</p><p>在HTML文件中即使代码换行了，页面显示效果也不会换行</p><p>所以必须要把任何段落都放入段落标签中</p> <p>段落标签中不能嵌套标题标签和其他段落标签</p>在网页中显示的效果如图。
3.div标签
div是英语division“分割”的缩写，<div></div>标签对用来将相关的内容组合到一起，以和其
他内容分割，使文档结构更清晰。最重要的一点是，它可以结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS”。
div标签对的应用是html中非常重要的知识点。
<div>
<h3>标题三</h3>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</div>4.注释与转义字符
书写代码时，我们需要写好注释使日后再阅读代码或者他人阅读代码提供提示。
为了在书写“<”“>”等符号时不被当作标签，我们需要使用转义字符来表示它们。
<!-- 注释内容 -->
<p><为小于号</p>
<p>>为大于号</p>
<p> 为不会被折叠的空格</p>
<p>©为版权符号</p>在网页中显示的效果如图。
总结
通过此次的学习，我们认识了html骨架，标题标签，段落标签，div标签，注释写法与部分转义字符写法。下次的学习内容将会是列表标签和多媒体语义化标签。
*请认真填写需求信息，我们会在24小时内与您取得联系。
