css

css

1. 内联式样式表

<p style=”font-size:50px;color:red”></p>

2. 嵌入式样式表

<style type=”text/css”>

<!--

p{ font-size:50px;

color:red }

//-->

</style>

3. 外部样式表

<link ref=”stylesheet” type=”text/css” href=”style/test.css”>

4. 输入样式表(输入到另一个CSS文件中或者输入到嵌入式样式表中)

例如：有一个demo.css 将此导入到test.css中

@import url(demo.css)

或者

<style >

<!--

@import url(demo.css);

@import url(test.css);

//-->

</style>

二、选择器：

1、标签选择器

P{color:red}

Div{color:green}

2、类选择器

<p class=”one”></p>

<p class=”two”></p>

<div class=”one”></div>

p.one{color:red;background:green;font-size:blue}

.one{color:red;background:green;font-size:blue}(显示任何标签class为one的样式)

3、id选择器

<p id=”one”></p>

<p id=”two”></p>

<div id=”three”></div>

#one{color:red;background:green;font-size:blue}

#three{color:green;background:yellow;font-size:red}

4、关联选择器

<div>

<p></p>

<div>

div p{color:green;background:yellow;font-size:red}（只对div里面的标签为p的样式生效）

如果为 #one .two p{color:green;background:yellow;font-size:red}

则p的表面的两层第一层id必须为one，第二层class必须为two,这样第三层p标签才能显示正确的样式

5、组合选择器

<p id=”one”></p>

<p id=”two”></p>

<div id=”three”></div>

div,p{color:green;background:yellow;font-size:red}

6、伪元素选择器

<a href=”www.baidu.com”></a>

a:link {font-size:30px;color:red}

a:hover{font-size:20px;color:yellow}

a:visited{font-size:20px;color:black}

a.one{font-size:30px;color:red}(class为one的a标签的样式，组合样式)

div

1. margin（外边距）

<div class=”one”></div>

.one{margin-left:80px;

margin-right:70px;

margin-top:50px;

margin-bottom:90px;

}

或者

.one{margin:1cm 2cm 3cm 4cm}(左右上下)

.one{margin:auto}(自动)

2. padding(内边距)

<table border=”1”>

<tr>

<td></td>

</tr>

</table>

td{padding-left:40px;

padding-right:50px；

}

一行解决同外边距一样

3. float

有三个值 left、right、none（左右对齐）

<p class=”one”></p>

.one{float:left}

4. clear

四个值：none、left、right、both

<p class=”one”></p>

.one{clear:left}

(清除左边浮动的元素)