木子李教程之CSS全攻略

2020-03-24 19:02:10

字体：大中小

来源：转载

供稿：网友

第一次正式写教程，开门见山。
CSS全称Cascading Style Sheet。层叠式样式表。从三年前就开始使用CSS了，但一直以来都小看了它。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 /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.html' target='_blank'>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的作用范围是所有包含“ ”的置标符。例：
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 艺网--ArtHtml.com /td
/tr
tr
td 探索民族设计风格网聚全球艺术精华 /td
/tr
/table
/body
/html 注意：在第二个 TD 中没有“ ”，所以文字没有变红色。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使用的。它的作用范围变成了所有包含“ ”或“ID="IDname"”的 a 置标符。这种写法，可以帮助你在同一页面中实现多种a:hover效果，可以看一下艺网(http://www.ArtHtml.com)的主页上导航栏文字与普通文章标题在鼠标时的区别。
四.应用：
1.置标符自动应用
2.特制类
3.ID ID="IDname"
4.特殊对象自动应用
五.CSS属性
CSS的属性有很多，像上文中用到最多的color，表示文字的颜色。background-color表示背景色。这个是最主要的，但是因为没有什么难度，参考一下相关手册就可以了。CSS属性参考：http://www.arthtml.com/eNews/news/200502/0011_0000000271.html最后最需要的可能就是一个完整的CSS应用的例子了。我这里没有给。因为随便打开一个网页的源代码，例子随处可见
本文作者:html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：怎样用CSS3制作登录框

下一篇：用CSS让DIV层水平居中