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;
}
本来是
弹性布局之后
8803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
