CSS全攻略

最新推荐文章于 2024-04-13 15:16:57 发布

liumz_silly

最新推荐文章于 2024-04-13 15:16:57 发布

阅读量476

点赞数

分类专栏：应用程序服务器文章标签： css class border html stylesheet table

本文链接：https://blog.csdn.net/liumz_silly/article/details/1781521

版权

应用程序服务器专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、CSS的四种实现方式：

1.内嵌式：

<!--

CSS代码段

-->

</style>

2.外链式：

3.导入式

<!--

@import url("*.css");

-->

</style>

3.属性式：

二.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>

<!--

{

color: #FF0000;

}

-->

</style>

</head>

<body>

<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>

<!--

.fontRed

{

color: #FF0000;

}

-->

</style>

</head>

<body>

<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>

<!--

#fontRed

{

color: #FF0000;

}

-->

</style>

</head>

<body>

<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>

<!--

{

color: #FF0000;

}

a:hover

{

color: #0000FF;

text-decoration: underline;

}

-->

</style>

</head>

<body>

<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

liumz_silly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS全攻略

一、CSS的四种实现方式： 1.内嵌式：CSS代码段--> 2.外链式： 3.导入式@import url("*.css");--> 3.属性式：二.CSS的定义：选择对象{属性1:值1;属性2:值2;属性3:值3;属性n:值n……}如：td{font-size:12px;color:#F
复制链接

扫一扫