CSS控制文本在线视频

大家好

上节课我们学习了css的

一个非常实用的盒子模型理论

本节课我们来学习

用CSS样式的文本属性

来定义文本的外观

改变文本的颜色 字符间距

对齐文本 装饰文本

对文本进行缩进等等

非常实用方便

在本节课的实际操作部分呢

我们来继续学习CSS当中

关于文字排版的相关的样式

好 我们现在还拿

id是header的这个盒子的样式表来举例子

好 我们先来看一下目前的效果

好 这个盒子里有几个文字

现在是一个默认的字体

字号以及它的显示方式

我们可以来先给它换一个字体

这是字体的属性

我们可以先给它设成微软雅黑

这个呢都是我们浏览器里边内嵌默认的字体

如果我们用自己定义的字体的形式的话

我们需要用外链的字体形式

待会我会讲怎么样外链

我们自定义的字体

如果我们没有外链字体的话

那么我们只能用浏览器默认的字体

来给设置

我们现在来看一下效果

好 现在这个字体就变成了微软雅黑

接下来我们来看一下字号的属性

font-size

它可以设置成大或者小

或者是多少像素

一般我们都拿像素来设置

一般小的字呢就是12像素

也可以用14像素

这个在网页制作中都比较常用

来看一下效果

好

现在大家看这个文字的大小就是14像素

我们来修改一下

变大一点

来看一下效果

好 文字就变大了

现在是24像素的

接下来呢是设置文字颜色的属性

color

可以任意选择一个颜色

同样前面可以点击变换颜色

好 看一下效果

好 现在文字就改变颜色了

在接下来呢我们可以给它设置它的类型

可以是斜体

看一下效果

好 现在它是个斜体

同样呢我们可以给它设置粗细

可以是粗或者是细或者是多少

看不出太多的效果

然后我们可以给它设得大一点

最粗是900

看一下效果

好 它现在变粗了

最后呢我们还可以给它设置一个行距

比如说是50

好 现在这个行距

就是我们设置的行距

好 接下来呢我们给大家介绍

引用的特殊字体的写法

我们可以首先呢

先在文件夹这里

新建一个装字体的文件夹

然后把我们需要的字体拷进来

好 像这个字体我们可以通过网站上下载

或者是其他什么渠道

然后把我们得到的这个字体文件

然后拷过来

这个字体呢可以是eot格式的

也可以是ttf格式的

还可以是otf格式的

这几种格式呢

是能够确保在主流的浏览器当中显示的

如果有其它格式的话

可能需要到相应的网站上去转化一下

转化成这几种浏览器能够认识的格式

接下来在css文件当中

我们利用@font-face

然后来把这个字体做一下定义

在这里呢我们输入

先给它定义一个名字

这个名字我们可以任意起

好 然后指定它的位置

因为我们现在呢

这个css的文件是在css文件夹下面的

那么我们要调用font文件夹下面的这个文件

所以我们需要先找到它的副极目录

然后再进入到font这个文件夹

然后再进入到这个找到这个文件

所以我们要用..-font-ost

接下来呢我们为了

因为这是一个英文的字体

所以为了更清楚的看到效果呢

我们把这里给改一下

我们用一个英文的几个字母

来看一下效果

这样比较明显

我们现在先来看一下效果

目前这个字体呢还是微软雅黑的形式

接下来我们把刚才我们预设好的字体给应用上

在font-family这块

我们用刚才定义的名字来替换微软雅黑

好

这是一个我们刚才设置的新的字体

好 现在来看一下效果

大家看现在的字体已经改成了

我们新的设置的字体的形式

这个呢就是我们通过引用的形式

来调用特殊字体

到这里呢我们基本上就学完了

这些布局所用到的

css的技术和html的技术

那么我们现在回到我们的案例当中

然后继续把我们的布局给排列好

回到index页面

我们来继续完善我们的这个布局

我们先来看一下现在的效果

这个红色的部分就是我们第一部分的布局

那么我们现在看到

这个红色的盒子周围有一个小白边

这种呢是我们页面默认的时候

会存在的小白边

然后我们现在通过css

把这个小白边给去掉

进入indexcss

我们先对body设置一下它的样式

让它的margin是0

padding也是0

我们现在看一下效果

现在就去掉了这个边

已经是顶头的了

接下来呢我们给第一个这个盒子整体

做一个css样式

给它起一个名字

我们可以把之前写在这个上面的样式

给写到css的样式表里

对应我们刚才的名字

可以给它设一个背景色

宽度和高度

那么背景呢我们是背景图

我们可以把背景图

之前我们做好的背景图给导入进来

就是这一张

好 用的是background-inage这个属性

然后把背景图的url输入进来

好 我们看一下效果

现在背景图已经在页面上面了

但是我们现在看到这个背景图

并不是显示了全部

它只显示了图像的一部分

然后这时候我们可以

通过设置背景图的填充大小

是百分之百

让它显示背景图的全部

在这个相应的区域里

看一下效果

现在这个背景图已经

宽度上已经是完全显示出来了

如果我们改变显示区域的大小

这个背景图是跟着走的

会百分之百的显示

然后在高度上呢我们给它设置一个临时的

然后先是满足我们一定程度的高度

例如我们先给设一个700

并且让它的纵向是不会重复的

就让它不重复就可以了

我们先来看一下

好 基本上是满足我们要求的

好

下面我们来做这个logo

给logo写一个

logo是id的

然后我们给它写一个

css的样式单

我们可以给它先设一个宽度

好 我们现在可以把它

用padding和margin来给它设置它的位置

margin-top

margin-left

然后刚才这个最外层的盒子

我们给它一个流式的定位方式

float是left

好 我们现在看一下效果

现在这个logo已经在了

它自己所在的一个位置

距离上边和左边都有一个小的边距

我们翻过头来对照一下设计稿

那么我们看它距离上面的边距

可能是比较窄的

距离左侧边距是比较宽的

我们现在对应着给它调整一个

相对比较好的位置

距离上面我们可以给它一个25

距离左边给一个75这样的一个位置

看一下效果

这样的位置呢如果我们比较满意的话

就可以继续往下面做了

不满意呢

我们还可以继续调整它的位置

和大小尺寸之类的

好

下面呢我们再来做右边的这个搜索框

和文字选择的这个框

这个搜索框

我们先给这个搜索框整体的这部分

加一个样式

我们高度和logo的高度是一致的

然后把这个搜索框给它增加一个样式

我们来看一下这个搜索的图片

这个放大镜

看一下它的尺寸

我们让它的高度和我们的logo是一致的

然后我们当时取的时候是为了对齐嘛

然后所以取的是跟logo的高度是一样的

把它的背景用这个放大镜

好 看一下效果

好 这时候我们的填充还是百分之百

我们来设定它的位置

我们把右侧的这个整体的盒子

给设定一个位置

设定一个绝对的位置

它的距离上边距呢是和logo一样

因为它是靠右的

所以我们可以给它设一个右边距

先定成100

为了让大家看的能更清楚一些呢

我们给它加一个底色

现在我们看一下效果

现在它就在了一个它基本该呆的位置

我们继续往后制作

接下来呢做这一个

放大镜下面的那个输入框

设一个宽度 高度

是50

背景图

输入框的这个png图片

然后填充依然是百分之百

让它不重复

我们看一下效果

现在这个输入框已经出现在这里了

然后我们现在给它做一下布局定位

我们可以用绝对定位

因为它两个元素是重叠在一起的

所以可以用绝对定位

也可以用相对定位来实现

我们先用相对定位吧

Top是0 left

先给设个100

这个也是相对定位

那么它的顶端呢就是-50

让它移到上面去

左侧是0

我们的代码在书写的过程中

都不是唯一的写法

大家可以根据学习的知识

来任意的书写

然后满足我们需要的结果就可以了

来看一下效果

大家看到现在的位置已经是现在这个样子

然后我们需要把这个放大镜再往右移一些

然后再往下一点点

在往下移一点点

好 再来看一下

现在这个位置

已经基本上满足我们的设计要求了

下面我们再往后继续做后面的部分

再往上一点

刚才稍微往下了一点

我们再来看一下

然后再往下做

现在这个位置比较好

然后再往下做

我们先把这个蓝色的

这个整体的这个框变小一些

让它刚好覆盖我们的这个元素比较好

这样不影响后面元素的布局

这样是比较好的

然后我们往左挪一些

然后给右边的这个文字选择的这部分

留出空间

这样我们把这个底色先给去掉了

我们现在看一下效果

好 这个位置应该差不多

然后我们来做后面的这一部分

这一部分依然是给它做css样式

高度50

宽度

位置

是一个绝对位置

距离顶部呢是25

距离右侧设一个值

然后我们给它先加一个底色

好 我们来看一下

现在这就是我们刚才新设的这个盒子的位置

太宽了

稍窄一点

好 然后我们把内容添进去

全大写的

好 我们看一下效果

现在内容进去了

然后我们现在希望它呢是白色的

然后可以居中 竖向居中对齐

我们要给它来做样式了

白色

然后它的行高

行高是设成盒子的高度

这样我们这个纵向对齐方式

就可以用居中的形式来设置

这样这个文字就会在盒子的中间

我们先来看一下效果

现在就居中在纵向在盒子的中间了

然后是白色的

看看字号是不是合适

我们再给它设定一个字号

大

再跟设计稿对照一下

差不多

接下来呢我们在后面加这个小三角

先在这里增加一个承载小三角的盒子

这块有一个

我们把它换到上面去

这是一个承载小三角的盒子

对应的写它的样式表

高度还是和logo一样

50

背景图是那个小三角

填充仍然是百分之百

我们给它和刚才language这个盒子

都设成流的方式排列

float是left

好 我们先来看一下效果

好 三角已经出现了

我们把宽度设小一些

让这个三角跟我们想要的是差不多大的

我们再对这个三角进行一下微调位置

可以用margintop

让它往下一点点

然后再往右一点点

看一下

好 现在位置也比较合适了

好 我们现在把它下面这部分给加上

现在这里把内容加上

这里的内容呢有两行文字

简体中文 然后回车

换行符

然后是繁体中文

然后给它做css样式表

首先宽度先设一个

高度先设一个

它的定位给它加一个背景色

灰色

它的行高可以设一下

让它的字体是白颜色

好 我们先来看一下效果

好 这里效果就出现了

我们还可以给它居中

字号有点大

然后把字号设一下

再看一下

好 现在我们把这两部分文字

跟这个english对齐

因为我们是对应语言这块下拉出来的

我们还是利用padding

用margin

margin-left

然后往右移一些

让它往上移一点点

看一下

有点多了

看大概多多少

我们把English这部分呢加一个空格

再多来一点

这些细节呢我们就属于是慢慢调

调到我们设计稿一致或者满意为止

我们看一下现在比较合适了

然后看一下这个距离也还可以

现在我们把整体的宽度调整一下

好

现在位置基本上合适了

然后我们可以把这部分再往右挪一点点

跟我们的设计稿再进行一下对照

然后把这些辅助我们

方便看到区域的背景色去掉

刚才的搜索

好 看一下

好 现在位置也还可以

我们接下来做下面的部分

好 给这个部分做css样式表

这个呢是我们这一部分文字

我们还是设它的宽度 高度

因为这部分我们希望它

能够根据屏幕显示的尺寸

来相对地改变一些大小

所以我们把这边的高度 宽度

都用百分比来设置

先来一个大概

插入我们的图片

填充还是百分之百

让它无重复

好 看一下效果

好 现在图片已经显示出来了

我们现在给它做一下定位

尺寸也还是可以的

我们还是用这种流的形式

然后给它通过margintop和left

做一下定位

先都写一个大概的

不合适再调整

好 看一下效果

目前这个位置呢还可以的

跟设计稿差不多

现在呢我们做下面的这一部分

把这一部分写css样式

我们可以总体的宽度

跟上面文字是一样宽的

然后方便对齐

因为我们这一部分是要单起一行的

所以我们可以把最外层的这个宽度

可以设成百分之百

高度

然后我们给它的列表做css的样式

ul

ul呢是它内部的

那我们可以根据

因为它这个边是对齐的

所以我们可以根据上面这个图片的位置

来定位这个ul整体的位置

是38

高度可以不变

我们给它加一个背景色

方便看出它的区域范围

好 看一下效果

现在这儿已经出现了

然后我们继续把这个Top left

我们再来看一下

现在这个位置也已经对上了

接下来我们对这里边的每一个列项

li进行设置

这里设成li

宽度可以是百分之百

也就是我们ul的宽度

高度

字体的颜色设成白色

字号

我们看一下效果

好

我们再来看一下跟设计稿

有点靠下

我可以再给它往上提一提

写错位置了

应该写在整体的这个

整体的这个盒子上

来看一下

好

现在这个高度还有点高

每一行的高度有点高

我们可以设窄一点

这些都调到我们满意为止就行了

然后我们可以把这个背景色去掉

好

现在这个位置基本上是合适的了

再往下降一点

好了

我们可以把前面的小圆点去掉

list-style这个属性

可以设置前面小圆点的类型

我们可以把它设成none的形式

就是去掉了

好

待会我们要做鼠标滑入的时候

出现那个小方块

我们现在把小方块的css样式写出来

就是这个小方块

因为待会我们在这里

会用到这个fang给它添加上

所以是重复使用的

所以我们用类的形式

用class

所以我们在这里呢用的是点

这个代表设置的是类

fang这个类的样式表

然后把它的宽度设成6

高度是一个小方块

float是left

然后给它加一个背景色

设置一下它的间距

我们先来看一下效果

再来做微调

好 现在差不多

然后我们要把它往左移

让它右边也留出一些距离

我们再来看一下

好

现在位置对的都差不多了

那么现在我们还差最后一步

就是把这些字体

跟我们的设计稿字体保持一致

现在字体是不一样的

我们用外链的那种

就是引用式的字体把这个设置一下

我们先来看一下设计稿当中

字体用的是这个字体

我们把这个字体找到

然后存到我们webstorm

font这个文件夹当中

这是我们找到的字体

然后用之前我们讲过的

@font-face

来设置这个字体

family

起一个名字

输入这个文件的位置

好

然后在这个list这个盒子或者是ul

或者是li这里边都可以

设置字体

font-family然后是刚才设置好的这个

我们看一下效果

好 现在字体已经改变了

那么最后呢我们还差这个小方块的颜色

我们来吸一下这个颜色

把颜色的纸拷过来

在这里改一下

那么到现在呢我们第一个模块的布局

就已经都完成了

大家可以根据自己的想法再做适当的调整

然后大家呢也可以

制作一下后面的这些模块

也可以实现一下自己的网页设计稿