web学习笔记（四）

shan33__

已于 2024-05-04 15:15:00 修改

阅读量914

点赞数 32

分类专栏：笔记文章标签：学习笔记

于 2023-12-12 20:46:51 首次发布

本文链接：https://blog.csdn.net/shan33__/article/details/134922661

版权

笔记专栏收录该内容

83 篇文章 6 订阅

订阅专栏

本文详细介绍了CSS中的超链接伪类（link,visited,hover,active）用法，字体图标（在线和本地）的实现，以及背景颜色透明度、背景图片的设置、定位和大小控制。还提到精灵图的使用技巧。

摘要由CSDN通过智能技术生成

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

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;

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:后可以跟多个属性，属性和属性之间没有顺序之分
精灵图：将所有图片合并成一张大图片，上面有无数小图标，然后在用到那个图标时用坐标将所需图标移出来，精灵图的好处是不需要频繁对图片进行命名引用,而且精灵图色调一般都比较统一，比较方便统一网站的基本色调。