目录
一、CSS概念
1、定义
CSS 能够对网页中元素位置的排版进行控制来实现美化页面的效果，能够做到页面的样式和结构分离。
2、基本语法规范
选择器 {
一条/N条声明；
}；
选择器决定针对谁修改；声明决定修改的样式，声明使用键值对
注：style标签可以放到页面任意位置，一般放到head标签内。CSS 使用 /* */ 作为注释。
二、CSS引入方式
1、内部样式表
内部样式写在style标签中、嵌入到html标签内。
style标签放到哪里都行，但一般都是放到head标签中。
例：
<style>
div {
color: red;
}
</style>
- 优点: 让样式和页面结构分离.
- 缺点: 分离的还不够彻底，尤其是css内容较多时
2、行内样式表
通过style属性来指定某个标签的样式，只针对某个标签生效，不能写太复杂的样式。
例：
<div style="color:blue">hello world</div>注：这种写法优先级较高, 会覆盖其他的样式.
3、外部样式
首先创建一个 css 文件，然后使用link标签引入css
例：
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>111</div>
</body>div {
color: red;
}
- 优点：样式和结构彻底分离
- 缺点：受到浏览器缓存影响，修改之后不一定立刻生效
三、选择器
1、基础选择器
基础选择器是由单个选择器构成的
（1）、标签选择器
特点：能快速将同一类型的标签都选择出来，但是不能差异化选择
<style>
div {
color: red;
}
</style>
<div>hehe</div>
<div>haha</div>（2）、类选择器
特点：差异化表示不同的标签，可以让多个标签的都使用同一个标签
- 类名用“.”开头，标签使用class属性来调用。
- 一个类可以被多个标签使用，一个标签也能使用多个类。
- 多个类名要使用空格分割且类名不要使用纯数字，或者中文以及标签名来命名类名
例：
<style>
.red {
background-color: red;
}
</style>
<div class="red"></div>（3）、id选择器
- 使用“#”开头来表示id选择器
- id选择器的值和html中某个元素的id值相同
- html的元素id不必带#
- id是唯一的，不能被多个标签使用
<style>
#one {
color: red;
}
</style>
<div id="one">hehe</div>（4）、通配符选择器
使用"*"的定义，选取所有的标签
例：
* {
color: red;
}总结
| 作用 | 特点 | |
| 标签选择器 | 能选出所有相同的标签 | 不能差异化选择 |
| 类选择器 | 能选出一个或多个标签 | 根据需求选择 |
| id选择器 | 能选出一个标签 | 同一个id在一个HTML中只能出现一次 |
| 通配符选择器 | 选择所有标签 | 特殊情况下使用 |
2、复合选择器
复合选择器是把多种基础选择器综合运用起来
（1）、后代选择器
后代选择器又叫包含选择器，是指选择某个父元素中的某个子元素
元素1 元素2 {
样式声明
}
注：
- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级，元素 2 是子级，只选择元素 2，不影响元素 1
（2）、子选择器
子选择器和后代选择器类似，但使用大于号分割，只能选择子标签
元素1>元素2 {
样式声明
}
例：
.two>a {
color: red;
}（3）、并集选择器
并集选择器用于选择多组标签(集体声明)，通过逗号分割等多个元素表示同时选中元素 1 和 元素 2，任何基础选择器都可以使用并集选择器
元素1, 元素2 {
样式声明
}
例：
<div>111</div>
<ul>
<li>222</li>
</ul>
div, li {
color: red;
}（4）、伪类选择器
【1】、链接伪类选择器
- a:link 选择未被访问过的链接
- a:visited 选择已经被访问过的链接
- a:hover 选择鼠标指针悬停上的链接
- a:active 选择活动链接
例：
<a href="#">111</a>
a:link {
color: black;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: blue;
}
【2】、force 伪类选择器
选取获取焦点的 input 表单元素
例：
<div class="three">
<input type="text">
</div>
.three>input:focus {
color: red;
}总结
| 选择器 | 作用 | 注意事项 |
| 后代选择器 | 选择后代元素 | 可以是孙子元素 |
| 子选择器 | 选择子元素 | 只能选儿子，不能选孙子 |
| 并集选择器 | 选择相同样式的元素 | 更好的做到代码重用 |
| 链接结伪类选择器 | 选择不同状态的链接 | 重点掌握a:hover的写法 |
| :focuse伪类选择器 | 选择被选中的元素 | 重点掌握input:focus |
四、常用元素属性
1、字体属性
（1）、设置字体
使用“font-family：字体”来设置字体
多个字体之间使用逗号分隔(从左到右查找字体，如果都找不到会使用默认字体)，如果字体名有空格，使用引号包裹。
例：
<style>
.one {
font-family: '宋体' 'Microsoft YaHei';
}
</style>
<div class="font-family">
<div class="one">111</div>
</div>（2）、大小
使用“ font-size：大小”来设置字体大小
<style>
.one {
font-size: 40px;
}
</style>
<div>
<div class="one">111</div>
</div>（3）、粗细
使用“ font-weight：大小”来表示字体粗细
数字的粗细范围从100~900；700是粗体bold，400是普通字体
<style>
.one {
font-weight: 900;
}
</style>
<div>
<div class="one">111</div>
</div>（4）、字体样式
使用“font-style: 样式”来表示字体样式，normal是普通样式，italic是倾斜样式
<style>
.one {
font-style: normal;
}
.two {
font-style: italic;
}
</style>
<div>
<div class="one">111</div>
<div class="two">222</div>
</div>2、文本属性
（1）、文本颜色
我们使用R(red)、G(green)、B(blue)的方式表示颜色，三种颜色按照不同的比例搭配，就能混合出各种五彩斑斓的效果。
计算机中针对R、G、B三个分量，分别使用一个字节表示(表示的范围是 0-255， 十六进制表示为00~FF)。
数值越大，表示该分量的颜色就越浓，255.255.255表示白色，0.0.0表示黑色。
例：
color: red;
color: #ff0000;
color: rgb(255, 0, 0);（2）、文本对齐
text-align不光能控制文本对齐，也能控制图片等元素居中、靠右或靠左。
- center: 居中对齐
- left: 左对齐
- right: 右对齐
例：
<style>
.one {
text-align: left;
}
.two {
text-align: right;
}
.three {
text-align: center;
}
</style>
<div>
<div class="one">左对齐</div>
<div class="two">右对齐</div>
<div class="three">居中对齐</div>
</div>（3）、文本装饰
- underline：下划线
- none：无作用，可去除去掉下划线等操作
- overline：上划线
- line-through：删除线
例：
<style>
.one {
text-decoration: none;
}
.two {
text-decoration: underline;
}
.three {
text-decoration: overline;
}
.four {
text-decoration: line-through;
}
</style>
<div>
<div class="one">无作用</div>
<div class="two">下划线</div>
<div class="three">上划线</div>
<div class="four">删除线</div>
</div>（4）、文本缩进
可以通过text-indent来控制段落的首行缩进 (其他行不影响)，单位可以使用 px 或者 em。
注：缩进可以是负的，表示往左缩进
例：
<style>
.one {
text-indent: 2em;
}
.two {
text-indent: -2em;
}
</style>
<div>
<div class="one">正常缩进</div>
<div class="two">反向缩进</div>
</div>（5）、行高
使用“line-height:n”来表示上下文本行之间的基线距离
3、背景属性
（1）、背景颜色
background-color：指定颜色
默认是透明的，可以通过设置颜色的方式修改
<style>
.one {
background-color: red;
}
.two {
background-color: green;
}
.three {
background-color: transparent;
}
</style>
<div>
<div class="one">红色背景</div>
<div class="two">绿色背景</div>
<div class="three">透明背景</div>
</div>（2）、背景图片
background-image: url(路径)
注意:
- url 可以是绝对路径，也可以是相对路径
- url 上可以加引号，也可以不加
例：
<style>
.one {
background-image: url(rose.jpg);
}
</style>
<div>
<div class="one">背景图片</div>
</div>（3）、背景平铺
background-repeat: 平铺方式
- repeat: 平铺（默认）
- no-repeat: 不平铺
- repeat-x: 水平平铺
- repeat-y: 垂直平铺
例：
<style>
.one {
background-image: url(111.jpg);
height: 300px;
background-repeat: no-repeat;
}
.two {
background-image: url(222.jpg);
height: 300px;
background-repeat: repeat-x;
}
.three {
background-image: url(333.jpg);
height: 300px;
background-repeat: repeat-y;
}
</style>
<div>
<div class="one">不平铺</div>
<div class="two">水平平铺</div>
<div class="three">垂直平铺</div>
</div>注：背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方
（4）、背景位置
background-position: x y;
- 方位名词: (top, left, right, bottom)
- 精确单位: 坐标或者百分比(以左上角为原点)
- 混合单位: 同时包含方位名词和精确单位
<style>
.one {
background-image: url(rose.jpg);
height: 500px;
background-repeat: no-repeat;
background-position: center;
}
</style>
<div>
<div class="one">背景居中</div>
</div>（5）、背景尺寸
background-size:length | percentage | cover | contain
- length：填具体的数值，如40px、60px，表示宽度为40px、高度为 60px
- percentage：填百分比，按照父元素的尺寸设置
- cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中
- contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
例：
<style>
.one {
width: 500px;
height: 300px;
background-image: url(rose.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>
<div class="one">背景尺寸</div>4、圆角矩形
（1）、定义
通过 border-radius: length 使边框带圆角效果，length是内切圆的半径，数值越大弧线越强。
让 border-radius 的值为正方形宽度的一半可生成圆形
让 border-radius 的值为矩形高度的一半可生成圆角矩形
五、元素的显示模式
1、块级元素
常见元素：h1 - h6、p、div、ul、ol、li.......
特点：独占一行，高度、宽度、内外边距和行高都可以控制，宽度默认是父级元素宽度的 100%，是一个盒子且里面可以放行内元素和块级元素
注：文字类的元素内不能使用块级元素；p 标签主要用于存放文字，内部不能放块级元素
2、行内元素/内联元素
常见的元素：a、strong、b、em、i、span......
特点：不独占一行，一行可以显示多个
设置高度、宽度、行高无效，左右外边距有效(上下无效)，内边距有效。
默认宽度就是本身的内容，行内元素只能容纳文本和其他行内元素, 不能放块级元素
注意：a 标签中不能再放 a 标签；a 标签里可以放块级元素，但建议先把 a 转换成块级元素。
3、区别
- 块级元素独占一行，行内元素不独占一行
- 块级元素可以设置宽高，行内元素不能设置宽高.
- 块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置
4、改变显示模式
使用display属性可以修改元素的显示模式：可以把 div 等变成行内元素，也可以把a、 span等变成块级元素.
- display: block 改成块级元素
- display: inline 改成行内元素
- display: inline-block 改成行内块元素
六、盒模型
每一个HTML元素相当于是一个矩形的盒子，这个盒子由以下几个部分构成：边框 border、内容 content、内边距 padding、外边距 margin
1、边框
（1）、基础属性
- 粗细：border-width
- 样式：border-style。默认没边框、solid是实线边框、dashed是虚线边框、dotted是点线边框
- 颜色：border-color
例：
div {
width: 50px;
height: 25px;
border-width: 1px;
border-style: solid;
border-color: green;
}（2）、边框会撑大盒子
通过 box-sizing 属性可以修改浏览器的行为，使边框不再撑大盒子。
例：
* {
box-sizing: border-box;
}
2、内边距
padding设置内容和边框之间的距离。
（1）、基础写法
默认内容是顶着边框来放置的，可以用 padding 来控制距离。
可以给四个方向都加上边距：padding-top、padding-bottom、padding-left、padding-right。
（2）、复合写法
- padding: 5px; 表示四个方向都是5px
- padding: 5px 10px; 表示上下内边距5px, 左右内边距为10px
- padding: 5px 10px 20px; 表示上边距5px, 左右内边距为10px, 下内边距为20px
- padding: 5px 10px 20px 30px; 表示上内边距为5px, 右内边距为10px, 下内边距为20px, 左内边距为30px
3、外边距
（1）、基础写法
外边距是用来控制盒子和盒子之间的距离，可以给四个方向都加上边距：margin-top、margin-bottom、margin-left、margin-right。
例：
<div class="first">111</div>
.first {
margin-bottom: 20px;
}（2）、复合写法
margin的复合写法同padding的复合写法。
（3）、块级元素水平居中
- margin-left: auto;
- margin-right: auto;
- margin: auto;
- margin: 0 auto;
注：margin: auto 是给块级元素用的，text-align: center 是让行内元素或者行内块元素居中的。对于垂直居中不能使用 "上下 margin 为 auto " 的方式。
七、弹性布局
1、flex布局
任何一个 html 元素都可以指定为 display:flex 完成弹性布局，flex 布局的本质是给父盒添加 display:flex 属性以此来控制子盒的位置和排列方式。
设置为 display:flex 属性的元素，称为 flex container。它的所有子元素立刻称为该容器的成员，称为 flex item。子元素可以纵向排列也可以横向排列。
注意：当父元素设置为 display: flex 后，子元素的 float、clear、vertical-align 都会失效。
2、常用属性
（1）、justify-content
justify-content可以用来设置主轴上的子元素排列方式
- 未指定/或设置 justify-content: flex-start，默认从左到右的方向排列
- 设置 justify-content: flex-end，元素都排列在右侧
- 设置 jutify-content: center，元素居中排列
- 设置 justify-content: space-around，两边留有间隙，间隔排列平分剩余空间
- 设置 justify-content: space-between，两边没有间隙，间隔排列平分所有空间
（2）、align-items
align-items用来设置侧轴上的元素排列方式，可以使用 align-items 实现垂直居中。
- 设置 align-items: stretch，默认值，行拉伸以占据剩余空间
- 设置 align-items: center，朝着弹性容器的中央对行打包
- 设置 align-items: flex-start，朝着弹性容器的开头对行打包
- 设置 align-items: flex-end，朝着弹性容器的结尾对行打包
- 设置 align-items: space-between，行均匀分布在弹性容器中
- 设置 align-items: space-around，行均匀分布在弹性容器中，两端各占一半
注：align-items 只能针对单行元素来实现，如果有多行元素就需要使用 item-contents
3190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
