CSS样式表CSS样式表，可以用于控制网页中字体、颜色、图像、表格、链接和布局格式。
是Web 页面设计的重要技术，它使得网页内容与样式定义彻底分开，甚至可以将CSS保存为.css 的文件，使用时再进行调用导入。
这样就可以通过定义和修改CSS达到页面设计的效果。
1．常用CSS定义有三种方式1）内联样式：在标签内通过style属性添加样式信息。
如<p style=”color:red;”>红色字</p>。
2）嵌入样式：在页面代码的<head></head>标签内放在单独的style元素中。
如<style type=”text/css”>p{color:red;}</style>3）外部样式：将内联样式的内容存放在一个.css文件中进行调用。
2．CSS编辑器可以使用记事本或Dreamweaver进行定义。
CSS定义规则，包括:1）针对标记选择符定义。
如<style type=”text/css”>h1{color:red;}</style>2）针对Html标签中一个id选择符定义。
如id=”title”<style type=”text/css”>#title{color:white;background-color:silver;}</style>3）针对Html标签中class选择符定义。
如class=”title”，页面可以有多个该类。
<style type=”text/css”>.title{color:white;background-color:silver;}</style>另外，还有伪元素和伪类，标记语言中没有一种机制可以访问某个元素的首个字符或首行内容，而CSS可以创建这种虚拟元素访问或控制其样式。
如：：first-line为伪元素，某元素首行的样式；：first-letter为伪元素，某元素的首个字符。
Div+CSS规则1.善用css缩写规则注意上、右、下、左的书写顺序：1）关于边距（4边）1px2px3px4px(上、右、下、左)1px2px3px（省略的左等于右）1px2px(省略的上等于下)1px（四边都相同）2）简化所有body{margin：0}------------表示网页内所有元素的margin为0#menu{margin：0}------------表示menu盒子下的所有元素的margin为0 3）缩写（border）特定样式Border：1px solid#ffffff;Border-width：01px2px3px;4）关于文字的缩写规则Font-style：italic;斜体形式Font-variant：small-caps/normal;变体样式：小型大写字母/正常Font-weight：bold;Font-size：12px;Line-height：1.2em(120%)/1.5em(150%);缩写成：Font：italic small-caps bold12px/1.5em arrial，sans-serif;注意：Font-size和Line-height用斜杠组合在一起不能分开写。
5）关于背景图片Background：#FFF url(log.gif)no-repeat fixed top left;6）关于列表List-style-type：square/none;List-style-position：inside;List-style-image：url(filename.gif);缩写成：List-style：none inside url(filename.gif);2.运用4种方法来引入CSS样式1)link<link rel=”stylesheet”type=”text/css”href=”a.css”>其中rel关系、type数据类型（有多种）、href路径。
部分浏览器支持候选样式，关键字：alternate：<link rel=”stylesheet”type=”text/css”href=”a.css”><link rel=”alternate stylesheet”type=”text/css”href=”b.css”><link rel=”alternate stylesheet”type=”text/css”href=”c.css”>2)内部样式块<style><!–h1{color:red;}–></style>3)@import@import url{a.css}注意：此指令必须放在<style>容器中，并且在所有样式之前，建议放在一个html注释中，即<!-->中。
浏览器会不显示注释内的内容，而import等css代码能正常工作。
4)内联样式<p style=”color:red;”>选择器是css的一个基本概念，基本规则如下：规则结构：h1{color:red;}-----选择器{属性:值;}这类是元素选择器，基本可以包括所有html的元素，属性值可以包括多个元素，如：border：1px solid red;常用语法包括：分组，选择器和声明都可以分组:h1，h2，h3{color:red;background:#fff;}------选择器用“，”分割开，属性用”;”分割类选择器，即通过class=”stylename”应用的声明，定义:.stylename{color:red;}注意:在html中可以使用多类选择，如class=”cn1cn2cn3″。
ID选择器，即与id属性对应的样式，定义:#a{color:red;}------这个定义对用id=”a”的元素这部分都是常见的css语法，下面介绍不常见的选择器语法：父子结构，跟文档结构图对应。
如p span{border:1px solid red;}------对应<p>下面的<li>标签，可以用于准确定位.一些特殊应用(IE7支持):p>span{}------匹配所有p下所有的spanp+span{}------匹配紧接着p元素后出现的第一个span标签，2者要有相同的父标签属性选择器，(注意:属性选择器ie7才开始支持，以下版本并不支持，其他浏览器基本可以)。
语法:img[alt]{border:1px solid;}表示对应有alt属性的img标签，当然可以支持多个属性对应。
如img[alt][title]{};表示这个2个属性都有的img标签，也可以与具体值对应，如:img[alt=”摄影”]{};属性选择器中的高级应用，特殊匹配:img[class~=”b”]，其中~=:与属性中的一个值对应的，即与<img class=”a b c”>对应。
[class^=”a”]，以a开头的元素。
[class$=”a”]m，以a结束的元素。
[class*=”a”]，包含a的元素。
[class|=”a”]，等于a或以a开头的元素。
5）伪类和伪元素日常使用中，主要是<a>标签的几个伪类:link:hover:active:visited，以及:first-child:first:before:left:right:lang:focus:fist-line等等。
注意，动态伪类可以应用到任何元素，如input:focus{background:red;}，即当input标签获得焦点时背景变红。
以上语法组合使用，就能实现定位准确、简单间接的样式了。
3.选择器分类整合优先级别遵循：行内样式>ID>Class>标记基本选择器标记选择器（eg:<p></p>）类别选择器(eg:class)ID选择器复合选择器“交集”复合选择器(eg:p.menu{color:red})必须是标记+类别/ID组合“并集”复合选择器(eg:h1，h2，h3{color:red})“后代”复合选择器(eg:#menu.menulist{...})“子”复合选择器(eg:#menu.menulist.selectit{...})4.使用子选择器减少id和class的定义示例结构：<div id="menu"><div class="menulist"><div class="selectit">content</div></div></div>示例CSS：#menu{...}#menu.menulist{...}#menu.menulist.selectit{...}5.使用组选择器为不同元素应用相同的样式如h1，h2，h3，div{font-size:16px;font-weight:bold}，即h1，h2，h3，div 元素的样式都为字体16像素、字体为粗体。
6.伪类和选择符的配合使用将伪类和类组合起来使用，可以在同一个页面中完成几组不同的链接效果。
例如，定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色。
a.red:link{color:#FF0000}a.red:visited{color:#0000FF}a.blue:link{color:#00FF00}a.blue:visited{color:#FF00FF}将定义应用在不同的链接上：<a class="red"href="...">这是第一组链接</a><a class="blue"href="...">这是第二组链接</a>7．CSS的最近优先原则如果对一个元素定义了多次样式，则以最近的一级优先，最近一级的样式将覆盖其它行内样式>ID>Class>标记。
例如以下是引用片段：p{color:red}.blue{color:blue}.yellow{color:yellow}HTML中：<p>此处显示为红色</p><p class="blue">此处显示为蓝色</p><p class="blue"style="color:green">此处显示为绿色</p><p class="blue yellow">此处显示为黄色</p>注意：（1）注意样式的几个优先顺序(优先级由上至下递减，下面的样式覆盖上面的样式)。