1、CSS基础
1.1 CSS简介
CSS：Cascading Style，层叠样式表，一种标记语言，用于给HTML结构设置样式。例如：文字大小、颜色、元素宽度等。
核心思想：HTML搭建结构，CSS添加样式，实现了结构与样式的分离。
1.2 CSS编写位置
1.2.1 行内样式
写在标签的style属性中
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>位置1_行内样式</title> </head> <body> <h1 style="color: green;font-size: 80px;">欢迎</h1> <h2 style="color: green;font-size: 80px;">欢迎学习前端</h2> </body> </html>
存在的问题：没有体现结构与样式分离的思想。
1.2.2 内部样式
写在<style>标签中
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>位置2_内部样式</title> <style> h1{ color: green; font-size: 40px; } h2{ color: red; font-size: 60px; } p{ color: blue; font-size: 80px; } img{ width: 200px; } </style> </head> <body> <h1>欢迎来到尚硅谷学习</h1> <h2>欢迎学习前端</h2> <p>北京欢迎你</p> <p>上海欢迎你</p> </body> </html>
1.2.3 外部样式
- 写在
.css文件中
<link rel="stylesheet", href="./xxx.css">
href：引入的文档来自哪里rel：说明引入的文档与当前文档之间的关系
例：html文件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>位置3_外部样式</title> <link rel="stylesheet" href="./position3.css"> </head> <body> <h1>欢迎来到尚硅谷学习</h1> <h2>欢迎学习前端</h2> <p>北京欢迎你</p> <p>上海欢迎你</p> </body> </html>
position3.css文件
h1{ color: green; font-size: 40px; } h2{ color: red; font-size: 60px; } p{ color: blue; font-size: 80px; } img{ width: 200px; }
1.2.4 样式优先级
优先级规则：行内样式>内部样式=外部样式
1.2.5 CSS代码风格
- 展开风格：开发时推荐，便于维护和调试
h1 { color: red; font-size: 40px; }
- 紧凑风格：项目上线时推荐，可减少文件体积
h1{color:red;font-size:40px;}
注意：项目上线时，会通过工具将展开风格的代码，变成紧凑风格，这样可以减少文件体积，节约网络流量，同时也能让用户打开网页时速度更快。
2、CSS选择器
CSS选择器整体分两大类：
一、基本选择器
- 通配选择器
- 元素选择器
- 类选择器
- ID选择器
二、复合选择器 - 交集选择器
- 并集选择器
- 后代选择器
- 子代选择器
- 。。。
2.1、基本选择器
2.1.1 通配选择器
作用：选中所有的HTML元素
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>01_通配选择器</title> <style> * { color: orange; font-size: 40px; } </style> </head> <body> <h1>欢迎来到土味官网，土的味道我知道</h1> <br> <h2>土味情话</h2> <h3>作者：优秀的网友们</h3> <p>万水千山总是情，爱我多点行不行！</p> </body> </html>
2.1.2 元素选择器
作用：为页面中某种元素统一设置样式
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>02_元素选择器</title> <style> h2 { color: chocolate; } h3 { color: green; } p { color: red; } h1 { font-size: 50px; } </style> </head> <body> <h1>欢迎来到土味官网，土的味道我知道</h1> <br> <h2>土味情话</h2> <h3>作者：优秀的网友们</h3> <p>万水千山总是情，爱我多点行不行！</p> <br> <h2>反杀土味情话</h2> <h3>作者：更优秀的网友们</h3> <p>一寸光阴一寸金，劝你死了这条心！</p> </body> </html>
2.1.3 类选择器
作用：根据元素的class值，来选中某些元素
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>03_类选择器</title> <style> /* 选中页面中所有类名为speak的元素 */ .speak { color: red; } /* 选中页面中所有类名为answer的元素 */ .answer { color: green; } /* 选中页面中所有类名为big的元素 */ .big { font-size: 60px; } </style> </head> <body> <h1>欢迎来到土味官网，土的味道我知道</h1> <br> <h2>土味情话</h2> <h3>作者：优秀的网友们</h3> <p class="speak big">我对你说：万水千山总是情，爱我多点行不行！</p> <p class="speak">我对你说：草莓、蓝莓、蔓越莓，今天你想我了没？</p> <p class="speak">我对你说：我心里给你留了一块地，我的死心塌地！</p> <span class="speak">哈哈</span> <br> <h2>反杀土味情话</h2> <h3>作者：更优秀的网友们</h3> <p class="answer">你回答我：一寸光阴一寸金，劝你死了这条心！</p> <p class="answer">你回答我：西瓜、南瓜、哈密瓜，把你打成大傻瓜！</p> <p class="answer">你回答我：我心里只有一块地，我的玛莎拉蒂！</p> </body> </html>
2.1.4 ID选择器
作用：根据元素的id属性值，来精准选中某个元素。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>04_ID选择器</title> <style> #earthy { color: red; } #turn-earthy { color: blue; } .turn { font-size: 60px; } </style> </head> <body> <h1>欢迎来到土味官网，土的味道我知道</h1> <br> <h2 id="earthy">土味情话</h2> <h3>作者：优秀的网友们</h3> <p>我对你说：万水千山总是情，爱我多点行不行！</p> <span>哈哈</span> <br> <h2 id="turn-earthy" class="turn">反杀土味情话</h2> <h3>作者：更优秀的网友们</h3> <p>你回答我：一寸光阴一寸金，劝你死了这条心！</p> </body> </html>
CSS2（一）：CSS选择器（2）+
