目录
- 一、CSS的灵魂三问：
- 二、CSS整合HTML快速入门
-
- [1. 三种CSS](#1. 三种CSS)
-
- [1.1 行间样式表](#1.1 行间样式表)
- [1.2 内部样式表](#1.2 内部样式表)
- [1.3 外部样式表](#1.3 外部样式表)
- 三、CSS选择器
-
- [1. CSS 标签选择器](#1. CSS 标签选择器)
- [2. CSS 部分/类 选择器](#2. CSS 部分/类 选择器)
- [3. CSS ID 选择器](#3. CSS ID 选择器)
- [4. CSS 状态选择器（状态伪类）](#4. CSS 状态选择器（状态伪类）)
一、CSS的灵魂三问：
什么是CSS？
层叠样式表(英文全称：Cascading Style Sheets)------人话：叠加在HTML上的表达样式（颜色、字体）的列表
为什么学CSS？
- 自动化Python测试中：CSS定位查找HTML；
- 功能测试：熟悉分析网页结构（bug在HTML中还是在CSS中）
CSS掌握到什么程度？
- 不要求懂大量的样式，读懂常见样式，会使用官方手册
- CSS整合HTML
- CSS操作HTML样式
二、CSS整合HTML快速入门
CSS语言格式：成对出现
html
选择器 {
CSS属性 : CSS的值; CSS属性2 : CSS的值;
}1. 三种CSS
1.1 行间样式表
操作：标签 增加style属性
特点：针对单个标签操作。
缺点：代码复用性差
html
<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参考手册
html
<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文件上
解决思路：
-
准备n个HTML
-
实现一个CSS文件
html
/* 我是CSS外部样式代码，不可以出现HTML标签*/
p{
color: green;
}
h2{
color: blue;
text-align: center; /*文本居中*/
text-decoration: underline; /*下划线*/
}3. 在HTML的配置中使用link标签，引用CSS文件
html
<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 代码 };
html
<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代码 };
html
<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 > 标签
小结：
HTML + CSS 就近原则
选择器才存在优先级：ID > class > 标签
4. CSS 状态选择器（状态伪类）
语法：选择器 : 状态
状态：
html
选择器 : 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>