标签：
?定义：指层叠样式表 (Cascading Style Sheets)
² 样式定义如何显示 HTML 元素
² 样式通常存储在样式表中
² 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
² 外部样式表可以极大提高工作效率
² 外部样式表通常存储在 CSS 文件中
² 多个样式定义可层叠为一
?名词解释
rel 该属性规定当前文档与被链接文档之间的关系。但是，只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持。
值 描述
alternate 文档的替代版本（比如打印页、翻译或镜像）。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的上一个文档。
contents 文档的目录。
index 文档的索引。
glossary 在文档中使用的词汇的术语表（解释）。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
subsection 文档的小节。
appendix 文档的附录。
help 帮助文档。
bookmark 相关文档。
?语法与规则Rules
1. !important 提升样式规则的应用优先权
用法：div{
Color:red !important; //ie6以下的浏览器有个比较现实的支持问题存在，ie6以 下的浏览器 不支持权利提升。其他浏览器支持
Color:green;
}
2. /*注释*/
3. @import 指定导入的外部样式表及目标媒体 ,必须在样式表头部最先申明，ie最多引入35条
用法：
<style>
@import url(“aa.css”); @import url(aa.css); @import “aa.css”;
</style>
4.@keyframes 指定动画名称和动画效果。
用法：
@keyframes cc{
From{color:red;};
To{ color:green;}
}
5. @charset 字符集设置
用法：
@charset “utf-8”
6.设置页面容器的版式，方向，边空等。
用法：@page:first{margin:300px;
7.@media
指定样式表规则用于指定的媒体类型和查询条件
用法：
IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。 媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。
示例代码：
@media screen and (width:800px){ … }
@import url(example.css) screen and (width:800px);
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>列举几种使用方式：
@media all and (width:1024px){
body{color:#f00;}
}
@media all and (device-height:800px){ … }
@media all and (orientation:landscape){ … }
@media all and (device-aspect-ratio:16/10){ … }
@media all and (min-color:1){ … }
@media all and (monochrome:0){ … }
@media all and (grid:0){ … }
8.font-face 设置嵌入html文档的字体
语法：@font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <font>; }
<fontsrc> = <url> [format(<string>)]
取值：
<identifier>： 字体名称
<url>： 此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径
<string>： 此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有 以下几种类型：truetype, opentype, embedded-opentype, svg等
<font>： 定义字体相关样式
电脑字体位置》c/windwos/fonts
Lien-height行高 letter-spacing字间距font-family字体text-decoration：none、underline下划线
Font -style:italic样式斜体 font-weight：400；让标题标签字体不加粗 text-indent 首行缩进cursor:pointer;鼠标变为手型 text-shadow：rgba（111,111,111,0.1） 阴影
Background-color：背景颜色padding边距border-radius：10；圆角矩形（css3新功能）font-variant：small-caps>abc<小型大写字母text-transform：uppercase全部大写文字效果变换
Css简写
Font:normal normal 800 20px/30px 宋体；
加粗 字号/行高 字体
Font-weight：加粗
Word-spacing单词间距
Word-break强制换行 letter-spacing字间距 line-height行高text-align 文字居中
1，标签选择器2，类选择器 .abc{}用法.class=”abc ttt”3,id选择器#abc用法id=”abc“标签id只能一个。4，div.cc{}控制首先有div标签而且下面有class=cc的控件5.*代表所有标签{filter:gray()ie支持变黑白的（滤镜）}.6,div hl 控制div下面所有hl包括所有
CSS = Cascading Style Sheets 级连样式表 主要是控制网页显示效果的。
css样式代码如何编写，在网页如何加入样式代码
1、方法一 标签上直接编写以style="" 样式属性编写
<input type="text" style="color:red;padding:5px">
缺点：不能重复使用，如果其它地方也要此效果，必须写一边
2、方法二 在网页head标签中添加
<style>
input,a{
color:red;
background-color:yellow;
padding:5px;
}
</style>
以上样式代码控制当前网页所有input 标签和a标签的效果
3、方法三 直接建立编写样式文件 名称为index.css
内容如下
input,a{
color:red;
background-color:yellow;
padding:5px;
}
那个网页如果要使用此文件的样式，在heade标签中加入如下引用
<head>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
则各浏览器的私有写法为：
IE加 -ms-；
Firefox加 -moz-；
Safari和Chrome加 -webkit-；
Opera15以前加 -o-，
Opera15及以后加 -webkit-
css3样式前辍有哪些?
-ms- ie10
-moz- Firefox
-webkit- Chrome Safari
-o- Operal
样式简写 缩写
/* font-size:50px;*/
/* 方正隶变简体 叶根友钢笔行书升级版*/
/*
font-family: 汉仪娃娃篆;
font-style:italic;
font-weight:800;
line-height:70px;
*/
/* font:正常 正常 加粗 字号/行高 字体 */
font:normal normal 800 20px/30px 汉仪娃娃篆简;
文本 样式
text-transform 文本转换
word-spacing 单词间距 只能用在英文
letter-spacing 字间距
line-height 行高
text-align 左中右对齐
text-indent 缩进
文本装饰
text-decoration:
text-shadow
伪类选择符
伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。
解释：在感觉上伪类可以是动态的，当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来，":lang"在一些情况下也在从文档树中推断出来。
伪类有：:first-child ，:link:，vistited，:hover:，:active，:focus，:lang，:right，:left，:first
何为伪类?就是css内植类css内部本身赋予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿来使用，当然你也可以改变它的部分属性比如：a:link{color:#FF0000;}
CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类。
伪类选择符，之前自后
div{counter-increment:item;}定义编号counter-increment：none | [<identifier> <integer>]+定义编号的id和增量
div:before {
content:counter(item)"、";使用编号
}
a:after{
content:attr(href);链接后面显示 其中attr标签是把a标签的属性显示出来
}
相对定位：position：relative 相对原来的位置并且依旧占有以前的位置。
Absolute 绝对定位脱离了标准流让出自己的位置
?特别说明
绝对定位是相对自己是离自己最近父类的那个非标准流盒子而言的，如果最近没有非标准盒子则相对网页左上角
固定定位Fixed 定位效果和absolute 很像但是依据视窗本身，body本身。
继承定位inherit
Overflow：scroll；出现滚动条、 text-index 首行缩进，word-break：break-all 强制换行
Overflow：auto； 等待内容超出时候出现滚动条。
Margin：0 auto ；如果元素为块元素，则让它居中，并且上下边距为0。 如果不是用display：block；指定对象为块元素。
Margin-left；margin-right；margin-top；margin-bottom；文字上下居中text-align
?面试题：图像在正中心
Z-index 层级关系 值越大离我们越近
Css reset 面试题margin padding border=0；
为什么要reset 浏览器众多 规则不一样 在不同浏览器效果不一样，影响我们开发。
1.变换Transform(vt. 改变，使…变形；转换vi. 变换，改变；转化)
2.过渡Transition
3.动画 Animation
1.变换transform
用法：-webkit-transform:rotate(45deg);
属性：1.none无转换,2.matrix(<属性1>,2,3,4,5,6);是一个变换矩阵，同时控制六个属性。
3.translate(x轴位移，y轴位移);4.translateX(水平位移)，5.translateY（上下位移量）6.rotate(50deg旋转50度);7.scale（x轴缩放，y轴缩放）如果第二个值没有则取第一个值8.scaleX（x轴缩放）9.scaleY（y轴缩放）。。10.Skew（x，y）扭曲略。
用法：第一步申明要变换哪个属性
-webkit-transition:all 3.2s ease-in 0;
-ms-transition:all 3.2s ease-in 0;
第二步写出要变化属性的属性值
h1:hover{
color:yellow;
font-size:50px;}
属性：transition：【1要参与过渡的属性可以all，transition-property】【2设置过渡时间transition-duration】【3设置过渡动画类型tuansition-timing-function】【设置延迟过渡时间transition-delay】
属性值：1的值，all，none，指定
2的值time 多少秒
3的值
linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start： 等同于 steps(1, start)
step-end： 等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内 。
4的值 time多少秒
3.动画 Animation
用法：第一步先定义
第一个定义方法@-webkit-keyframs yy{
To{
-webkit-transform:translate(100px,200px);结束状态
}
From{
|
关键帧 |
-webkit-transform:translateX(0,0);开始状态
}
}
第二种定义方法
@-ms-keyframes cc{
0%{color:red;}
25%{color:green;}
50%{color:blue;}
75%{color:yellow;}100%{color:purple;}}
第二步使用
.ttt{
-webkit-animation:cc 15s ease-in 0 infinite alternate ;
-ms-animation:cc 15s ease-in 0 infinite alternate ;}
参数解释：
[ animation-name ]：
检索或设置对象所应用的动画名称
[ animation-duration ]：
检索或设置对象动画的持续时间
[ animation-timing-function ]：
检索或设置对象动画的过渡类型
[ animation-delay ]：
检索或设置对象动画延迟的时间
[ animation-iteration-count ]：默认1 ，infinite无限循环
检索或设置对象动画的循环次数
[ animation-direction ]： normal： 正常方向alternate： 正常与向交替
检索或设置对象动画在循环中是否反向运动
[ animation-play-state ]： running： 运动 paused： 暂停
检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式 ? 小技巧
1.div高度自动增长
Overflow：hidden；
2.图片占有全部div width100%，height100%；
3.定义第一个div ID ，contianer
4.定位 background-position：left ，right， bottom， top， center
示例：假设要定义背景图像在容器中右下方，并且距离右边和底部有 20px 缩写方式：background:url(test1.jpg) no-repeat right 20px
5居中定位
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-300px;
width:600px;
height:400px;
background-position:right bottom;
background-image:url(../images/1.jpg);
6.字体上下居中定义line-height。
7.Placeholder=“输入框提醒”
8.Cursor：pointer手型
Title 提醒，都可以用
标签：
原文地址：http://www.cnblogs.com/lsr111/p/4401036.html
