当前位置:首页 >> 站长天地 >> 网页制作 >> 内容

CSS全攻略和实例应用

时间:2009-7-1 10:05:00 栏目:网页制作 点击: 来源:不详

 [网页制作]-本文简要:CSS全称Cascading Style Sheet。层叠式样式表。CSS的出现其实是一次革命,它试图将网站的内容与表现分开。 一、CSS的四种实现方式:1.内嵌式:style type=text/css!--CSS代码段--/style2.外链式:link href=http://XXX.com/...
D6电脑网 (d6pc.com): CSS全攻略和实例应用-网页制作
CSS全称Cascading Style Sheet。层叠式样式表。CSS的出现其实是一次革命,它试图将网站的内容与表现分开。

一、CSS的四种实现方式:

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

2.外链式:
<link href="http://XXX.com/*.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>第二电脑网</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>z站长资讯 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.002pc..com">站长资讯</a></td>
  </tr>
  <tr>
    <td>站长第一门户</td>
  </tr>
</table>
</body>
</html>


注意下面,很有用!!!
a.classname:hover
a#IDname:hover
这两种写法,是分别配合.classname与#IDname使用的。它的作用范围变成了所有包含“class="classname"”或“ID="IDname"”的<a>置标符。这种写法,可以帮助你在同一页面中实现多种a:hover效果,可以看一下站长资讯的主页上导航栏文字与普通文章标题在鼠标时的区别。


四.应用:
1.置标符 自动应用
2.特制类 class="NAME"
3.ID   ID="IDname"
4.特殊对象 自动应用


五.CSS属性
CSS的属性有很多,像上文中用到最多的color,表示文字的颜色。background-color表示背景色。这个是最主要的,但是因为没有什么难度,参考一下相关手册就可以了。

Tags:攻略 


D6电脑网|电脑学习,电脑维修,电脑技术网;
设电脑学习,电脑入门,电脑技术,电脑教程,电脑维修,硬件知识,
网页设计建站,桌面壁纸,主题下载,WIN7下载,常用软件下载等栏目。感谢您的支持!
栏目:网页制作 作者:佚名 来源:不详
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
本类推荐
  • 没有
本类固顶
  • 没有
网友推荐
链接申请
  • D6电脑网(www.d6pc.com) © 2019 版权所有 All Rights Reserved.
  • 本站为纯技术学习交流型网站,部分资源来源网络,仅供学习交流,版权归原作者,本站仅为转载,如有侵犯您的利益请联系我们删除.谢谢!
    关于D6电脑学习网 广告合作 419807867@QQ.COM 联系站长 网站地图 粤ICP备09035016号
  • 摆脱浅薄和低俗的最好办法就是学习,我们加油!D6PC! V3.0