web开发基础（CSS）
目录
- 一、CSS的灵魂三问：
- 什么是CSS？
- 为什么学CSS？
- CSS掌握到什么程度？
- 二、CSS整合HTML快速入门
- 1. 三种CSS
- 1.1 行间样式表
- 1.2 内部样式表
- 1.3 外部样式表
- 三、CSS选择器
- 1. CSS 标签选择器
- 2. CSS 部分/类 选择器
- 3. CSS ID 选择器
- 4. CSS 状态选择器（状态伪类）
一、CSS的灵魂三问：
什么是CSS？
层叠样式表(英文全称：Cascading Style Sheets)——人话：叠加在HTML上的表达样式（颜色、字体）的列表
为什么学CSS？
- 自动化Python测试中：CSS定位查找HTML；
- 功能测试：熟悉分析网页结构（bug在HTML中还是在CSS中）
CSS掌握到什么程度？
- 不要求懂大量的样式，读懂常见样式，会使用官方手册
- CSS整合HTML
- CSS操作HTML样式
二、CSS整合HTML快速入门
CSS语言格式：成对出现
选择器 { CSS属性 : CSS的值; CSS属性2 : CSS的值;
}
1. 三种CSS
1.1 行间样式表
操作：标签 增加style属性
特点：针对单个标签操作。
缺点：代码复用性差
<head><meta charset="UTF-8"><title>行间样式表</title>
</head>
<body>
<h1 style="color:blue;font-size:100px;">第一天</h1>
<p style="color:red;font-size:100px;">真高兴！</p>
<h1>第二天</h1>
<p>也开心！</p>
<h1>第三天</h1>
<p>捡到钱！</p>
</body>
1.2 内部样式表
操作：在head标签——网页配置 增加style标签
特点：复用性比行间要好
局限：针对当前文件进行处理
小结：CSS属性如何查询？使用W3school手册——CSS参考手册
<head><meta charset="UTF-8"><title>内部样式表</title><!--以下是 内部样式表 理由 CSS写在HTML 文件内部--><style type="text/css">/*我是 css代码p{} h1{} 标签选择器 CSS选择HTML标签-->选中所有标签*/p{color: yellow;font-size: 50px;}h1{color: blue;text-align: center; /*文本居中*/text-decoration: underline; /*下划线*/}</style>
</head>
<body>
<h1>第一天</h1>
<p>真高兴！</p>
<h1>第二天</h1>
<p>也开心！</p>
<h1>第三天</h1>
<p>捡到钱！</p></body>
1.3 外部样式表
优点：复用性最好，跨文件修饰HTML
需求：一个web好多HTML文件，使用一个CSS文件复用到所有HTML文件上
解决思路：
1. 准备n个HTML
2. 实现一个CSS文件
/* 我是CSS外部样式代码，不可以出现HTML标签*/p{color: green;}h2{color: blue;text-align: center; /*文本居中*/text-decoration: underline; /*下划线*/}
3. 在HTML的配置中使用link标签，引用CSS文件
<head><meta charset="UTF-8"><title>外部样式表</title><link rel="stylesheet" href="./jwcss/jw1.css" type="text/css">
</head>
<body>
<h1>第一天</h1>
<p>真高兴！</p>
<h1>第二天</h1>
<p>也开心！</p>
<h1>第三天</h1>
<p>捡到钱！</p></body>
小结：
-
选哪个？
复用性：外部最好。
工作场景：
web所有的网页HTML统一样式（外部）
一组标签 样式 （内部）
单个标签 （行间样式） -
如果HTML被CSS外部+内部+行间 同时存在？
笔试判断题：遵循优先级？错误——结论：HTML整合CSS遵循就近原则（谁靠近标签最近，该标签遵循该样式）
三、CSS选择器
需求：选中所有标签 + 选中部分标签 + 选中单个标签 指定样式？
解决：
1. CSS 标签选择器
已学完，例如：p{ };
格式：标签 { CSS }; 选中所有标签
2. CSS 部分/类 选择器
2.1 HTML增加class属性，标识将会被被选择的标签
属性值 支持重复 + 多个值 空格隔开+ 不能数字开头
2.2 语法 :.class属性的值{ CSS 代码 };
<head><meta charset="UTF-8"><title>外部样式表</title><style type="text/css">.textred{color: red;}.textunder{text-decoration: underline;}</style>
</head>
<body>
<h1 class="textred">第一天</h1>
<p class="textred textunder">真高兴！</p>
<h1 class="textred">第二天</h1>
<p>也开心！</p>
<h1>第三天</h1>
<p>捡到钱！</p>
</body>
3. CSS ID 选择器
3.1 HTML增加ID属性，标识将会被选择的标签
属性值不支持重复 + 不能数字开头
3.2 语法：#.ID属性的值{ CSS代码 };
<head><meta charset="UTF-8"><title>外部样式表</title><style type="text/css">.textred{color: red;}.textunder{text-decoration: underline;}#aaa{color: black;font-family:"微软雅黑";}</style></head>
<body>
<h1 class="textred">第一天</h1>
<p class="textred textunder">真高兴！</p>
<h1 class="textred">第二天</h1>
<p id="aaa">也开心！</p>
<h1>第三天</h1>
<p>捡到钱！</p>
</body>
小结结论：同时存在标签选择器 + ID选择器 + 类选择器，存不存在优先级？√，存在
优先级：ID > class > 标签
小结：
1. HTML + CSS 就近原则
2. 选择器才存在优先级：ID > class > 标签
4. CSS 状态选择器（状态伪类）
语法：选择器 : 状态
状态：
选择器 : link { 样式表 } 指的链接访问之前的样式
选择器 : visited { 样式表 } 指的链接访问之后的样式
选择器 : hover { 样式表 } 指的是鼠标悬停（鼠标放在标签的上方）时候的样式
选择器 : active { 样式表 } 指的是鼠标激活 按住不动的时候的样式
注意点：四个必须同时出现并且有顺序
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">/*注意浏览器要按住 ctrl+shift+delete 键清除缓存后才能看到访问前的效果*//*链接访问之前*/a:link{color: black;}/*链接访问之后*/a:visited{color: red;}/*鼠标移入悬停*/a:hover{color: blue;}/*鼠标激活按住不动*/a:active{color: yellow;}</style>
</head>
<body>
<a href="#">淘宝</a>
<a href="https://www.baidu.com">百度一下</a>
<a href="#">京东</a>
</body>
</html>