CSS概念
CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表。
文件后缀为css
CSS用于HTML文档中元素样式的定义
CSS唯一目的
让网页具有美观一致的页面
语法
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）
多种CSS加载的方式
内联样式（行内样式）：
<body>
<p style = "color:red; font-size: 30px;">我是内联样式</p>
</body>内部样式：
<header>
<style>
p{
color:red;
font-size:30px;
}
</style>
</header>
<body>
<p>我是第一个p标签</p>
<p>我是第二个p标签</p>
<p>我是第三个p标签</p>
</body>外部样式（推荐）：
当样式需要应用于很多页面时，外部样式表是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观，每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部。
p{
color:red;
font-size:30px;
}//文件名是public.css<header>
<link rel = "stylesheet" href = "./public.css">
</header>//引入css样式文件选择器一
全局选择器
可以与任何元素匹配，优先级低，一般做样式初始化
<header>
<style>
*{
magin:0;
padding:0;
}
</style>
</header>元素选择器
HTML文档中的元素，p,b,div,a,img,body等
标签选择器，选择的是页面上所有的这种类型的标签，经常描述的是“共性”，无法描述”个性“
比如：我想让asdfghjk这句话中gh变成红色，那我可以使span>标签把“gh”两个字围起来，然后给<span>标签加一个标签选择器
<p>asdf<span>gh</span>jk</p>
span{
color:red;
}温馨提示：
1.所有的标签，都可以是选择器，比如ul,li,label,dt.input,div等
2.无论选择的标签藏得多深，一定能够被选择上
3.选择的是所有，而不是一个
类选择器
优点：灵活
<h2 class = "oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
width:800px;
}class属性的特点：
1）类选择器可以被多种标签使用
2）类名不能以数字开头
3）同一个标签可以使用多个类选择器，用空格隔开
选择器二
ID选择器
针对某一个特定的标签来使用，只能使用一次，css中的ID选择器以#来定义
<h2 id = "mytitle">你好</h2>
#mytitle{
border:3px dashed green;
}强调：ID必须是唯一的；ID不能以数字开头
合并选择器
语法：选择器1，选择器2，......{}
作用：提取共同的样式，减少重复代码
.header,.footer
{
height:300px;
}选择器的优先级
行内选择器>ID选择器>类选择器>元素选择器
字体属性
文本颜色
div{color:red;}
div{color:#ff0000;}
div{color:rgb(255,0,0);}
div{color:rgba(255,0,0,.5);}温馨提示：chrome浏览器接受的最小字体是12px
font-weght:设置文本的粗细
| 值 | 描述 |
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100-900 | 定义由细到粗， 400等同于默认，700等同于bold |
font-style:指定文本的字体样式
| 值 | 描述 |
| normal | 默认值 |
| italic | 定义斜体字 |
font-family:指定元素的字体
温馨提示：
1.每个值用逗号分开
2.如果字体名称包括空格，他必须加上引号
背景属性
| 属性 | 描述 |
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-position | 设置背景图片显示位置 |
| background-repeat | 设置背景图片如何填充 |
| background-size | 设置背景图片大小属性 |
background-size属性
| 值 | 说明 |
| length | 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只设置一个，第二个值auto |
| percentage | 计算机相对位置区域的百分比，第一个值宽度，第二个值高度，如果只设置一个，第二个值auto |
| cover | 保持图片纵横比将图片缩放成完全覆盖背景区域的最小大小 |
| contain | 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小 |
background-position属性
默认值是0% 0%
| 值 | 说明 |
| left top | 左上角 |
| left center | 左中 |
| left bottom | 左下 |
| right top | 右上 |
| right center | 右中 |
| right bottom | 右下 |
| center top | 中上 |
| center center | 中中 |
| center bottom | 中下 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100%100%。如果只制定了一个值，其他默认值是50%。默认值是0%0%。 |
| xpos ypos | 单位是像素 |
文本属性
text-align：指定元素文本的水平对齐方式
(left//moren、right、center)
h1{text-align:center}text-decoration:规定添加到文本的修饰，下划线、上划线、删除线等
underline（定义下划线）、overline(定义上划线)、line-through(定义删除线)
h1{text-decoration:overline}text-transform:控制文本的大小写
captialize：定义每个单词开头的大小写)
uppercase：定义全部大写字母
lowercase:定义全部小写字母
h1{text-transform{uppercase}text-intdent: 规定文本块中首行文本中的缩进
p{
text-indent:30px;
}温馨提示：负值是允许的，将会左缩进
表格属性
表格边框
table,td{
border:1px solid black;
}折叠边框
border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开
table{border-collapse：collapse}
table,td{border:1px solid black;}
设置宽度和高度
height和width属性定义表格的高度和宽度
table{width:100%;}
td{height:50px;}表格文字对齐
表格中文本对齐和垂直对齐属性(默认左中对齐)
text-align属性设置水平对齐方式，向右，左，或者中心
td{text-align:right;}垂直对齐属性设置垂直对齐
td{height:50px; vertical-align:bottom;}表格颜色
table,td,th{border:1px solid green;}
td{background-color:green;color:white;}关系选择器
后代选择器
选择所有被E元素包含的F元素，中间用空格隔开
子代选择器
选择作为所有E元素的直接子元素F，对更深一层的元素不起作用，用>表示
相邻兄弟选择器
选择紧跟E元素后的F元素，用+表示，选择相邻的第一个兄弟元素
通用兄弟选择器
选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开
CSS盒子模型（Box Model)
盒子模型在设计和布局的时候使用，本质是一个盒子，封装周围的HTML元素。，它包括：
外边距（margin)、边框（border）、内边距（padding两个值，第一个值上下，第二个值左右）和实际内容（content）
如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离
弹性盒模型（flex box）
弹性盒子是CSS3的一种新的布局模式
弹性盒子是由弹性容器和弹性子元素组成的
通过设置display属性的值为flex将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素
flex-direction属性（作用于父级元素）
定义:flex-direction属性指定了弹性元素在父容器中的位置。
语法——flex-direction：row | row-reverse | column | column-reverse
row:横向从左到右排列（左对齐），默认的排列方式
row-reverse:反转横向排列（右对齐，从后往前排，最后一项排在最前面）
column:纵向排列
column-reverse：反转纵向排列，从后往前排，最后一项在最上面
justify-content属性（作用于父级元素）
定义：内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
语法——justify-content：flex-start | flex-end | center
flex-start：默认值。弹性项目向行头紧挨着填充
flex-end：弹性项目向行尾紧挨着填充
center：弹性项目居中紧挨着填充（若剩余的空间是负的，则弹性项目将在两个方向上同时溢出）
align-items属性（作用于父级元素）
定义：align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
语法：
align-items：flex-start | flex-end | center
flex-start:靠左
flex-end：靠右
center：居中
子元素上的属性——flex-grow/flex
根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间（权重）
默认值为0，即如果存在剩余空间，也不放大
一旦设置了flex属性，原来设置的宽度就失效了
文档流
文档中可显示对象在排列时所占用的位置/空间
脱离文档流的三种方式
1）浮动
2）绝对定位
3）固定定位
浮动
定义：float属性定义元素在哪个方向浮动，任何元素都可以浮动。
left——元素向左浮动
right——元素向右浮动
原理
1.浮动以后使元素脱离了文档流
2.浮动只有左右浮动，没有上下浮动
浮动副作用（当设置float浮动后，该元素会脱离文档流并向左/右浮动）
1.浮动元素会造成父元素高度塌陷
2.后续元素会受到影响
清除浮动
1.父元素设置高度(撑开元素本身的大小)
2.受影响的元素增加clear属性
3.overflow清除浮动（父布局不能设置高度，在父级标签的样式里加：overflow：hidden；clear:both）
4.伪对象方式（如果有父级塌陷，并且同级元素也受到了影响，还可以使用伪对象方式处理，为父级标签添加伪类after，设置空的内容，并且使用clear：both；这种情况下，父布局不能设置高度）
定位
设置定位之后，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档
| 值 | 描述 |
| relative | 相对定位 |
| absolute | 绝对定位（元素间加盖） |
| fixed | 固定定位 |
绝对定位和固定定位会脱离文档流
设置定位之后，可以使用四个方向值进行调整位置：left、top、right、bottom
Z-index
设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总会处于堆叠顺序较低的元素的前边
CSS3新特性
圆角
border-radius属性，可以使用以下规则：
四个值：左上-右上-右下-左下
三个值：左上-右上和左下-右下
两个值：左上和右下-右上和左下
一个值：四个圆角值相同（圆设置为100%）
阴影
box-shadow向框内添加一个或多个阴影
| 值 | 描述 |
| h-shadow | 必选，水平阴影的位置 |
| v-shadow | 必选，垂直阴影的位置 |
| blur | 可选，模糊距离 |
| color | 可选，阴影的颜色 |
动画
使元素从一种样式逐渐变化为另一种样式的效果
请用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%
@keyframes创建动画
@keyframes myCartoon{
from|0%{
css样式
}
percent{
css样式
}
to|100%{
css样式
}
}percent：百分比值，可以添加多个百分比值
animation执行动画
animation：name duration timing-function delay iteration-count direction;
| 值 | 描述 |
| name | 设置动画的名称 |
| duration | 设置动画的持续时间 |
| timing-function | 设置动画效果的速率 |
| delay | 设置动画的开始时间（延时执行） |
| iteration-count | 设置动画的循环次数，infinite为无限循环 |
| direction | 设置动画播放的方向 |
| animation-play-state | 控制动画的播放状态，running代表播放，pause代表停止播放 |
| timing-function值 | 描述 |
| ease | 逐渐变慢（默认） |
| linear | 匀速 |
| ease-in | 加速 |
| direction值 | 描述 |
| normal | 默认值为normal表示向前播放 |
| alternate | 动画播放在第偶数次向前播放，第奇数次向反方向播放 |
媒体查询
会根据设备的大小自动识别加载不同的样式
设置mate标签
使用设备的宽度作为视图宽度并禁止初始的缩放，在head标签里加入这个meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">width=device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable用户是否可以手动缩放（默认设置为no）
雪碧图
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。
优点：
1.减少网页的字节
2.减少网页的http请求，从而大大的提高页面的性能
原理：
1.通过background-image引入背景图片
2.通过background-position把背景图片移动到自己需要的位置
字体图标
优点：
1.轻量性：加载速度快，减少http请求
2.灵活性：可以利用CSS设置大小颜色等
3.兼容性：网页字体支持所有现代浏览器，包括IE低版本
使用字体图标
1.注册账号并登录
2.选取图标或搜索图标
3.添加购物车
4.下载代码
5.选择font-class引用
298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
