css篇学习笔记（三）

冰镇奶茶

已于 2022-03-03 10:35:36 修改

阅读量173

点赞数 5

分类专栏：笔记文章标签： css css3 html5 前端 html

于 2021-11-07 18:41:31 首次发布

本文链接：https://blog.csdn.net/m0_57002951/article/details/121195087

版权

笔记专栏收录该内容

29 篇文章 3 订阅

订阅专栏

八、超链接的伪类

也就是< a>....< /a>的伪类

状态：

【1】访问过的链接

【2】没访问过的链接

a相关的四个伪类：

【1】a：link ---表示没访问过的链接(正常的链接)(a独有的)

【2】a：visited---表示访问过的链接（a独有的）

【3】: hover---用来表示鼠标移入的一个状态

【4】：active---表示鼠标点击的一个状态

由于隐私原因，visited这个伪类只能修改链接的颜色

<style>
        /* 把未访问过的链接变为红色 */
        /* 【1】表示没访问过的链接 */
        a:link{
            color:red;
        }
        /*  【2】把访问过的链接变为黄色 */
        a:visited{
            color:yellow;
        }
        /*【3】 用来表示鼠标移入的一个状态 */
        a:hover{
            font-size:30px;
        }
        /*【4】 表示鼠标点击的一个状态 */
        a:active{
            color:pink;
        }
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com" target="_blank">访问过的链接</a>

        <a href="https://www.baidu.com" target="_blank">未访问过的链接</a>

九、伪元素

不存在的元素

表示页面中特殊的，并不存在的元素（特殊的位置）

用：：开头

p::first-letter ---表示p中的第一个字母

p::first-line---表示第一行

p::selection---表示选中的内容

p::before---元素的起始位置（比第一个字母靠前的位置）

p::after---元素的最后位置（比最后一个字母靠后的位置）

注意：before和after属性必须结合conten（内容）属性来使用

十、继承

---继承是发生在祖先和后代之间的（继承的设计是为了方便我们的开发）

样式的继承：我们为一个元素设置的样式，也会应用到它的后代元素上

作用：利用继承，我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需要设置一次，就可以让所有元素都具有该样式。

注意：并不是所有样式都会被继承，比如：背景相关的，布局相关的这些样式都不会被继承

十一、选择器的权重

样式的冲突：通过不同的选择器选中相同的元素，并且为相同的样式设置不同的值，此时就发生了样式的冲突

发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

选择器的权重：优先级：

内联样式 ------1，0，0，0

id选择器 ----- 0，1，0，0

类和伪类选择器 --0，0，1，0

元素选择器 ---0，0，0，1

通配选择器 ---0，0，0，0 *{ }

继承的样式没有优先级

比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，就越优先显示,选择器的累加不会超过其最大的数量级,如果优先级相同，则优先使用靠下的样式

注意：分组选择器是单独计算的

p,span{
color:red;
}

我们可以在某一个样式后面添加一个！important，优先级甚至超过内联样式

注意：在开发中一定要慎用

十二、像素和百分比（长度）

长度单位：像素

---屏幕（显示器）是由一个个小点点构成的

---不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰

---所以，同样的200px像素在不同的设备下显示的效果不同

百分比：

---也可以将属性值设置为相对于其父元素（不严谨）的百分比

---设置百分比可以使子元素跟随父元素的改变而改变

十三、em和rem

单位：em

---相对于元素的字体大小来计算的

---1em=1font-size

---em会根据我们字体大小的改变而改变

单位：rem

---相对于根元素（html）字体大小来计算

十四、RGB值（颜色）

颜色单位：

【1】在CSS中可以直接使用颜色名来设置各种颜色

（如：red,blue,purple,orange...）

但是在css中直接使用颜色名是非常不方便的

【1】常用的方式：RGB值

---通过三种颜色不同的浓度调配出不同的颜色

---R：red G: green B:blue --------光的三原色

---每一种颜色的范围：0~255（0%~100%）之间

---语法：RGB（红色，绿色，蓝色）

<style>
        .box1{
            width:100px;
            height:100px;
            background-color:rgb(100,100,100);
        }
        </style>
    </head>
    <body>
        <div class="box1"></div>

光的三原色：

三种颜色都没有是黑色

三种颜色都有是白色

【2】RGBA值：

---在RGB的基础上增加了一个A表示不透明度

A：

1：不透明

.5：表示半透明

0：没有了

十六进制的RGB值

---语法：#红色，绿色，蓝色

---颜色浓度00-ff

background-color:#ff0000

如果颜色两位两位重复，可以进行简写

例：#aabbcc----------#abc

三个两两重复才可以

十五、HSL值（颜色）

HSL：

H:色相（0-360）

S：饱和度颜色的浓度（0%-100%）

L：亮度（0%-100%）0：黑色 100%：白色

语法：hsl(360,50%,50%)

冰镇奶茶

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
css篇学习笔记（三）

八、超链接的伪类也就是< a>....< /a>的伪类状态：【1】访问过的链接【2】没访问过的链接a相关的四个伪类：【1】a：link ---表示没访问过的链接(正常的链接)(a独有的)【2】a：visited---表示访问过的链接（a独有的）【3】: hover---用来表示鼠标移入的一个状态【4】：active---表示鼠标点击的一个状态由于隐私原因，visited这个伪类只能修改链接的颜色<style>
复制链接

扫一扫