Web前端——CSS基础样式
原创
©著作权归作者所有：来自51CTO博客作者叮的原创作品，请联系作者获取转载授权，否则将追究法律责任
文章目录
- 1. 定义
- 2. 范围
- 3. 优点
- 4. 注意
- 5. 例子
- 1. 长度单位定义
- 2. em
- 3. rem
- 4. 颜色
- (1). RGB值：
- (2). RGBA值：
- (3). 十六进制的RGB值
- (4). HSL值和HSLA值
- (5). 例子
- 1. 文本属性
- 2. 字体属性
- 3. 背景属性
- 4. 列表属性
- 5. 表格属性
- 6. 宽高属性
- 1. 层叠性
- 2. 继承性
- 3. 优先级
一. 样式的继承
1. 定义
- 样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
2. 范围
3. 优点
- 继承的设计是为了方便开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有元素都具有该样式
4. 注意
并不是所有的样式都会被继承
5. 例子
注：span的背景颜色并不是被继承的，只是span的背景默认是透明的，所以p标签的背景颜色透了过去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式的继承</title>
<style>
body{
font-size: 30px;
}
p{
color: red;
background-color: orange;
}
div{
color: yellowgreen;
}
</style>
</head>
<body>
<p>
我是一个p元素<br>
<span>我是p元素中的span</span>
</p>
<span>我是p元素外的span</span>
<div>
我是div
<span>
我是div中的span
<em>我span中的em</em>
</span>
</div>
</body>
</html>
二. 选择器的权重
1. 样式的冲突
(1). 定义
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式冲突
2. 选择器的权重
(1). 定义
发生样式冲突的时候，应用哪个样式由选择器的权重（优先级）决定
(2). 优先级
第一：内联样式
第二：id选择器
第三：类和伪类选择器
第四：元素选择器
第五：通配选择器
第六：继承的样式没有优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器的权重</title>
<style>
#box1{
background-color: orange;
}
div{
background-color: yellow;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<div id="box1" class="red" style="background-color: skyblue;">我是一个div</div>
</body>
</html>
注意：
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示
分组选择器是单独计算的
选择器的累加不会超过其最大的数量级
如果优先级计算后相同，此时优先使用靠下的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器的权重</title>
<style>
/* #box1{
background-color: orange;
}
div#box1{
background-color: yellow;
} */
.red{
background-color: red;
}
.d1{
background-color: purple;
}
div,p,span{
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="box1" class="red d1 d2">我是一个div</div>
</body>
</html>
注通配选择器的优先级高于继承优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器的权重</title>
<style>
*{
font-size: 50px;
}
div{
font-size: 20px;
}
</style>
</head>
<body>
<div id="box1" class="red d1 d2">我是一个div <span>我是div中的span</span></div>
</body>
</html>
注：可以在某一个样式的后面添加 !important 则此时该样式会获得到最高的优先级，甚至超过内联样式
在开发中这个玩意一定要慎用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器的权重</title>
<style>
.d1{
background-color: purple !important;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<div id="box1" class="red d1 d2" style="background-color: chocolate;">我是一个div</div>
</body>
</html>
三. 单位
1. 长度单位定义
像素：
屏幕（显示器）实际上由一个一个小点点构成
不同屏幕的像素大小是不同的，像素越小的屏幕显示效果越清晰
所以同样的200px在不同设备下显示的效果不同
百分比：
也可以将属性值设置为相对于其父元素属性的百分比
好处：可以使子元素跟随父元素的改变而改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单位</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: chocolate;
}
.box2{
width: 50%;
height: 50%;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
2. em
em是相对于元素的字体大小来计算的
1em = 1font-size(一般浏览器默认1font-size为16px)
em会根据字体大小的改变而改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单位</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: chocolate;
}
.box2{
width: 50%;
height: 50%;
background-color: aqua;
}
.box3{
font-size: 20px;
width: 10em;
height: 10em;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
3. rem
rem是相对于根元素（html）的字体大小来计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单位</title>
<style>
html{
font-size: 30px;
}
.box1{
width: 200px;
height: 200px;
background-color: chocolate;
}
.box2{
width: 50%;
height: 50%;
background-color: aqua;
}
.box3{
font-size: 20px;
width: 10rem;
height: 10rem;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
4. 颜色
颜色单位：
在CSS中可以直接使用颜色名来设置各种元素
例如：red、orange、yellow、blue
但是在CSS中直接使用颜色名是非常不方便的
(1). RGB值：
RGB是通过三种不同颜色的不同浓度来调配出不同的颜色
R：red
G：green
B：blue
每一种颜色的范围在0—255之间（0%—100%之间）
语法：RGB（红色，绿色，蓝色）
(2). RGBA值：
就是在RGB的基础上增加了一个a表示不透明度
需要四个值，前三个和RGB值一样，第四个表示不透明度
1表示完全不透明，0表示完全透明
(3). 十六进制的RGB值
语法：#红色绿色蓝色
颜色浓度通过00-FF
如果颜色两位两位重复可以进行简写
例：#aabbcc——>#abc
#aabbcd就不可以简写了
(4). HSL值和HSLA值
H 色相（范围0—360）
S 饱和度：颜色的浓度（0%—100%）
L 亮度：颜色的亮度（0%—100%）
(5). 例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
background-color: rgb(255, 0, 0);
background-color: rgb(0, 255, 0);
background-color: rgb(0, 0, 255);
background-color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
background-color: rgba(106, 153, 85, .5);
background-color: #ff0000;
background-color: #f00;
background-color: #bfa;
background-color: hsl(60, 100%, 50%);
background-color: hsla(70, 100%, 50%, 0.5);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
四. CSS常用属性
1. 文本属性
- 文本居中： text-align: center;
- 超连接去下划线 text-decoration: none;
2. 字体属性
- color：#FF0000；字体颜色红色
- font-size：20px; 字体大小
3. 背景属性
4. 列表属性
5. 表格属性
6. 宽高属性
宽度：
- width:19px;
- 宽度可以写像素值：19px；
- 也可以写百分比值：20%；
高度
- height:20px;
- 高度可以写像素值：19px；
- 也可以写百分比值：20%；
DIV 居中
- margin-left: auto;
- margin-right: auto;
五. CSS的特性
1. 层叠性
2. 继承性
3. 优先级
