层叠样式表 Cascading Style Sheet
不要使用Table进行页面布局，它仅仅用于显示表格式的信息
内部样式表
<style type=”text/css”>
….
</style>
外部样式表引用
<link rel=”stylesheet” type=”text/css” href=”css/global.css” >
<link rel=”stylesheet” type=”text/css” href=”css/forms.css” >
<style type=”text/css”>
@import url(css/global.css);
@import url(css/forms.css);
</style>
决定用ID选择器和选择器应当遵循的规则：
- 要在一张网页上多次使用某一种样式时，必须使用类选择器
- 用ID选择器来识别每张网页上只出现一次的部分，比如侧边栏或页脚
- 考虑用ID选择器避免样式冲突，ID选择器优先级大于类选择器
群选择器 h1,p,#banner{color:#F1CD33;}
通用选择器 * 选择每一个标签
派生选择器 h1 string {color:red}
伪类选择器
A:link 未点击过的
A:visited 点击过的
A:hover 点击中的
A:active
:first-child
:focus input:focus{background-color: #FFFCCC;}
//IE6和IE7不支持 可通过js来实现。
高级选择器
子选择器 body>h1 选择body下所有的h1标签
兄弟选择器 h2+p
属性选择器
Img[title]{…}
A[href=www.baidu.com]{color=”red”;font-weight:bold;}
Input[type=”text”]{..}
A[href^=”http://”] ^= 表示以….开始
A[href$=”.pdf”] $=表示以….结束
Img[src*=”headshot”] *=表示含有…的
权重值排名 内建样式 1000分＞ID选择器 100分＞类选择器 10分＞标签选择器 1分
如果权重值相同，则区最后一个样式。
伪元素 如:first-line通常被当作标签选择器对待
伪类 如:link 被当作类对待。
声明了！important 属性的将不会被覆盖
#nav a{color:red;}
A{color: teal !important};
//IE6处理时会有问题
要使文本变斜体，在样式中写入以下代码
Font-style:italic;
确保文本为非斜体，像这样
Font-style:normal;
文本大、小写、首字母大写
Text-transform:uppercase;
Text-transform:lowercase;
Text-transform:capitalize;
Text-transform:none;
文本修饰text-decoration：
下划线underline、上划线overline、中划线line-through、闪烁blink、 none
字间距
letter-spacing:10px; letter-spacing:-10px;
line-height:120%; 默认120%；
对齐文本
Text-align:center;
首行缩进
Text-indent:15px;
无序列表ul 有序列表ol
List-style-type:disc、circle、square
List-style-type:decimal、decimal-leading zero、upper-alpha、lower-alpha、upper-roman、lower-roman、lower-greek、none；
list-style-position:inside、outside、
边距冲突时，浏览器只会应用它们中较大的那一个，不希望这样可以才用top padding
bottom padding解决
display:inline 行类元素
display:block 块级元素
display:none 隐藏
overflow属性
overflow:visible
overflow:scroll:添加滚动条，一使用就出现滚动条
overflow:auto :要使滚动条变成可选就用auto选项，需要时才添加滚动条。
Overflow:hidden:隐藏超出部分
解决IE6浮动BUG
Margin-left:-3px;
Zoom:1;
背景图片
Background-image:url(“…”);
Background-repeat:no-repeat、repeat、repeat-x、reeat-y
Background-position:top、center、bottom
Background-position:5px 8px;
Background-position:20px 20px;
底部问题
Html{
Height:100%;
}
//IE7以及更早的版本不会出现这个问题
//打印网页的话背景图片不会被打印出来，需要的话需使用<img>标签
滚动页面而背景图片未repeat 希望看到背景图片可以使用
Background-attachment:fixed;、scroll
快捷属性
Background:background-color、background-image、background-attachment、background-position
Body{
Background:#FFF url(bullseye.gif) scroll center center no-repeat;
}
浏览器一般都会给<img>标签添加边框线，除非<img>的边框为0
防止给,<img>添加边框线可以这样
Img{border:none};
表格：
控制表格单元之间的空间
<table cellspacing=”10”>//在每个表格间插入10px空间，如果设置成0讲完全消除间隙
消除双边框：
Table{border-collapse:collapse};
IE6bug
双边距 解决办法 设置属性display:inline、zoom:1;
3px间隙
浮动列与非浮动列之间额外插入3px空间
非浮动列没有设定宽度或高度
Zoom：1；
非浮动列设有宽度或高度
*html #mainColumn{margin-left:0;}
*html #sidebar{margin-right:-3px;}
或者全部浮动
#mainColumn{float:left;}
IE6之前的版本不支持固定定位；
如果一个标签的位置是绝对的，它又不在其他任何设定了absolute、relative或fixed定位的标签里面，那它就是相对于浏览器的窗口进行定位。
如果一个标签处在另一个设定了absolute、relative、或fixed定位的标签里面，那它就是相对于另一个元素的边沿进行定位。
IE6不支持固定定位 解决办法
html #banner{position: absolute;}
打印
给外部样式添加指定媒体类型
<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css”/>
<link rel=”stylesheet” type=”text/css” media=”screen,projection,handheld” href=”screen.css”/>
显示超链接地址
A:after{
Content:”(“attr(href)”)”;
}
/*IE6双边距bug*/
* html ….{display:inline;}
CSS3新特性
CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba