CSS
CSS（Cascading Style Sheets）级联样式表
网页的变美指南，后缀名.css
语法
由两部分构成：选择器和一条或者多条声明（样式）
//内部样式
<style>
<h1>{
color:blue;
font-size:12px;
}
</style>
//内联样式
<h2 style="background-color:red;">这是一个标题</h2>
//外部样式
<link rel="stylesheet" href="./public.css">
选择器
全局选择器
一般用于初始化样式
*{
margin:0;
padding:0;
}
元素选择器
描述一类的标签
span p 等标签
所有的标签都可以是选择器
类选择器
规定用圆点来定义，针对想要的标签使用。灵活
<h2 class="oneclass">你好</h2>
.oneclass{
color:red;
}
类选择器可以被多种标签使用，类名不能用数字开头，同一个标签可以使用多个类选择器，用空格分开
<h2 class="oneclass size">你好</h2>
.oneclass{
color:red;
}
.size{
font-size:30px;
}
ID选择器
针对某一个特定标签使用，只能使用一次（不能重复使用），css中的ID选择器以#来定义
<p id="mytitle">你好</p>
#mytitle{
color:red;
font-size:30px;
}
ID是唯一的；ID不能以数字开头
合并选择器
语法：选择器1,选择器2,…{}
.header, .footer{
color:red;
font-size:30px;
}
p,h3{
color:red;
font-size:30px;
}
选择器的优先级
CSS中，权重用数字衡量，元素选择器的权重为1，class选择器的权重为10，id选择器的权重为100，内联样式权重为1000。
优先级排名：（行内样式）内联样式>id选择器>class选择器>元素选择器
字体属性
字体颜色
1、color
div{color:red;}
div{color:#ff0000;}
div{color:rgb(255,0,0);}
div{color:rgba(255,0,0,.5);}
2、font-size 字体大小
chrome浏览器接受最小字体为12px
3、font-weight 设置文本粗细
- bold：定义粗体字符
- bolder：定义更粗的字符
- lighter：定义更细的字符
- 100-900：定义由细到粗，700等同于bold
4、font-style 字体样式
italic：定义斜体
normal：默认值
5、font-family
指定字体，每个值用逗号隔开
font-family:Microsoft YaHei,"Simun","simHei";
背景属性
background-color属性
设置背景颜色
<div class="box"></div>
.box{
width: 300px;
height:300px;
background-color:palevioletred;
}
background-image属性
设置背景图片
<div class="box"></div>
.box{
width: 300px;
height:300px;
background-image:url("images/1.jpg");
}
background-repeat属性
设置如何平铺背景图像
repeat：默认值
repeat-x：只向水平方向平铺
repeat-y：只向垂直方向平铺
no-repeat：不平铺
<div class="box"></div>
.box{
width: 300px;
height:300px;
background-image:url("images/1.jpg");
}
background-size属性
设置背景图像大小
length：设置背景图片的高度和宽度，第一个值宽度，第二个值高度，若只设置一个，第二个值auto
percentage：计算相对位置区域的百分比，第一个值高度，如果只设置一个，第二个值为auto
cover：保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain：保持图片纵横比并将图片缩放成完全覆盖背景区域的最大大小（可能不会填满整个容器）
<div class="box"></div>
.box{
width: 300px;
height:300px;
background-image:url("images/1.jpg");
background-repeat:no-repeat;
background-size:1200px 1200px;
//background-size:50% 100%;
//background-size:cover;
//background-size:contain;
}
background-position属性
设置背景图像的起始位置，默认值是0% 0%
left top：左上角
left center：左中
left bottom：左下
right top：右上角
right center：右中
right bottom：右下
center top：中上
center center：中中
center bottom：中下
<div class="box"></div>
.box{
width: 300px;
height:300px;
background-image:url("images/1.jpg");
background-repeat:no-repeat;
background-size:1200px 1200px;
background-position:center;
}
文本属性
text-align
指元素文本的水平对齐方式
- left：居左
- right：居右
- center：居中
h1{text-align:left;}
h2{text-align:right;}
h3{text-align:center;}
text-decoration
规定添加到文本的修饰，下划线、上划线、删除线
- underline：下划线
- overline：上划线
- line-through：删除线
h1{text-decoration:underline;}
h2{text-decoration:overline;}
h3{text-decoration:line-through;}
text-transform
控制文本属性的大小写
- capitalize：定义每个单词大写
- uppercase：定义全部字母大写
- lowercase：定义全部字母小写
h1{text-transform: capitalize;}
h2{text-transform: uppercase;}
h3{text-transform: lowercase;}
text-indent
控制文本首行缩进
p{text-indent:50px;}
可以是负值
表格属性
表格边框
table, td{
border: 1px solid red;
}
折叠边框
table{border-collapse: collapse;}
table, td{border: 1px solid red;}
表格宽度和高度
table{
border-collapse: collapse;
width: 500px;
height: 300px;
}
表格文字对齐
表格的中文本对齐和垂直对齐属性
td{
text-align: right;
vertical-align: top;//center,bottom
}
表格填充
控制空格之间的边框，
td{
padding:20px;
}
表格颜色
控制空格之间的边框，
table,td,tr{border:1px solid green;}
td{
padding:20px;
background-color:green;
color:white;
}
关系选择器
后代选择器
选择所有被E元素包含的F元素，中间用空格隔开
E F{}
ul li{color: red;}
子代选择器
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示。
E>F{}
div>p{color: red;}
相邻兄弟选择器
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择。
E+F{}
h3+p{color: blue;}
通用兄弟选择器
选择E元素之后的所有兄弟元素，用~隔开
E~F{}
h3~p{color: blue;}
盒子模型（box model）
CSS
margin：外边距（盒子本身）
border：围绕内边距和内容外的边框
padding：内边距，内边距是透明的（第一个值代表上下，第二个值代表左右）
content：实际内容，盒子的内容，显示文本和图像
弹性盒子模型（flex box）
设置display属性为flex定义为弹性容器
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
.container{
display: flex;
width: 500px;
height: 500px;
background-color: gray;
}
flex默认水平排列
flex-direction属性
指定弹性子元素在父容器中的位置
flex-direction:row;//row-reverse,column,column-reverse
row：水平排列
row-reverse：水平翻转，靠右摆放
column：垂直摆放
justify-content属性
内容对齐，垂直方向
justify-content:flex-start|flex-end|center;//靠上、靠下、居中
align-items属性
水平方向，居左、居中、居右
justify-content:flex-start|flex-end|center;//靠上、靠下、居中
//一个子盒子在父盒子中上下左右都居中
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
子元素上的属性
flex-grow/flex
权重
浮动
设置浮动
float属性定义元素在哪个方向移动，任何元素都可以浮动
left：元素向左浮动
right：元素向右浮动
left浮动可以让元素水平摆放
当容器不足以横向摆放时，会在下一行摆放。
清除浮动
浮动副作用
当元素设置浮动时后，该元素会脱离文档流并且向左或向右浮动
1、浮动元素会造成父元素高度塌陷
2、后续元素会收到影响
解决方案
- 父元素设置高度
- 受影响的元素增加clear属性
- overflow清除浮动
- 伪对象方式
1、父元素设置高度
如果父元素高度塌陷，那么给父元素设置高度，撑开元素本身大小
2、受影响的元素增加clear属性
clear:both
3、overflow清除浮动（常用）
在父级标签添加overflow:hidden; clear:both;
4、伪对象方式
为父标签添加伪类after，设置空内容，并使用clear:both
这种情况父布局不能设置高度，代码如下：
.container::after{
content:"";
display:block;
clear:both;
}
定位
position属性，指定元素的定位类型
relative：相对定位
absolute：绝对定位
fixed：固定定位
绝对定位和固定定位会脱离文档流，只有相对定位不脱离文档流
设置定位之后，可以使用四个方向值进行调整位置：left、top、right、bottom
相对定位
div{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 200px;
right: 200px;
}
绝对定位
脱离文档流调整位置
div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 200px;
top: 100px;
}
每设置一个绝对定位就是一层
固定定位
div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 200px;
top: 100px;
}
固定定位不会随着页面滚动而滚动，固定位置
设置定位之后，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上寻找，直到顶层文档。
（相对于父级文档移动，如果父级元素没有定位，则相对于文档进行移动）
Z-index
设置元素的堆叠顺序，可以调整覆盖的顺序，大的覆盖小的
CSS3的新特性
圆角
使用border-radius属性，可以给任何元素制作“圆角”
一个值：四个圆角值相等；（常用）
两个值：第一个值为左上角与右下角，第二个值为右上角和左下角；
三个值：第一个值为左上角，第二个值为右上和左下角，第三个值为右下角；
四个值：左上角，右上角，右下角，左下角
阴影
box-shadow向框添加一个或多个阴影
box-shadow:h-shadow v-shadow blur color;
h-shadow：水平阴影的位置
v-shadow：垂直阴影的位置
blur：模糊距离
color：阴影颜色
.box{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 200px;
right: 200px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
动画
使元素从一个样式逐渐变成另一种样式的效果
使用百分比规定变化发生的时间，或者使用关键词“from”和“to”，相当于0%和100%
@keyframes创建动画
@keyframes name{
}
name：动画名称
percent：百分比值，可以添加多个百分比值
animation执行动画
animation：name duration timing-function delay iteration-count direction；
name：设置动画名称
duration：动画持续时间
timing-function：动画效果的速率
ease：逐渐变慢
linear：匀速
ease-in：加速
ease-out：减速
ease-in-out：先加速后减速delay：设置动画开始的时间（延迟执行）
iteration-count：设置动画循环的次数，infinite为无限次数的循环
direction：动画的方向
normal：向前播放
alternate：动画播放在第偶次向前播放，第奇次向反方向播放animation-play-state：控制动画的播放状态，running代表播放，paused代表停止播放
//鼠标放上暂停
div:hover{
animation-play-state: paused;
}
呼吸效果
@keyframes breathe {
0%{
background-color: red;
opacity: 0.2;/*透明度*/
box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
}
50%{
width: 400px;
background-color: green;
}
100%{
width: 200px;
background-color: blue;
}
}
媒体查询
根据设备的大小自动识别加载不同的样式。
设置meta标签
使用设备的宽度最为视图宽度并禁止初始的缩放，在head标签里加入meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width：宽度等于当前设备的宽度
initial-scale初始的缩放比例，默认值为1.0
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认no）
媒体查询语法
雪碧图
CSS Sprite：CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。允许将一个页面涉及到的所有零星图片都包含到一张大图去。
优点：减少了图片的字节，减少网页http的请求，从而大大提高页面的性能。
用background-image引入背景图片，然后通过background-position把背景图片移动到自己需要的位置。
字体图标
阿里字体图标库，iconfont.cn