文本类样式 — 背景、文本、字体

HTML5学堂

发布于 2018-03-13 13:17:32

2.5K0

发布于 2018-03-13 13:17:32

上周我们通过之前讲解的知识点完成了对一个页面的布局操作，实现了页面的一级、二级布局，完成了页面主体框架的搭建。但是细心的你应该会发现，我们做出来的网页与网页PSD图（设计图）还有很大差距，也就是说我们当前学习到的知识还不足以支撑我们完成一个页面的完美制作，那到底缺了哪些呢？换句话说，我们到底还有什么是没有学习到的呢？

本文内容概要：

1 文本类样式解析

2 文本样式——字体

3 文本样式——文本

4 文本样式——背景

5 文本样式案例展示

6 作业安排

如下图是网页的设计图

如下图是完成页面的一级、二级布局的效果

通过对比网页设计图，我们会发现上周实现的页面主要就是实现了一个大框架的构建，但是每个模块的内部我们还制作不了，也就是我们当前对于模块的具体开发还是束手无策的。那所谓的模块开发到底又是什么东西？而今天我们所讲的这个文本类样式又是怎么一个存在呢？一起往后看吧~~~

一、文本类样式解析

所谓的文本类样式，相信大家通过“文本”这两个字应该能够明白，就是我们页面中的所有内容，包括文字、图片等。处理文本类样式就是对文字和图片设置相应的大小、形态，这就是我们在一个页面中对具体模块里面的内容做详细的样式设置了。本文中给大家总结的文本样式主要分三个方面来做讲解，分别是：字体类、文本类、背景类。所以，接下来我们就一个个的来给大家做详细的解析。

二、文本样式——字体

文本类样式的字体类是我们在页面制作中一定会用到的属性，每个页面都会有不同的字体要求，比如字体大小、形态、格式等等。那接下来就来给大家罗列下字体类里面我们需要掌握并能够熟练使用的属性吧！

1、font-family

字体格式属性，主要用来设置诸如“微软雅黑、黑体”等具体的字体类型。支持同时设置多个字体，但是要用逗号隔开，当浏览器找不到设置的第一个字体时会寻找后面的第二个字体，依次类推，直到找到可用的字体。具体字体设置建议如下：

中文页面建议以微软雅黑为首选，其他字体次之（具体的字体设置还要根据项目需求来进行设置）；
英文页面建议以Arail/Tahoma等字体；
中英结合网站建议最好用英文字体；
特殊字体一律用图片（当然也可以用@font-face属性，这点以后会遇到）；
书写字体的时候使用英文名称：黑体-SimHei、宋体-SimSun、微软雅黑-Microsoft YaHei、无衬线体-sans-serif、Arial、Tahoma。

举例设置字体：

.box h2{
    height: 30px;
    font-family: 'Microsoft YaHei'; /*设置了微软雅黑*/
}
<div class="box">
    <h2>HTML5学堂是一个便于初学者学习的好平台~~~</h2>
</div>

代码效果展示：

2、font-size

字号属性设置，主要用来设置页面中字体的大小，有px、百分数、em等单位。

px：在网页中一般最小的字号就是12px；另外12px也是网页设计中通用默认的最小字体大小。浏览器的默认字体大小都是16px。

em：如果父元素的font-size：20px，那么em=px/20；以em为单位设置字体大小在移动端开发中使用广泛。

举例：模块标题分别测试设置字体大小为12px或者.75em。代码如下：

.box h2{
    height: 30px;
    font-family: 'Microsoft YaHei';
    font-size: 0.75em; /*12px*/
}
<div class="box">
    <h2>HTML5学堂是一个便于初学者学习的好平台~~~</h2>
</div>

代码效果展示如下：

展示的结论：可以看出两者是没有什么变化，我们说过浏览器的默认字体大小为16px，我要设置12px，对应的比例可以算出是0.75em，和你直接设置12px是没有区别的。

3、font-style

字体风格的设置，主要用来设置页面中字体的倾斜，有normal、italic、oblique三种属性。

具体代码如下：

font-style：normal | italic | oblique;
normal：常规字体
italic：斜体；
oblique：倾斜。

注意：通常情况下，italic和oblique文本在web浏览器中看上去是完全一样。

4、font-weight

字体粗细的设置，主要用来设置页面中字体的粗细程度，有normal、bold、bolder、lighter、number等属性。

具体代码如下：

font-weight: normal | bold | bolder | lighter | number;
normal：表示正常；
bold：表示加粗；
bolder：表示更粗的字符；
lighter：表示更细的字符

number：100、200、…900定义由粗到细的字符，400等同于normal，700等同于bold。

5、line-height

字体行高的设置，主要用来设置页面中每个字体的行高。

具体代码如下：

line-height: normal | length；
normal :浏览器默认为正常行距；
length : 由浮点数字和单位标识符组成的长度值，允许为负值。设置数值越大，文本段落中间的行距越大。

Tips：当line-height设置成父元素的高度的时候，也就是说行高等于父元素的高度，文本就会居中。

6、字体类属性的使用总结

字体类属性可以设置页面中的字体大小、粗细、风格、格式，还包括了一个文本行高的设置，具体的使用见下面代码：

.box {
    width: 600px;
    height: 200px;
    background-color: #fcf;
}    
.box h2{
    font-style: italic; /*倾斜*/
    font-weight: bold;  /*加粗*/
    font-size: 25px;  /*字体大小25像素*/
    font-family: 'Microsoft YaHei';  /*微软雅黑*/
    line-height: 200px;
}
<div class="box">
    <h2>HTML5学堂是一个便于初学者学习的好平台~~~</h2>
</div>

代码效果展示：

三、文本样式——文本

文本类样式的文本类主要是为了我们在设置文章文字或段落时可以实现水平居中、下划线、首行缩进、颜色、字符间距、换行等一系列操作。

1、text-decoration

文本下划线的设置，用来实现页面文字的下划线效果，有none、underline、overline、line-through等属性。

具体代码如下：

text-decoration: none | underline | overline | line-through;
none: 无文本修饰（浏览器默认初始值）；
underline : 表示有下划线；
overline : 表示有上划线；
line-through : 表示有贯穿线/删除线。

2、text-indent

文本缩进的设置，通常用来实现页面文字段落中的首行缩进2字符操作，一般首行缩进只需要书写：text-indent: 2em;即可。

具体代码如下：

text-indent: length;
常用单位是 px 或者是 em ；
em指文字的倍数，允许指定负值，通常只需要书写2em即可。

3、text-align

文本对齐方式的设置，用来实现页面文字左对齐、右对齐、居中对齐、两端对齐等效果，有left、center、right、justify等属性。

具体代码如下：

text-align: left | center | right | justify; 属性规定元素中文本的水平对齐方式；
left : 左对齐；
center: 中间对齐（左右居中）；
right : 右对齐；
justify : 两端对齐文本。

4、color

文本颜色的设置，用来实现页面文字的颜色效果。

颜色可以是一个名称标示的关键字，如 color : red，这种需要你记忆比较多的英文单词，所以不是很实用；也可以是一个RGB数字，如color : #ffffff；如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为#RGB的方式，如：#FF8800 可以缩写为 #F80。

用于设置文本的颜色：

color : 颜色值；

5、vertical-align

文本垂直居中对齐的设置，此属性除了table支持的比较完善其他标签支持的并不是太好，不建议使用此属性。

具体代码如下：

vertical-align: top | bottom | middle;
top : 顶部；
bottom: 底部；
middle : 中间对齐（上下居中）。

6、word-spacing

改变字（单词）之间的标准间隔。

具体代码如下：

word-spacing: normal | length;
normal : 默认值；
length : 接受一个正长度值或负长度值。如果提供一个正长度值，那么字词之间的间隔就会增加。设置一个负值，会把它拉近。

7、letter-spacing

改变字符之间的标准间隔。

具体代码如下：

letter-spacing: normal | length;
normal : 默认间隔；
length : 接受一个正长度值或负长度值。如果提供一个正长度值，那么字符之间的间隔就会增加。设置一个负值，会把它拉近。

8、word-wrap

word-wrap是控制换行的。

使用word-wrap: break-word;时，是进行强制换行，中文没有任何问题，英文语句也没问题，但是对于长串的英文就不起作用。

9、word-break

word-break是控制是否断词的。

word-break: break-all;是用来断开单词的，在单词到边界时，下个字母自动到下一行。主要解决长串英文的问题。

10、文本类属性的使用总结

实际开发中，我们对于文本属性的使用主要有对齐方式、下划线、缩进、颜色，其他属性使用到的概率比较小，但是这不是说不使用，所以大家该记忆的还是需要记忆的。

具体文本类属性设置的代码如下：

.box {
    width: 600px;
    height: 200px;
    background-color: #ccc;
}    
.box h2{
    text-align: center;  /*水平居中*/
    text-decoration: underline;  /*下划线设置*/
    text-indent: 2em;  /*首行缩进两个2字符*/
    color: red;
}
<div class="box">
    <h2>HTML5学堂是一个便于初学者学习的好平台HTML5学堂是一个便于初学者学习的好平台HTML5学堂是一个便于初学者学习的好平台HTML5学堂是一个便于初学者学习的好平台</h2>
</div>

代码效果展示：

四、文本样式——背景

在之前我们讲解过背景颜色background-color的设置，通过它，我们实现了页面中每个模块的颜色设置。可是在前面的页面开发中，我们发现简单的页面颜色设置已经满足不了我们的需要，通过查看PSD图，我们发现很多模块里面的图片是固定不变的。这时候我们就需要使用别的方式来操作了，这就需要使用背景类属性来进行操作了。

1、background-color

页面的背景颜色设置。

基本语法： background-color: 单词 | 十六进制 | rgb | rgba;

具体实现代码：

.box {
    width: 600px;
    height: 200px;
    background-color: #39f;
}    
<div class="box"></div>

代码展示的效果：

2、background-image

页面的背景图片设置。

基本语法： background-image: none | url("图片路径");

none : 是无背景图；url : 里面跟的图片的路径；背景图片默认平铺。

为了让h2标题更好看，我们引入了一张背景图片，如下：

.box {
    width: 600px;
    height: 200px;
}
.box h2 {
    height: 130px;
    line-height: 30px;
    color: rgb(0,0,0);
    background-image: url('images/logo.png'); 
    text-align: center;
    font-size: 20px;
    font-family: 'Microsoft YaHei';
}
<div class="box">
    <h2>HTML5学堂是一个便于初学者学习的好平台~~~</h2>
</div>

结果发现不是我们想要的那种效果，图片发生了平铺效果，展示的效果如下：

2、background-repeat

background-repeat有两个属性值，repeat和no-repeat，平铺与不平铺。平铺会将一小块的图片铺满整个块元素的背景区域。

基本语法： background-repeat: repeat | no-repeat | repeat-x | repeat-y;
repeat : 重复默认选项；
no-repeat : 不重复；
repeat-x : 横向重复；
repeat-y : 纵向重复。

为了让h2标题更好看，我们引入了一张背景图片，但是不让h2标题的背景图片发生平铺效果，所以代码就变成这样：

.box {
    width: 600px;
    height: 200px;
}
.box h2 {
    height: 130px;
    line-height: 30px;
    color: rgb(0,0,0);
    background-image: url('images/logo.png');
    background-repeat: no-repeat; 
    text-align: center;
    font-size: 20px;
    font-family: 'Microsoft YaHei';
}
<div class="box">
    <h2>HTML5学堂是一个便于初学者学习的好平台~~~</h2>
</div>

图片果然不在有平铺效果了，展示的效果如下：

3、background-position

background-position主要用于实现背景图的定位操作，具体情况如下：

基本语法： background-position: x y ;
X、Y的取值：
可以是像素值。background-position：10px 30px；
可以是具体的方位。left | right | center | top | bottom；
可以是百分比。background-position：30% 50%。

让h2标题的背景图片变成在右边出现，同时也不让h2标题的背景图片发生平铺效果，所以代码就变成这样：

.box {
    width: 600px;
    height: 200px;
}
.box h2 {
    height: 130px;
    line-height: 30px;
    color: rgb(0,0,0);
    background-image: url('images/logo.png');
    background-repeat: no-repeat; 
    background-position: right center; 
    text-align: center;
    font-size: 20px;
    font-family: 'Microsoft YaHei';
}
<div class="box">
    <h2>HTML5学堂是一个便于初学者学习的好平台~~~</h2>
</div>

图片无平铺效果且在标签的右侧出现，展示的效果如下：

4、background-attachment

background-attachment为我们提供背景图定位的操作方法，具体情况如下：

基本语法：background-attachment : scroll | fixed;
scroll : 随着页面的滚动轴背景图片将移动，默认值；
fixed : 随着页面的滚动轴背景图片不会移动。

5、背景属性的复合方式

background背景样式的值是复合属性值组合，也就是背景的值可以跟多个属性值，值与值之间使用一个空格间隔即可，不能不写空格。书写方式以及书写顺序如下：

background: #000 url(图片地址) left top no-repeat；

从复合属性background来看，我们发现代码量减少了许多，也比较清晰明了。所以页面开发制作的时候尽量使用复合属性设置。

五、文本类样式操作的案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>H5course</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">
        .ensure {
            float: left;
            width: 256px;
            margin: 20px;
            padding: 5px;
            border: 1px solid #000;
        }
        .com-white {
            height: 28px;
            padding: 0 10px 0 25px;
            background: url("images/icon.png") 0 center no-repeat;
            line-height: 28px;
            border-radius: 3px;
        }
        .com-white h2 {
            font-size: 16px;
            font-weight: bold;
        }
        .indexcom dl {
            margin-top: 6px;
            padding: 0 2px;
        }
        .indexcom dd {
            margin-top: 10px;
            text-indent: 2em;
            text-decoration: underline;
        }
        .indexcom a {
            display: block;
            height: 100%;
        }
        .indexcom img {
            display: block;
            width: 100%;
            border-radius: 3px;
        }
        .indexcom p {
            overflow: hidden;
            height: 54px;
            line-height: 18px;
        }
        .indexcom dd div {
            height: 22px;
            line-height: 22px;
            text-align: right;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="ensure indexcom">
        <div class="com-white">
            <h2>HTML5学堂</h2>
        </div>
        <dl>
            <dt>
                <a href=""><img src="images/logo.png" alt="" /></a>
            </dt>
            <dd>
                <p>HTML5学堂是一个便于初学者学习的好平台~~~HTML5学堂是一个便于初学者学习的好平台~~~...</p>
                <div><a href="http://www.h5course.com">More</a></div>
            </dd>
        </dl>
    </div>
</body>
</html>

案例展示的效果图：

六、作业安排

根据今天所学的文本类样式，自行实现上周页面的具体模块开发，即实现页面中的文字、图片等内容的制作。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2016-06-06，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自懂点君微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度