CSS详篇
什么是CSS
CSS是层叠样式表（Cascading Style Sheets）的缩写，它是一种渲染网页的语言，让页面更加好看。CSS可以控制网页中的布局、颜色、字体等样式，从而使网页文档更加美观、易读和易于维护
在Web开发中，CSS通常与HTML和JavaScript一起使用。其中，HTML负责定义内容，JavaScript处理用户交互，而CSS则负责呈现样式和布局
CSS基本语法
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明:
- 选择器通常是自己需要设置样式的HTML元素
- 每条声明，由一个属性和一个值组成
- 属性（property）是自己希望设置的样式属性（style attribute）。属性与属性之间用分号，属性和值之间用冒号
编写CSS有三种方式
A、内联样式：这种方式是在HTML标签中直接写样式。将CSS代码直接写在HTML中<body>标签内需要用的元素里面的style属性中 style=“xxxx”
语法格式：<标签 style="样式属性名1:值1;样式属性名2:值2;..."></标签>style表示给对应的标签设置样式属性可以一个或多个，一个属性必须对应一个值，属性和值之间也是用冒号，多个属性之间用分号
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小飞棍来了</title>
</head>
<body><div style="background-color: bisque; height: 60px;font-size: 30px;font-weight: bold;">你来了</div><div style="background-color: green; height: 60px;font-size: 30px;font-weight: bold;">起飞了</div><div style="background-color: yellow; height: 60px;font-size: 30px;font-weight: bold;">很好了</div><!--background-color 属性：表示容器背景颜色height 属性：表示标签容器高度font-size 属性：表示字体大小font-weight 属性：表示定义字体的粗细注意：这里指定大小在CSS中是...px-->
</body>
</html>
内联样式的缺陷：多个标签中样式较多重复，对于要求很多个属性时，往往很不方便，衍生出内部样式
B、内部样式：这种方式是当前页面存在相同样式时，把相同样式提取到HTML中的head标签内，将CSS代码写在文档的<head>标签中的<style>标签中，直接在HTML文档中定义样式
注意：style标签一般都是放到head标签里面的，是专门用来定义当前页面样式的<!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: 60px; /*容器高度*/font-size: 30px; /*字体大小*/font-weight: bold; /*字体粗细*/}</style>
</head>
<body><div style="background-color: bisque;">你来了</div><div style="background-color: green;">起飞了</div><div style="background-color: yellow;">很好了</div>
</body>
</html>
注意：CSS中，如上样式，注释以 /* 开始, 以 */ 结束；注释是用来解释代码，并且可以随意编辑它，浏览器会自动忽略它【在style标签内及css文件中使用有效】
内部样式的缺陷：一个页面即一个html，多个页面中存在公共重复样式较多时，往往很不方便，又衍生出外部样式
C、外部样式：把多个页面中style标签内的公共样式提取到一个单独的css文件中，将CSS代码保存到一个外部样式表文件中，然后通过文档<head>头部的<link>标签来引入样式表
PS：不断的衍生样式，主要是在修改样式时，方便统一修改相同样式，便于维护
CSS常用选择器
CSS选择器用于定位你要操作的元素：
| 选择器类型 | 意义 | 示例 |
|---|---|---|
| 标签/元素选择器 | 选择指定标签的所有元素 | p 选择所有 <p> 元素 |
| 类选择器 | 选择具有指定类名的所有元素 | .red 选择所有 class="red" 的元素 |
| ID选择器 | 选择具有指定ID的元素 | #header 选择 id="header" 的元素 |
| 属性选择器 | 选择具有指定属性或属性值的所有元素 | [type="text"] 选择 type="text" 的元素 |
| 伪类和伪元素选择器 | 选择具有指定状态或位置的元素 | :hover 选择鼠标悬停在元素上的元素 |
| 组合选择器 | 组合多个元素 | ul,.c1 选择所有 <ul>元素和class="c1"的元素 |
| 层次选择器 | 通过元素结构选择元素 | ul li 选择<ul>里面的所有<li>元素；div > p 选择所有直接子元素是<div>的<p>元素；h1 + p 选择紧跟在<h1>元素后紧挨着的<p>元素； |
标签/元素选择器
匹配对应的元素/标签，使其完成设定样式效果
<!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标签选择器*/div{background-color: green;}/*span标签选择器*/span{color: yellow;}/*p标签选择器*/p{background-color: aqua;}</style></head>
<body><div>你来了!</div><div>起飞了!</div><span>跑起来</span><span>跑起来123</span><p>会了么</p><p>会了么！！！</p>
</body>
</html>
类选择器
当多个相同标签，只需要修改指定样式，把HTML文档中的标签添加class属性，通过设定class属性中的值，用 .值的方式选择所有对应一样的class=“值”
PS：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>/*类选择器*/.xxx{color: red;}</style></head>
<body><!--在html页面中每个元素标签必有class和Id属性class属性是专门用来定义样式的--><div class="xxx">你来了!</div><div>起飞了!</div><span class="xxx">跑起来</span><span>跑起来123</span><p class="xxx">会了么</p><p>会了么！！！</p>
</body>
</html>
ID选择器
选择具有指定ID的元素，ID具有唯一性，在同一个页面中，设置的ID属性值必须独一无二，不能出现重复，通过设定id属性中的值，用 #值的方式选择id=“值”，id选择器一般不用来设置样式，都是与js一起使用的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>嘻嘻</title><style>/*id选择器*/#header{color: blue;}</style></head>
<body><p id="header">这天是真的越来越热了！</p><p>123</p><p>321</p><p>456</p>
</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>/*通配符选择器*/*{font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; /*字体类型*/color: blue; /*字体颜色*/font-size: 16px; /*字体大小*/}</style></head>
<body><p>这天是真的越来越热了！</p><p>123</p><p>321</p><p>456</p>
</body>
</html>
PS：范围大小：通配符选择器>标签选择器>类选择器>id选择器
属性选择器
选择具有指定属性或属性值的所有元素，可以 元素[xxx]或元素[xxx=yyy]
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>嘻嘻</title><style>/*属性选择器_方式1*/a[class]{color: blueviolet; /*字体紫色*/}/*属性选择器_方式2，如果用类选择器也可以达到此效果*/a[class="ex"]{background-color: aqua;}</style></head>
<body><ul><li><a href="?" class="external">外部链接1</a></li><li><a href="?">内部链接1</a></li><li><a href="?" class="external">外部链接2</a></li><li><a href="?">内部链接2</a></li><li><a href="?" class="e">外部链接3</a></li><li><a href="?">内部链接3</a></li><li><a href="?" class="ex">外部链接4</a></li><li><a href="?">内部链接4</a></li></ul>
</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>/*组合选择器，即多个选择器一起使用，选择器之间逗号隔开*/a[class="e"],#haha{background-color: chartreuse;}</style></head>
<body><ul><li><a href="?" class="external">外部链接1</a></li><li><a href="?">内部链接1</a></li><li><a href="?" class="external">外部链接2</a></li><li><a href="?">内部链接2</a></li><li><a href="?" class="e">外部链接3</a></li><li><a href="?">内部链接3</a></li><li><a href="?" class="ex">外部链接4</a><span id="haha">wolaile</span></li><li><a href="?">内部链接4</a></li></ul>
</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>/*层次选择器——包含选择符(之间空格)*//*类型选择器.go下面所有的span标签*/.go span{background-color: red;}</style></head>
<body><ul><li><a href="?" class="external">外部链接1</a><span id="haha">wolaile</span></li><li class="go"><a href="?">内部链接1</a><span id="haha">wolaile</span><span id="haha">wolaile!!!</span></li></ul>
</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>/*层次选择器——子选择符(之间小于符)*//*类型选择器.test下面的子li下的子ul下的子li下的所有span标签*/.test>li>ul>li>span{background-color: pink;}</style></head>
<body><ul class="test"><li><a href="?">列表项目1</a><ul><li><a href="?">项目列表1.1</a><span>哈哈</span></li><li><a href="?">项目列表1.2</a></li></ul></li><li><a href="?">列表项目2</a><ul><li><a href="?">项目列表2.1</a><span>嘻嘻</span></li><li><a href="?">项目列表2.2</a></li></ul></li><li><a href="?">列表项目</a></li><li><a href="?">列表项目</a></li></ul>
</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>/*层次选择器——相邻选择符(之间+号)*//*与h3标签相邻的p标签修改样式*/h3+p{background-color: green;}</style></head>
<body><div class="test"><h3>这是一个标题A</h3><p>这是一个文字段落B</p><p>这是一个文字段落C</p><h3>这是一个标题D</h3><p>这是一个文字段落E</p><h3>这是一个标题F</h3><p>这是一个文字段落G</p><p>这是一个文字段落H</p><p>这是一个文字段落1</p></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>/*层次选择器——兄弟选择符(之间~号)*//*与h3标签所有相邻的p标签修改样式*/h3~p{background-color: green;}</style></head>
<body><div class="test"><h3>这是一个标题A</h3><p>这是一个文字段落B</p><p>这是一个文字段落C</p><h3>这是一个标题D</h3><p>这是一个文字段落E</p><h3>这是一个标题F</h3><p>这是一个文字段落G</p><p>这是一个文字段落H</p><p>这是一个文字段落1</p></div>
</body>
</html>
选择器细节
CSS样式优先级：内联样式＞id选择器样式＞类型选择器样式＞标签选择器样式＞通配符选择器样式 【与代码从上往下执行无关，也就是不受位置影响，但是如果此时是内部样式和外部样式皆用的同一个选择器的时候，那么受位置影响，谁越靠代码后面，谁就覆盖之前的样式，也就是相当于把引入的外部样式代码直接添加到内部样式style标签中就一目了然】
伪类和伪元素选择器
伪类是一种状态，给标签的一种状态设置样式就叫伪类选择器；常用于a标签
伪类选择器：
:hover：设置元素在其鼠标悬停时的样式
<!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{height: 100px;width: 100px;border: 1px solid black;/*实线*/}/*伪类选择器是冒号隔开的*/.test:hover{height: 150px;width: 150px;background-color: blue;}</style></head>
<body><div class="test"><span>哈哈</span></div>
</body>
</html>
当鼠标触发上面时的效果
:enable 选择每个已启动的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>嘻嘻</title>
</head>
<body><!--input标签，属性补充--><!-- input标签属性之readonly(只读) ，value内的值，代码中可设定随意默认值，页面中修改不了-->用户：<input value="默认值" readonly/><br><br><!-- input标签属性之disabled(禁用)，也就是不可输入 -->密码：<input type="password" disabled/><br><br>地址：<input class="zz" type="text"/><!-- 值radio或者checkbox，checked属性表示默认选中 -->性别：<input type="radio" name="sex" id="i1" checked/><label for="i1">男</label><input type="radio" name="sex" id="i2"/><label for="i2">女</label>
</body>
</html>
:disabled 选择每个已禁止的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>嘻嘻</title><style>/*input标签为disabled*/input:disabled{color: pink;}</style>
</head>
<body><!-- input标签属性之readonly(只读) ，value内的值，代码中可设定随意默认值，页面中修改不了-->用户：<input value="默认值"