一、初识Css
1、概念
- 用于修饰标签。
- 使用css选择器需要关注两点：1、选择哪个选择器 2、如何选择需要使用css样式的标签。
- 在head中添加style标签，在style标签中添加css选择器，就可以将css样式附着到body中的标签上了。
二、选择器
1、选择器种类
（1）id选择器
- head中使用#号定位，在body中的div标签添加id属性，head中写入对应id属性的值，即可将css样式定位到标签上。
Title 我是个人
（2）class选择器
- head中使用英文.号定位，在body中的div标签添加class属性，head中写入对应class属性的值，即可将css样式定位到标签上。
Title 我是绿色
（3）标签选择器
- head中使用标签名div定位，在body中写入标签内容，head中写入对应div标签的值，即可将css样式定位到标签上。
Title lrx
（4）标签层级选择器
- head中使用标签名div里面的span标签定位，在body中写入标签内容，head中写入对应span标签的值，即可将css样式定位到标签上。
Title 123
（5）属性选择器
- 在body里面的div标签中加入自定义属性，然后head中通过使用标签名div加中括号，中括号中写全自定义属性名和值的方式，将css样式与标签进行关联。
Title 哦哦哦
区别：
- 使用标签选择器时，body中的div标签没有对应的属性，所以body中所有的div标签内容都会被附着这种选择器样式，局限性很高，只有规定了整篇标签都使用同一种样式时才会用到；
- 使用标签层级选择器时，span标签也是没有对应的属性，跟标签选择器的局限性一样，凡是符合div中有span的这个路径的标签，都会被附着相同的样式；
- id选择器和class选择器都会通过标签的属性精确定位。
2、组合选择器种类
（1）id组合选择器
div标签中，在一个HTML标签中不允许出现两个id属性：
那么如何将两个div标签附着相同的id选择器的css样式呢？可以使用id组合选择器。
- head中使用#号定位，将两个id的属性值同时写在一起，使用英文逗号间隔，在body中的div标签添加id属性，head中写入对应id属性的值，即可将css样式定位到标签上。
Title
（2）class组合选择器
div标签中，在一个HTML标签中可以同时出现两个class属性：
body中可以同时附着多个css样式，只需在body的class属性中写入附着的css样式名，使用一个空格间隔即可：
Title c1c2
可以看到，第一个标签同时附着了两个css样式。
3、选择器引入方式
（1）在head中通过style标签包裹
Title 哦哦哦
（2）直接在body里面的标签中加入style属性
Title 哦哦哦
（3）在head中引入css样式表，样式表中的内容与第一种方式在head的style标签中写的内容一样。
- 使用link标签，加入属性rel="stylesheet"，和属性href，值为引入的css的路径。
- 如果css文件所在的目录不止一层，需要将引入的css文件所在的文件夹、引入该css文件的html文件和所在的文件夹sources root，避免找不到。
Title 哦哦哦
将css所在的文件夹设置成sourceroot路径：
4、选择器选择顺序优先级
- 优先级顺序：由内而外，由近到远
- 由内到外，先id后class最后style
三、CSS属性
1、宽度、高度、背景色
Title
2、字体大小、字体粗细
- 中间使用分号分隔
哈哈哈
3、边框大小、实线、颜色
Title try a try
4、框中内容水平居中
try a try
5、框中内容垂直居中
- 垂直居中的数值与框的高度数值一致
try a try
6、浮动
- 使用float属性
Title
Title
Title
- 由于每个电脑的宽高不一致，所以使用固定高度，宽度采用百分比的方式。（注意：高度不可以使用百分比的方式，因为不显示）
sdfs
7、行内标签与块级标签相互转换
- 使用属性style="display"即可实现
（1）块级标签转成行内标签
- 使用style="display:inline"属性
sdfs
（2）行内标签转成块级标签
- 使用style=display:block属性
sdfs 
注意：
行内标签是不可以使用宽度、高度、外边距、内边距属性的，即：不识别span标签里面的这些属性，因为span标签本身是有多大占多大。
sdfs 
（3）在块级标签中使宽、高这些属性生效
- 在span标签中使用style=display：inline-block属性即可。
sdfs 
8、隐藏页面信息
- 使用style=display:none属性即可。
9、边距属性
（1）外边距
-
使用style=margin-top属性
- 不改变自身，针对外层进行像素移动，指的是自身对外层的距离
鼠标选中蓝色的内标签，然后点击右侧的margin-top数值，使用键盘的上下键，可以移动蓝色内标签：
鼠标点击标签代码，可以看到黄色部分就是内标签距离外层的距离：
（2）内边距
-
使用style=padding-top属性
- 改变自身，增加或减少自己的面积
9、分层
在写div标签时，默认有一个8px的margin属性，即与上侧、左侧、右侧都留有间距：
如果想顶格显示，就在body标签中加入属性：style=margin：0
（1）绝对定位
- 在样式中使用position:fixed内容
Title
这样绿色条就不会再随鼠标滚动了：
（2）相对定位
- 在样式中使用position:relative和position:absolute内容
- 在想要固定的div标签中加入position:relative属性，同时在针对这个标签做相对位置的div标签中加入position:absolute属性，并在这个div标签中加入相对位置的坐标，比如写入left、right、top、bottom的数值
position本身就是分层的概念，如果有两个div标签，没有进行属性设置，内容就会重合：
Title 冲鸭！！！
这时只需使用margin-top属性即可：
Title 冲鸭！！！
（3）分层优先级
- 使用属性style="z-index"，按照z-index的数值大小分层显示，即：数值大的显示在上层，数值小的显示在下层。
- z-index要与position:relative连用才能起作用。
10、小手鼠标
- 使用input标签的style="cursor: pointer"属性
鼠标悬浮到按钮上时，显示的是小手。
- 使用input标签的style="cursor: move"属性
鼠标悬浮到按钮上时，显示的是移动图标。
- 使用input标签的style="cursor: crosshair"属性
鼠标悬浮到按钮上时，显示的是十字截图图标。
11、overflow滚动条
上图中图片将黑色边框挡住了
（1）图片截取
- 在外层div标签中使用style="overflow:hidden"属性
- 当图片或内容大于外层div时，自动截取图片
使用hidden后：
（2）增加滚动条
- 在外层div标签中使用style="overflow:scroll"属性
- 无论图片大小，都增加滚动条
（3）自动增加滚动条
- 在外层div标签中使用style="overflow:auto"属性
- 当图片大小超过外层div边框时，增加滚动条
12、背景图
（1）背景图(默认堆叠)
- 使用style=“background-image:url()”属性
（2）背景图不堆叠
- 使用style=“background-repeat: no-repeat”属性
（3）背景图横向堆叠
- 使用style=“background-repeat:repeat-x”属性
（4）背景图纵向堆叠
- 使用style=“background-repeat:repeat-y”属性
repeat的作用：
图片越大越占空间，如果背景图是一个渐变色的图，那么可以只使用一张小图，然后以某种方式堆叠即可。
（5）背景图-POSITION
- 使用style="background-position"属性
- 作用：只使用一张大图，通过改变position的x、y坐标来引入图片，实际整个HTML页面是一整张大图，这张大图画了所有的图标
13、鼠标悬浮时显示
- 使用hover属性
- 该属性必须要在head中使用
.hover:hover{ background-color: red; color: black; width: 151px } - 不悬浮和悬浮的样式都要在head中使用，放在body中就不能按顺序执行了
侯宁讲笑话么?
