CSS
CSS是什么
层叠样式表 (Cascading Style Sheets).CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.说白了就是让网页变得好看
什么是样式呢？
大小，位置，间距，颜色，字体，边框，背景…统称为样式，也就是描述了一个网页长啥样
什么是层叠呢？
针对一个html的元素/标签，可以同时应用多组css样式，多组样式会叠在一起（就像打游戏的叠buff的感觉），一个元素的属性，由很多方面，描述大小是一个样式，描述颜色，是一个样式，需要把这些样式都叠加起来，才能组成一个漂亮的html页面
基本语法
选择器 + {一条/N条声明}
选择器决定针对谁修改 (找谁)
声明决定修改啥. (干啥)
声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值
<style>p {/* 设置字体颜色 */color: red;/* 设置字体大小 */font-size: 30px;}
</style>
<p>hello</p>
注意:
CSS 要写到 style 标签中(后面还会介绍其他写法)
style 标签可以放到页面任意位置. 一般放到 head 标签内.
CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .
CSS的引入方式
和html，js类似，css也是在浏览器中运行的
1.内部样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSOne</title><style>div{font-size: 200px;color: green;}</style>
</head>
<body><div>滴滴答答滴</div>
</body>
</html>
2.外部样式
3.内联样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSOne</title></head>
<body><div style="color: blueviolet; font-size: 200px;">滴滴答答滴</div>
</body>
</html>
内联样式的优先级比上面两种高
实际开发中，上述三种写法都很常见
代码风格
样式格式
- 紧凑风格
p { color: red; font-size: 30px;}
2，展开风格（推荐）
p {color: red;font-size: 30px;
}
样式大小写
虽然 CSS 不区分大小写, 我们开发时统一使用小写字母
空格规范
冒号后面带空格
选择器和 { 之间也有一个空格.
CSS选择器
选择器的功能
选中页面中指定的标签元素.
要先选中元素, 才能设置元素的属性.
选择器的种类
1.基础选择器
（1）.标签选择器
使用标签名，把页面中所有同名标签的元素都选中了
缺点：难以针对某个元素进行个性化定制，比如下面代码想让呃呃呃变成蓝色，就不能只通过标签选择器了，需要搭配别的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSOne</title><style>div{font-size: 100px;color: greenyellow;}</style>
</head>
<body><div>啊啊啊</div><div>哦哦哦</div><div>呃呃呃</div>
</body>
</html>
以上代码就是把所有在div标签里面的东西都变成黄绿色的了
（2）.类选择器
CSS中创建一个类名，这个类名对应一组css属性，让指定的html元素应用这样的类名即可
注意：这里的类和java的类没有任何关系
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSOne</title><style>/*类名就叫eee，让下面呃呃呃的div引用这个类，就可以把这个呃呃呃变成红色的了*/.eee{color: red;}div{font-size: 100px;color: greenyellow;}</style>
</head>
<body><div>啊啊啊</div><div>哦哦哦</div><div class="eee">呃呃呃</div>
</body>
</html>
```
**注意：一个类名是可以被多个标签引用的**
**可以定义很多的CSS类，每个类都是一组属性的集合**
**一个标签还可以引入多个类名，多个类名之间用空格来分割**比如一大串字符，想让某些字符变色，咋整呢？
比如有 哦哦哦哦哦哦哦哦哦滴滴滴滴哦哦哦哦哦哦，我想让滴滴滴滴变色，加入span就好了```css
<div>哦哦哦哦哦哦哦哦哦<span class="eee">滴滴滴滴</span>哦哦哦哦哦哦</div>
（3）.id选择器
一个html标签，可以有一个id属性，这个属性的值作为标签的身份标识，在页面中也是唯一的，同样也可以通过id选择器，把这个指定的元素给获取到
上述选择器，是css中最基础的选择器，其实css还有很多复杂的“符合选择器”，这里只介绍一种
2.复合选择器
后代选择器：效果就是把上述三种选择器进行组合，同时能够体现出“标签的层次结构”
CSS选择器种类非常多，用法也很丰富，此处只学习上述四种写法！！！
常用元素属性
属性也就是你的{}里的键值对都能写啥，css这里的属性是非常多的，不要背，多去查,这里只介绍常见属性
字体属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSOne</title>
</head>
<body><div class="one">啊啊啊~~~我的妻~~~王氏~宝钏~~</div><style>.one{/*设置字体样式*/font-family: '微软雅黑';/*设置像素大小*/font-size: 80px;/*设置字体粗细，这个值的范围是100-900，数越大，字越粗*/font-weight: 900;/*让字体倾斜*/font-style: italic;}</style>
</body>
</html>
以上几个属性的叠加，构造成了下图
文本相关
.two{/* 文本颜色 */color: brown;/* 文本对齐：左对齐（left），右对齐（right），居中（center） */text-align: left;/* 文本装饰：加个下划线啥的 */text-decoration: underline;/* 文本缩进，首行缩进多大空间 */text-indent: 20px;/* 行高（行间距） */line-height: 300px;}
其中color属性的值，有很多种写法
1.直接写一些表示颜色的单词
2.使用rgb的方式来表示
rgb–red green blue
每个分量都是一个字节，取值范围是0-255
color: rgb(255,0,0);
通过上述的操作，就可以调出一些非常好看的颜色
3.使用十六进制的方式表示（本质也是RGB）
color: #ff0000;
/*红色*/
背景属性
拿个蔡徐坤的照片举例
.three{font-size: 100px;width: 2000px;height: 1600px;color: red;/* 设置背景颜色 */background-color: pink;/* 设置背景图片 */background-image: url(image/kun.png);/* 禁止平铺 */background-repeat: no-repeat;/* 垂直居中，水平居中 */background-position: center center;/* 设置背景大小 */background-size: 2000px 1600px;}
设置圆角矩形
平常的html页面都是第一种，圆角矩形的第二种
.four {width: 500px;height: 300px;background-color: red;/* 下面是设置圆角矩形，10就是内切圆半径 */border-radius: 100px;}
对于后端来说，上述交代了这么多属性，不用记！！！！！！！！现在就是看一下，有个印象，之后稍微练习一下，加深一下印象就够了，过几天忘了也没啥，用的时候去查看就好了
盒子模型
边框
基础属性
粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color
<div>test</div>
div {width: 500px;height: 250px;border-width: 10px;border-style: solid;border-color: green;
}
支持简写, 没有顺序要求
border: 1px solid red;
可以改四个方向的任意边框.
border-top/bottom/left/right
以下的代码只给上边框设为红色, 其余为蓝色.
利用到的层叠性, 就近原则的生效.
border: 1px solid blue;
border-top: red;
边框会撑大盒子
可以看到, width, height 是 500*250, 而最终整个盒子大小是 520 * 270. 边框10个像素相当于扩大了大小
通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.
* {box-sizing: border-box;
}
- 为通配符选择器.
内边距
padding 设置内容和边框之间的距离.
默认内容是顶着边框来放置的. 用 padding 来控制这个距离
可以给四个方向都加上边距
padding-top
padding-bottom
padding-left
padding-right
加上 padding 之后
div {height: 200px;width: 300px;padding-top: 5px;padding-left: 10px
}
此时可以看到带有了一个绿色的内边距.
注意:
整个盒子的大小从原来的 300 * 200 => 310 * 205. 说明内边距也会影响到盒子大小(撑大盒
子).
使用 box-sizing: border-box 属性也可以使内边距不再撑大盒子. (和上面 border 类似)
复合写法
可以把多个方向的 padding 合并到一起. [四种情况都要记住, 都很常见]
padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)
div {* {/* 此时边框不会撑大元素了. */box-sizing: border-box;}width: 500px;height: 300px;background-color: gray;margin-top: 50px; border: red 20px solid; /* 边框还可以分开设置 */border-left: red 20px solid;border-right: green 20px dotted;border-top: blue 20px dashed;border-bottom: orange 20px solid;/* 给四个方向都设置 30px 内边距 */padding: 30px; /* 也可以给四个方向分别设置内边距 */padding-left: 20px;padding-top: 50px; /* 给上下设置 30px, 左右设置 20px */padding: 30px 20px; 给四个方向分别设置. 上右下左 顺时针顺序设置的padding: 10px 20px 30px 40px; }
外边距
基础写法
控制盒子和盒子之间的距离.
可以给四个方向都加上边距
margin-top
margin-bottom
margin-left
margin-right
<div class="first">蛤蛤</div>
<div>呵呵</div>
div {background-color: red;width: 200px;height: 200px;
}
.first {margin-bottom: 20px;
}
复合写法
规则同 padding
margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
把margin左右方向设置成auto，可以实现让元素水平居中
如果把垂直设为auto，则不能实现元素居中
.two {width: 500px;height: 300px;background-color: gray;/* 让元素水平居中 */margin-left: auto;margin-right: auto;}
弹性布局
刚才说，对于块级元素，默认是独占一行（垂直方向排列的），有时候想让块级元素水平排列，此时就可以使用弹性布局了
下图就是弹性布局
1.flex 布局基本概念
flex 是 flexible box 的缩写. 意思为 “弹性盒子”.
任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.
被设置为 display:flex 属性的元素, 称为 flex container
某个元素一旦开启了弹性布局，此时内部的子元素就会按照水平方向排列，子元素内的子元素不受影响
flex就是弹性布局
2.justify-content
设置水平方向的排列规则，是居中，还是靠右靠左，还是分散开
3.align-items
设置垂直方向的排列规则
.one {width: 1000px;height: 300px;background-color: gray;display: flex;justify-content: space-between;align-items: center;}
本来是
弹性布局之后
