繁体中文
设为首页
加入收藏
当前位置:在线教程首页 >> 网页设计 >> CSS与特效 >> CSS全攻略

CSS全攻略 (1)

2005-06-26 18:00:00  作者:未知  来源:第七频道  浏览次数:634  文字大小:【】【】【

第一次正式写教程,开门见山。
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>第七频道 CSS教程</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">第七频道</td>
  </tr>
  <tr>
    <td>第七频道</td>
  </tr>
</table>
</body>
</html>

注意:在第二个<TD>中没有“class="fontRed"”,所以文字没有变红色。

3.ID selector
定义ID selector需要往其名称其加一个点“#”。如“#IDname”。ID selector的作用范围是所有包含“ID="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 ID="fontRed">第七频道</td>
  </tr>
  <tr>
    <td>第七频道</td>
  </tr>
</table>
</body>
</html>

注意:在第二个<TD>中没有“ID="fontRed"”,所以文字没有变红色。

4.特殊对象
特殊对象包括四种,是针对链接对象设置的:
a:hover 鼠标移上时的超链接
a:link 常规,非访问超链接
a:visited 访问过的超链接
a:active 鼠标点击时的超链接

特殊对象的作用范围是所有<a>置标符(这句话有待商榷,因为下面很快就有一种方法可以把“所有”两个字推翻)。

例:
<html>
<head>
<title>第七频道 CSS教程 作者:幻影</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
a
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}

-->
</style>
</head>
<body>
<table width="300" border="0">
  <tr>
    <td><a href=
http://www.channel7.con>第七频道</a></td>
  </tr>
  <tr>
    <td>第七频道</td>
  </tr>
</table>
</body>
</html>

此文章不能满足您的需求?那就就Google一下吧:)

Google
 
[1] [2]

责任编辑:imobile


相关文章
企业发展战略概论
走出创新的困惑
核心竞争力的打造
初探企业发展战略
校准你的核心能力
入世对策15条
你对市场的认识到位吗?
多元化和专业化的经营
思维变革与企业发展
创新制定区域市场战略
警惕:战略失误
 

最新文章

更多

· 关于CSS你只需知道的十件事
· CSS网站实用技巧:word-...
· CSS实战:解决图片下面有...
· 中文网页制作中段落缩进...
· 巧用CSS制作树状目录
· CSS重新定义项目符号和编号
· 网页特效大公开
· css新手上路<七>
· css新手上路<六>
· css新手上路<五>

推荐文章

更多

· 关于CSS你只需知道的十件事
· CSS网站实用技巧:word-...
· CSS实战:解决图片下面有...
· 中文网页制作中段落缩进...
· 巧用CSS制作树状目录
· CSS重新定义项目符号和编号
· 网页特效大公开
· css新手上路<七>
· css新手上路<六>
· css新手上路<五>

热点文章

更多