css
css是用来设置html的样式，使html文本经过浏览器渲染之后呈现不同的外观，
1. css的四种引入方式
对html中标签进行更改的步骤
- 找到目标标签
- 对标签对象进行操作
2.引入css
2.1 直接在属性中加入style
<div style="color: red">hello world</div>
2.2 在head中进行编写
<style> div{ color:red; } </style>
2.3 连接式
将需要编写的css样式写入到一个专门的css文件中，然后通过link来进行导入
<link href="css.css" rel="stylesheet">
2.4 导入式
<style> @import "css.css"; </style>
连接式和导入式的区别：在使用连接式时是先导入html，然后在导入css文件进行渲染，导入式是直接将html和css文件作为一个整体同时出现
3.css的四种基本选择器
3.1基本选择器
3.1.1 *通用选择器
根据此选择器，在进行选择时默认选择所有的标签
3.1.2 E
通过标签的名字进行选择，适用于只有几个标签的情况
3.1.3 ID
当给不同的标签取唯一的名字之后，可以通过id来进行选择
3.1.4 class
class是分组的意思，给某些标签分进不同的组，也可以同时进入不同的组，在进行选择时根据不同的组来进行选择
3.2 组合选择器
3.2.1 E,F
当根据某一条件无法直接选择标签时，以逗号区隔开，通过不同的 组合来进行查找，比如
<style> div,.fff{ color: red; } </style>
3.2.2 E F 空格
后代选择器当E中嵌套F时，定义到E中的F，只要F是E的后代，无论是子代还是孙子代，都可以找到。
3.2.3 >
大于号，直接查找E的子代F，不是孙子代
3.3 属性选择器
3.3.1 [alex]
查找属性为alex的
3.3.2 [alex=11]
查找属性为alex并且值为11的
3.3.3 div [alex=11]
查找div中属性为alex并且值为11的
3.3.4 [alex ~='sb]
查找属性中有空格分隔且含有sb的，比如可以找到sb sb2
3.3.5 [alex^=sb]
查找属性中以sb开头的
3.3.6 [alex&=sb]
查找属性中以sb结尾的
3.3.7[alex*=sb]
查找属性中只要含有sb的就行
3.4 css中的伪类
主要是学习hover，就是当鼠标悬浮的时候，所提现的动作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div:hover{ color: red; } </style> </head> <body> <div>hello</div> </body> </html>
after和before
就是在标签的文本后或者前面添加值
<style> div:after{ content:'good morning' } </style>
3.5 css选择器的优先级
对于同一个标签，当通过不同的途径设置了样式之后，有不同的优先级别来显示相应设置。、
1.直接在属性中进行style，优先级分数为1000
2.通过id进行设置，优先级分数为100
3. 通过class来进行设置，优先级分数为10
4.通过名字来进行设置，优先级为1
当有多个优先级，但是自己不想计算直接想用的时候，可以通过！important直接进行使用
<style> div{ color: red!important; } </style>
通过继承来的优先级最低，为0，任何的修改都可以改变继承所得到的样式
3.6 寻找标签
3.6.1 操作标签
3.6.1.1 设置颜色的方式
- color=red
- color：##ffees
- color：rgb（255.0.0）
- color：rgba（255.0.0.0.5）
3.6.1.2 字体属性
font-size=20px 设置字体大小
font-family 设置字体
font-weight设置字体粗细
3.6.1.3 背景属性
background-image，设置背景图片，且背景图片不重复，只平铺一张，并且使背景居中
<style> div{ background-image: '123.png'; background-repeat: no-repeat; background-position: center center; } </style>
3.6.1.4 display
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ display: inline; } p{ display:block; } </style> </head> <body> <div>hello</div> <p>good</p> </body> </html>
内联标签不能设置长宽，块级标签可以独占一行，可以设置标签
也可以将某个标签设置为 inline-block，这样就他同时具有内联标签和块级标签的特性