CSS字体样式与样式效果

CSS字体样式

通过CSS样式表，可以自定义字体。下载想要的字体库，然后在工程里创建一个存放字体库文件的目录，把下载好的字体库文件存放进去，之后就可以引用这目录里面的字体库了，使用@font-face来自定义字体库，例如我下载了一个×××字体，然后在工程中创建了一个font目录，把字体库文件放入进去：

提示：如果是做实验、练习的话可以去下载一些各种各样的字体库来使用，但是如果是在个人网站或者其他公开的网站上，如果没有获得某个非免费字体的授权就不要使用这些字体，以免造成侵权的行为。

代码示例：

运行结果：

font-weight:bold 设置字体为粗体，font-weight有很多属性，不过比较常用的就是bold粗体，代码示例：

运行结果：

text-shadow 设置字体的阴影部分，格式为：npx npx npx color，

text-align设置字体的布局，常用的属性有center（居中）、left（向左对齐）、right（向右对齐），代码示例：

运行结果：

text-decoration 设置字体横线相关，可以设置字体的下划线、上划线、中划线还有去掉横线等等，例如可以去掉超级链接的下划线，代码示例：

运行结果：

思维导图：

样式效果：

2D转换：

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

其中rotate属性是用来定义2D旋转的，属性参数里面填写的是旋转的角度。

图片旋转代码示例：

运行结果：

scale(x,y) 设置2D缩放，scale(x) 则仅通过设置x轴的值来定义缩放转换，代码示例：

运行结果：

skew(x-angle,y-angle) 定义沿着X和Y轴的2D倾斜转换，单位是角度deg，代码示例：

运行结果：

思维导图：

其他的属性使用方式参考：

过渡属性：

transition 属性是一个用于设置过渡效果的属性，可以设置2D转换的过渡、宽高变化的过渡、背景或字体颜色的过渡。

这个属性要配合hover使用，当鼠标移动到改该定义的元素时就会出现过渡效果，2D缩放过渡效果代码示例：

运行结果：

宽度和背景颜色过渡，代码示例：

其实逻辑很简单，就是先在标签样式里先定义好初始的样式效果和要过渡的属性和时间，然后在标签的hover状态样式里定义鼠标移动上去后的样式效果，过渡其实就是把这个改变样式效果的过程变缓慢了。

运行结果：

2D旋转过渡代码示例：

运行结果：

以上只是介绍到transition属性规定完成过渡效果需要多少秒或毫秒的操作，剩下还有几个效果可以参考以下语法，或访问w3cshool网站查询更多的用法。

网址：http://www.w3school.com.cn/c***ef/pr_transition.asp

div层的制作：

先介绍几个属性：

position属性，用于规定元素的定位类型。

position属性的absolute值用于生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

其实简单来说就是通过绝对定位，元素可以放置到页面上的任意位置，例如div，我给div设置了绝对定位就可以任意的通过"left", "top", "right" 以及 "bottom" 属性设置它在网页中的位置。

代码示例：

运行结果：

z-index属性，定义div层的序号，例如：z-index属性值为2的层，那么这个层就在z-index属性值为1的层上面。

代码示例：

运行结果：

结合以上介绍的知识点，我们可以做一个简单的例题，例如：当我们有时候登录某个网站的账户时，会发现当登录的输入框弹出来的时候除了登录的输入框之外就不能点击网页的其他地方了，这其实就是使用了div层的效果，把网页都给盖住了。而且有些登录的输入框当我们把鼠标移动上去后还会有旋转放大之类的效果，这是使用到了过渡样式。现在我们做一个类似于这样子的网页。

代码示例：

运行结果：