离去是为了更好的开始,新的开始、新的工作马上开始了。一直以来觉得在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="100px;height:100px"></div><!-- 此处class中的定义的顺序不影响显示,即class="div1 div2"也是显示为黄色 -->