|
div：division。理解为一个盆，里面可以放很多盘子。即<div>...</div>之间相当于一个容器，可以容纳段落、标题、表格、图片、乃至章节、搞要和备注等各种html元素。 注意：<p></p>标签之间不能嵌套div标签。通常将p标签放于div标签内1、内联式样式表:在标签内部写样式代码。方便但不灵活 2、嵌入式样式表：一般在head标签内。以<style></style>这种方式，可以控制整个网页里的某个标签的样式 3、处部样式表：单独将样式定义成一个文件，然后在需要引用样式的文件内调用样式文件。可供所有需要的文件引用，减少重复性工作 一般在head标签内写上：<link rel="stylesheet" type="text/css" src="style/aa.css"> 4、输入样式表:在一个css文件中引入另一个css文件。比如： 在a.css文件中写上@import url(b.css); 表示在a.css文件中引入b.css文件中的样式。 可以理解为级联引用 样式规则的选择器(大括号前面)： 一、html selector:直接在大括号前写html的标签。 格式 p {...} <p>p标签 的选择器样式应用</p> 二、class selector:在标签中定义class属性（class的属性值可以重复），然后在样式中引用class属性的值。 格式： p.one{...} p.two{...} <p class="one">aaaaaaaaaa</p> <p class="two">bbbbbbbbbbb</p> 如果写成： .one{...} .two{...} <p class="two">bbbbbbbbbbb</p> <div class="two">bbbbbbbbbbb</div> 表示任何标签内，class属性的值为one或two的，都可以应用对应的样式 三、 id selector:在标签中定义id属性(每个标签都可以有id属性，但一个页面中的id值必须唯一)，然后在样式中引用id属性的值。一般应用于单位个标签中。 格式： #a{...} #b{...} #c{...} #d{...} <p id="a">aaaaaaaaa</p> <p id="b">bbbbbbbbb</p> <p id="c">ccccccccccc</p> <p id="d">dddddddd</p> 四、关联选择器：说白了就是嵌套使用，用空格分开。也可以延伸到class属性的嵌套。 格式： div p em{...} //最普通的标签嵌套方式 <div> <p> <em>test biaoqian qiantao</em> </p> </div> 格式： .one .two em{...} //(类选择器方式的关联选择器) <center class="one"> <p class="two"> <em>test class qiaotao</em> </p> </center> 当然，下面写义也可以(延伸到id属性的情况) 格式： #one .two em{...} <center id="one"> <p class="two"> <em>test class qiaotao</em> </p> </center> 五、组合选择器:大括号前写多种标签并以逗号隔开。 格式： p,div,a,h1,#two,.one{...} //多个标签以逗号隔开 <p>test1</p> <div>test2</div> <h1>test3</h1> <em class="one">test4</em> <dl id="two">test5</dl> 六、伪元素选择器:对同一个标签的不同状态使用样式。如a和p标签 格式： a:link{...} //链接状态 a:hover{...} //鼠标放上去状态 a:visited{...} //访问过的状态 <a href="www.baidu.com">百度</a> 上述方式，会使所有的a标签的样式都一样。 如何做到不同的链接，样式不一样呢？用伪元素与类同时使用的方法： 格式： a.one:link{...} a.two:hover{...} a.three:visited{...} <a class="one" href="www.baidu.com">baidu.com</a> <a calss="two" href="www.sina.com.cn">sina.com.cn</a> <a class="three" href="www.sohu.com">sohu.com</a> |
|
|
