样式的继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
样式的继承:我们为一个元素设置的样式同时也会应用到它的后代元素上。
继承是发生在祖先后代之间的。
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上
这样只需要设置一次即可让所有的元素都具有该样式。
但并不是所有的样式都会被继承。(背景、布局相关的)
*/
p {
color: red;
background-color: orange;
}
</style>
</head>
<body>
<p>
我是P标签
<span>我是SPAN标签</span>
</p>
</body>
</html>
选择器的权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/*
样式冲突:
通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的属性值时。
发生样式冲突时,应用哪个样式由选择器的权重决定。
选择器的权重(优先级):
内联样式 > id选择器 > 类和伪类选择器 > 元素选择器
(从左到右,权重越来越低)
比较优先级时,需要将所有的选择器的优先级进行计算,谁优先级高显示谁的样式。
选择器的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器
如果优先级相同,则优先使用靠下(最后设置)的样式。
继承的样式没有优先级。
可以在某个样式的后面加 !important ,则此时该样式会获取到最高的优先级,甚至超过内联样式。
*/
div {
color: aqua;
}
#box {
color: blue;
}
.common {
color: white;
}
div#box{
color: green;
}
</style>
<body>
<div id="box" class="common" style="color: black;">
我是一个DIV标签
</div>
</body>
</html>
CSS单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
长度单位:
像素:px
屏幕〔显示器〕实际上是由一个一个的小点点构成的
不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰
所以同样的200px在不同的设备下显示效果不—样
百分比:%
可以将属性值设置为相对于其父元素属性的百分比
设置百分比可以使子元素跟随父元素的改变而改变
em
是相对于元素的字体大小来计算的
1 em = 1 font-size
em会根据字体的大小的改变而改变
rem
是相对于根元素的字体大小来计算的
*/
.box1 {
width: 300px;
height: 300px;
background-color: red;
}
.box2 {
width: 50%;
height: 50%;
background-color: black;
}
.box3 {
font-size: 30px;
width: 10em;
height: 10em;
background-color: green;
}
html {
font-size: 50px;
}
.box4 {
width: 10rem;
height: 10rem;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
<div class="box3">
</div>
<div class="box4">
</div>
</body>
</html>
CSS颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
颜色:
直接使用颜色名称来表示,比如:red、greed等等。
使用RGB值:
通过三种颜色的不同浓度来调配出不同的颜色。
R red G greed B blue
每一种颜色的范围在0-255(0%-100%)之间
语法:RGB(红色,绿色,蓝色);
使用RGBA值:
在RGB的基础上增加一个A表示不透明度
语法:RGBA(红色,绿色,蓝色,不透明度);
0表示完全透明 .5表示半透明 1表示完全不透明
十六进制的RGB值:
语法:#
颜色浓度范围: 00-ff
如果颜色两位两位重复,可以简写。#aabbcc -> #abc
HSL值 HSLA值
H 色相(0 - 360)
S 饱和度(0% - 100%)
L 亮度(0% - 100%)
*/
.box1 {
width: 300px;
height: 300px;
background-color: red;
}
.box2 {
width: 300px;
height: 300px;
background-color:rgb(1, 2, 3);
}
.box3 {
width: 300px;
height: 300px;
background-color:rgba(1, 2, 3,.5);
}
.box4 {
width: 300px;
height: 300px;
background-color:hsl(0, 100%, 0%);
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
</body>
</html>
文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
文档流(normal flow)
网页是一个多层的结构,一层叠着一层
通过CSS可以分别为每一层来设置样式
用户只能看到最顶上的一层
而最底下的一层称为文档流
文档流是网页的基础,所创建的元素默认都是在文档流中进行排列
元素主要有两个状态:在文档流中、不在文档流中(脱离文档流)
元素在文档流中的特点:
块元素:
在页面中独占一行。
默认宽度是父元素的全部(把父元素撑满)
默认高度是被里面的内容撑开(子元素)
行内元素:
不会独占一行,只占自身的大小
在页面中左向右水平排列
如果一行中不能容纳所有的行内元素,则会自动换到第二行继续自左向右排列
默认的宽度和高度都是被内容撑开
-->
<div class="box1"></div>
<div class="box2"></div>
<span></span>
<span></span>
</body>
</html>