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