color 颜色
background 背景颜色
font-size 文字大小
/**/ 注释唯一
<link rel="stylesheet" href="xxx.css"> 外部样式引入
！important 加在谁后面谁优先级最高
css由低到高
1浏览器默认设置
2样式表（内外部）
就近原则-后定义者优先
3内联方式
：link
匹配元素尚未被访问时的状态
：visited
匹配元素访问过的状态
：hover
匹配鼠标悬停在元素上是的效果
：active
匹配元素被激活时的状态 超链接 文本框和密码框在点击的时候就是active
：focus
匹配元素获取焦点时的状态 文本框和密码框
text-decoration:none; 超链接（修饰）没有下划线
text-decouration:underline; 添加下划线
overflow（x轴,y轴） 溢出处理 取值：hidden隐藏的 scroll显示滚动条 auto溢出时才有滚动条
text-align:center 外联和内联样式的水平居中 内部样式align:center
alpha : 透明度，0-1之间的小数，越大，不透明度越高
text-align: left 左对齐
text-align: right 右对齐
text-indent:"50px" 首行缩进
border:width style color;
style:边框样式 top上 right右 tottom下 left左
soloid:实线边框
dotted:虚线边框（点）
dashed:虚线边框（线）
color：边框颜色 也可以取值为transparent（透明）
outline:none/outline:0;为取消轮廓
边框倒角 border-radius：值；
取值：以px为单位的具体值/ %
边框阴影：box-shadow
取值：h-shadow v-shadow blue spread color inset
h-shadow:阴影的水平偏移距离（必须设置）
取值为正，阴影右偏移
取值为负，阴影左偏移
v-shadow：阴影的垂直偏移距离（必须给）
取值为正，阴影下偏移
取值为负，阴影上偏移
blue：模糊距离，取值越大 模糊效果月明显 以px为单位
spread：阴影的大小，指定要在基础上扩充出来的大小距离 取值为px为单位的数值
color：阴影颜色
inset：将默认的外阴影改为内阴影
margin 外边距 auto只对块级的左右边距有效 表现 块级元素在父元素中 水平居中显示
padding 内边距（不能设置负数）
box-sizing 计算框模型的实际占地 取值：border-box 固定宽高
rgba(0,0,0,0.3)透明度
background-image 背景图片
平铺属性：background-repeat 取值：no-repeat 不平铺
背景图尺寸：background-size 取值width% height%
背景图固定：background-attachment 取值：fixed（固定）
背景图定位：background-position 取值x% y% center(水平加垂直居中)
线性渐变
属性：background-image
取值：linear-gradient(angle,color-point1,color-point2,...);
1、angle
表示渐变填充的方向或角度
取值：
1、关键字
1、to top
从下向上填充渐变色
2、to right
从左向右填充渐变色
3、to bottom
从上向下填充渐变色
4、to left
从右向左填充渐变色
2、角度值
1、0deg
从下向上填充渐变色等同于 to top
2、90deg
从左向右填充渐变色等同于 to right
3、180deg
从上向下填充渐变色等同于 to bottom
4、270deg
从右向左填充渐变色等用于 to left
2、color-point
色标 ：颜色 及其 位置
取值 ：颜色 以及 位置的组合，中间用 空格 隔开
浏览器兼容性
Firefox : -moz-
Chrome & Safari : -webkit-
Opera : -o-
IE : -ms-
background:-moz-linear-gradient(0deg,red,blue);
font-family：指定字体
font-size：字体大小
font-weight：字体加粗
font-style：字体样式 italic:斜体
font-variant：小型大写字母
简写方式
属性：font
取值：style variant weight size family;
注意：
使用简写属性时，必须要设置family的值，否则无效
文本属性
1、文本颜色
属性：color
取值：合法的颜色值
2、文本排列
作用：指定文本，行内，行内块元素的水平对齐方式
属性：text-align
取值：left / center / right / justify(两端对齐)
3、文字修饰
属性：text-decoration（超链接）
取值：
1、none : 无任何的线条修饰
2、underline : 下划线修饰
3、line-through : 删除线
4、overline : 上划线
4、行高
作用：一行数据所占的高度
属性：line-height
取值：以 px 为单位的数值
注意：如果行高设置的比文字的高度高的话，那么该行文本将在指定行高范围内垂直居中显示
5、首行文本缩进
属性：text-indent
取值：以px为单位的数值
6、文本阴影
属性：text-shadow
取值：h-shadow v-shadow blur color
表格
1、表格的常用属性
1、边距属性 ：padding
2、边框属性 ：border
3、尺寸属性 ：width ，height
4、文本格式化属性 ：font-*，text-*，line-height
5、背景属性：颜色，图片，渐变
6、vertical-align
作用：指定单元格数据的垂直对齐方式
取值：
1、top ：上对齐
2、middle ：居中对齐
3、bottom ：下对齐
边框合并：border-collapse 取值：separate默认值，即分离边框模式 collapse边框合并
边框边距：border-spacing 给定一个值 ：水平和垂直的间距相同 给定两个值 ：第一个值 表示的是水平间距第二个值 表示的是垂直间距 注意：只有在分离边框模式下，边框边距才有效，即border-collapse:separate时，border- spacing才有效
标题位置：caption-side 取值：1、top ：默认值，标题在表格内容之上 2、bottom ：标题在表格内容之下
显示规则：table-layout auto 默认值，即自动表格布局，列的尺寸实际上是由内容来决定的 fixed固定表格布局 ，列的尺寸由设定的值为准的
浮动：float 1、none默认值，即无任何浮动效果 2、left左浮动，让元素停靠在父元素的左边，或挨着左侧已有的浮 动元素 3、right右浮动，让元素停靠在父元素的右边，或挨着右侧已有的浮动元素
清除浮动 属性：clear 取值：1、none 默认值，不做任何的清除浮动操作 2、left清除当前元素前面元素左浮动所带来的影响 3、right清除当前元素前面元素右浮动所带来的影响 4、both 清除当前元素前面元素任何一种浮动所带来的影响
显示方式 属性： display 取值 1、none 让生成的元素不显示 - 隐藏 特点：脱离文档流
2、block 让元素表现的和块级元素一样 特点：1、独占一 2、允许修改尺寸 3、允许正常处理垂直方向的外边距
3、inline 让元素表现的和行内元素一样 特点：1、多个元素一行内显示 2、不允许修改尺寸 3、垂直外边距无效
4、inline-block 让元素表现的和行内块一样 特点：1、多个元素能在一行内显示 2、允许修改尺寸
5、table 让元素表现的和表格元素一样 特点：1、每行只显示一个 2、尺寸以内容为准
显示 / 隐藏属性 属性：visibility 取值：1、visible : 默认值，可见的 2、hidden : 隐藏，依然占据空间
透明度 属性：opacity 取值：0.0(完全透明) ~ 1.0(完全不透明) 之间的数字
垂直对齐方式 属性：vertical-align 作用：设置 td 和 img 的垂直对齐方式 取值：1、设置在 td 上的 值 (1top 2 middle 3 bottom) 2、设置在img上的值 设置图片两边的文本相对于图片的垂直对齐(1top 2 middle 3 bottom 4baseline：基线对齐)
光标 属性：cursor 取值：1default 2pointer：小手 3crosshair：+ 4text：等待 5heip:帮助
列表项标识 属性：list-style-type 取值：1、none。。。。。
列表项图片 属性：list-style-image 取值：url(图像地址);
列表项位置 属性：list-style-position 取值：1、outside将标识放置与li的外面 2、inside将 标识放置与li的里面
列表属性 属性：list-style 取值：style image position; 常用用法：list-style:none;
1、定位属性
1、定位方式属性
属性：position
取值：static / relative / absolute / fixed
relative : 相对的
absolute : 绝对的
fixed : 固定的
注意：将 position修改为relative / absolute / fixed 中的任何一种的话，那么元素就被称之为"已定位元素"
2、偏移属性
属性 ：top / right / bottom / left
取值 ：以 px 为单位的数值
2、定位方式
1、相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
多数会实现在位置微调时使用
2、语法
position:relative;
配合着top/right/bottom/left实现位置的微调
2、绝对定位
1、什么是绝对定位 & 特点
1、绝对定位的的元素会脱离文档流，不占页面空间
2、绝对定位的元素会相对于离它最近的，已定位的，祖先元素 去实现位置的初始化和偏移
3、如果不存在已定位的祖先元素的话，那么就相对于body去实现位置的初始化和偏移
2、语法
position:absolute;
配合着偏移属性top/right/bottom/left实现位置的偏移
3、特点
1、绝对定位元素会脱离文档流，所以会压在其它元素之上
2、绝对定位的元素会变为块级元素
3、绝对定位的元素margin可以正常处理，但margin:0 auto 会失效
定位：属性：z-index 取值：无单位的数字
固定定位： 属性：position：fixed 取值：top/right/left/bottom
复杂选择器 1、兄弟选择器 1.相邻兄弟选择器 语法：选择器1+选择器2{......} 作用：获取紧紧挨在某元素后的兄弟元素
2.通用兄弟选择器 语法：选择器1~选择器2{......} 作用：获取某元素后的兄弟元素
2、属性选择器 作用：通过元素所附带的属性及其值来匹配页面的元素 语法：
1、基本语法：[attr] 作用：匹配附带attr属性的元素
2、elem [attr] elem：表示任意元素 attr：表示任意属性 作用：匹配页面中附带attr属性的elem元素
3、[attr1] [attr2] ......作用：匹配同时附带多个属性的元素
4、[attr=value] 作用：匹配attr属性的值为value的元素
伪类选择器：
1、目标伪类：作用：突出显示活动的html苗点元素匹配到激活的元素 语法 ：target{....}
2、结构伪类：
1、：first-child 匹配的元素是属于其父元素中的首个子元素
2、：last-child 匹配的元素是属于其父元素中的最后一个子元素
3、：nth-child(n) 匹配的元素是属于其父元素中的第n个子元素
4、：empty 匹配没有子元素的元素
5、：only-child 匹配的元素是属于其父元素中的唯一子元素
内容生成：使用CSS动态的向某元素中插入一部分内容
伪元素选择器：1、:before 或 ::before 作用：匹配到某元素的内容区域之前 例：<p>(:before)举头望明月</p>
2、:after 或 ::after 作用：匹配到某元素的内容区域之后 例：<p>低头思故乡(:after)</p>
内容生成：属性：content 作用：向某位置处增加内容 取值：1、字符串 ：用 "" 引起来的普通文本 2、url() ：要生成一副图像显示在指定的位置处
解决的问题：
1、浮动元素父元素高度的问题
.clear:after{content:"";
display:block;
clear:both;}
2、子元素外边距溢出的问题
#d2:before{content:"";
display:table;}
弹性布局(Flexible Layout)：弹性布局(Flexible Layout),是一种布局方式，是一种解决某元素中"子元素"的布局方式
flex的容器
将元素变为flex容器后，那么所有的子元素都将成为flex项目，都允许按照弹性布局的方式来排列
属性：display
取值：1、flex:将块级元素变为弹性布局的容器 2、inline-flex:将行内元素变为弹性布局的容器
注意：1、元素设置为 display:flex 之后，子元素的float,clear,vertical-align 将失效 2、子元素的尺寸是允许被修改的 3、弹性布局容器的text-align属性会失效
容器的属性
1、flex-direction 作用：指定容器的主轴及其排列方向
主轴：项目排列的一根轴，如果横轴作为主轴的话，那么项目们则横向排列，如果纵轴作为主轴的话，那么项目们则纵向排列
交叉轴：与主轴交叉的轴,如果横轴为主轴，那么纵轴则为交叉轴，如果纵轴为主轴，那么横轴则为交叉轴
取值：
1、row 默认值，即主轴为 "横轴"，起点在左端
2、row-reverse 主轴为横轴，起点在右端
3、column 主轴为纵轴，起点在顶端
4、column-reverse 主轴为纵轴，起点在底端
2、flex-wrap 作用:一根主轴排列不下所有的项目时,如何换行
取值：
1、nowrap ：默认值，即不换行，项目缩小
2、wrap ：换行
3、wrap-reverse
3、justify-content
作用:定义项目在主轴上的对齐方式
取值：
1、flex-start : 在主轴的起点对齐
2、flex-end : 在主轴的终点对齐
3、center : 在主轴上居中对齐
4、space-between：两端对齐,第一个项目挨着起点，最后一个项目挨着终点，中间间隔平分
5、space-around
4、align-items
作用：项目在交叉轴上如何对齐
取值：
1、flex-start ：在交叉轴的起点对齐
2、flex-end ：在交叉轴的终点对齐
3、center ：在交叉轴上居中对齐
4、baseline ：在交叉轴上基线对齐
5、stretch ：如果项目未设置高度的话，将沾满容器的整个高度
项目的属性
该组属性只能设置在某一项目上，只控制某一项目，不影响容器以及其他项目
1、flex-grow
作用：定义项目的放大比例。如果容器有足够的多余空间的话，项目将如何放大
取值：整数数字，默认为0，即不放大 取值越大，占据的剩余
css Hack
解决：浏览器兼容性的问题
css类内部hack：在样式属性名称前或属性值后增加后缀以便去识别不同的浏览器
+：IE6和IE7的前缀 -：IE6的前缀 \0:IE8,9,10 \9\0:IE9,10
css选择器Hack：在选择器前增加前缀以便识别不同的浏览器
*前缀：识别IE6 *+前缀：识别IE7 *div{IE中div显示效果} +div{IE7中div显示效果}
html头部引用Hack
使用IE条件注释来判断IE浏览器的版本 从而去执行不同的代码
语法：<!--[if 条件 IE 版本号]> 满足条件要执行的html代码
<![endif]--> 版本号：6~10
条件：1、gt:只有在大于指定版本的浏览器中执行指定代码
2、lt：只有在小于指定版本的浏览器中执行指定代码
3、gte:greater than and equal 只有在大于等于指定版本浏览器中执行指定代码
4、lte:只有在小于等于指定版本浏览器中执行指定代码
5、！:在条件以外的版本浏览器中执行指定代码
转换
转换属性：transform
取值：1、none：默认值 无任何转换效果
2、transfrom-function 表示的是1个或者多个转换函数 如果是多个函数转换函数（效果）的话 中间用空格隔开
转换原点：属性：transform-origin 取值：数值/百分比/关键字 2个值：原点在X轴和Y轴的位置 3个值：原点在X Y Z轴上的位置
2D转换 语法：属性：transform
取值：1、translate（x） 2、translate（x，y） 3、translateX(x) 4、translateY(y)
缩放 语法：属性：transform
取值：1、scale（value） value：横向和纵向的缩放比例 2、scale（X Y） X：横向的缩放 Y：纵向的缩放
3、单项缩放函数 scalex(x) scaley(y）
缩放比例 默认值1 缩小：0-1之间 放大：大于1的数字
旋转：改变元素在页面上的角度
语法 属性：transform 取值：rotate（ndeg）;n取值为正 顺时针旋转 n取值为负 逆时针旋转
注意：1、转换原点会影响最后的转换效果 2、转转是联通坐标轴都一同旋转的 会影响旋转后的位移效果
倾斜 改变元素在页面中的形状 语法：属性：transfrom
取值：1、skewX(xdeg) 让元素向着X轴的方向产生倾斜效果 实际上是改变Y轴的倾斜角度值
2、skewy(ydeg) 让元素向着y轴的方向产生倾斜效果 实际上是改变x轴的倾斜角度值
3、skew（x） 等同于skew（） 4、skew（x,y）
3D转换 透视距离 模拟人眼到3D转换元素之间的距离 属性：perspective 注意：该属性要加在3D转换元素的父元素上
3D旋转 属性：transform
取值：1、rotatex(xdeg) 沿X轴旋转的角度
2、rotatey(ydeg) 沿y轴旋转的角度
3、rotatez（zdeg）沿z轴旋转的角度
4、rotate3d（x,y,z,ndeg）x,y,z取值为大于0的数字 则表示该轴要参与到旋转中来 如果取值为0 表示则不参与旋转
过渡 将css的属性值在一段时间内平缓变化的过程给体现出来
指定过渡属性
属性：transition-property 取值：使用过渡效果的属性名称
允许设置过渡效果的属性如下
1、颜色属性
2、取值为数字的属性
3、转换属性：transform
4、渐变属性
5、阴影属性
6、visibility属性
指定过渡时长 属性：transition-duration 取值：以s或者ms为单位的数字
指定过渡速度时间函数 属性：transition-timing-function
取值：1、ease：默认值 慢速开始 快速变快 慢速结束
2、linear：匀速
3、ease-in：慢速开始 加速结束
4、ease-out:快速开始 慢速结束
5、ease-in-out：慢速开始和结束 中间先加速后减速
指定过渡的延迟时间 属性：transition-delay 取值：以s或ms为单位的数值
过渡的简介写法：
transition:property duration timing-function delay;
过渡的编写位置
1.允许将过渡属性编写在元素声明的样式中
2、允许将过渡属性编写在出发过渡下过样式中
动画：是元素从一种样式逐渐变化为另一种样式
声明动画 @keyframes 动画名称{
定义该动画中所有的关键帧
0%{动画开始时的样式}
25%{动画执行到4分之1的样式}
100%{动画结束时的样式}
}
动画属性
1、animation-name 作用：指定调用动画的名称
2、animation-duration 作用：指定动画执行一个周期的时长 取值：以 s 或 ms 为单位的数值
3、animation-timing-function 作用：指定动画的速度时间函数 取值：ease,linear,ease-in,ease-out,ease-in-out
4、animation-delay 作用：指定动画的延迟时长 取值：以 s 或 ms 为单位的数值
5、animation-iteration-count 作用：指定动画的播放次数 取值：1、具体数值 2、infinite ：无限次
6、animation-direction 作用：指定动画的播放方向 取值：1、normal ：正常播放 2、alternate ：轮流播放奇数次数播放时，正向播放(0%~100%) 偶数次数播放时，逆向播放(100%~0%)
7、动画的简介写法 animation:name duration timing-function delay iteration-count direction;
8、animation-fill-mode 作用：规定动画在播放前或播放后的状态
取值：1、none ：不改变默认行为
2、forwards ：当动画完成后，保持在最后一个帧的状态上
3、backwards ：在动画播放前，延迟时间内，动画将保持在第一个帧的状态上
4、both forwards 和 backwards 的结合体
9、animation-play-state 作用：指定动画的播放状态 取值：1、paused : 动画暂停 2、running : 动画播放
动画的调用时机
1、在 :hover 时调用动画
只有在鼠标悬停在元素上时，执行动画
2、在元素声明的样式中，直接调用动画
网页加载时，就执行动画
461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
