【JavaWeb前传系列】第04章_DIV与CSS标准化网页布局

来源：互联网发布：网络暴力编辑：程序博客网时间：2024/05/22 04:24

【JavaWeb前传系列】第04章_DIV与CSS标准化网页布局——LAMP培训专家_{编辑：玄玉}

float输入样式表

Cpoyright

clearDIV+CSS的好处我的博客margin样式规则的选择器给我发邮件padding教程未完待续。。。LAMP培训专家

DIV本身有容器的性质，它里面可以嵌套任何HTML代码。但<p></p>中不能嵌套<div>标签
不过即使<p></p>中嵌套了<div>，浏览器也不会报错。另外利用更换CSS，可实现页面换肤功能

将样式作用于屏幕或投影仪上<style media="screen, projection"> p {color:red} </style>

作为一个网页，页面的长度最好不要超过三屏，如果内容特别多的话，就可以把它做成选项卡

在<style>中是不会执行HTML代码的，所以用来注释HTML代码的在<style>中不起作用
写样式时，通常会在<style>中加上。如<style>  </style>
若浏览器不支持样式，那么这里面的内容就会显示出来。若支持的话，则不起作用

输入样式表【CSS样式分为：内联式样式表、嵌入式样式表、外部样式表、输入样式表】
使用CSS中的@import语句将外部样式表文件，输入到<style>标签或CSS文件中
demo.css内容：div  {color:yellow; font-size:4cm;}
   test.css内容：p  {color:green; font-size:3cm;}  @import url(demo.css);
<html>
</style> </head>
<head> <style>p {color:green; font-size:3cm;} @import url(demo.css);</style> </head>
-->
<body>
        <p>aaaaaaaaaaa</p>
        <div>bbbbbbbb</div>
</body>
</html>

样式规则的选择器
HTML selector：直接在{}前面写HTML标签，此时{}中定义的CSS效果只作用于该HTML标签上。如p {color:red}只作用于<p></p>中
CLASS selector：举例p.one {color:red}以及p.two {color:grey}，应用时<p class="one">aaa</p>以及<p class="two">bbb</p>
                                   再如.one {color:red}以及.two {color:grey}，应用时<p class="one">aaa</p>以及<h2 class="one">bb<h2>
          ID selector：举例#one {color:red}以及#two {color:grey}，应用时<p id="one">aaa</p>以及<p id="two">bbb</p>
                                   每个HTML标签中都有id属性，但在同一个页面中所有的id属性都是不能重复的
                                   若页面中只有一个HTML标签会用到该样式的话，则将其定义成ID的。若可能被多个标签使用的话，则做成CLASS的
       关联选择器：举例center p em {color:red}，应用该CSS时则要求<center>标签中必须有<p>标签，而<p>标签中必须有<em>标签
                                   所以这三种应用方式都是无效的，即<p><em>bbb</em></p>，<p>aaa</p><em>bbb</em>，<em><p>aaa</p></em>
                                   只有<center><p><em>bbb</em></p></center>才会有效显示CSS效果
                                   再如.one .two em {color:red}，应用时<center class="one"><p class="two"><em>bbb</em></p></center>有效
                                   又如#one .two em {color:red}，应用时<center id="one"><p class="two"><em>bbb</em></p></center>有效
       组合选择器：举例p,div,h2,.one,#two {color:red}，此时<p>、<div>、<h2>以及各标签的class和id属性都可以使用该CSS样式
                                   应用时<p>aaaaaa</p><div>bbb</div><em class="one">cccc</em><b id="two">dddddd</b>有效
                                   关联选择器中是用空格隔开的，组合选择器中是用逗号隔开的
  伪元素选择器：是指对同一个HTML元素的各种状态和其所包含的部分内容的一种定义方式
                                   比如<a>标签作为链接，它有各种状态，鼠标放上去是一种状态，鼠标离开又是一种状态，鼠标点击后又是一种状态
                                   而且并不是所有标签都有伪元素，比如常用的<a>标签有伪元素，<p>标签也有。<p>段落的第一行文本或第一个字母
                                   对应同一个标签的伪元素的不同状态，都要一一定义它们的CSS效果，下面以<a>标签为例
                                   正常状态a:link {font-size:1cm; color:red}，光标移动到链接上的状态a:hover {font-size:5cm; color:green}
                                   访问过的状态a:visited {font-size:2cm; color:yellow}，应用时<a href="http://www.lampuser.com">LAMP</a>
                                   也可以让<a>的伪元素和CLASS一起使用，如a.one:link {font-size:1cm; color:red}
                                   应用时<a class="one" href="http://www.lampuser.com">LAMP</a>即可。。所以对于这六个选择器，可以灵活使用

DIV+CSS的好处
DIV承载的是网页的内容，CSS承载的是网页的样式，其优点如下
①便于改版
②提高易用性
③Table布局不够灵活
④使得表现和内容分离
⑤更好的控制页面布局
⑥结构清晰，易被搜索引擎搜索
     搜索引擎会绕过CSS而直接到页面中取得想要的内容。搜索引擎只关心内容，不关心页面样式
     若页面中大量使用<table>布局，那么搜索引擎会花很多时间很大的代价才能得到想要的信息，并且<table>也特别占带宽
     另外搜索引擎爬到页面后，会首先寻找<h1>---<h6>标题文字，其中<h3>最有利于搜索引擎查找到，所以通常用<h3>作为标题

margin：外边距的标签属性
举例.bianjv {margin-bottom:1cm; margin-top:2cm; margin-left:3cm; margin-right:4cm}，应用时<p class="bianjv">aaa</p>即可
它等同于.bianjv {margin:1cm 2cm 3cm 4cm;}。另外也可自动布局，如.bianjv {margin:auto 0px}或者.bianjv {margin-left:auto}等等
使用margin综合设置如.bianjv {margin:1cm 2cm 3cm;}也是可以的，它会自动匹配到margin-bottom和margin-top和margin-left属性上

padding：内边距的标签属性
举例td {padding-left:1cm; padding-right:2cm; padding-top:3cm; padding-bottom:4cm;}
应用<table border="1"><tr><td>aaaaaaaa</td></tr></table>，这时<td>aaa</td>就会自动套用该CSS效果

float：指定文本或图像或某区域相对于另一区域的对齐方式，取值为none或left或right
举例.one {float:right;}，应用时<p class="one">aaa</p>

clear：指定元素的身边是否允许有浮动的元素，取值为none或left或right或both
举例.one {float:right; clear:left;}，应用时<b>aaa</b><b class="one">bbb</b>

【JavaWeb前传系列】第04章_DIV与CSS标准化网页布局

【JavaWeb前传系列】第04章_DIV与CSS标准化网页布局——LAMP培训专家 编辑：玄玉

【JavaWeb前传系列】第04章_DIV与CSS标准化网页布局——LAMP培训专家_{编辑：玄玉}