拖泥带水的专栏

坚持到底

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的置标符,如: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

 

 
阅读更多
个人分类: 应用程序服务器
上一篇COM对象选择服务器模式的描述
下一篇Delphi 的接口机制浅探
想对作者说点什么? 我来说一句

CSS 全攻略,学习css的好东西

2010年04月30日 304KB 下载

css全攻略.rar

2009年06月11日 358KB 下载

DHTML 帮助手册全攻略

2009年01月07日 3.69MB 下载

小型智能机器人制作全攻略

2017年12月27日 75.75MB 下载

Maya5编程全攻略pdf(带书签)

2015年03月31日 49.11MB 下载

FLUENT全攻略(完整)

2010年07月10日 7.63MB 下载

Snort轻量级入侵检测系统全攻略

2014年06月01日 50.53MB 下载

Android传感器实战-简易指南针

2015年09月06日 3.72MB 下载

没有更多推荐了,返回首页

关闭
关闭