上次学习了一些关于CSS的知识,现在还剩下一些,继续整理一下。
知识点学习
上次学习了一些基础的CSS语法,包括各种选择器还有伪类、伪元素的学习,接下来再来看看剩下的一些。
1、样式的继承
简单来说,一个元素内部的元素会继承它的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
样式的继承:
一个元素内部的元素会继承它的样式
*/
p{
color: crimson;
}
</style>
</head>
<body>
<p>
我是一个p元素
<span>
我是p元素内部的span
</span>
</p>
<span>我是p元素外的span</span>
</body>
</html>
2、选择器的优先级
当对同一个元素设置多个样式,而且样式不同,这样就出现了冲突,那么这个时候应该听谁的?这个时候就应该考虑到选择器的优先级了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
样式的冲突:当对同一个元素设置多个样式,而且样式不同,这样就出现了冲突,那么这个时候应该听谁的?
发生冲突的时候,应该根据优先级选择
选择器的权重:
内联样式 1 0 0 0
id选择器 0 1 0 0
类和伪类选择器 0 0 1 0
元素选择器 0 0 0 1
通配选择器 0 0 0 0
继承的样式 没有优先级
将所有选择器优先级进行相加,得到最终的优先级
但是不能越界,即元素选择器的优先级永远不会比类选择器的高
在选择器后面可以加上(!important),优先级将会变到最高,不过要慎用
*/
#box1{
background-color: cyan;
}
div#box1{
background-color: darkorchid;
}
.red{
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<div id="box1" class="red" >我是一个div</div>
</body>
</html>
3、单位
我们所看到的图片、文字和其他的屏幕上显示的东西,其实都是由一个个像素组成的,CSS中我们经常需要设置元素的大小,宽度和高度等等,这里我们用的单位就是像素。还有一些其他的单位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
长度单位:
1、像素(像素的个数)
2、百分比(相对于父元素的百分比长度)
3、em
- em是相对于字体大小来计算的
- 1em = 1font-size
- em 会根据字体的大小改变而改变
4、rem
- rem是相对于根元素(html)的字体大小
*/
.box1{
width: 200px;
height: 200px;
background-color: aqua;
}
.box2{
width: 50%;
height: 50%;
background-color: brown;
}
.box3{
font-size: 10px;
width: 10em;
height: 10em;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
4、颜色
可以直接利用颜色名称、也可以用RGB值等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
颜色单位:
在CSS中可以直接使用颜色名来设置颜色
比如:red, green, orange, blue...
但是在CSS中直接使用颜色名非常的不方便
RGB值:
- R red, G green, B blue
- 每种颜色在 0~255 之间
- 语法:RGB(红色,绿色,蓝色)
RGBA值:
可以设置透明(A)
1 表示完全不透明,0 表示完全透明
16进制RGB值:
语法:#红色绿色蓝色
00 ~ ff
HSL值 HSLA值:
H 色相(0~360)
S 饱和度(0%~100%)
L 亮度(0%~100%)
*/
.box1{
width: 100px;
height: 100px;
background-color: coral;
background-color: rgba(100, 210, 170, 0.9);
background-color: #ffff00;
background-color: hsl(0, 100%, 0%);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
总结
上次学习的CSS知识点就剩下上面的4个,接下来将要学习的是页面的布局。