CSS全攻略

原创 2007年09月12日 00:01:00

一、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的置标符,如:DIVTDH1HTML 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/)的主页上导航栏文字与普通文章标题在鼠标时的区别。

 

 

.应用:

1.置标符 自动应用

2.特制类 class="NAME"

3.ID   ID="IDname"

4.特殊对象 自动应用

 

 

.CSS属性

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

 

CSS属性参考:http://www.arthtml.com/eNews/news/200502/0011_0000000271.html

 

 

CSS 全攻略

CSS全称Cascading Style Sheet。层叠式样式表。从三年前就开始使用CSS了,但一直以来都小看了它。CSS的出现其实是一次革命,它试图将网站的内容与表现分开。一、CSS的四种实现方式...
  • yjboy1982
  • yjboy1982
  • 2006年11月15日 09:46
  • 566

Unity性能优化全攻略

Unity性能优化全攻略总结自Siki的性能优化。优化相关前提Unity游戏安装包大/运行卡的原因Mono虚拟机 解决这个问题DrawCallhttps://zhuanlan.zhihu.com...
  • wwlcsdn000
  • wwlcsdn000
  • 2017年12月20日 13:53
  • 190

MAC 软件下载地址

【链接】精品MAC应用分享 http://xclient.info
  • koocui
  • koocui
  • 2016年12月22日 14:53
  • 140

Windows操作系统万能Ghost全攻略

    安装操作系统和应用软件是一件吃力不讨好的事情,虽然现在的电脑速度越来越快,并且操作系统安装步骤也很简单,但每次都是只能等系统慢慢地一步步完成,系统装完后,接着装应用软件,并具还要设置网络使用权...
  • feidycf
  • feidycf
  • 2010年10月18日 19:30
  • 91

菲律宾驾照全攻略

菲律宾国内的公共交通远没有中国发达,甚至逊色于国内的很多三线城市。因此如果无法自已开车或者有专用司机,那么出行将会很不方便,尤其是去稍微偏远一点的地方… 我就有一次在完成工作后找不到车回宿舍,足...
  • bacy001
  • bacy001
  • 2012年01月16日 13:09
  • 1485

DNS服务器全攻略之一:基础介绍(DNS服务器类型 )

DNS服务器类型 根据管理的DNS区域的不同,DNS服务器也具有不同的类型。一台DNS服务器可以同时管理多个区域,因此也可以同时属于多种DNS服务器类型。 主要DNS服务器 当DNS...
  • wyz52126
  • wyz52126
  • 2012年07月21日 11:05
  • 890

CSS背景全攻略

CSS背景全攻略 糖伴西红柿 发表于 08. Sep, 2009, 分类: CSS, Tips , 16 条评论 » 标签:background & css 原文链接:Backgro...
  • u013001997
  • u013001997
  • 2014年04月16日 13:02
  • 364

《新概念51单片机C语言教程 入门、提高、开发、拓展全攻略》

1、引脚介绍 (1)电源和时钟引脚。如Vcc和GND、XTAL1和XTAL2(晶振)。 (2)编程控制引脚。如RST、PSEN、ALE/PROG、EA/Vpp(复位、读取内外存储器有关) (3)I/O...
  • braveyly
  • braveyly
  • 2013年10月16日 15:41
  • 2503

RAID 全攻略

RAID全攻略       编者按:存储是近年来的一个热点,在整个存储的发展进程中,有一项技术功不可没,它就是RAID。上个世纪80年代末RAID的出现,将存储带进了一个新的时代。从此以后,RAID在...
  • zouwenbiao
  • zouwenbiao
  • 2008年05月28日 23:41
  • 193

Linux一键安装web环境全攻略phpstudy版

此教程主要是应对阿里云Linux云服务器ecs的web环境安装,理论上不限于阿里云服务器,此教程对所有Linux云服务器都具有参考价值。 写这篇文章的目的:网上有很多关于Linux一键安...
  • haibo0668
  • haibo0668
  • 2016年06月02日 10:10
  • 1890
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS全攻略
举报原因:
原因补充:

(最多只允许输入30个字)