CSS学习总结

1997年W3C(The World Wide Web Consortium)

CSS基本语法: Cascading Style Sheet

1　 selector {property: value} body {color: black}
（选择符 {属性：值}）

2　 如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：p {font-family: "sans serif"}
（定义段落字体为sans serif）

3　如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：
p {text-align: center; color: red}
（段落居中排列；并且段落中的文字为红色）

为了使你定义的样式表方便阅读，你可以采用分行的书写格式：
p
{
text-align: center;
color: black;
font-family: arial
}
（段落排列居中，段落中文字为黑色，字体是arial

4　可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义

h1, h2, h3, h4, h5, h6 { color: green }
（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）
p, table{ font-size: 9pt }
（段落和表格里的文字尺寸为9号字）
效果完全等效于：
p { font-size: 9pt }
table { font-size: 9pt }

　　5　伪类pseudo－class

　　　语法：在原有的语法里加上一个伪类（pseudo-class）：
selector:pseudo-class {property: value}
（选择符:伪类 {属性: 值}）
伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。

类选择符及其他选择符也同样可以和伪类混用：
selector.class:pseudo-class {property: value}
（选择符.类:伪类 {属性: 值}）

　　我们最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态：link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。我们把它们分别定义不同的效　　果：

a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
（上面这个例子中，这个链接未访问时的颜色是红色并无下划线，访问后是绿色并无下划线，激活链接时为蓝色并有下划线，鼠标在链接上时为紫色并有下划线）
注意：有时这个链接访问前鼠标指向链接时有效果，而链接访问后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了a:visited的前面，这样的话由于后面的优先级高，当访问链接后就忽略了a:hover的效果。所以根据叠层顺序，我们在定义这些链接样式时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。

建立了a.link类，再新建立了一个.link2类，我们为a.link2:link设定样式，红色，有下划线：　　根据上面的方法我们继续定义a.link2:visited和a.link2:hover，我们定义a.link2:visited为红色有下划　　　　　线，a.link2:hover为红色无下划线，背景为白色。在CSS Styles面板里多了一个名称为link2的自定义样式。然后将此样式应用在某个动态链接上。保存后，用浏览器打开，我们可以看到两个完全不　　　　　同的链接样式。全部CSS代码如下：
<style type="text/css">

</style>

6 行内样式表:　若想希望某段文字和其他文字风格不同，则在该段标签内加上"style"属性

内嵌样式表　把样式表放在页面的<head>区里，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值.一些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示：<head><style>...</style></head>

　　　　 HTML选择器(用法见下例)

　　　　 CLASS选择器(用法见下例)

　　　　ID选择器(功能与CLASS选择器一样,并且有时容易与HTML标签的ID属性相冲突,所以一般不推荐使用　：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。)

7 外部样式表　

　把这些样式从<head>标签中提取出来，放在单独的css文件中

　　链接外部样式表

<link href="Untitled-2.css" rel="stylesheet" type="text/css" />　rel=”stylesheet”表示在网页中使用这个外部样式表　type表示文本类型的样式表文本　hre=””是文件所在的位置　LINK方法是早期浏览器的用法.

　　　而在XML中，你应该如下例所示在声明区中加入：

　　　<? xml-stylesheet type="text/css" href="http://www.＊＊.com/＊＊.css" ?>

　　导入样式表　　导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。
注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。

　　<style type="text/css">

 　@import Untitled-2.css;

 　</style>

样式表文件Untitled-2.css（可用任何文本编辑器如词本　扩展名为.css　不包含html标记）

/* CSS Document */

Hr{color:sienna}---定义水平线的颜色为土黄

{

font-family:System;

font-size:18px;

color:#ff00cc;

}

h2{

background-color:#ccff33;

text-align:center;

}

A{color:blue;

text-decoration:none}

a:hover{

color:black;

text-decoration:underline;

}

8、优先级别:

依照后定义的优先，所以优先级最高的是内嵌样式，内部样式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。

行内样式表---内嵌样式（ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符如果想超越这三者之间的关系，可以用!important提升样式表　　　的优先权，例如：
　　　p { color: #FF0000!important }　.blue { color: #0000FF}　#id1 { color: #FFFF00}
　　　我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。）—外面样式表　　　　――DIV—HTML默认样式

9　Div and Span

作为一个容器使用，可把多个标签或内容放入容器中，作为一个整体样式使用，再对此窗口设置自定义的样式　DIV内的标签将按DIV规定的样式显示，自己有定样式的，按标签自定义的样式显示. 　　　　Z-INDEX:-1 表示在页面的下一层

<SPAN>同<DIV>相同，不同在于<DIV>是DIVISION块级元素，可以包含段落　标题　表格　及章节　备注　章节等.在段落开始结束处会插入一个换行.也就是说与<DIV>相邻的元素，在时会有比较明　　显的间隔　

＜SAPN＞最常见的方式是嵌入在某个标签中，突出显示某部分文本，甚至某个字符.显示时不会象段落一样换行，一般不包含段落　标题　表格

包含选择符

可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：
table a
{
font-size: 12px
}
在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。

样式表的层叠性

层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P标记：
div { color: red; font-size:9pt}
……
<div>
<p>
这个段落的文字为红色9号字
</p>
</div>
（P元素里的内容会继承DIV定义的属性）
注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。

另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：
div { color: red; font-size:9pt}
p {color: blue}
……
<div>
<p>
这个段落的文字为蓝色9号字
</p>
</div>
我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的

举例

<head>

<style disabled="ture" type="text/css" media="screen">

H1,h2{ text-indent:2;color:#FF0066; font-family:Arial, Helvetica, sans-serif;}----这是HTML选择器

a{ color:blue; text-decoration:none}

a:link{ color:#FFFF00; text-decoration:overline}

a:visited{color:#66FFFF; text-decoration:none}

a:hover{color:red; text-decoration:underline}

a:active{color:#000000; text-decoration:underline}-----这是伪类

</style>

<style type="text/css">

<!--

 .file

 color:yellow;font-size:24px

.water

 color:blue;text-decoration:underline;

}----------------这是CLASS的申明

-->

#file{ color:#999999;}

#water{color:black;}-----这是ID的申明

</style>

</head>

使用

<body>

<h1  id="water">---这是ID的使用,但优先级不如行内样式

<P style="color:#6600CC; font:'宋体'; font-size:10px"> 这个段应用了行内样式<br></P>---这是行内样式表,优先级最高

</h1>

<h1 class="water"id="water" >----这是H1---这是类及ID的使用,会呈现ID的样式

<a href="http:mail.163.com">我是超链,移过来我就显示下划线</a></h1>--伪类的使用

<h2 class="file" id="file"><p>这是H2</P></h2>

<p> 这个段按默认样式显示 ---默认样式

</body>

</html>

(在一个标签里同时用 class=”” and id=’”” 显示的是id属性 )

10 注释

你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以"/*" 开头，以"*/" 结尾，如下：
/* 定义段落样式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字为黑色 */
font-family: arial /* 字体为arial */
}

11 择菜单下的Windows->CSS Styles（或按Shitf+F11），系统弹出CSS Styles管理面板　

12 Dreamweaver4把这些属性分为Type（类型）、Background（背景）、Block（块）、Box（盒子）、Border（边框）、 List（列表）、Positioning（定位）、Extensions（扩展）八个部分

13 CSS结合JS的运用（针对事件动作）
将这个自定义样式应用到图片上，在浏览器中预览到图片变成了黑白，我们再定义一个样式“.over”，这个样式没有任何内容，是空样式，样式表代码如下：
<style type="text/css">

</style>

然后在图片标记（IMG）里加上“onMouseOver="this.className='over'" onMouseOut="this.className='out'"”，意思为当鼠标经过时，图片为over样式，即彩色正常图象；当鼠标离开时，图片为out样式，即黑白图象。oMouseOver和onMouseOut是鼠标事件，this.className=”…”表示当前对象的class名为…，注意大小写不要写错，JS对大小写非常敏感。

这样这个效果就完成了，保存后在浏览器里打开，图象是黑白的，当鼠标移上去时，图象变成彩色，鼠标离开时，图象又变回黑白。只要发挥你的想象，通过this.className方法还可以做出很多好看的鼠标效果。

posted on 2007-05-02 15:25 appleMay 阅读(1405) 评论(3) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

CSS学习总结

导航

公告