目录
CSS概述
CSS（Cascading Style Sheets,层叠样式表），又称级联样式表，简称样式表。
文件后缀名.css
用于HTML文档中元素样式的定义
语法：CSS规则由两个部分构成：选择器，以及一条或多条声明。
代码片段：
<style>
h1{
color:blue;
font-size:12px;
}
</style>选择器通常是需要改变样式的HTML元素
每条声明由一个属性和一个值组成
属性是希望设置的样式属性。每个属性都有一个值，属性和值通过冒号分开。
CSS引入方式
内联样式
使用style关键字直接写在对应标签中
例子：
<h1 style = "color:red; font-size: 30px;">我是h1标签</h1>缺点：只适用于单个标签样式修改，不利于整体性和规划性，且对于文档较多的项目不利于维护。
内部样式
写在HTML文档的<head>标签内，使用<style>标签定义内部样式表
例子：
<head>
<style>
p{
color:blue;
}
</style>
</head>缺点：只适用于单个页面的样式设置，多个HTML文档无法使用
外部样式
适用于多个文档样式修改。使用<link>标签将CSS文件链接到文档中。
例子：
<link rel = "stylesheet" type ="text/css" href = "demo.css">demo.css文件中写css样式，例子：
h1{
color:red;
font-size:50px;
}
p{
color:blue;
}选择器
全局选择器
可以与任何元素匹配，优先级最低，一般用作样式初始化,用字符*（通配符）开始，大括号里面写样式。
例子
*{
margin: 0;
padding:0;
}元素选择器
使用HTML文档中的标签作为开头
元素选择器选择的是文档中使用了这个标签的所有标签，而不是一个标签
例子
p{
color:blue;
font-size:20px;
}若想一句话中的某一部分使用另一种样式可以这样写
<p>这部分是<span>重点</span>要注意</p>
span{
color:red;
}类选择器
使用一个圆点开头 . 来定义，可以对想使用样式的标签单独设置样式，也可以对一类标签设置样式。类名由字母、数字、-组成，推荐使用字母、-
例子
<h1 class = "classone">hello</h1>
/*css文档中的代码*/
.classone{
color:red;
}
注意：类选择器可以被多个标签使用，类名不能以数字开头，同一个标签可以有多个类选择器，用空格隔开
例子
<h2 class = "classone classtwo">我是h2标签</h2>ID选择器
只能对某一个特定的标签使用，且只能使用一次。以#开头
（注意：ID唯一且不能以数字开头）
例子
<h2 id = "demo">hello</h2>
#demo{
color:blue;
}合并选择器
语法：选择器1,选择器2,...{}
将多个标签设置同样的样式，减少代码重复
选择器可以是上述的某一种
例子
.p,.h1{
color:blue;
}选择器优先级
第一优先级：属性后面直接使用！important（一般不建议使用）
具体使用情况详见CSS !important 规则 | 菜鸟教程 (runoob.com)
其余选择器按照如下方式
内联（行内）样式（权重1000）>ID选择器（100）>类选择器（10）>标签选择器（1）>通用选择器（0）
当多个不同的选择器写在一起时，优先级需要根据权重进行计算比较。
规律：一般选择器的选择范围越精确，优先级会越高。
字体属性
css字体属性定义字体、颜色、大小、加粗、文字样式
color属性：设置文本的颜色
（颜色属性可以是颜色字母，也可以时颜色十六进制编码，或者rgb(x,x,x)值）
font-size：设置文本大小
chrome浏览器接受最小字体是12px
font-weight：设置文本的粗细
| 值 | 具体样式 |
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100-900 | 定义由细到粗（400等同于默认，700等同于bold） |
font-style：设置文本的样式
| 值 | 描述 |
| normal | 默认值 |
| italic | 定义斜体 |
font-family：指定元素字体，每个值用逗号隔开，字体名称中有空格，必须加上引号
font-family:"Microsoft YaHei","SimHei";文本属性
text-align：设置元素文本的对齐方式
| 值 | 描述 |
| left | 文本居左，默认 |
| right | 文本居右 |
| center | 文本居中 |
text-decoration：添加文本修饰
| 值 | 描述 |
| underline | 定义下划线 |
| overline | 定义上划线 |
| line-through | 定义删除线 |
text-transfrom：控制文本大小写
| 值 | 描述 |
| captialize | 定义每个单词开头字母大写 |
| uppercase | 定义全部大写字母 |
| lowercase | 定义全部小写字母 |
text-indent：设置文本首行文字的缩进
注：可以是负值，将第一行左缩进
背景属性
backgroud-color：设置背景颜色
background-color:#ffff00;backgroud-image：设置背景图片
background-image:url("1.jpeg");background-position：设置背景图片显示位置，默认值是：0% 0%
| 值 | 描述 |
| left top | 左上角 |
| left center | 左 中 |
| left bottom | 左 下 |
| right center | 右上角 |
| right bottom | 右 下 |
| center top | 中 上 |
| center center | 中 中 |
| center bottom | 中 下 |
| x% y% | x为水平位置，y为垂直位置 |
| xpos ypos | 像素值 |
background-repeat：设置背景图片如何填充(设置图片如何平铺）
| 值 | 描述 |
| repeat | 默认值，水平垂直都平铺 |
| repeat-x | 只向水平方向平铺 |
| repeat-y | 只向垂直方向平铺 |
| no-repeat | 不平铺 |
background-repeat:no-repeat;background-size：设置背景图片大小属性
| 值 | 描述 |
| length | 设置图片宽高，第一个值是宽度，第二个值是高度，只设置一个，第二值为auto |
| percentage | 相对位置区域的百分比，数据同上 |
| cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 |
| contain | 保持图片纵横比并将图片缩放成适合背景定位区域的最大大小 |
表格属性
表格边框
border属性:添加边框
border:1px solid black;折叠边框
border-collapse：设置表格边框是否被折叠成单一的边框或者隔开
table{
border-collapse:collapse;
}表格宽度和高度
width和height属性定义表格的宽度和高度
表格文字对齐
text-align：水平对齐
vertical-align：垂直对齐
td{text-align:center;}
td{vertical-align:top;}
表格填充
使用td或者th元素的填充属性
td{padding:20px;}表格颜色
指定边框颜色
table,td,th{ border:3px solid blue;}
td{ backgroung-color:green;color:red;}关系选择器
后代选择器：选择所有被父元素包含的子元素，写法是中间用空格
例子
<ul>
<li>小猫</li>
<li>小狗</li>
</ul>
<ol>
<li>熊猫</li>
</ol>ul li{
color:blue;
}子代选择器
只对父元素的直接子元素起作用，写法用>隔开
div>p{
font-size:30px;
}相邻兄弟选择器
作用于相邻的兄弟元素，只作用于最近之后的第一个，写法用+隔开
h3+p{color:blue;}通用兄弟选择器
作用于该元素之后的所有兄弟元素，写法用~隔开
h3~p{
font-size:30px;
}CSS盒子模型
盒子模型概念：
所有的HTML元素可以看作盒子，CSS盒模型包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）。
外边距（margin）：两个值，上下距离、左右距离
边框（border）：在内边距和外边距之间
内边距（padding）：清楚内容周围的区域，两个值，上下距离，左右距离
实际内容（content）：文本或者图片
div{
width:100px;
height:100px;
padding:10ppx;
border:3px solid blue;
margin: 30px;
}弹性盒子模型
当页面需要适应不同的屏幕大小以及设备类型时确保元素同时拥有恰当的行为布局方式。
CSS3弹性盒模型内容
弹性盒子是由弹性容器和弹性子元素组成
弹性容器通过设置display属性的值为flex将其定义为弹性容器
弹性容器内包含一个或多个子弹性元素
1.display属性：开启弹性盒子，子元素默认水平排列
display其他值，见文档CSS display 属性 | 菜鸟教程 (runoob.com)
display:flex;2.flex-direction属性：设置子元素在父容器中的位置
row:横向从左到右排列，默认的排列方式
row-reverse：反转横向排列，在右上角显示
column：纵向排列
column-reverse：反转纵向排列，在左下角显示
3.justifly-content（内容对齐）属性：沿着主轴线对齐
flex-start：默认值，向行头紧挨着填充
flex-end：向行尾紧挨着填充
center：居中紧挨着填充
4.align-items属性：设置弹性盒子元素在纵轴上的对称方式
flex-start：弹性盒子元素的纵轴起始位置边界紧靠纵轴起始边界
flex-end：弹性盒子元素的纵轴起始位置紧靠着纵轴结束边界
center：弹性盒子在该行纵轴居中位置
子元素上的属性
5.flex
根据弹性盒子所设置的扩展因子作为比率来分配空间（所有盒子的权重进行分配）
默认值为0，超出按100%
设置了这个属性，宽度属性失效。
flex-grow也可以实现这种效果，但其分配空间的计算方式与flex有些许差别
文档流
文档中可显示对象在排列时所占用的位置
例如：块元素自上而下排列，行内元素从左至右排列
文档流中的问题
高矮不齐，底边对齐
<span>hello</span>
<img src="1.jpeg" alt="">img{
width:200px;
}空格折叠
<p>hello This is a text. </p>显示效果只有一个空格
图片之间的空隙问题
有空隙：
<img src="1.jpeg" alt="">
<img src="1.jpeg" alt="">无空隙：
<img src="1.jpeg" alt=""><img src="1.jpeg" alt="">使用脱离文档流的方式，有以下三种方式：
- 浮动
- 绝对定位
- 固定定位
浮动
float属性定义元素无论在哪个方向，任何元素都可以浮动。只有左右，没有上下。使用之后脱离文档流。
| 值 | 描述 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
元素向左浮动
会出现折叠效果，由于脱离文档流，页面中会增加一个浮动图层放置元素内容。
<div class="box"></div>
<div class="container"></div>.box{
width:200px;
height: 200px;
background-color:blue;
float:left;
}
.container{
width:400px;
height:400px;
background-color:red;
}为box添加浮动效果，出现两个div折叠在一起的效果。（主要解决高矮不齐但又想在同一行）
<div>
<img src="1.jpeg" alt="">
<img src="1.jpeg" alt="">
</div>img{
width:500px;
float:left;
}给图片标签添加浮动效果，解决图片之间有空虚的问题。
元素向右浮动
<div class="box"></div>
<div class="container"></div>.box{
width:200px;
height: 200px;
background-color:blue;
float:right;
}
.container{
width:400px;
height:400px;
background-color:red;
}所有元素向左浮动
用法：无序列表上下排列变成左右排列
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>ul li{
float:left;
margin:0 30px;
}注：当容器不足时，会在下一行摆放
清除浮动
浮动带来的问题：
元素浮动后，会脱离文档流向左或向右浮动
浮动元素会造成父元素高度塌陷
子元素浮动影响父元素的高度大小，若父元素没有设置高度，子元素设置了浮动，父元素的高度为0，效果导致父元素消失。
解决办法：父元素设置高度，确保不会塌陷。
后续元素会受到影响
在子元素后续没有浮动的元素位置会被折叠，导致排序混乱
解决办法：使用属性clear清除浮动
overflow清除浮动
若父元素存在了塌陷且影响到了子元素，这时父元素不设置高度，直接在样式里面使用overflow属性，添加语句overflow:hidden;
伪对象方式
若父级元素塌陷且同级元素也受到影响，还可以使用伪对象方式处理
为父级元素添加伪类标签after，设置空的内容，并且使用clear:both;
这种情况下不设置父级元素高度（这种方式写的代码比上一种方式较多，多数选择上一种）
.container::after{
content:"";
/*此元素将显示为块级元素，此元素前后会带有换行符。*/
display:block;
clear:both;
}定位
使用position属性指定元素位置
| 值 | 描述 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
后两种值会脱离文档流
设置定位后，使用left、top、right、bottom调整位置。
相对定位
<div class="box"></div>.box{
width:200px;
height:200px;
background-color:blue;
position:relative;
left:300px;
top:400px;
}绝对定位
<div class="box1"></div>.box1{
width:200px;
height:200px;
background-color:blue;
position:absolute;
left:300px;
top:400px;
}绝对定位会出现新的层，设置几个就出现几层，常用来满足有折叠需求的效果。
绝对定位会随着页面滚动而滚动。
固定定位
<div class="box2"></div>.box2{
width:200px;
height:200px;
background-color:blue;
position:fixed;
left:300px;
top:400px;
}固定定位会随着页面滚动固定在某个位置，常用于固定侧边栏的使用。
注意：设置定位后，相对定位和绝对定位时相对于具有定位的父级元素进行位置调整，如果没有父级元素，会继续向上逐级寻找直到顶层文档。（即这两种定位需要有参照，有父级参照随着父级移动，没有父级参照，参照文档移动）
Z-index
Z-index属性设置元素的堆叠顺序。拥有更高的堆叠顺序元素会处于堆叠顺序较低的元素前面
<div class="box1"></div>
<div class="box2"></div>.box1{
width:300px;
height:300px;
background-color:blue;
position:absoulte;
z-index:2;
}
.box2{
width:500px;
height:500px;
background-color:red;
position:absolute;
z-index:1;
}对于绝对定位后面的会盖住前面的。若想前面的覆盖后面的可以添加z-index属性。谁大谁在上面。
CSS3常用新特性
圆角
border-radius属性，给元素制作圆角
| 值 | 描述 |
| 四个值 | 第一个值为左上，第二个值为右上，第三个值右下，第四个值左下 |
| 三个值 | 第一个左上，第二个右上左下，第三个右下 |
| 两个值 | 第一个左上右下，第二个右上左下 |
| 一个值 | 四个圆角相同 |
<div class="box"></div>.box{
width:300px;
height:300px;
background-color:blue;
border-radius:10px;
/*border-radius:100%;圆形*/
/*border-radius:6px 7px;*/
/*border-radius:5px 6px 7px;*/
/*border-radius:5px 3px 6px 7px;*/
}阴影
box-shadow添加阴影效果
box-shadow:h-shadow v-shadow blur color;| 值 | 描述 |
| h-shadow | 水平阴影的位置（必选） |
| v-shadow | 垂直阴影的位置（必选） |
| blur | 模糊距离（可选） |
| color | 阴影的颜色（可选） |
动画
让元素从一个样式逐渐变化成另一个样式
可以改变任意多的样式，任意多的次数
使用百分比（0%表示开始，100%表示动画结束）来规定变化发生的时间，
或者用关键词“from”和“to”。
@keyframes创建动画
使用@keyframes规则，创建动画(name为动画名称）
@keyframes name{
from{
}
to{
}
}@keyframes name{
0%{
background-color:red;
}
50%{
background-color:green;
}
100%{
background-color:blue;
}
}animation执行动画
属性：CSS3 animation 属性 | 菜鸟教程 (runoob.com)
animation: name duration timing-function delay iteration-count direction fill-mode play-state;例子：呼吸效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" , initial-scale="1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
margin: 40px auto;
background-color: rgb(33, 218, 135);
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
animation: breathe 3s ease-in-out infinite alternate;
}
@keyframes breathe {
0%{
opacity: 0.2;
box-shadow: 0 10px 30px rgba(255,255,255);
}
50%{
opacity: 0.5;
box-shadow: 0 10px 30px rgba(185, 25, 194);
}
75%{
opacity: 0.7;
box-shadow: 0 10px 30px rgba(58, 243, 113);
}
100%{
opacity: 1;
box-shadow: 0 1px 30px rgba(79, 172, 248);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>媒体查询
在不同终端中显示不同的效果
根据设备的大小自动识别加载不同的样式
设置meta标签
在<head>标签中加入meta标签
<meta name="viewport" content="width=decive-width,initial-scale=1,maximun-scal=1,user-scalable=no">
参数解释
width=decive-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
maximum-scale：允许用户缩放的最大比例（默认设置为1.0）
uesr-scalable：用户是否可以手动缩放（默认设置为no)
媒体查询语法
@media screen and (max-width:768px){
body{
background-color:red;
}
}
@media screen and (max-width:992px) and (min-width:768px){
body{
background-color:blue;
}
}
@media screen and (max-width:992px){
body{
background-color:green;
}
}雪碧图
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。允许将一个页面涉及到的所有零散的图包含到一张大图中
优点
- 减少图片的字节
- 减少网页的请求次数，提高性能
原理
- 通过background-image引入背景图片
- 通过background-position把背景图片移动到需要的位置
例子
<span class="icon1"></span>字体图标
常用字体图片库：iconfont-阿里巴巴矢量图标库
问题描述：使用图标时会遇到失真的情况，而且图片的数量多的话，页面加载会越来越慢
解决办法：使用字体图片的方式可以解决失真的问题，也能解决资源占用的问题。
优点：
- 轻量性：加载速度快，减少http请求
- 灵活性：可以利用CSS设置大小颜色
- 兼容性：网页字体支持所有现代浏览器，包括IE低版本
使用字体图标
- 注册账号并登录
- 选取想要的图标
- 收藏图标
- 下载代码
- 选择font-class引用
在head标签中写入
<link rel="stylesheet" herf="./font/iconfont.css">在body标签中写入
<span class="iconfont icon-home"></span>
1352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
