一、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的置标符,如:DIV、TD、H1。HTML selector的作用范围是应用了该样式的所有页面中的所有该置标符。
例:
<html> <head> <title>开拓者博客</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>开拓者博客--150643.com</td> </tr> <tr> <td>专注于致力于数据库安全与高级软件编程技术</td> </tr> </table> </body> </html>
注意:在<TD>中没有应用什么,其中文字自动变红色。
2.class selector
定义class selector需要往其名称其加一个点“.”。如“.classname”。class selector的作用范围是所有包含“class="classname"”的置标符。
例:
<html> <head> <title>开拓者博客</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">开拓者博客--150643.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>开拓者博客</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">开拓者博客--150643.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>开拓者博客</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">开拓者博客--150643.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://150643.com
四.应用:
1.置标符 自动应用
2.特制类 class="NAME"
3.ID ID="IDname"
4.特殊对象 自动应用
五.CSS属性
CSS的属性有很多,像上文中用到最多的color,表示文字的颜色。background-color表示背景色。这个是最主要的,但是因为没有什么难度,参考一下相关手册就可以了

2016年7月22日 下午8:28 1F
感谢分享,支持博主
2016年7月23日 上午9:41 B1
@ 我要赚钱网 客气