第4讲 CSS的基本书写模式
了解CSS
CSS全名为层叠样式表,是一种新的定义标记的方式.
CSS的书写
CSS的书写共有3类
一是书写以CSS为后缀的文件,在网页中调用的形式
<link href="111.css" rel="stylesheet" type="text/css">
<link>标记是作为连接的说明,type说明它的类型是CSS文本,rel说明它的性质是样式表,href表示它连接到111.css这个文件
二是书写在<style type=”text/css”></style>之间,通常出现在网页头部中
<style>标记表示这个是一个样式,type说明这个样式是CSS文本
三是书写在标记内,以style引用.
如<img src=”1.gif” style=”border:1px;”>
注意事项
CSS的书写以”{“开头,以”}”结尾,每个属性间以”;”分割,属性定义以”:”来开始
如.1{color:#ccc;font-size:10px;}
CSS的分类
CSS有3种类型:
1 自定义CSS
1-1 ID
以”#”+名称的形式,它一般用于单独的区域
如#111{color:#ff0000;}
它的调用是以id开头
如<img src=”1.gif” id=”111”>
其中<img>是定义图片调用,src定义调用路径,这里的src=”1.gif”是说明显示该网页同目录下的1.gif文件
1-2 class
以”.”+名称的形式,它一般用于大量定义
如.clear{clear:both;}
它的调用是以class开头
如<div class=”clear”></div>
1-3以style属性开头
3 重定义标记
以标记为名称
如body{background:#000;}
4 特殊的CSS,CSS选择符
常用的有四种
a:link 设定正常状态下链接文字的样式
a:active 设定鼠标单击时的链接外观
a:visited 设定访问过的链接外观
a:hover 设定鼠标放置在链接文字上时,文字的外观
举几个例子
重定义1-3的栏目样式
<DIV class=box id=userVisitor>
<H3>最近谁看过*****的页面</H3>
首先我们通过DIV里的id可以看到,控制这个层区域的ID是userVisitor
<h3>是标题标记,标题标记有<h1>-<h6>,从1-6依次减小.
我们用重定义标记的方法定义下栏目样式
先定义下它的开头为#userVisitor h3
由于IE和FF(firefox)中<h1>到<h6>标记字体大小不一样,所以我们需要先重定义下字体大小(12px)
然后定义它的背景色(#000黑色),以及字体颜色(#fff白色)
代码如下(2-4)
CSS书写的注意事项
1 CSS的冲突性
不同的样式在定义了同一个目标时按照就近原则进行.
举个例子:
<span style="color:#000000; font-size:12px;">我是黑色</span>
我们定义一个class,为
.white{color:#fff;}
那么下面这段
<span style="color:#000000; font-size:12px;" class="white">我还是黑色</span>
我们重新定义一个<span>
<span id=”1” style="color:#000000; font-size:12px;"><span id=”2” style="background-color:#000;" class="white">我变白色了</span>我是黑色</span>
从上面我们可以看到规律.即,先从最靠近的属性开始解析.
2 CSS的命名以字母,数字,下划线命名均可
如#111
#11abc
#abc
#abc_111
都是合法的
3 CSS中的命名是严格区分大小写的
如.White和.white就不是同一个class
我的助手
