<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>样式表</title> <link href="Untitled-2.css" rel="stylesheet" type="text/css" /> </head> <body> <a href="http://www.360.com">360官网</a> <P>春来了！</P><br /> <p>春天花会开</p> <div class=""></div><br /> css，（cascding style sheets）层叠样式表，作用是美化HTML网页<br /> /*注释区域*/注释语法用法<br /> 样式表的基本概念<br /> 一、样式表分类<br /> 1、内联式样式表<br /> 和HTML联合显示，控制精确，但是可用性差，冗余太多<br /> <div style="background:#0F0">51899789</div><br /> 2、内嵌样式表<br /> 作为一个独立的区域内嵌在网页里，必须写在head标签里面<br /> <!--<style type="text/css"> p//格式对p标签起作用 { 样式； } </style> --> 3、外部样式表<br /> 新建一个css文件，用来放置样式表。如果在html文件中调用样式表，需要在HTML文件中点击右键-css样式-附加样式表，一般用link链接方式<br /> 有些标签默认边距，一般写样式代码的时候都会先去除（也可以设置其他样式），如下<br /> <!--<style type="text/css"> *{ margin:0px; padding:0px; } </style> --> （二）选择器<br /> 1、标签选择器，用标签名作为选择器<br /> <!--<style type="text/css"> p { 样式； } </style> --> <p>夏天来了</p> <p>夏天太热了</p> 2、class选择器。都是以“.”开头。<br /> class是相同属性的放在一起<br /> <!--.aa//定义一个名字叫aa的样式表 {//定义aa里面具体的样式属性 300px; height:200px; border:1px solid #009; } --> <div class="aa" id="a1"><!--用class选择器调用aa样式表，调用id叫a1的样式表 -->1</div><br /> <div class="aa" id="a2" ><p><!--用class选择器调用aa样式表，调用id叫a2的样式表，重叠aa类里面p的样式 -->2</p></div><br /> <div class="aa" id="a3"><!--用class选择器调用aa样式表 ，调用id叫a3的样式表-->3</div><br /> <div class="aa" id="a4"><!--用class选择器调用aa样式表 ，调用id叫a4的样式表-->4</div><br /> <div class="aa" id="a5"><!--用class选择器调用aa样式表 ，调用id叫a5的样式表-->5</div><br /> 3、ID选择器。以“#”开头<br /> id具有唯一性，尽量只用一个标签引用<br /> 调用形式：<!--<div id="样式名"> --><br /> <div id="a1">1</div><!--调用id叫a1的样式表 --> 4、复合选择器<br /> （1）使用，隔开表示并列<br /> <!--<style type="text/css"> p,span //标签p、span两者同样的样式 { 样式； } </style> --> <span style="background-color:#360">夏天<br /> 太热了</span><br /> <!--span标签叠打了与p标签一样的样式 --> <p>夏天<br /> 太热了</p> （2）用空格隔开，表示后代<br /> <!--<style type="text/css"> .aa p //标签p、span两者同样的样式 { 样式； } </style> --> <div class="aa"><p>夏天来了</p></div> <div class="aa"><p>夏天太热了</p></div><!--样式p叠加了class aa里面的属性 --> （3）筛选“.”。跟其他的p标签不一样<br /> <p class="aa">夏天<br /> 天太热了 </p> <p class="bb"> <span style="background:#06C" style="size:150">夏天<br /> 天太热了 </span> </p> 三、样式表属性<br /> 四、超链接样式：l v h a<br /><br /> a:link/*链接前链接的样式*/<br /> a:visited/*链接后链接的样式*/<br /> a:hover/*鼠标悬浮时链接的样式*/<br /> a:active/*鼠标点击时时链接的样式*/<br /> <a href="http://www.baidu.com">百度一下</a> </body> </html>