css（层叠样式表）是一种格式化网页的标准方式，用于设置网页的样式，定义了如何显示HTML元素。
css的简单用法：
1. 基本语法：
选择器{属性：属性值；属性：属性值；.......},其中选择器可以是标签，类名，ID名。
2. css的样式表：
2.1 内链样式表：
<body style="background-color:green;margin:0;"></body>;
2.2 嵌入式样式表：
<style type="text/css">
.flow{
font-family: 楷体;
font-weight: bold;
font-size: 20px;
}
</style>
2.3 引入式样式表：
<link type="text/css">
3. 定义样式表：
3.1 html标记定义：<td></td>, td {width:60px;}td可以叫做选择器，定义标记中的内容执行其中的样式，一个选择器可以控制若干个样式属性，他们之间需要用英文；隔开，最后一个属性可以不加分号。
3.2 class定义： <p class="p" >...</p>,class定义是以 . 开始的。
.p{属性：属性值；属性：属性值；}
3.3 id定义： <p id="p" >...</p>,id定义是以 # 开始的。
#p{属性：属性值；属性：属性值；}
3.4 优先级问题：id>class>html，同级时选择离元素最近的一个
3.5 组合选择器（同时控制多个元素）：h1,h2,h3{font-size:14px;color:red;},选择器组合可以选择 ，隔开
3.6 伪元素选择器：
a:link——正常链接的样式；a:hover——鼠标放上去的样式;
a:active——选择链接时的样式; a:visited——已经访问过链接的样式;
4. css的常用属性：
4.1.CSS样式主要文本属性:
font-family：设置文本的字体，可以设置一系列字体
font-size：设置文本字体的大小（字号）
font-weight：设置文本字体的粗细
font-style：设置文本字体的样式
line-height：设置文本的行高，即行间距
text-decoration：设置文本的装饰效果
color：设置文本字体的颜色
4.2 CSS样式主要段落属性:
letter-spacing：设置字符间距
vertical-align：设置垂直方向对齐方式
text-align：设置水平方向对齐方式
text-indent：设置文本首行缩进
white-space：设置文本是否自动折行
4.3 CSS样式主要背景属性:
background：在一个声明中设置所有的背景属性
background-color：背景颜色
background-image：背景图片
background-repeat：背景的平铺方式
background-position：背景出现的初始位置
background-attachment：背景是否随页面滚动
4.4 边框属性：
| border | 设置边框的所有属性 |
| border-width | 设置四条边框的宽度属性 |
| border-sytle | 设置四条边框的样式属性 |
| border-color | 设置四条边框的颜色属性 |
| border-top | 设置上边框的所有属性 |
| border-top-width | 设置上边框的宽度属性 |
| border-top-sytle | 设着上边框的样式属性 |
| border-top-color | 设置上边框的颜色属性 |
5. 几种常见的简写：
5.1 背景的简写：background：背景颜色 url 重复 位置（background：#f60 url(images/bd.jpg) no-repeat top center）
5.2 边框的简写：border：边框风格 边框宽度，边框颜色（border：solid 2px #f60）
5.3 列表的简写：list-style：标记的类型 标记的位置 设置图像列表标记 (list-style：square inside url（images/arrow.jpg）)
6. div和span：
div和span在整个HTML标记中没有任何实在的意义，他们的存在就是为了应用css样式。div和span的区别在于，span是内联元素，div是块级元素。
7. 简单的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.flow{
font-family: 楷体;
font-weight: bold;
font-size: 20px;
}
td{
width:60px;
}
.one{
font-size: 30px;
}
.two,.six{
color: #0F0;
}
.three,.five{
color: #00F;
}
.four{
color:#F00;
}
.one,.two,.six,#pic{
text-align: center;
}
#yulan,#mudan,#guihua{
text-align: right;
}
#meihua,#haitang,#dingxiang{
text-align: left;
}
</style>
</head>
<body>
<table border="1" class="flow" cellpadding="0" cellspacing="0">
<tr class="one">
<td colspan="4">鲜花网站</td>
</tr>
<tr class="two">
<td colspan="2">玫瑰</td>
<td colspan="2">康乃馨</td>
</tr>
<tr class="three">
<td id="yulan">玉兰</td>
<td colspan="2" rowspan="3" id="pic"><img src="img/flower.jpg"/></td>
<td id="meihua">梅花</td>
</tr>
<tr class="four">
<td id="mudan">牡丹</td>
<td id="haitang">海棠</td>
</tr>
<tr class="five">
<td id="guihua">桂花</td>
<td id="dingxiang">丁香</td>
</tr>
<tr class="six">
<td colspan="2">水仙</td>
<td colspan="2">紫罗兰</td>
</tr>
</table>
</body>
</html>
结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul li{
width: 80px;
height: 29px;
text-align: center;
float:left;
list-style: none;
}
div a,a:visited{
font-size: 14px;
font-weight: 700;
text-align: center;
width: 80px;
height: 30px;
float:left;
color:#fff;
text-decoration: none;
background: url(img/menubg.gif) no-repeat 0px -29px;
}
div a:hover{
text-decoration: none;
background: url(img/menubg.gif) no-repeat 0px 0px;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="index8.html">首页</a></li>
<li><a href="index8.html">鲜花</a></li>
<li><a href="index8.html">蛋糕</a></li>
<li><a href="index8.html">绿植花卉</a></li>
<li><a href="index8.html">会员中心</a></li>
<li><a href="index8.html">在线咨询</a></li>
<li><a href="index8.html">赠品</a></li>
<li><a href="index8.html">帮助中心</a></li>
</ul>
</div>
</body>
</html>
结果：
155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
