当前位置：首页 > news >正文

CSS回顾

news 2025/5/23 7:36:24

CSS 的全称为: 层叠样式表（Cascading Style Sheets）。

一、样式位置

行内样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>位置1_行内样式</title>
</head>
<body><h1 style="color: red;font-size: 60px;">欢迎大家一起来学习前端</h1>
</body>
</html>

内部样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>位置2_内部样式</title><style>h1 {color: red;font-size: 60px;}h2 {color: yellow;font-size: 40px;}p {color: blue;font-size: 20px;}img {width: 200px;}</style>
</head><body><h1>欢迎大家一起来学习前端</h1><h2>欢迎大家一起来学习前端</h2><img src="../images/小姐姐.gif" alt="小姐姐">
</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><link rel="stylesheet" href="./position3.css">
</head>
<body><h1>欢迎大家一起来学习前端</h1><h2>欢迎大家一起来学习前端</h2><img src="../images/小姐姐.gif" alt="小姐姐">
</body>
</html>

样式优先级

行内样式 > 内部样式 = 外部样式

二、选择器

1.基本选择器

通配选择器
元素选择器
类选择器
id选择器

1.1 通配选择器

<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通配选择器</title><style>* {color: red;}</style></head>
<body><h1>欢迎来到土味官网，土的味道我知道</h1><br><h2>土味情话</h2><h3>作者：优秀的网友们</h3><p>万水千山总是情，爱我多点行不行！</p><p>草莓、蓝莓、蔓越莓，今天你想我了没？</p><p>我心里给你留了一块地，我的死心塌地！</p>
</body></html>

1.2元素选择器

<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素选择器</title><style>h1 {font-size: 50px;}h2 {color: chocolate;}h3 {color: gray;}p {color: blue;}</style>
</head><body><h1>欢迎来到土味官网，土的味道我知道</h1><br><h2>土味情话</h2><h3>作者：优秀的网友们</h3><p>万水千山总是情，爱我多点行不行！</p><p>草莓、蓝莓、蔓越莓，今天你想我了没？</p><p>我心里给你留了一块地，我的死心塌地！</p><br><h2>反杀土味情话</h2><h3>作者：更优秀的网友们</h3><p>一寸光阴一寸金，劝你死了这条心！</p><p>西瓜、南瓜、哈密瓜，把你打成大傻瓜！</p><p>我心里只有一块地，我的玛莎拉蒂！</p>
</body></html>

1.3类选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类选择器</title><style>.speak {color: red;}.answer {color: blue;}.big {font-size: 50px;}</style></head>
<body><h1>欢迎来到土味官网，土的味道我知道</h1><br><h2>土味情话</h2><h3>作者：优秀的网友们</h3><p class="speak">我对你说：万水千山总是情，爱我多点行不行！</p><p class="speak">我对你说：草莓、蓝莓、蔓越莓，今天你想我了没？</p><p class="speak">我对你说：我心里给你留了一块地，我的死心塌地！</p><br><h2>反杀土味情话</h2><h3>作者：更优秀的网友们</h3><p class="answer">你回答我：一寸光阴一寸金，劝你死了这条心！</p><p class="answer">你回答我：西瓜、南瓜、哈密瓜，把你打成大傻瓜！</p><p class="answer">你回答我：我心里只有一块地，我的玛莎拉蒂！</p>
</body>
</html>

1.4 id选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ID 选择器</title><style>#earthy {color: red;}#turn-earthy {color: blue;}</style>
</head><body><h1>欢迎来到土味官网，土的味道我知道</h1><br><h2 id="earthy ">土味情话</h2><h3>作者：优秀的网友们</h3><p>我对你说：万水千山总是情，爱我多点行不行！</p><p>我对你说：草莓、蓝莓、蔓越莓，今天你想我了没？</p><p>我对你说：我心里给你留了一块地，我的死心塌地！</p><br><h2 id="turn-earthy">反杀土味情话</h2><h3>作者：更优秀的网友们</h3><p>你回答我：一寸光阴一寸金，劝你死了这条心！</p><p>你回答我：西瓜、南瓜、哈密瓜，把你打成大傻瓜！</p><p>你回答我：我心里只有一块地，我的玛莎拉蒂！</p>
</body>
</html>

2.复合选择器

2.1交集选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>交集选择器</title><style>.rich {color: red;}.beauty {color: blue;}p.beauty {color: green;}.rich.beauty {color: orange;}</style></head><body><h2 class="rich">土豪张三</h2><h2 class="beauty">明星李四</h2><h2 class="rich beauty">土豪明星王五</h2><hr><p class="beauty">小狗旺财</p><p class="beauty">小猪佩奇</p></body></html>

2.2并集选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>并集选择器</title><style>.rich {color: red;}.beauty {color: blue;}.dog {color: green;}.pig {color: orange;}#suxi,.rich,.beauty,.dog,.pig {font-size: 40px;background-color: gray;width: 160px;}</style></head><body><h2 class="rich">土豪张三</h2><h2 class="beauty">明星李四</h2><h2>土豪明星王五</h2><hr><p class="dog">小狗旺财</p><p class="pig">小猪佩奇</p><p id="suxi">小羊苏西</p></body></html>

2.3后代选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>ul li {color: red;}ol a {color: aqua;}.subject a {color: blue;}</style></head><body><ul><li>抽烟</li><li>喝酒</li><li>烫头</li><div><li>打游戏</li></div></ul><ol><li>张三</li><li>李四</li><li>王五</li><li><a href="#">王五</a></li></ol><ol class="subject"><li>语文</li><li>数学</li><li>英语</li><li><a href="#">体育</a></li></ol></body></html>

2.4子元素选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>子代选择器</title><style>div>a {color: red;}div>p>a {color: blue;}.foot>a {color: blanchedalmond;}</style></head><body><div><a href="#">张三</a><a href="#">李四</a><a href="#">王五</a><p><a href="#">赵六</a></p><div class="foot"><a href="#">钱七</a></div></div></body></html>

2.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>/* 选中div后所有的兄弟p元素（睡在我下铺的所有兄弟）—— 通用兄弟选择器 */div~p {color: blue;}/* 选中div后紧邻的下一个p元素（睡在我下铺的兄弟）—— 紧邻兄弟选择器 */div+p {color: red;}li+li {color: green;}</style></head><body><div>尚硅谷</div><p>前端</p><p>java</p><p>大数据</p><p>python</p><p>php</p><ul><li>尚硅谷</li><li>尚硅谷</li><li>尚硅谷</li></ul></body></html>

2.6属性选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title><style>/* 属性选择器  *//* 第一种写法: 选中所有具有title属性的元素 *//* [title] {color: red;} *//* 第2种写法: 匹配title属性值等于num-front-end的元素 *//* [title="num-front-end"] {color: red;} *//* 第3种写法: 匹配title属性值以num开头的元素 *//* [title^="num"] {color: red;} *//* 第4种写法: 匹配title属性值以end结尾的元素 *//* [title$="end"] {color: red;} *//* 第5种写法: 匹配title属性值包含num的元素 */[title*="num"] {color: red;}</style></head><body><div title="num-front-end">前端1</div><div title="num-front-end">前端2</div><div title="front-end">前端3</div><div title="front-end">前端4</div></body></html>

2.7伪类选择器之动态伪类

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器</title><style>/* 链接伪类选择器 *//* 未访问的链接 */a:link {color: orange;}/* 已访问的链接 */a:visited {color: blue;}/* 鼠标悬停的链接 */a:hover {color: aliceblue;}/* 激活的链接 */a:active {color: yellow;}input:hover {background-color: green;}input:focus {background-color: skyblue;}</style></head><body><a href="https://www.baidu.com">百度一下</a><a href="https://www.jd.com">京东</a><br><input type="text"><br><input type="text"><br><input type="text"></body></html>

遵循 LVHA 的顺序，即: link、visited、hover、active

2.8伪类选择器之结构伪类

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>09_伪类选择器_结构伪类_1</title><style>/* 测试1 *//* div>p:first-child {color: red;}div>p:first-child+p {color: blue;}div>p:first-child+p+p {color: green;}p~p:last-child {color: gray;} *//* 测试2 first-child表示必须是第一个儿子，父亲是谁不用管 *//* div>p:first-child {color: red;} *//* 测试3 */div p:first-child {color: red;}</style></head><body><!-- 测试1 --><!--<div><p>赵六: 99分</p><p>张三: 98分</p><p>李四: 88分</p><p>王五: 78分</p></div>--><!-- 测试2 --><!--<div><span></span><p>测试1</p><p>测试2</p><p>测试3</p><p>测试4</p></div>--><!-- 测试3 --><div><marquee><p>测试</p></marquee><p>测试1</p><p>测试2</p><p>测试3</p><p>测试4</p><marquee><p>测试5</p></marquee></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>伪类选择器_结构伪类_2</title><style>/* 测试1 *//* div p:nth-child(2n) {color: pink;} *//* 测试2 */div p:first-of-type {color: pink;}</style></head><body>/* 测试1 */<!-- <div><p>第1个</p><p>第2个</p><p>第3个</p><p>第4个</p><p>第5个</p><p>第6个</p><p>第7个</p><p>第8个</p></div> -->/* 测试2 */<div><span>测试</span><p>第1个</p><p>第2个</p><p>第3个</p><p>第4个</p><p>第5个</p><p>第6个</p><p>第7个</p><p>第8个</p></div></body></html>

2.9伪类选择器之否定伪类

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>否定伪类</title><style>div:not(.test1) {color: pink;}</style></head><body><div class="test1">测试1</div><div class="test2">测试2</div><div class="test3">测试3</div><p>测试4</p></body></html>

2.10伪类选择器之UI伪类

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>UI伪类</title><style>input:checked {width: 100px;height: 100px;}input:disabled {background-color: pink;}input:enabled {background-color: skyblue;}</style></head><body><input type="radio" name="sex" value="male">男<input type="radio" name="sex" value="female">女<br><input type="text" placeholder="请输入用户名" disabled><br><input type="text" placeholder="请输入密码"></body></html>

2.11伪元素选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪元素选择器</title><style>div::first-letter {font-size: 30px;color: pink;}div::first-line {color: red;}input::placeholder {color: skyblue;}</style></head><body><div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti consectetur quasi voluptatibus reiciendisdoloremque ut voluptas aut molestiae, minima facilis aperiam magni maiores maxime necessitatibus quia, odiodebitis numquam officiis!</div><input type="text" placeholder="请输入内容"></body></html>

2.12选择器的优先级（权重）

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。

简单描述：行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。
详细描述：

计算方式：每个选择器，都可计算出一组权重，格式为： (a,b,c)
a : ID 选择器的个数。
b : 类、伪类、属性选择器的个数。
c : 元素、伪元素选择器的个数。
例如：选择器权重 ul>li (0,0,2) div ul>li p a span (0,0,6) #atguigu .slogan (1,1,0) #atguigu .slogan a (1,1,1) #atguigu .slogan a:hover (1,2,1)
比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如： (1,0,0) > (0,2,2) (1,1,0) > (1,0,3) (1,1,3) > (1,1,2)
特殊规则：
1. 行内样式权重大于所有选择器。
2. !important 的权重，大于行内样式，大于所有选择器，权重最高！

三、CSS三大特性

1.层叠性

概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。
什么是样式冲突？ ——— 元素的同一个样式名，被设置了不同的值，这就是冲突。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>层叠性</title><style>div {background-color: pink;}.test {background-color: red;}</style></head><body><div class="test">测试</div></body></html>

2.继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
规则：优先继承离得近的。
常见的可继承属性： text-?? ， font-?? ， line-?? 、 color …
备注：参照MDN网站，可查询属性是否可被继承。

<!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: 20px;color: red;}</style></head><body><p>测试</p></body></html>

3.优先级

简单聊： !important > 行内样式 > 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>* {color: red;}div {color: blue;}.test {color: green;}#test {color: yellow;}div {color: orange !important;}</style></head><body><div class="test" id="test" style="color: black;">测试</div></body></html>

四、像素与颜色

rgb、16进制、hsl三种颜色表示方式

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>像素</title><style>.atguigu1 {width: 1px;height: 1px;background-color: pink;}.atguigu2 {width: 1cm;height: 1cm;background-color: skyblue;}.atguigu3 {width: 1mm;height: 1mm;background-color: yellowgreen;}.atguigu4 {color: rgba(255, 0, 0, 0.5);}.atguigu5 {color: hsl(0, 100%, 50%);/* 0-360 0-100 0-100 */}</style></head><body><div class="atguigu1"></div><br><div class="atguigu2"></div><br><div class="atguigu3"></div><br><h2 class="atguigu4">atguigu4</h2><br><h2 class="atguigu5">atguigu5</h2></body></html>

五、字体属性

5.1 字体大小

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体大小</title><style>.atguigu1 {font-size: 40px;}.atguigu2 {font-size: 30px;}.atguigu3 {font-size: 20px;}.atguigu4 {font-size: 20px;}</style></head><body><div class="atguigu1">atguigu1</div><div class="atguigu2">atguigu2</div><div class="atguigu3">atguigu3</div><div class="atguigu4">atguigu4</div></body></html>

5.2 字体族

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体族</title><style>div {font-family: "微软雅黑";}p {font-family: "黑体";}</style></head><body><div>测试</div><p>测试2</p></body></html>

5.3 字体风格

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体风格</title><style>h1 {font-style: italic;}h2 {font-style: oblique;}h3 {font-style: normal;}</style></head><body><h1>字体风格-斜体</h1><h2>字体风格-强制斜体</h2><h3>字体风格-正常</h3></body></html>

5.4字体粗细

<!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-test1 {font-weight: lighter;}.font-test2 {font-weight: normal;}.font-test3 {font-weight: bold;}.font-test4 {font-weight: bolder;}/*数值1. 100~1000 且无单位，数值越大，字体越粗 （或一样粗，具体得看字体设计时的精确程度）。2. 100~300 等同于 lighter ， 400~500 等同于 normal ， 600 及以上等同于bold 。*/.font-test5 {font-weight: 100;}</style></head><body><h2 class="font-test1">字体-细</h2><h2 class="font-test2">字体-正常</h2><h2 class="font-test3">字体-粗</h2><h2 class="font-test4">字体-超粗</h2><h2 class="font-test5">数值</h2></body></html>

5.5字体复合写法

属性名： font ，可以把上述字体样式合并成一个属性。 
作用：将上述所有字体相关的属性复合在一起编写。 
编写规则： 1. 字体大小、字体族必须都写上。 2. 字体族必须是最后一位、字体大小必须是倒数第二位。 3. 各个属性间用空格隔开。 实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用 fontsize 属性。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体复合写法</title><style>div {font: bold italic 100px "华文彩云", "华文琥珀";}</style></head><body><div>测试</div></body></html>

六、文本属性

6.1 文本颜色

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本颜色</title><style>div {color: red;}p {color: #008000;}</style></head><body><div>我是红色</div><p>我是绿色</p></body></html>

6.2 文本间距

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本间距</title><style>p {letter-spacing: 1px;word-spacing: 10px;}</style></head><body><p>Hello everyone, welcome to China !</p></body></html>

属性值为像素（ px ），正值让间距增大，负值让间距缩小。

6.3 文本修饰

text-decoration属性

none ：无装饰线（常用）
underline ：下划线（常用）
overline ：上划线
line-through ：删除线

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本修饰</title><style>.test1 {text-decoration: underline;}.test2 {text-decoration: overline;}.test3 {text-decoration: line-through;}.test4 {text-decoration: underline overline line-through;}</style></head><body><p class="test1">Hello everyone, welcome to China !</p><p class="test2">Hello everyone, welcome to China !</p><p class="test3">Hello everyone, welcome to China !</p><p class="test4">Hello everyone, welcome to China !</p></body></html>

6.4文本缩进

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本缩进</title><style>p {text-indent: 2em;}</style></head><body><p>董卿在《朗读者》中说：“世间一切，都是遇见。冷遇见暖，就有了雨；春遇见冬，有了岁月；天遇见地，有了永恒；人遇见人，有了生命。”而我想说，我与书相遇，便有了成长。</p><p>书香浸润着儿时，每晚听妈妈讲睡前故事的时光我总是念念不忘。妈妈温柔的声音回荡耳畔，一个个引人入胜的故事紧扣心弦。“我要，我要！”当即就要拿书一睹为快，虽然当时识字尚少，但觉得那乌漆漆的文字有着触于指尖的温度和神奇的力量，让人忍不住去喜爱它。</p></body></html>

6.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>.test-left {text-align: left;}.test-center {text-align: center;}.test-right {text-align: right;}</style></head><body><div class="test-left">我在左边</div><div class="test-center">我在中间</div><div class="test-right">我在右边</div></body></html>

6.6行高

行高注意事项：

line-height 过小会怎样？—— 文字产生重叠，且最小值是 0 ，不能为负数。
line-height 是可以继承的，且为了能更好的呈现文字，最好写数值。
line-height 和 height 是什么关系？设置了 height ，那么高度就是 height 的值。不设置 height 的时候，会根据 line-height 计算高度。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行高</title><style>p {/* line-height: 40px; *//* line-height: 200%; */line-height: normal;font-size: 20px;}</style></head><body><p>书香浸润着儿时，每晚听妈妈讲睡前故事的时光我总是念念不忘。妈妈温柔的声音回荡耳畔，一个个引人入胜的故事紧扣心弦。“我要，我要！”当即就要拿书一睹为快，虽然当时识字尚少，但觉得那乌漆漆的文字有着触于指尖的温度和神奇的力量，让人忍不住去喜爱它。</p></body></html>

6.7 vertical-align

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本对齐_垂直</title><style>div {height: 300px;font-size: 100px;background-color: skyblue;}span {font-size: 40px;background-color: orange;/* vertical-align: top; *//* vertical-align: bottom; *//* vertical-align: middle; */vertical-align: baseline;}</style></head><body><div>atguigu尚硅谷<span>x前端</span></div></body></html>

七、CSS列表属性

在这里插入图片描述

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表属性</title><style>ol {/* list-style-type: upper-roman; */list-style-type: lower-alpha;}ul {list-style-type: square;list-style-position: inside;list-style-image: url(../../favicon.ico);}</style></head><body><ol><li>列表1</li><li>列表2</li><li>列表3</li></ol><ul><li>列表1</li><li>列表2</li><li>列表3</li></ul></body></html>

八、CSS表格属性

8.1 边框相关属性（其他元素也能用）：

在这里插入图片描述

8.2 表格独有属性（只有table标签才能使用）：

在这里插入图片描述

8.3 代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格属性</title><style>table {border-style: solid;border-width: 6px;border-color: skyblue;border-spacing: 10px;border-collapse: separate;table-layout: auto;empty-cells: hide;caption-side: top;}th,td {background-color: orange;}</style></head><body><table><caption>学生信息表</caption><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody><tr><td>张三</td><td>18</td><td>男</td></tr><tr><td>张三</td><td>18</td><td>男</td></tr><tr><td>张三</td><td>18</td><td>男</td></tr><tr><td></td><td></td><td></td></tr></tbody><tfoot><tr><td colspan="3">总计：3</td></tfoot></table></body></html>

九、CSS背景属性

在这里插入图片描述

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景属性</title><style>.box {width: 200px;height: 200px;}.box1 {background-color: red;}.box2 {background-image: url("../images/小姐姐.gif");background-size: 100px 100px;background-repeat: repeat-y;background-position: 0px 0px;}</style></head><body><div class="box box1"></div><div class="box box2"></div><div class="box box3"></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>.box {width: 100px;height: 100px;}.box1 {background-color: red;cursor: pointer;}.box2 {background-color: blue;cursor: move;}.box3 {background-color: yellow;cursor: text;}.box4 {background-color: green;cursor: crosshair;}.box5 {background-color: orange;cursor: wait;}.box6 {background-color: pink;cursor: help;}</style></head><body><div class="box box1"></div><div class="box box2"></div><div class="box box3"></div><div class="box box4"></div><div class="box box5"></div><div class="box box6"></div></body></html>

十一、CSS盒子模型

11.1 CSS长度单位

在这里插入图片描述

<!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: 10px;}.param1 {font-size: 2rem;}.param2 {font-size: 2em;}.param3 {font-size: 200%;}</style></head><body><p class="param1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus sunt magni facere assumendaut eaquereprehenderit fugiat, minus iste soluta, ullam earum beatae architecto voluptatum doloremque, minima repellendusvitae sequi impedit odit aspernatur. Aspernatur cum nesciunt laudantium, ducimus repudiandae explicabo expeditaconsequuntur quam. Quam ipsam, quaerat voluptas commodi assumenda quidem nemo repellat est unde sit quo eligendiinventore adipisci a similique dolores blanditiis vel hic? Ipsa eligendi atque sunt reiciendis quo voluptatemdolor autem natus ex commodi totam sapiente eius architecto ducimus cupiditate a minima ipsum nemo, harumfacere. Neque accusantium voluptate sapiente molestias aliquam fugit fugiat voluptatum consequuntur dolorem.</p><p class="param2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque odio eaque ea modi aspernatur quosed expedita,quia odit architecto eos fuga totam sint unde? Harum soluta voluptate dicta impedit molestias libero similiqueet adipisci eum nulla magni aliquam iste suscipit optio, labore repudiandae. Molestias, natus! Facilis aliquamest corporis amet error non dolorem sapiente accusamus ullam quos delectus maxime autem dolorum quam, dolorveritatis laudantium tempora quae ad odio praesentium obcaecati aut nulla quibusdam? Quis placeat, suntvoluptate non quaerat sapiente perferendis soluta mollitia quod ipsam voluptatem eaque. Optio iure velvoluptatem ipsum commodi ab doloremque soluta tempore assumenda?</p><p class="param3">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus aliquid magnam quam, culpaharum eveniet. Alias omnis non asperiores perferendis sit itaque assumenda repellat nostrum enim a, laborumconsequatur facere eveniet fuga qui quaerat ab corporis nemo! Distinctio dolorum cum accusamus debitis iureneque. Commodi doloremque ducimus at vero deserunt officiis fugit blanditiis, corporis iusto, tempora dolorem,ipsa assumenda mollitia accusantium quisquam explicabo illum. Est molestias, magnam maxime voluptatum suscipitaspernatur, minima labore mollitia natus quidem quam illum commodi similique delectus dolorum omnis porro ipsumea soluta non qui quibusdam ullam eligendi. Sint modi repellat ullam consectetur quod rerum hic!</p></body></html>

11.2 元素的显示模式

块元素（block）

又称：块级元素
特点：

在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
默认宽度：撑满父元素。
默认高度：由内容撑开。
可以通过 CSS 设置宽高。

行内元素（inline）

又称：内联元素
特点:

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
默认宽度：由内容撑开。 /* 自定义鼠标光标 */ cursor: url(“./arrow.png”),pointer;
默认高度：由内容撑开。
无法通过 CSS 设置宽高。

行内块元素（inline-block）

又称：内联块元素
特点：

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
可以通过 CSS 设置宽高。

注意：元素早期只分为：行内元素、块级元素，区分条件也只有一条：“是否独占一行”，如果按照这种分类方式，行内块元素应该算作行内元素。

11.3 总结各元素的显示模式

在这里插入图片描述

11.4 修改元素的显示模式

在这里插入图片描述

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>显示模式</title><style>img {display: block;}div {display: inline-block;width: 200px;height: 200px;}.box1 {background-color: red;}.box2 {background-color: blue;}</style></head><body><div class="box1"></div><div class="box2"></div><img width="300" src="../images/我的自拍.jpg" alt=""><img width="300" src="../images/我的自拍.jpg" alt=""></body></html>

11.5 盒子模型的组成

在这里插入图片描述

11.6 盒子内容区（content）

在这里插入图片描述

11.7 关于默认宽度

在这里插入图片描述

11.8 盒子内边距（padding）

在这里插入图片描述

11.9 盒子边框（border）

在这里插入图片描述

11.10 盒子外边距_margin

在这里插入图片描述

11.10.1 margin 注意事项

在这里插入图片描述

11.10.2 margin 塌陷问题

在这里插入图片描述

11.10.3 margin 合并问题

在这里插入图片描述

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin塌陷</title><style>.outer {width: 800px;height: 600px;background-color: red;border: 1px solid black;}.box1 {height: 100px;background-color: gray;margin-top: 10px;}.box2 {height: 380px;background-color: green;}.box3 {height: 100px;background-color: blue;margin-bottom: 10px;}</style></head><body><div class="outer"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div></body></html>

11.11 处理内容溢出

在这里插入图片描述

11.12 隐藏元素的方式

在这里插入图片描述

11.13 样式的继承

在这里插入图片描述

11.14 默认样式

在这里插入图片描述

11.15 布局小技巧

在这里插入图片描述

11.16 元素之间的空白问题

在这里插入图片描述

11.17 行内块的幽灵空白问题

在这里插入图片描述

十二、浮动

12.1 元素浮动后的特点

在这里插入图片描述

12.2 浮动练习

在这里插入图片描述

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小练习</title><style>.outer {background-color: pink;width: 960px;height: 610px;text-align: center;}.item1 {height: 80px;margin-bottom: 10px;}.logo {background-color: gray;width: 200px;margin-right: 10px;float: left;height: 80px;line-height: 80px;}.banner1 {background-color: gray;width: 540px;margin-right: 10px;float: left;height: 80px;line-height: 80px;}.banner2 {background-color: gray;width: 200px;float: left;height: 80px;line-height: 80px;}.menu {background-color: gray;height: 30px;width: 960px;margin-bottom: 10px;line-height: 30px;}.container {width: 960px;height: 410px;margin-bottom: 10px;}.content {width: 750px;height: 410px;float: left;line-height: 200px;}.lm1to2 {width: 750px;height: 200px;margin-bottom: 10px;}.lm1 {width: 370px;height: 200px;margin-right: 10px;float: left;background-color: skyblue;}.lm2 {width: 370px;height: 200px;float: left;background-color: skyblue;}.lm3to6 {width: 750px;height: 200px;}.lm3 {height: 200px;width: 180px;margin-right: 10px;float: left;background-color: orange;}.lm4 {height: 200px;width: 180px;margin-right: 10px;float: left;background-color: orange;}.lm5 {height: 200px;width: 180px;margin-right: 10px;float: left;background-color: orange;}.lm6 {height: 200px;width: 180px;float: left;background-color: orange;}.lm7to9 {height: 410px;width: 200px;float: right;line-height: 130px;}.lm7 {width: 200px;height: 130px;float: right;background-color: chocolate;margin-bottom: 10px;}.lm8 {width: 200px;height: 130px;float: right;background-color: chocolate;margin-bottom: 10px;}.lm9 {width: 200px;height: 130px;float: right;background-color: chocolate;}.footer {height: 60px;width: 960px;background-color: gray;line-height: 60px;}</style></head><body><div class="outer"><div class="item1"><div class="logo">logo</div><div class="banner1">banner1</div><div class="banner2">banner2</div></div><div class="menu">菜单</div><div class="container"><div class="content"><div class="lm1to2"><div class="lm1">栏目一</div><div class="lm2">栏目二</div></div><div class="lm3to6"><div class="lm3">栏目三</div><div class="lm4">栏目四</div><div class="lm5">栏目五</div><div class="lm6">栏目六</div></div></div><div class="lm7to9"><div class="lm7">栏目七</div><div class="lm8">栏目八</div><div class="lm9">栏目九</div></div></div><div class="footer">页脚</div></div></body></html>

12.3 浮动相关属性

在这里插入图片描述

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小练习-3</title><style>.outer {width: 500px;height: 500px;background-color: gray;}.box1 {width: 100px;height: 100px;background-color: red;float: left;}.box2 {width: 100px;height: 100px;background-color: blue;float: left;clear: left;}.box3 {width: 100px;height: 100px;background-color: yellow;float: left;clear: left;}</style></head><body><div class="outer"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div></body></html>

十三、定位

1 相对定位

1.1 如何设置相对定位？

给元素设置 position:relative 即可实现相对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

1.2 相对定位的参考点在哪里？

相对自己原来的位置

1.3 相对定位的特点：

不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是：
定位的元素会盖在普通元素之上。都发生定位的两个元素，后写的元素会盖在先写的元素之上。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
相对定位的元素，也能继续浮动，但不推荐这样做。
相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。

注意: 绝大多数情况下，相对定位，会与绝对定位配合使用

2 绝对定位

2.1 如何设置绝对定位？

给元素设置 position: absolute 即可实现绝对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

2.2 绝对定位的参考点在哪里？

参考它的包含块。

什么是包含块？

对于没有脱离文档流的元素：包含块就是父元素；
对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。

2.3 绝对定位元素的特点:

脱离文档流，会对后面的兄弟元素、父元素有影响。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

3. 固定定位

3.1 如何设置固定定位？

给元素设置 position: fixed 即可实现固定定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

3.2 固定定位的参考点在哪里？

参考它的视口
什么是视口？—— 对于 PC 浏览器来说，视口就是我们看网页的那扇“窗户”。

3.3 固定定位元素的特点

脱离文档流，会对后面的兄弟元素、父元素有影响。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

4. 粘性定位

4.1 如何设置为粘性定位？

给元素设置 position:sticky 即可实现粘性定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值。

4.2 粘性定位的参考点在哪里？

离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

4.3 粘性定位元素的特点

不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
最常用的值是 top 值。
粘性定位和浮动可以同时设置，但不推荐这样做。
粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。

粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>粘性定位</title><style>.page-header {height: 100px;background-color: orange;line-height: 100px;text-align: center;}.page-content {height: 600px;background-color: gray;overflow: auto}.first {position: sticky;top: 0;background-color: skyblue;font-size: 40px;}</style></head><body><div class="page-header">头部</div><div class="page-content"><div class="item"><div class="first">A</div><h2>A1</h2><h2>A2</h2><h2>A3</h2><h2>A4</h2><h2>A5</h2><h2>A6</h2></div><div class="item"><div class="first">B</div><h2>B1</h2><h2>B2</h2><h2>B3</h2><h2>B4</h2><h2>B5</h2><h2>B6</h2></div><div class="item"><div class="first">C</div><h2>C1</h2><h2>C2</h2><h2>C3</h2><h2>C4</h2><h2>C5</h2><h2>C6</h2></div></div></body></html>