1. 单位

2. 颜色

3. 文本

3.1 字符间距letter-spacing

3.2 行高line-height

3.2.1 基本概念

3.2.2 行高的应用——居中垂直对齐效果

3.3 对齐方式text-align

3.4 装饰线text-decoration

3.4.1 基本用法

3.4.2 装饰线的应用——去掉超链接下划线

4. 字体

4.1 基本用法

4.2 font属性简化的使用方法

1. 单位

px像素就是指屏幕上的一个点，可以简单的这样来理解，比如说我们设置当前的元素宽度是一百个像素宽，那么就设置成100px就可以；

em被称为文本字符的单位。1em就是指个字符，比如说我们要设置行高，两个字符的行高，那么我们就把这个属性的值设置成2em就可以了，它是自动的适应用户所使用的字体的，比如说当时用户所使用的字体，它的字号是12个像素大小，那么2em就是12x2=24个像素大小

百分比是一个租对的概念，对于htm文档来说，它可以做成这样的一个DOM树，来表示当前文档的元素的个继承关系，最上面是文档的根节点，body节点包含两个div元素，右边的div元素包含两个同级元素h1和p，那么在p、h1上一层的div就称为父层，下面的两个元素称为子层，如果设置了父层元素大小而没有设置子层的元素大小，则子层会默认的继承父层的大小，若div设为12，则h1默认值也为12，若h1设为120%即为12*120%

2. 颜色

3. 文本

3.1 字符间距letter-spacing

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">h1{letter-spacing: 2px;}h2{letter-spacing: -3px;}</style>
</head>
<body><h1>标题内容</h1><h2>文本段落主要内容</h2>
</body>
</html>

字符间距可以是一个负数，由h2可以看出每个字符之间就有一个重叠的效果

3.2 行高line-height

3.2.1 基本概念

行高不是行距，行高指的是文本行的基线间的距离，即每行文字下基线与下一行文字的下基线之间距离（或者是每行文字上基线与下一行文字的上基线之间距离）

这里用一张图来说明行高与行距的区别：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">p{font-size: 14px;/*line-height: 1.5em;*/line-height: 2em;}</style>
</head>
<body><!-- 将浏览器窗口拖动得窄一些，可以看到下面文字分多行显示时的行间距效果 --><p>这里是web前端开发课程的课程网站，这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案。</p>
</body>
</html>

行高的大小是相对于这个文字的字号大小，字号大小可以用fontsize来设定

3.2.2 行高的应用——居中垂直对齐效果

文字的垂直居中就是它的垂直方向上要在元素内部垂直居中，很多情况下可以采用的line-height的方法

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">#one{height: 40px;background-color: #ccc;font-size: 14px;}#two{height: 40px;background-color: #ccc;font-size: 14px;line-height: 40px;}</style>
</head>
<body><p id="one">web前端开发课程</p><p id="two">web前端开发课程</p>
</body>
</html>

height设置的是段落的高度，即图中灰色部分，lline-height设置于height相同的高度就能达到垂直居中的效果

3.3 对齐方式text-align

text-align设置水平方向上的一个对齐方式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>h1{text-align:center}.date{text-align:right}.main{text-align:justify}</style>
</head><body><h1>CSS text-align 实例</h1><p class="date"> 3 月 14 号</p><p class="main">“当我年轻的时候，我梦想改变这个世界;当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家;当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭;在家人的帮助和鼓励下，我可能为国家做一些事情;然后，谁知道呢?我甚至可能改变这个世界。”</p></body></html>

可以看到标题居中，日期右对齐，段落两边对齐

3.4 装饰线text-decoration

3.4.1 基本用法

装饰线美其实就是在文本上面、中间或下面添加线条

取值是overline的时候，在上面有装饰线；

取值是line-through的时候,在中间有一个删除线的效果;

当取值为underline的时候,在最下面有一个下划线。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>h1{text-decoration:overline}h2{text-decoration: line-through}h3{text-decoration: underline}</style>
</head><body><h1>标题1文字</h1><h2>标题2文字</h2><h3>标题3文字</h3>
</body></html>

3.4.2 装饰线的应用——去掉超链接下划线

默认的情况下，a标签做出来的超链接是默纵有下划线的，那么当网页上下划线出现的比较多，排版显得比教凌乱的时候，我们就可以采用，将这个属性的取值设置为none，来去掉这个装饰线

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>a{text-decoration: none}</style>
</head><body><ul><li><a href="#">链接1</a></li><li><a href="#">链接2</a></li><li><a href="#">链接3</a></li></ul>
</body></html>

4. 字体

4.1 基本用法

我们可以将所有的关于字体的属性都写在一个font的声明里面，这样可以一次性的定义字体的多方面的样式，当然也可以分开来定义；

font-family定义了三个字体，三个字体的关系是：首先它会找到第一个字体，如果有的话按照这种字体显示，否则按照第二个字体显示，依次类推；

设置字体时用双引号把字体括起来，就是当这个字体名字中间带有空格的情况，否则就可以不加双引号；

对于字体来说我们会在CSS3样式部分再引审出来-种网页字体或者称为网络字体，后面会提到

4.2 font属性简化的使用方法

如果将所有的关于字体的样式，设置在一个font属性里面的时候，他有一个顺序，大概是这样的顺序：

是否斜体粗体，后面可以把字号和行高写在一起，因为它们都取数值类型，它们中间要加一个斜线隔开，最后我们来设置字体

Web前端开发——CSS样式（Ⅰ）文本与文字样式相关推荐

Web前端开发——CSS样式之CSS选择器
1. CSS选择器类型 css选择器可分为标签选择器.类别选择器.ID选择器,这里的三种类型主要针对内嵌样式和单独文件样式而言 1.1 标签选择器 1.1.1 测试代码 <!DOCTYPE ht ...
Web前端开发css基础样式总结
颜色和单位的使用颜色用颜色的名字表示颜色,比如:red 用16进制表示演示比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间一般都用16进制表示颜色单 ...
WEB前端开发工程师学习第二天文字文本
1.文字设置 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...
Web前端开发——CSS样式（Ⅱ）背景、超链接样式
目录 1. CSS背景 1.1 基本属性 1.2 文件组织形式 1.3 测试代码 1.4 效果图 2. CSS超链接 2.1 链接的四种状态 2.2 测试代码 2.3 效果图 1. CSS背景 1.1 ...
Web前端开发CSS基础(2)
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
快来学习一下吧！Web前端开发CSS居中的五大方式
学习css大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望 ...
【web前端开发 | CSS】css元素的显示模式
思维导图一:元素显示模式分类 *网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页. *元素显示模式就是元素(标签)以什么方式进行显示,比如<div> ...
【web前端开发 | CSS】页面布局之盒子模型
思维导图文章目录思维导图 1:边框 2:内边距 3:外边距外边距合并 1. 相邻块元素垂直外边距的合并 2. 嵌套块元素垂直外边距的塌陷所谓盒子模型:就是把 HTML 页面中的布局元素看作是 ...
【web前端开发 | CSS】页面布局之定位
思维导图 (案例放在文章结尾) 文章目录思维导图一:定位 1.1:静态定位(position:static:) 1.2:相对定位(position:relative:) 1.3:绝对定位(posi ...

Web前端开发——CSS样式（Ⅰ）文本与文字样式

1. 单位

2. 颜色

3. 文本

3.1 字符间距letter-spacing

3.2 行高line-height

3.2.1 基本概念

3.2.2 行高的应用——居中垂直对齐效果

3.3 对齐方式text-align

3.4 装饰线text-decoration

3.4.1 基本用法

3.4.2 装饰线的应用——去掉超链接下划线

4. 字体

4.1 基本用法

4.2 font属性简化的使用方法

Web前端开发——CSS样式（Ⅰ）文本与文字样式相关推荐

最新文章

热门文章