CSS样式表

CSS，又称样式表，是用来控制显示的模样，比如文字的大小，颜色；网页排版；鼠标的样式等等。

CSS可以直接写到网页中的<style>内,通常放在head区；也可以通过元素的style属性，指定CSS样式。

为了解决浏览器显示不一致的问题，通常会有一段固定写法CSS放在最前面来重置样式，称之为Reset CSS。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
body { line-height:1;}
ol, ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption, th, td { text-align:left; font-weight:normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

可将各个页面共用的CSS写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

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

其中"body"称为"选择器"；line-height是修改是CSS属性名称，1对其设定的值。

<p id="header">标题</p>

3.通过class选择一批元素，一个元素可以有多个class，一个class可以应用到多个元素身上。

<p class="red big">A</p>
<p class="black big">B</p>

.red {} /*选中A*/
.black {} /*选中B*/
.big {} /*选中A和B*/

颜色是十六进制的格式，可以使用一些屏幕取色软件来获取。

background:#666666 url(bg.gif);

border:1px solid #ccc;

布局无非是将网页元素左左右右的摆放，可以通过 float(浮动) 来实现这一效果。

下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

通常的解决方案是在其父层（如果没有，就新加一个div作为父层）的class上加上clearfix。

.clearfix {zoom:1}
.clearfix:after {
content: '\20';
display: block;
clear: both;
}

float只能左右定位，如果你想要居中的效果，除了用上提到的text-align:center，还可以试试

这其中，日日被人们所诅咒的，是那过时却迟迟不肯退下舞台的IE6。

通常来说，只需要对IE做HACK就可以了。因为出现样式兼容性问题，80%的情况下，是因为IE的Bug。

他只觉得两眼发黑，但还是坚持一边看着教程，一边对自己的简历修修改改。

<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="reset.css" type="text/css" />
<style>
.clearfix {zoom:1}
.clearfix:after {
content: '\20';
display: block;
clear: both;
}
body{background:#222;}
#main{
	padding:1px;
	width:700px;
	margin:15px auto;
	background:#fff;
}
#header{
	background:url(sprites.gif) 0 100%;
	padding:20px 0 30px 30px;
	color:#fff;
	font-size:26px;
    border-bottom:#CC0000 5px solid;
}
#content{
margin-top:1px;
border-top:#C00 1px dotted;
}
.bk1{
margin:10px;
}
.bk1 p{
padding:6px;
line-height:1.6;
}
#footer{
	text-align:right;
	margin:20px 10px;
	font-size:12px;
	color:#666;
}
</style>
</head>
<body>
<div id="main" >
    <p id="header">麻油四</p>
    <div class="clearfix" id="content">
        <p style="text-align:center;margin:20px;float:right;">
            <img src="m4.jpg" />
        </p>
        <div class="bk1">

            <p><b>基本资料</b></p>
            <p>学历: 本科</p>
            <p>专业: XX工程</p>
            <p>英语水平: CET4  </p>
            <p>联系方式: 138xxxxxx  </p>
        </div>

        <div class="bk1">
            <p><b>自我介绍</b></p>
            <p>本人勤劳肯干，任劳任怨，...(略去废话5000字)</p>
        </div>
        <div class="bk1">
            <p><b>实习经历</b></p>
            <p>2006年暑期在物价局实习，负责计算机维护和文字处理</p>

            <p>2007年暑期在毅诚商贸有限公司实习，负责网络维护</p>
            <p>2009年暑假在宽网吧屋网吧打工，负责网络建设、维护及网络安全</p>
        </div>
        <div class="bk1">
                <p><b>个人特长</b></p>
                <p>吃饭，睡觉</p>

        </div>
    </div>
	<div id="footer" >
		Copyright 2009 麻油四
	</div>
</body>

他做了一个梦，梦见了他开着凯迪拉克，拿着大束美丽的花儿，微笑着走向心爱的MM……