离去是为了更好的开始，新的开始、新的工作马上开始了。一直以来觉得在css上面根基不是很强大，打算花一周时间将《CSS禅意花园》《精通CSS网页布局》重新总结一遍，主要将以前没注意的东东做个笔记。
布局是需要缜密的结构分析和设计
第一天 CSS布局基础
1）在html中导入外部样式表（两种方法）
1-1)<link href="001.css" rel="stylesheet" type="text/css"/>
1-2)<style type="text/css">
@import url("url.css");
</style>
2) DOCTYPE(文档类型)与CSS的关系
其实DOCTYPE只是一组机器可读规范，虽然中间包含了文件的URL，但浏览器不回去读取这些文件，仅用于识别，然后决定以什么样的规范去执行页面中的代码。
XHTML1.0提供了三种DTD声明科选择：
2-1) 过渡型 （Transitional）：要求非常松散的DTD，用户可继续使用HTML 4.0.1 的标签，但是要符合XHTML的写法
<!DOCTYPE html PUBLIC "-//W#C//DTD XHTML 1.0 Transitional/EN" "http://www.w3.org/TR/xhmtl1/DTD/xhtml1-transitonal.dtd>
2-2)严格型（Strict）：不能使用任何表现层的标签和属性，如 <br>
2-3)框架型（Frameset）：页面中包含框架
一般采用过渡型，容易通过w3c验证，努力目标为严格型。
3）选择符
3-1)常见选择
p {
color: red;
}
.font1 {
color: red;
}
p.font1 {
color: red;
}
#box{
color: red;
}
div#box{
color: red;
}
3-2)高级选择符号
3-2-1）子选择符">"。注意IE6及其以下版本不支持子选择符
div > span //即为div的所有直接子span标签，但是不不含孙子节点，注意和“ ”的区别
div > .font24px
#box > .font24px
3-2-2）相邻选择符"+"。注意IE6及其以下版本不支持子选择符
div + p //即div元素后边相邻的元素
div + .font28px //即div元素后边相邻的class为font28px的元素
3-2-3）属性选择符。注意IE6及其以下版本不支持子选择符
3-2-3-1)匹配属性选择符：div[class]{}//即选择凡是设置了class属性的div元素，再例如img[alt][title]{}// 即设置了alt和title的img元素
3-2-3-2)匹配属性值选择符：img[alt="图像"][title="图像"]
3-2-3-3)模糊匹配属性值选择符：类似于正则表达式的匹配模式，包含以下5种：
3-2-3-3-1)[|=]：连字符匹配，以连字符为分隔符，以匹配属性值中局部字符串
[class|="blue"]{}
<div class="red-bule-green"></div>
3-2-3-3-2)[~=]：空白符匹配，以空白符为分隔符，以匹配属性值中局部字符串
[class~="blue"]{}
<div class="red bule green"></div>
3-2-3-3-3)[^=]：前缀匹配
[class^="Red"]{}\
<div class="Red-bule-green"></div>
3-2-3-3-4)[$=]：后缀匹配
[class$="Green"]{}\
<div class="red-bule-Green"></div>
3-2-3-3-5)[*=]：字符串匹配，匹配属性值存在的指定的字符
div [class*="gre"]{}
<div class="red-bule-green"></div>
3-3)通配选择符
* {
margin:0;
padding:0;
}
3-4)伪类和伪元素选择符：主要是针对一些特殊的元素，如a，body(first-leteer)
a:link{ /*正常连接状态下样式*/
color:yellow;
}
a:hover{ /*鼠标经过的样式*/
color:red;
}
a:visited{ /*被访问之后的样式*/
color:blue;
}
a:active{ /*超链接被激活时样式*/
color:black;
}
3-5)选择符的嵌套
#wrap #header h2 span{
font-size:24px;
}
<div id="wrap">
<div id="header">
<h2><span>网页标题</span><h2>
</div>
</div>
3-6)css的继承性
常见的如： body{font-size:12px}来保证所有字体为12px，但是浏览器对css的一些错误，如在IE6中table中的td也许不遵从12px,因此，常用
body,table,th,td{font-size:12px}来修补。
有些属性，如果background-color无法继承父类
4）css优先级
4-1）css样式表的优先级
按照起源，css分为四种：HTML、作者、用户、浏览器
原则上：作者定义有限与用户设置，用户设置优先于浏览器的默认样式，而浏览器的默认样式会优先于HTML的默认样式。
4-2）css样式的优先级
一般来说，行内样式会优先于内嵌样式表，内部样式表会优先于外部样式表。而被附加了!important关键字的声明会拥有最高的优先级。
4-3）css选择符优先级
body div#box{border:solider 2px red;}
#box{border:solider 2px blue;}
div.yellow{border:solider 1px yellow;}
<div id="box" class="red">css选择符优先级</div>
body div#box大于#box，大于div.yellow
如果是多特同类型的选择符，则是按照其定义先后顺序（与class中类的顺序的顺序无关），在后边的具有优先权，例如如下div最终显示的是黄色
<style type="text/css">
.div1{
background-color:red;
}
.div2{
background-color:yellow;
}
</style>
<div class="div2 div1" style="width:100px;height:100px"></div><!-- 此处class中的定义的顺序不影响显示，即class="div1 div2"也是显示为黄色 -->
85
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
