•简而言之,它能帮我们做以下事情: 1.将格式和结构分离 2.以前所未有的能力控制页面布局 3.制作体积更小下载更快的网页 4.将许多网页同时更新,比以前更快更容易 5. 有三种方式; 1.在HEAD内的实现 2.在BODY内的实现 3. <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:style type="text/css"><!-- h1{ font-size:100; color:red} h3{ font-size:200; color:blue; font-family:French Script MT} --></mce:style><style type="text/css" mce_bogus="1">h1{ font-size:100; color:red} h3{ font-size:200; color:blue; font-family:French Script MT}</style> <!-- <style language="text/css"> font-family 设置字体的样式 引用的时候如果对标记做出改变,那么在使用标记的时候就会直接引用样式表。 --> </HEAD> <BODY> <h1>hungry fff</h1> <h3>hungry </h3> </BODY> </HTML> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:style type="text/css"><!-- h1{ font-size:38px; color:green} --></mce:style><style type="text/css" mce_bogus="1">h1{ font-size:38px; color:green}</style> </HEAD> <BODY> <h1>寒风吹起,细雨迷离,风雨揭开我的记忆</h1> <p style="background:yellow;color:blue" mce_style="background:yellow;color:blue">我的小船,寻找港湾不能将你忘记</p> <!-- background 标记的背景颜色 color字体的颜色 样式也可以在标记内直接插入,然后改变当中的属性 --> </BODY> </HTML> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:style type="text/css"><!-- .littered { color:red;font-size:9pt} .litteblue{ color:blue;font-size:9pt} .tom { color:blue; font-size:70} --></mce:style><style type="text/css" mce_bogus="1">.littered { color:red;font-size:9pt} .litteblue{ color:blue;font-size:9pt} .tom { color:blue; font-size:70}</style> </HEAD> <BODY> <a href="http://blog.youkuaiyun.com/hackerhope" mce_href="http://blog.youkuaiyun.com/hackerhope" class="tom">董超</a> <div class="littered">Embedded css</div> 加载网页中<br>这些<font class="littered">style</font> 的设置需要在 </BODY> </HTML> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:style type="text/css"><!-- p.code{font-size:50;color:red} p.HTML{font-size:20;color:green} #cuicui{ font-size:17;color:yellow} --></mce:style><style type="text/css" mce_bogus="1"> p.code{font-size:50;color:red} p.HTML{font-size:20;color:green} #cuicui{ font-size:17;color:yellow}</style> </HEAD> <BODY> <!-- 设置的样式如果指定了标记,只有该标记可以调用其他标记不能掉用。 如果是以#声明的样式要以id来调用,以class调用无效. --> <p class="code">beijing</p> <p class="HTML">shanghai</p> <div class="code">hangzhou</div> <p id="cuicui"> 惊天动地;;;;;;画虎人 </p> </BODY> </HTML> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:style type="text/css"><!-- a:link{font-size:15;color:red;text-decoration:none} a:visited{font-size:30;text-decoration:none} a:hover{font-size:50;text-decoration:none;color:blue} --></mce:style><style type="text/css" mce_bogus="1"> a:link{font-size:15;color:red;text-decoration:none} a:visited{font-size:30;text-decoration:none} a:hover{font-size:50;text-decoration:none;color:blue}</style> </HEAD> <BODY> <!-- link:设置连接的样式 visited:设置摆放之后的样式 none:无下划线的样式 underline:设置下滑线生效 --> <a href="http://blog.youkuaiyun.com/hackerhope" mce_href="http://blog.youkuaiyun.com/hackerhope">杭电</a>中的学生<a href="http://blog.youkuaiyun.com/hackerhope" mce_href="http://blog.youkuaiyun.com/hackerhope">帅哥</a>居多 </BODY> </HTML> 在文件外的调用 浏览器将成为我们更友好的界面