CSS
css
cascading style sheet层叠样式表
作用：控制页面显示
version
2.0
3.0
三种使用方式：
内联样式
嵌入式样式
外部样式
media可以不在link中指定，可以在css文件中指定
test。css
@media screen{
}
@media mobile{
}
导入多个css文件，默认情况下同时起作用
title作用：modern browser中可以选择页面风格（默认选在title为Default） IE中不能
另外方式导入css文件：
css的规则：
选择器{属性：值;属性：值}
选择器：
1、ID选择器
2、class选择器
3、*选择所有的元素
4、基本元素选择器
5、后代选择器 E F 选择所有E的后代的F标签
6 父子关系选择器： E>F------------IE6不支持
7 直接后兄弟选择器 （大多数浏览器不支持）
8 一般后兄弟选择器 E~F IE6不支持
9 属性选择器（新版本浏览器支持） E[foo]{}
E[foo="warning"]{}
E[foo=^"http"]
E[foo=$".txt"]
a href="http" mailto:
a[href=^"http"]{
}
10 E,F,G 多个元素选择器
11 伪类选择器：
E:first-child 选择到本身是他的父节点的第一个孩子的E标签
E:link
E:hover
p:hover{
color:red
}
E:active
E:focus
E:first-line
E:first-letter
页面布局：
box model 盒模型
任何一个html标签都有一个边框，默认情况下不显示，但存在
#d1{border:1px solid red }
#d1{
border-width:10px;
border-style:solid;
color:red;
}
width: 500px 或 50%
height:
margin:----------------表示当前元素和包含它的元素间的距离（外间距）
#d1{
margin:10 10 10 10;
}
#d1{
margin:100px auto;----------距离上100px，左右自适应 会居中
}
可以填4个值：
写一个值： 上左起作用
写两个值： 第一个表示上，第二个表示左右
3个值： 上，左右，下
4个值 上 右 下 左
也可以分开写：
#d1{
margin-top:10;
margin-left:10;
margin-right:10;
margin-bottom:10;
}
padding:当前元素和他所包含的元素之间的距离
多对一时，设置margin 不要去设置padding
ie 和modern browser
ie 的width
m b ----width：指的是组件的宽度，并不包含 margin padding 以及边框的宽度
浏览器的布局：
浏览器默认情况下，采用流布局
float（浮动布局）
absolute position 绝对布局
relative position 相对布局------（相对于这个元素在浏览器默认采用流布局的时候应该出现的位置）
z轴索引 z-index
fonts:
body{
font-family:宋体
font-size: 10px ,pt,cm,mm,em,%
}
对其方式：
text-align:left/right/center/justify
关于图片的css
img{
filter:gray;
}
---------------------------------只有IE支持
加圆角----------------css3
img{
width:200px;
height:200px;
border: 10px solid red;
border-radius: 100px;
}
也可分开设置：
border-top-left-radius
背景图片：
body{
background-image:url(1.jpg);
background-repeat:repeat-x/repeat-y/no-repeat;
}
图片旋转：
img+img{
-moz-transform:rotate(270deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
有些属性在modern中支持也不相同，需要指定浏览器
-moz-transform----------firefox
-o-transform------------opera
-webkit-transform--------safari chrome
list
ul
ol
li{
list-style-type:none;
list-style-image:url();
}
form
超链接：