CSS
CSS的基础
CSS定义
? CSS全称为Cascading Style Sheet，中文翻译为“层叠样式表”。
CSS的作用
? 简单地来讲，CSS 能对你制作的网页进行布局、颜色、背景、宽度、高度、字体进行控制，让网页按您的美工设计布局的更加美观漂亮。 样式是用来控制页面外观、设置元素对象属性的工具，使用样式可使页面产生各种特殊的效果。
CSS的语法
基本格式：
<head> ???<meta charset="UTF-8"> ???<title>DOC</title> ???<style type="text/css"> ?????/*样式表内容*/ ???</style></head>
样式代码存在的位置
直接写在标签内
<p style="color: red"> ???你好....</p>在head标签内写在style标签内
<head> ???<meta charset="UTF-8"> ???<title>DOC</title> ???<style type="text/css"> ???????/*样式表内容*/ ???</style></head><body> ???<!--body内容--></body>写在独立的CSS文件中，通过link标签引入
<head> ????<link rel="stylesheet" href="css文件路径"></head>
CSS选择器（定义如何在HTML中找标签）
1. 基本选择器
ID选择器
- 作用：通过标签id选择标签
<style> ???#ID {属性名: 属性}</style>- 特点：
1、一个 ID 选择器在一个页面只能使用一次。如果使用2次或者2次以上，不符合 w3c 规范，JS 调用会出问题。
2、一个标签只能使用一个 ID 选择器。
3.一个标签可以同时使用类选择器和 ID 选择器。
元素选择器
- 作用：通过标签类型选择标签
<style> ???标签名 {属性名: 属性}</style>类选择器
- 作用：通过定义class属性选择标签
<style> ???.class {属性名：属性}</style>或者<style> ???标签类型.class {属性名：属性}</style>PS：
1、谁调用，谁生效。
2、一个标签可以调用多个类选择器。多个标签可以调用同一个类选择器。类选择器命名规则
- 不能用纯数字或者数字开头来定义类名；
- 不能使用特殊符号或者特殊符号开头（_ 除外）来定义类名；
- 不建议使用汉字来定义类名；
- 不推荐使用属性或者属性的值来定义类名。
类选择器常用的命名
通配符选择器
- 格式：
× {属性名： 属性值} - 作用：匹配所以类型的元素
- 格式：
2.组合选择器
定义：两个或者两个以上的的基础选择器通过不同方式连接在一起
交集选择器
格式：
标签类(ID)选择器 {属性: 属性值;}特点：既要满足使用某个标签，还要满足使用了类选择器或者ID选择器。
例子：<head> ???<style> ???????div.box{ ???????????color: red; ???????} ???????div#d1{ ???????????width: 400px; ???????????height: 300px; ???????????backgroud-color: red; ???????} ???</style></head>
后代选择器
格式：
选择器 选择器 {属性： 属性值;}使用条件：
- 后代选择器首选选择器要满足包含（嵌套）关系；
- 父级元素在前面，子集元素在后面。
特点：无限制隔代。（多层嵌套全部生效）
<head> ???<style> ???????div span{ ???????????font-size: 42px; ???????} ???????.box span{ ???????????color: red; ???????} ???</style></head><body> ???<div> ???????<p class="box"> ???????????<span>我是div标签的孙子级的标签</span> ???????</p> ???</div> ???<div><span>我是div标签的子级标签</span></div></body>PS：只要是标签选择器，ID选择器，类选择器就可以自由组合
子代选择器
格式：
选择器>选择器 {属性: 属性值}原则：只会选中子集的元素，下下级的元素不会选中
<head> ???<style> ???????div>span{ ???????????font-size: 42px; ???????} ???</style></head><body> ???<div> ???????<span>选中我</span> ???????<p> ???????????<span>选不中我</span> ???????</p> ???</div></body>
毗邻选择器
格式：
选择器1+选择器2{属性: 属性值}作用：选择所以紧接着选择器1之后的选择器2元素
<head> ???<style> ???????div+span{ ???????????font-size: 42px ???????} ???</style></head><body> ???<div> ???????<span>不能找到我</span> ???</div> ???<span>可以找到我</span> ???<span>不可以找到我</span></body>
后续选择器
格式：
选择器1～选择器2{属性: 属性值}作用：选中选择器1后的所有选择器2的元素
<head> ???<style> ???????div～span{ ???????????font-size: 42px ???????} ???</style></head><body> ???<div> ???????<span>不能找到我</span> ???</div> ???<span>可以找到我</span> ???<span>可以找到我</span></body>
并集选择器
格式：
选择器, 选择器, 选择器{属性: 属性值;}原则：并集选择器应用于多个选择器找到的标签应用相同的样式时，为了避免重复写到一起
<head> ???<style> ???????.a,#d1,div,h2{ ???????????font-size: 24px ???????????color: #ffffff ???????} ???</style></head>
PS：
×为通配符选择器，也就是可以选中所有元素
3.属性选择器
<!-- 通过属性或者属性值找到标签 --><style> ???div[属性] {color: red} or ???div[属性=属性值] {color: red}</style>- PS：不常用的属性选择器：
<head> ???<style> ???????/*找到所有title属性以hello开头的元素*/ ???????[title^="hello"] { ?????????color: red; ???????} ???????/*找到所有title属性以hello结尾的元素*/ ???????[title$="hello"] { ?????????color: yellow; ???????} ???????/*找到所有title属性中包含（字符串包含）hello的元素*/ ???????[title*="hello"] { ?????????color: red; ???????} ???????/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ ???????[title~="hello"] { ?????????color: green; ???????} ???</style></head>4.伪类选择器
状态：同一个标签在不同时刻会有不同状态
/*未访问的链接*/a:link { ?color: red;}/*已经访问的链接*/a:visited { ???color: blue;}/*鼠标移动到链接上*/a:hover { ???color: #FF00FF;}/*选定的链接，就是在鼠标点击的时候*/a:active { ???color: pink;}/*input输入框获取焦点时的样式*/input:focus { ???outline: none ???backgroud-color: #eee}5.伪元素选择器
使用CSS生成一个新的标签属性
设置标签内容的首个字的形式
firist-letterp:first-letter { ???font-size: 48px; ???color: red;}在标签内容的开头加入新的内容
beforep:before { ?content:"*"; ?color:red;}在标签内容的结尾加入新的内容
afterp:after { ?content:"[?]"; ?color:blue;}
PS：before and after常用于清除浮动。
6.选择器的优先级
- 原则一：选择器相同时，谁最后加载就变成什么样子。
- 原则二：选择器不同的时候，按照权重选择。
- PS1：各个选择器的权重：内联选择器权重最高>id选择器权重次之>类选择器权重第三>元素选择器最低
- 原则三：权重选择器永不进位。
- PS2：紧急情况样式的修改使用：
样式!inportant；,不到最后不使用，因为破坏逻辑，使得这个样式始终显示。
CSS基础——选择器
原文地址：https://www.cnblogs.com/abner28/p/9794862.html