web学习笔记（四）-Toy模板网

这篇具有很好参考价值的文章主要介绍了web学习笔记（四）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.超链接的伪类

1.1link

1.2visited

1.3hover

1.4active

1.5超链接伪类总结

1.6补充:nth-child() 选择器

2.字体图标

2.1在线字体图标

2.2本地字体图标

3.背景

3.1背景颜色透明度

3.2背景图片

1.将图片设置为背景：

2.设置背景图片不平铺：

3.背景图片定位：

4.设置背景图片大小:

5.总结：

1.超链接的伪类

1.1link

格式：

a:link {
            color: blue;

        }

可以在此设置超链接访问前的样式，也可以简写为a{ },效果是一样的，需要将网页中的超链接访问历史清除，要不然可能会产生无法展示效果的现象。

1.2visited

格式;

a:visited {
            color: aqua;

        }

该类表示超链接已访问

1.3hover

格式：

  a:hover {
            color: blueviolet;
            cursor: pointer
            /* 当鼠标移上去的时候指针变小手; */
        }

该类表示鼠标移到超链接上但未点击时的效果，是超链接中最常用的伪类。对其设置 cursor: pointer;可以实现鼠标移到超链接上边小手的效果。

1.4active

格式:

 a:active {
            color: beige;
        }

该类表示当点击超链接时的样式，时间超级短，一瞬间的效果，一般不对其进行设置，意义不大。

1.5超链接伪类总结

当需要同时设置这四个伪类时需要按照 l v h a 的顺序进行编写，如果顺序错误的话可能会有部分效果无法呈现的问题。
当只需要设置一两个伪类，而不是四个伪类需要同时设置时，a:link{}简写为a{}即可。
编写伪类时要注意a和冒号之间不可以有空格，正确写法：a:link{}。

1.6补充:nth-child() 选择器

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
n可以是一个数字，一个关键字，或者一个公式。注释：n从1开始。
优点：不需要频繁对标签进行命名，直接就可以选择想要的标签，进行编写css样式。

2.字体图标

2.1在线字体图标

步骤：

从iconfont将所需图标添加入库，然后复制代码（这相当于一个在线css文件）。
在html页面的头部使用Link标签引用上面的在线css文件，注意将代码粘贴过来时记得加上http:形成一个完整的链接，
然后在body内写入标签，在class处写入具体的图标代码。
在.css文件中对字体图标的样式进行设置。

总结：

当在iconfont中入库新的图标时需要更新css链接。
通常给i标签设置多个类名，这样方便后期设置.css样式。
标签是字体斜体标签，但不会对引用图标产生影响，可放心使用。
标签是行内标签，因此要用font-size来设置图标的大小。

2.2本地字体图标

步骤：

在iconfont将所有图标下载至本地。
将文件解压缩
将文件整理一下，分成三个文件夹，通常分为css文件js文件woff文件。
打开demo_index文件，将代码内.css和.js文件的相对地址改为文件分类后的地址
在html页面用link标签引入.css文件
在body内写入标签，在class处写入具体的图标代码。
在.css文件中对字体图标的样式进行设置。

总结：

通常在网页所有引用到的图标确定后，才下载本地图标文件。
使用该方法的好处为在没有网络的情况下页面图标也能正常显示。

3.背景

3.1背景颜色透明度

改变背景图片透明度方法一：

 background-color: black;
 opacity: 0.5;

但不推荐使用，因为该方法会导致盒子内的文字透明度也改变。

改变图片透明度方法二：

background-color: rgba(0, 0, 0, 0.5);

推荐使用，不会对盒子内其他元素造成影响，rgba内的数值是1到255的一个数字，最后一个数值代表背景颜色的透明度，推荐使用，不会对盒子内其他元素造成影响。

3.2背景图片

1.将图片设置为背景：

background: url(../img/sprite.png);

括号内跟的是图片的相对定位。

2.设置背景图片不平铺：

background-repeat: no-repeat;

3.背景图片定位：

background-position: 100px 100px;

表示对背景设置坐标点，设置图片相对于父级元素的位置也可以写 background-position: left center;

web学习笔记（四）,笔记,学习,笔记

4.设置背景图片大小:

background-size: 100px 100px;

也可以设置其他值，在轮播图中常将background-size值设置为 cover，表示以图片自身的高度为基准，将图片进行裁剪，这样会导致图片的宽度展示不完全,但高度始终保持一致，不会导致轮播图忽高忽低，用户的视觉效果会好一点。

background-size: cover;把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。
background-size: contain;保证图片正常显示不拉伸，但可能会长或宽铺不满。
background-size: 100% 100%;图片可能会被拉伸，但肯定会铺满整个屏幕。

5.总结：

background-size不可以和background的其他属性进行合写。
当background-size值和盒子大小设置成一样时就可以在盒子中完整的展示图片，但可能会导致背景图片变形。
background:后可以跟多个属性，属性和属性之间没有顺序之分
精灵图：将所有图片合并成一张大图片，上面有无数小图标，然后在用到那个图标时用坐标将所需图标移出来，精灵图的好处是不需要频繁对图片进行命名引用,而且精灵图色调一般都比较统一，比较方便统一网站的基本色调。文章来源地址https://www.toymoban.com/news/detail-783002.html

到了这里，关于web学习笔记（四）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！