CSS全攻略

时间:2007-09-22 19:42:23   来源:  作者:  点击:次  出处:技术无忧
关键字:css html 网页设计 网页制作

CSS全称Cascading Style Sheet。层叠式样式表。从三年前就开始使用CSS了,但一直以来都小看了它。CSS的出现其实是一次革命,它试图将网站的内容与表现分开。

一、CSS的四种实现方式:

1.内嵌式:
<style type="text/css">
<!--
CSS代码段
-->
</style>

2.外链式:
<link href="*.css" rel="stylesheet" type="text/css">

3.导入式
<style type="text/css">
<!--
@import url("*.css");
-->
</style>

3.属性式:
<div style="position:absolute; width:200px; height:115px; z-index:1; left: 209px; top: 154px;"></div>


二.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的作用范围是应用了该样式的所有页面中的所有该置标符。

例:
<html>
<head>
<title>艺网CSS教程 作者:木子李</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
td
{
color: #FF0000;
}
-->
</style>
</head>
<body>
<table width="300" border="0">
<tr>
<td>艺网--ArtHtml.com</td>
</tr>
<tr>
<td>探索民族设计风格 网聚全球艺术精华</td>
</tr>
</table>
</body>
</html>

注意:在<TD>中没有应用什么,其中文字自动变红色。

2.class selector
定义class selector需要往其名称其加一个点“.”。如“.classname”。class selector的作用范围是所有包含“class="classname"”的置标符。

例:
<html>
<head>
<title>艺网CSS教程 作者:木子李</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.fontRed
{
color: #FF0000;
}
-->
</style>
</head>
<body>
<table width="300" border="0">
<tr>
<td class="fontRed">艺网--ArtHtml.com</td>
</tr>
<tr>
<td>探索民族设计风格 网聚全球艺术精华</td>
</tr>
</table>
</body>
</html> 访问技术无忧网,软硬件通吃保你技术无忧!中文网址http://www.技术无忧.com 或 http://www.技术无忧.net


 1/2    1 2 ›› ›|

相关文章

文章评论

共有 0 位网友发表了评论 此处只显示部分留言 点击查看完整评论页面