Easy css
- 4. h1 {
color : #444 ;
font-size : 18px ;
font-family : ”微软雅黑”;
}
选择器 语句块 属性声明
- 6. 普通选择器：#id , .class , tag
伪类： a:link, a:visited{}
a:hover, a:active{}
属性选择器： input [ type = “radio” ]
高级伪类： .box : first-child {}
3.1 选择器的类型
- 9. body .hd h3.title{…}
.box .hd h3{…}
.box .title{…}
.box .hd .title{…}
h3{color:#f60}
3.3 选择器的层叠
<div class=“box”>
<div class=“hd”>
<h3 class=“title”>
Title
</h3>
</div>
</div>
- 10. [ 0 , 0 , 0 , 0 ]
3.4 选择器的优先级
#id tag
.class , 伪类，属性选择器
层叠选择器中，每个单选择器都可以在对应的位上+1
优先级比较由左至右进行
- 13. display
position , left , right , top , bottom , z-index
float , width , height , overflow
margin , padding
font , line-height , color
border , background
4.1 常用CSS属性
- 14. margin-left:10px ; margin-right:10px
margin: 0 10px;
border-color:#ccc ; border-style:solid
border:1px solid #ccc;
background-color:#f2f2f2 ; background-image: url()
background:#f2f2f2 url() no-repeat 0 0;
4.2 CSS属性的简写
- 19. display
position , left , right , top , bottom , z-index
float , width , height , overflow
margin , padding
font , line-height , color
border , background
5.3 属性声明顺序
- 24. .box{
width:100px; /* for all */
*width:120px; /* for ie7 */
_width:140px; /* for ie6 */
}
尽量遵循标准书写CSS，避免无谓的hack
6.3 慎用hack
Editor's Notes
- 学员调查：
1、对html和css有着最基础的了解，知道它们的语法
2、能看懂大部分的css代码
3、能手写css，解决大部分的样式问题
4、几乎能搞定所有的样式问题
你觉得写css最难的是？
- 1、1990～1993年，HTML最初被设计成一种结构化标记语言，用于描述文档内容，没有太多考虑文档的展现形式。
2、随着网站的大量涌现，用户对网页外观的需求迅速提升，<font>和<big>之类的标签开始加入HTML。
HTML3.2时代：结构和样式混杂的时期，<font size=“+3” color=“red”>Text</font>。
人们需要这样一种页面：结构化的内容和灵活的页面展现。很快，W3C组织开始寻求解决方案。
3、1995年，公布CSS草案。
4、1996年，形成完整的CSS1标准，并逐渐成为和HTML重量相当的语言。
5、1998年5月，W3C组织推出了CSS2，使得这项技术在世界范围内得到广泛的支持。CSS2成为了W3C的新标准。同时，W3C CoreStyle和CSS2 Validation Service 以及CSS Test Suite宣布成立。它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文件的标志（TAG)里，也可以在外部附件文件做为外加文件。此时，一个样式表可以用于多个页面，甚至整个站点，因此具有更好的易用性和扩展性。
6、2001年5月，CSS3草案
