首页 | 站长免费中心 | 新手上路 | 网站运营 | 网页制作 | 图片设计 | 动画设计 | 网页编程 | 网页特效 | 本站专题 | 虚拟主机 | 域名注册 | 网站建设 | 程序下载
       免费空间资源 | 新闻咨询 | 免费域名 | 免费网盘 | 网站推广 | 网站策划 | 建站经验 | 网站优化 | 网页代码 | 源码下载 | 音乐小偷 | 网络赚钱 | 论坛交流
网站建设
网站建设
虚拟主机
虚拟主机
域名注册
域名注册
711网络首页
站长工具
站长工具
网站源码
网站源码
站长论坛
站长论坛

 711网络 → 网页编程 → ASP代码

[推荐]CSS全攻略

来源： 互联网    日期：2007-4-15
 
CSS全称Cascading Style Sheet。层叠式样式表。CSS的出现其实是一次革命，它试图将网站的内容与表现分开。

一、CSS的四种实现方式：

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

2.外链式：
<link href="http://blogbeta.blueidea.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>艺网--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>

注意：在第二个<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">艺网--ArtHtml.com</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.ArtHtml.com">艺网--ArtHtml.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效果，可以看一下艺网(http://www.ArtHtml.com)http://www.ArtHtml.com)的主页上导航栏文字与普通文章标题在鼠标时的区别。


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


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

CSS属性参考：http://aspgood.blueidea.com/archives/2006/3180.shtml

更多的[推荐]CSS全攻略请到论坛查看: http://BBS.TC711.COM


【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】 来源： 互联网    日期：2007-4-15   

上一篇：ASP进度条..
发 表 评 论
 查看评论

  您的大名:
  • 尊重网上道德，遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
认证编码: 刷新验证码
点评内容： 字数0
  精品推荐  
  本月推荐  
  友情赞助  

关于我们 | 联系我们 | 广告投放 | 留言反馈 | 免费程序 | 虚拟主机 | 网站建设 |  网站推广 |  google_sitemap baidu_sitemap RSS订阅
本站所有资源均来自互联网，如有侵犯您的版权或其他问题，请通知管理员，我们会在最短的时间回复您
Copyright © 2005-2015 Tc711.Com All Rights Reserved 版权所有·711网络   蜀ICP备05021915号
110网监备案 信息产业备案 不良信息举报