Div + CSS

Div 必须和CSS配合使用才能发挥它的作用，否则就是一个普通的标签了。

CSS 4应用种形式

内联式样式表

<P style="font-size:12px;color:red;background-color:green">abcdefg</P>

嵌入式样式表

<head><style><!-- P { ont-size:12px;color:red;background-color:green}//--></style></head>

r

<!--//-->该标签的作用是假如浏览器不支持<style>的话，就读这个标签（注释用标签），那么就可以把里面的内容给省略掉了。

外部式样式表

<head><link rel="stylesheet" type="text/css" href="style/test.css"></head>

输入式样式表

r

将一个css文件输入到一个html文件或一个css文件中。

<head><style><!-- @import url(style/test.css);//--></style></head>

CSS 表达

CSS的选择器

html标记选择器

<style><!-- P { ont-size:12px;color:red;background-color:green}//--></style>

class选择器

<style><!-- P.one { ont-size:12px;color:red;background-color:gray} P.two { ont-size:14px;color:yellow;background-color:red} P.three { ont-size:20px;color:blue,background-color:green}//--></style>.......<p class="one">huuhukh</p><p class="two">utyfyftffy</p><p class="three">6532366h</p>......

r

这样就可以对所有的<P>标签进行表述了，只要加上不同class就可以有不同的<P>出现了。

<style><!-- .one { ont-size:12px;color:red;background-color:gray} .two { ont-size:14px;color:yellow;background-color:red} .three { ont-size:20px;color:blue,background-color:green}//--></style>.......<p class="one">huuhukh</p><p class="two">utyfyftffy</p><div class="three">6532366h</div><h1 class="one">hhhhhh</h>......

r

甚至可以“. 标识”的形式，这样就能更广泛地被使用了。

ID 选择器

<style><!-- #one { ont-size:12px;color:red;background-color:gray} #two { ont-size:14px;color:yellow;background-color:red} #three { ont-size:20px;color:blue,background-color:green}//--></style>.......<p id="one">huuhukh</p><p id="two">utyfyftffy</p><p id="three">6532366h</p>......

r

id选择器具有很强的唯一性，但单个页面中是不能重复的。就是为了指定莫一个html的特定元素因为其唯一性，所以更多的时候是配合javascrip去使用

关联选择器

<style><!-- center p em { ont-size:12px;color:red;background-color:gray} //--></style>.......<center> <p> <em> 5484565</em> </p></center>......

<style><!-- #one .two em { ont-size:12px;color:red;background-color:gray} //--></style>.......<center id="one"> <p class-"two"> <em> 5484565</em> </p></center>......

组合选择器

<style><!-- p,div,a,h1,.one,#two { ont-size:12px;color:red;background-color:gray} //--></style>.......<p> aaaaaaaa </p<div>bbbbbbbb</div><b class="one">ccccccccccc<b/>em> 5484565</em> </p></center>......

伪元素选择器

<style><!-- a:link { font-size:12px;color:red} a:hover { font-size:20px;color:yellow} a:visited { font-size:5px;color:blue} //--></style>.......<a herf ="www.google.com">google</a>......

<style><!-- div a:link { font-size:12px;color:red} a.two:hover { font-size:20px;color:yellow} a.three:visited { font-size:5px;color:blue} //--></style>.......<a herf ="www.google.com">google</a><a class-"two">............

r

这个就是一个复杂几种方式混合在一起的表达。

属性

margin可以被认为是外边距

果没有大小限制，margin可以写无限大哦而且还要考虑到相对性，a的下margin是4cm，a不动就是说b往下走4cm了。

margin-right：automargin-left：auto这个就是中间对齐了。

Padding可以被认为是内边距

float

clear

CSS的继承

选择器的声明

Div + Css的优势

你的外边距可能就是他的内边距你的内边距也可能是别的外边距