样式的继承
<!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>
AI 代码解读
选择器的权重
<!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>
AI 代码解读
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>
AI 代码解读
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>
AI 代码解读
文档流
<!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>
AI 代码解读
