CSS概述
1.CSS样式简介
目前互联网页面的样式采用CSS设计为主，使用CSS，可对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。使用CSS+Div布局页面主要优点有如下:
结构清晰，容易被搜索引擎搜索到。
缩短改版时间，只要修改CSS文件就可以重新设计页面。
表现与内容相分离，将设计部分分离出来放一个独立的样式文件中。
可方便将网页的风格格式同时更新。
2.CSS基本语法
CSS语言由标志和属性构成，样式的基本语法如下:
样式名{属性:属性值;属性:属性值;……}
也可以写成
样式名{
属性:属性值;
属性:属性值;
……; }
3.CSS样式的分类
3.1. 按选择器类型分类
样式按定义时选择器类型的不同，又可分为如下几种类型:
类样式:如.style1
ID样式:如 #container
标签样式:如 p、body等系统定义的样式
复合样式:如.style1 img
3.2.按样式的定义位置分类
CSS样式按样式的存放位置分为:
内部样式:定义在网页文件里面。
外部样式:单独定义在样式文件里，网页文件通过引用样式文件使用样式。
浏览器默认样式。
html内联样式。
4.内部样式的创建
在网页的<head>标签内添加内部样式标志代码:
<style type="text/css">
......
</style>
在<style>标签内定义相关样式
5.外部CSS样式文件的引用
在网页中添加css文件夹中名为style.css的样式文件，在<head>标签内的引用样式代码如下:
<link href="css/style.css" rel="stylesheet" type="text/css" />
通过link元素将外部样式与网页实现关联，代码具有三个属性，其中 rel说明文件类型，href指定文件路径，type 属性在 html5 网页中为可选属性，可以不写，用于说明文本类型。
6.类样式的引用
类样式定义时,样式名前面加“.”前缀符号，如果不加，则系统自动添加。可应用于任何HTML元素，可在页面的不同部分不同元素多次引用。连续的字符、段落和层引用类样式的写法如下:
· 连续的字符引用类样式:<span class="样式名">……</span>
· 段落引用类样式:<p class="样式名">……</p >
· 层引用类样式:<div class="样式名">……</div>
7.ID样式的引用
样式定义时,样式名前面加“#”前缀符号，一个页面仅应用于一个HTML元素时使用，连续的字符、段落引用ID样式的写法如下:
. 连续的字符引用样式:<span id="样式名">……</span)
· 段落引用样式:<p id ="样式名">……</p >
一般用于定义布局层样式，层Div引用ID样式写法如下：
. <div id ="样式名">……</div>
*-* 标签样式和复合样式一般不需要特别引用
8.标签样式
HTML 元素包括布局标签如 header、nav、footer、article、section和其他标签如 p、body、标题h1-h6等。标签一般有默认的样式，当默认样式无法满足要求时，用户可重新定义这些标签样式。如在层中添加的段落，段落有默认的上边距，为了解决边距超出层的问题，需要设置段落的上边距为0px，同样默认的标题样式也有上边距问题，这样可以一起定义标题和段落的标签样式如下:
h1, h2 , h3 , h4 , h5 , h6 , p {
margin-top: 0; }
标签样式名前面不加任何符号，以h1样式名为例，引用方式一般如下:
<h1> 标题1内容 </h1>
大部分的标签样式不需要引用，以<body>标签为例，重定义<body>标签后样式可自动更新。
9.复合内容样式
如果要定义同时影响两个或多个标签、类或ID的复合规则，应该选择定义“复合内容”样式，复合样式只需要引用前面部分的样式即可。复合样式定义举例如下。
1)如果定义“div p”样式，则Div标签内的所有p元素都将受此规则影响。
2)如要求一个层中的图片与文字形成左环绕效果，假设该层引用类样式.pic,则可定义复合样式:
.pic img { float : left ; }
3)当图片设置为链接时，会在图像周围显示默认的蓝色边框，可修改图片链接样式使得图片无边框，代码如下:
a img { border: none; }
