css选择器
id 选择器 #red {color:red;}
类选择器 .center {color:red;}
属性选择器 [title=W3School]{color:red;}
CSS 背景
background-color: gray; //背景颜色
background-image: url(/i/eg_bg_04.gif); //背景图片
background-repeat:no-repeat; //背景平铺
background-position:center; //背景定位
CSS 文本
text-indent: 5em; // 缩进文本
text-align:center; // 水平对齐
word-spacing: -0.5em; // 字间隔
text-transform: uppercase; //字母大小写转换
text-decoration: none; //文本划线、文本装饰
white-space: normal; //会合并所有的空白符，并忽略换行符
color:red; //文本颜色
line-height: 12px; //设置行高
CSS 字体
font-family: sans-serif; //定义文本的字体系列
font-style:italic; //字体风格
font-variant:small-caps; //字体变形
font-weight:900; //字体加粗
font-size:60px; //字体大小
CSS 列表
list-style-type : square; //列表类型
list-style-image : url(xxx.gif) //列表项图像
list-style-position:inherit; //列表标志位置
CSS 表格
border: 1px solid blue; //表格边框
border-collapse:collapse; //折叠边框、表格边框折叠为单一边框
vertical-align:bottom; //设置垂直对齐方式
CSS 轮廓
outline-color //轮廓颜色
outline-style //轮廓样式
outline-width //轮廓宽度
CSS 内外边距
padding 属性定义元素边框与元素内容之间的空白区域
padding: 10px;
margin 在元素外创建额外的“空白”
margin : 0.25in;
外内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的
margin: top right bottom left;
外内边距的设置相同，可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
CSS 边框
border: 1xp solid #999;
和内外边距一样有上、下、左、右四个值
CSS 定位
CSS position 定位属性
position:relative; //相对定位
position:absolute; //绝对定位
position:fixed; //固定定位
定位方向有 top、right、bottom、left
CSS 浮动
CSS float 浮动属性
float: left; //左浮动
float: right; //右浮动
css clear 清除浮动属性
clear: both; //清除所有浮动
clear: left; //清除左浮动
clear:right; //清除右浮动
CSS 伪类 (Pseudo-classes)
锚伪类
a:link{color: #FF0000}/* 未访问的链接 */
a:visited{color: #00FF00}/* 已访问的链接 */
a:hover{color: #FF00FF}/* 鼠标移动到链接上 */
a:active{color: #0000FF}/* 选定的链接 */
CSS2 - :first-child 伪类
p:first-child 匹配第一个元素
p > i:first-child 匹配所有元素中的第一个 元素
p:first-child i 匹配所有作为第一个子元素的元素中的所有 元素
CSS2 - :lang 伪类
q:lang(no){
quotes: "~" "~"
}
<p>文字<q lang="no">asdasdasdasd</q>文字</p>
翻译后：文字~asdasdasdasd~文字
CSS 伪元素 (Pseudo-elements)
:first-line 伪元素 用于向文本的首行设置特殊样式
p:first-line { color:#ff0000; } //首行变色
:first-letter 伪元素 用于向文本的首字母设置特殊样式
p:first-letter { color:#ff0000; } //首字变色
CSS2 - :before 伪元素 可以在元素的内容前面插入新内容
h1:before { content:url(logo.gif); } //在每个元素前面插入一幅图片
CSS2 - :after 伪元素 可以在元素的内容之后插入新内容
h1:after { content:url(logo.gif); } //在每个元素后面插入一幅图片
CSS3 边框
border-radius 用于创建圆角
border-radius:25px;
box-shadow 用于向方框添加阴影
box-shadow: 10px 10px 5px #888888;
border-image 使用图片来创建边框
border-image:url(border.png) 30 30 round;
CSS3 背景
background-size 规定背景图片的尺寸
background-size:100% 100%;
background-size:100px 100px;
background-origin 定位背景图片
background-origin:content-box;
css3 可以使用多个背景图像
background-image:url(/i/bg_flower.gif),url(/i/bg_flower_2.gif);
CSS3 文本效果
text-shadow 文本应用阴影
text-shadow: 5px 5px 5px #FF0000;
word-wrap 自动换行
word-wrap:break-word;
CSS3 字体
CSS3 @font-face 规则 设置自己的字体
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot');/* IE9+ */
}
div{
font-family:myFirstFont;
}
CSS3 2D 转换、3D转换
浏览器前缀
-ms- /* IE 9 */
-webkit- /* Safari and Chrome */
-o- /* Opera */
-moz- /* Firefox */
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
transform: translate(50px,100px); // 2D，沿着 X 和 Y 轴移动元素
transform: translateX(50px); //2D，沿着 X 轴移动元素
transform: translateY(50px); //2D，沿着 Y 轴移动元素
transform: translateZ(50px); //3D 转化，仅使用用于 Z 轴的值
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
transform: rotate(30deg); //2D，旋转，逆时针旋转
transform: rotateX(30deg); //2D，旋转，延x轴旋转
transform: rotateY(30deg); //2D，旋转，延y轴旋转
transform: rotateZ(30deg); //3D，旋转，延z轴旋转
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
transform: scale(2,4); //2D，缩放转换，改变元素的宽度和高度
transform: scaleX(2); //2D，缩放转换，改变元素的宽度
transform: scaleY(2); //2D，缩放转换，改变元素的高度
transform: scaleZ(2); //3D 缩放转换，通过给定一个 Z 轴的值
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
transform: skew(30deg,20deg); //2D，倾斜转换，沿着 X 和 Y 轴
transform: skewX(30deg); //2D，倾斜转换，沿着 X 轴
transform: skewY(30deg); //2D，倾斜转换，沿着 Y 轴
transform: skewZ(30deg); //3D，倾斜转换，沿着 Z 轴
3D 转换元素的透视视图 有真正的3D感觉
perspective: 500; //在父元素上加
CSS3 过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
transition: width 2s;
多项改变
transition: width 2s, height 2s, transform 2s;
过渡属性
transition-property: width; //应用过渡的 CSS 属性的名称
transition-duration: 1s; //过渡效果花费的时间。默认是 0
transition-timing-function: linear; //规定过渡效果的时间曲线。默认是 "ease"
transition-delay: 2s; //过渡效果何时开始。默认是 0
我常用的是
transition: all 1s;
CSS3 动画
@keyframes 规则
@keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
@keyframes myfirst{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@keyframes myfirst{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
animation运行名为 myfirst 的动画，其中设置了所有动画属性
animation-name: myfirst; //@keyframes 动画的名称
animation-duration: 5s; //动画完成一个周期所花费的秒或毫秒，默认是 0
animation-timing-function: linear; //动画的速度曲线，默认是 "ease"
animation-delay: 2s; //动画何时开始，默认是 0
animation-iteration-count: infinite; //动画被播放的次数，默认是 1
animation-direction: alternate; //动画是否在下一周期逆向地播放，默认是 "normal"
animation-play-state: running; //动画是否正在运行或暂停，默认是 "running"
animation-fill-mode:color:red; //对象动画时间之外的状态
animation简写
animation: myfirst 5s linear 2s infinite alternate;
CSS3 多列
column-count 属性规定元素应该被分隔的列数
column-count:3; //把 div 元素中的文本分隔为三列
column-gap 属性规定列之间的间隔
column-gap:40px;
column-rule 属性设置列之间的宽度、样式和颜色规则
column-rule: 3px outset #ff0000;
CSS3 用户界面
resize 属性规定是否可由用户调整元素尺寸
resize:both;
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容
box-sizing:border-box;
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
outline-offset:100px; //和outline:2px solid red; 一起用
