CSS-1
认识 CSS
层叠样式表
引入方式
方式一
CSS代码，直接写在 HTML 的 style 标签里
<style>p {color:red; /* 颜色大小控制 */font-size:30px; /* 字号大小 */}
</style>
方式二
在 HTML 使用 link 标签引入
<link rel="stylesheet" href="./test.css">rel 属性（了解）1. rel 属性规定当前文档与被链接文档之间的关系2. 只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持
方式三
CSS代码，直接写在标签的 style 属性值里（不推荐）
<div style="color:red; font-size:20px;"> 这是div标签 </div>行内样式，配合 JavaScript 使用
CSS 注释
/* 这是注释，CSS代码 */
CSS 特性
继承性、层叠性、优先级
作用：简化代码 ( 定位问题 )，并解决问题
1.继承性：
子级默认继承父级的文章控制属性，当然，如果子级自己有则生效自己的样式，不继承。
2.层叠性：
相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
不同的属性会叠加：不同的CSS属性都生效
3.优先级：
优先级也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则
规则内容：选择器优先级高的样式生效
公式详情：
/*
通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
*/
即：选中标签的范围越大，优先级越低
!important 提权功能，提高权重/优先级提到最高，慎用！！举例：
<style>.box {color:blue !important;}
</style>
选择器
作用：查找标签，从而能够设置样式
基础选择器
1.标签选择器
<style>p {color:red;}
</style>使用"标签名"(如：p、div、h1...)作为选择器->选中"同名标签"设置"相同的样式"
2.类选择器
<style>.to-red {color:red;}.TO-big {font-size:20px;}
</style><body><p class="to-red">111111</p><p>222222</p><p class="to-red TO-big">333333</p>
</body>查找标签，差异化设置标签的显示效果（一个标签可以使用多个类名，当 class 属性值要写多个类名时，类名与类名之间用空格隔开）
3.id选择器
<style>#d1 {color:red;}
</style>
<body><div id="d1">111111</div><div>222222</p><div>333333</div>
</body>id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式（注意，同一个id 选择器在一个页面只能使用一次）
4.通配符选择器
<style>* {color:red;}
</style>不需要调用，浏览器自动查找页面所有标签，设置相同的样式
复合选择器
定义：由两个或多个基础选择器，通过不同的方式组合而成
作用：更准确、高效的选择目标元素（标签）
类型：1.后代选择器2.子代选择器3.并集选择器4.交集选择器
1.后代选择器
作用：选中某元素的后代元素（包括儿子、孙子、重孙子...）
写法：父选择器 子选择器 {css属性:值;}
2.子代选择器
作用：选中某元素的子代元素（最近的子级）
写法：父选择器 > 子选择器 {css 属性:值;}
3.并集选择器
作用：选中多组标签设置相同的样式
写法：选择器1, 选择器2, 选择器3 {css属性:值;}
4.交集选择器
作用：选中同时满足多个条件的元素（了解）注意：标签选择器必须书写在最前面
写法：<style>/* 既是P标签，又是box类 */`p.box {color:red;}</style><body><p class="box">p标签，使用了类选择器</p><p>p标签</p><div class="box">div标签，使用了类选择器</div></body>
伪类选择器
- 伪类表示 “元素状态”，选中元素的某个状态，设置样式！
鼠标悬停状态：选择器:hover {CSS属性:属性值;
}<style>/* 任何标签都可以设置鼠标悬停的状态 */a:hover {color: red;text-decoration: none;}.box:hover {color:blue;}
</style><body><a href="#">a标签</a><div class="box">div标签</div>
</body>
伪类---超链接超链接共有四个状态，分别是：:link 访问前
:visited 访问后
:hover 鼠标悬停
:active 点击时（激活）提示：如果要给超链接设置以上四个状态，需要按LVHA的顺序书写
文字属性
字体大小
font-size:20px
字体粗细
font-weight:400正常：400，加粗：700
字体倾斜
font-style不倾斜：normal，倾斜：italic
行高
line-height:20px;直接写数字的话，将作为当前标签 font-size 属性值的倍数
字体族
font-family:Microsoft YaHei, Heiti SC;从左往右，有这个字体就执行这个字体，没有就向右继续执行备胎字体，建议在工作中使用无衬线字体进行兜底 sans-serif
字体复合属性
font:italic 700 30px/2 楷体;文字倾斜、文字加粗、字体大小30px、行高2倍、楷体
(注意：字号和字体必须书写，否则不生效)
文本属性
文本缩进
text-indent:2em;推荐使用em ，若当前标签的字号的大小为16px,则1em=16px，2em=32px。
当然也可以使用"数字+px"，但是不推荐。
首行缩进两个字实例：text-indent:2em;
文本对齐
text-align:center;文本对齐方式: left、center、right
居中的本质是文字居中，而不是标签居中
扩展：图片居中<style>div {text-align:center;}
</style><div><img src="./images/pic.jpg" alt="这是一张猫的图片">
</div>
修饰线
text-decoration:none;none 清除所有效果
underline 下划线
line-through 删除线
overline 上划线
例子: 清除"a标签"的下划线<style>a {text-decoration:none;}
</style><a>点击前往</a>
颜色
color: red;rgb 表示法（了解）1. rgb(r,g,b)2. 三元色取值（0-255）rgba 表示法（开发使用）1. rgba(r,g,b,a)2. a 表示透明度，其取值为(0-1)十六进制表示法（开发使用）1. #000000、#ffcc00...2. 简写形式：#000、#fc0...
背景属性
属性大全
背景色 background-color
背景图 background-image
背景图平铺方式 background-repeat
背景图位置 background-position
背景图缩写 background-size
背景图固定 background-attachment
背景复合属性 background
背景图
引用背景图
<style>div {width: 400px;height: 400px;/* 背景图默认是平铺（复制）的效果 */background-image: url();}
</style><body><div>div标签</div>
</body>
平铺方式
属性名: background-repeat（bgr）属性值:no-repeat 不平铺repeat 平铺repeat-x 水平方式平铺repeat-y 垂直方式平铺代码演示：
<style>div {width: 400px;height: 400px;background-image: url();background-repeat: no-repeat;}
</style><body><div>div标签</div>
</body>
背景图位置
属性名：background-position属性值：水平方向位置，垂直方向位置，具体如下：
1.属性值方式一：关键字left 左right 右center 居中top 顶部bottom 底部
2.属性值方式二：坐标（数字+px，正负都可以）
3.属性值方式三：上面两者混用代码演示：
<style>div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;background-position:center bottom; background-position:50px -100px;bakcground-position:50px center;}
</style><body><div>div标签</div>
</body>
背景图缩放
属性名：background-size属性值：
cover：等比例缩放背景图片以完全覆盖区域，可能背景图片部分看不见
contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
百分比：根据盒子尺寸计算图片大小
数字 + 单位（例如：px）代码演示：
<style>div {width: 600px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;background-size:100%;background-size:cover;background-size:contain;}
</style>
背景图固定
作用：背景不会随着元素的内容滚动
属性名：background-attachment属性值：fixed
显示模式
1.块级元素（例如：div）* 独占一整行* 宽度默认是父级的100%* 添加宽高属性会生效2.行内元素（例如：span）* 一行共存多个* 尺寸由内容撑开* 加宽高不生效3.行内块元素（例如：img）* 一行共存多个* 默认尺寸由内容撑开* 加宽高属性会生效
转换显示模式
属性名：display属性值：block 块级 （独占一行，宽高生效） 例如：divinline-block 行内块 （一行共存，宽高生效） 例如：imginline 行内 （一行共存，宽高无效） 例如：span