前端学习day5

芒果牛肉西红柿

已于 2022-03-10 21:31:28 修改

阅读量91

点赞数

文章标签： html 前端

于 2022-03-10 01:46:02 首次发布

本文链接：https://blog.csdn.net/weixin_44323674/article/details/123081324

版权

一、选择器

css伪类选择器：用于描述元素的特殊状态，例如第一个子元素，鼠标移入的元素，被点击的元素，最后一个元素等。

超链接的伪类：link用来表示没访问过的正常的链接（超链接独有）

visited用来表示访问过的链接（只能用来修改链接的颜色，超链接独有）

hover用来表示鼠标光标停留处的样式修改（可以修改颜色字体大小等）

active用来表示鼠标点击时的样式修改.

样式的继承：为一个元素设置样式，其后代元素也会继承。背景相关的，布局相关的不会被继承

样式的冲突：通过不同的选择器选择相同的元素，而且设置不同的值，此时由选择器的权重决定。

内联样式>id选择器>类和伪类选择器>元素选择器>通配选择器>继承的样式

比较优先级时，对所有选择器进行相加比较。（分组选择器单独计算），选择器的累加不会超过其数量级。

二、长度单位，颜色

像素和百分比。可以将属性值设置为相对于父元素的百分比。em是根据字体大小的改变而改变。

1em=1 font-size 。rem是根据根元素的大小而改变的即在<html></html>里面。

RGB值，通过红绿蓝三种颜色的浓度进行调配。

RGBA在原有的三色基础上增加透明度，1为不透明，0为完全透明

16进制的RGB值用#来表示

HSL表示为色相（0-360），饱和度（0-100%），亮度（0-100%）

.b1{
    font-size: 20px;/*一个字的大小为20px，所以1em =20px ,20em = 400px*/
    width: 20em;
    height: 20em;
    background-color: yellow;
    color: rgb(211, 50, 60);/*颜色使用语法：rgb(红，绿，蓝)*/
    color: #ffff00/*每两位表示一个颜色*/
    color: hsl(0,50%,50%)
    
}
.b2{
    background-color: blue;
    width: 50%;
    height: 50%;
}