CSS:study(1)--CSS基础

CSS全称Cascading Style Sheet。层叠式样式表。

一、如何将 CSS 加诸于网页

1. 在 HTML 档案里加一个超连结,连到外在的 CSS 档

这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内(副档名为 .CSS)定义好网页的外观风格,所有参考连结到此 CSS 档的网页,便会依照指示,反应出定义好的风格。

它的写法是: <HTML>
<HEAD>
<TITLE>
本页标题
</TITLE>
<LINK REL="stylesheet"
HREF="/css/css.css";
TYPE="text/css">
</HEAD>

2. 在 HTML 档案的 <HEAD>.......</HEAD> 标签间,加一段 CSS 的叙述文

这个方法适用于指定某个网页,除了展现外在的 CSS 档定义好的网页风格外,同时还要展现本身 HTML 档内加注的 CSS 。

如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话,网页的展现将以内在加注的 CSS 叙述为主。

它的写法是: <HTML>
<HEAD>
<TITLE>
本页标题
</TITLE>
<STYLE TYPE="text/css">
<!--
BODY {font: 12pt}
H1 {font: 16pt}
P {font-weight: bold;
color: green}
-->
</STYLE>
</HEAD>
<BODY>
开始本页内容…
</BODY>
</HTML>

特别值得注意的是,为了防止不支援 CSS 的浏览器误将 <STYLE> … </STYLE> 标签间的 CSS 风格叙述当成普通字串,而展现于网页上,您最好将 CSS 的叙述文字插入 <!-- --> 标签之间。

3. 在 HTML 档的字里行间中,随时有需要,随时加一小段 CSS 的叙述指定

这个方法适用于指定网页内的某一小段文字的呈现风格。

导览器除了会展现出外在的 CSS 档与此 HTML 档 <HEAD> 内定义的 CSS 风格(如果有的话),同时还会展现字里行间的 CSS 风格。

如果字里行间的 CSS 叙述与<HEAD> 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话,导览器的展现将以字里行间的 CSS 叙述为主。

它的写法是: <HTML>
<HEAD>
<TITLE>
本页标题
</TITLE>
</HEAD>
<BODY>
<P STYLE="color: red">
开始本页内容…
</P>
</BODY>
</HTML>

上述的 3 种 CSS,可以同时并用,也可以择您所好,单一或成双地使用。如果各 CSS 间的叙述相冲突,则内在定义的 CSS 会盖过外在连结的 CSS ,字里行间的 CSS 会盖过<HEAD> 内在定义的 CSS 。




二.CSS的定义:
选择对象{属性1:值1;属性2:值2;属性3:值3;属性n:值n……}
如:
td{font-size:12px;color:#FFFF00}
.myname{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}
三.四种选择对象
1.HTML selector (TagName)
2.class selector (.NAME)
3.ID selector (#IDname)
4.特殊对象 (a:hover a:link a:visited a:active)
1.HTML selector
HTML selector就是HTML的置标符,如:DIV、TD、H1。HTML selector的作用范围是应用了该样式的所有页面中的所有该置标符。
例:
td
{
color: #FF0000;
}
-->
注意:在中没有应用什么,其中文字自动变红色。
2.class selector
定义class selector需要往其名称其加一个点“.”。如“.classname”。class selector的作用范围是所有包含“class="classname"”的置标符。
例:
.fontRed
{
color: #FF0000;
}
-->
注意:在第二个中没有“class="fontRed"”,所以文字没有变红色。
3.ID selector
定义ID selector需要往其名称其加一个点“#”。如“#IDname”。ID selector的作用范围是所有包含“ID="classname"”的置标符。
例:

#fontRed
{
color: #FF0000;
}
--> 
注意:在第二个中没有“ID="fontRed"”,所以文字没有变红色。
4.特殊对象
特殊对象包括四种,是针对链接对象设置的:
a:hover 鼠标移上时的超链接
a:link 常规,非访问超链接
a:visited 访问过的超链接
a:active 鼠标点击时的超链接
特殊对象的作用范围是所有置标符(这句话有待商榷,因为下面很快就有一种方法可以把“所有”两个字推翻)。
例:
a:hover
{
color: #0000FF;
text-decoration: underline;
}
-->
注意下面,很有用!!!
a.classname:hover
a#IDname:hover
这两种写法,是分别配合.classname与#IDname使用的。它的作用范围变成了所有包含“class="classname"”或“ID="IDname"”的置标符。这种写法,可以帮助你在同一页面中实现多种a:hover效果,可以看一下艺网的主页上导航栏文字与普通文章标题在鼠标时的区别。
四.应用:
1.置标符 自动应用
2.特制类 class="NAME"
3.ID   ID="IDname"
4.特殊对象 自动应用
五.CSS属性
CSS的属性有很多,像上文中用到最多的color,表示文字的颜色。background-color表示背景色。这个是最主要的,但是因为没有什么难度,参考一下相关手册就可以了。

posted @ 2005-08-22 14:20  zhh007's Bolg  阅读(199)  评论(0编辑  收藏  举报