CSS
☞定义：指层叠样式表 (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>： 定义字体相关样式
1.字体
电脑字体位置》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：加粗
2.文本样式
Word-spacing单词间距
Word-break强制换行 letter-spacing字间距 line-height行高text-align 文字居中
3.选择器
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
Padding内边距
Overflow：scroll；出现滚动条、 text-index 首行缩进，word-break：break-all 强制换行
Overflow：auto； 等待内容超出时候出现滚动条。
Margin外边距
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）扭曲略。
2.过渡transition
用法：第一步申明要变换哪个属性
-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 提醒，都可以用
