下载文档原格式
css知识全面总结嘿，朋友！今天咱们来聊聊 CSS 这玩意儿。
CSS 就像是给网页化妆的魔法颜料，能让网页变得美美的。
你想想，要是一个网页没有 CSS，那得多单调、多无聊呀！就好像一个人素颜出门，虽说也能看，但总觉得缺了点啥。
先来说说 CSS 的选择器。
这选择器啊，就像是你手里的魔法棒，指哪儿打哪儿。
比如说，“类选择器”，你给某个元素加上一个独特的类名，然后通过这个类名来控制它的样式，是不是很神奇？这就好比你在一群人中，喊出一个特定的名字，就能找到那个人，然后给他打扮打扮。
还有“ID 选择器”，这可厉害了，每个页面里 ID 得是唯一的。
它就像给网页元素颁发的独一无二的身份证，通过这个身份证，你能精准地给它设定样式。
比如说一个网页里的导航栏，你给它一个特定的ID，然后让它的颜色、字体、大小都变得与众不同。
再说说 CSS 的属性。
字体属性那可是基础中的基础，什么字体大小、字体样式、字重等等。
这就像是给文字穿上不同的衣服，有时候是休闲装（正常字体），有时候是正装（加粗字体），是不是很有趣？还有背景属性，能给网页元素换上各种背景颜色或者图片。
这就像给房间换壁纸，今天喜欢蓝色，明天喜欢粉色，随你心情！再瞧瞧边框属性，能给元素加上边框，粗细、样式、颜色随你定。
这是不是有点像给一个物品加上漂亮的框框，瞬间就高大上起来了？至于定位属性，那可真是个神奇的存在。
绝对定位、相对定位，让元素想在哪就在哪。
这就好比你在摆积木，想把哪块积木放哪儿就放哪儿，多自由！还有浮动属性，能让元素飘起来，并排排列。
这感觉就像一群小伙伴手拉手并排走，多整齐！CSS 还有盒模型呢，这可是个重要的概念。
内容、内边距、边框、外边距，就像一个盒子的里里外外，每个部分都能影响元素的最终大小和显示效果。
另外，CSS 中的媒体查询也不能忽略。
它能让网页根据不同的设备和屏幕尺寸呈现出不同的样式。
这就好比你有一件衣服，能根据不同的场合自动变换款式，是不是超厉害？总之，CSS 就像是网页的化妆师，能让网页变得丰富多彩、独具魅力。
CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。
引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。
type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。
⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。
是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。
外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。
css教程菜鸟CSS（层叠样式表）是一种用于描述网页上的元素布局和样式的语言，它能够使网页更加美观和易于阅读。
本文将介绍一些CSS的基础知识和常用属性，以帮助菜鸟入门。
首先，让我们了解一下CSS的基本语法。
CSS由选择器和声明块组成。
选择器指定了要应用样式的HTML元素，而声明块则包含了一系列属性-值对，用于描述要应用到元素上的样式。
下面是一个简单的示例：```p {color: red;font-size: 20px;}```上述代码中，选择器“p”表示要应用样式的HTML段落元素。
声明块中的属性-值对指定了段落的文本颜色为红色，字体大小为20像素。
接下来，我们将介绍一些常用的CSS属性。
1. 字体属性：用于设置文本的字体样式，如字体大小、字体族等。
例如：```p {font-size: 16px;font-family: Arial, sans-serif;}```上述代码将段落的字体大小设置为16像素，字体族为Arial或者sans-serif。
2. 背景属性：用于设置元素的背景样式，如背景颜色、背景图片等。
例如：```body {background-color: lightblue;background-image: url("bg.jpg");}```上述代码将页面的背景颜色设置为浅蓝色，背景图片为名为“bg.jpg”的图片。
3. 边框属性：用于设置元素的边框样式，如边框宽度、边框颜色等。
例如：```div {border: 1px solid black;}```上述代码将`<div>`元素的边框宽度设置为1像素，边框颜色为黑色。
4. 盒模型属性：用于调整元素的尺寸和定位，如元素的宽度、高度、外边距等。
例如：```img {width: 200px;height: 150px;margin-top: 10px;}```上述代码将图片的宽度设置为200像素，高度设置为150像素，并且向上外边距10像素。
CSS知识点总结⼀．Css分类1.替代replaced elements:img input(radio button, checkbox, text)不可替代nonreplaces elements:html,xhtml,span,a,div,body,form,p,em,strong,2.block-level and inline-level:(block可以包含inline 元素，反过来是不可以的！) block-level:p div li ulinline-level: a span strong em b i u⼆．选择器2.元素选择器：P{}3. Grouping Selectors(分组)eg:h2, p {color: gray;}4.The universal selector（通配选择器）eg:* {color: red;}5. Grouping Declarationseg:h1 {font: 18px Helvetica; color: purple; background: aqua;}6.类选择器：.ddd7.ID选择器：#ddd8.属性选择器简单属性选择h1[class] {color: silver;}根据具体属性值p[class="warning"] {font-weight: bold;}根据部分属性值选择p[class~="warning"] {font-weight: bold;}⼦串匹配属性选择器[foo^="bar"][foo$="bar"][foo*="bar"]特定属性选择类型*[lang|="en"] {color: white;}9.使⽤⽂档结构后代选择器blockquote b, p b {color: gray;}选择⼦元素h1 > strong {color: red;}选择相邻兄弟元素h1 + p {margin-top: 0;}10.伪类选择器静态伪类：a:visited{}a:link{}(好像⽤不了)动态伪类：a:focus{}(常⽤于input元素)a:hover{}a:active{}选择第⼀个⼦元素：Li:first-child{}根据语⾔选择（）*:lang(fr){}结合伪类：link:hover:active {color: orange;}伪元素选择器：设置⾸字母样式li:first-letter{ color:Red;设置第⼀⾏的样式：.aa:first-line{ color:Purple;}设置之前和之后元素的样式：a:before{ content:"{}"; color:Silver;}a:after{ content:"end"; color:Aqua;}三．结构和层叠1.特殊性：重要性：!Important (最强悍！) eg: p.dark {color: #333 !important; background: white;}内联样式特殊性：1000 ID选择器：0100 li#answer {color: navy;} /* 0,1,0,1 (winner) */类属性值，属性选择或伪类：0010 h2.grape{color: purple;}/* 0,0,1,1 (winner)*元素和伪元素：0001 h1 {color: red;} /* 0,0,0,1 */通配选择器：0000结合符:⽆继承：⽆（0特殊性⽐⽆特殊性的更强）Eg: * {color: gray;} (（当h1中有其他元素时win）h1#page-title {color: black;}2.继承a)Border：没有继承b)Body:可以向上继承到html,其他的都是向下继承3.层叠：具有相同特殊性的靠后的权重⼤按权重和来源排序：（p79）读者的重要声明>创作⼈员的重要声明>创作⼈员的正常声明>读者正常>⽤户代理声明按特殊性排序按顺序排序Lvha顺序⽐较重要：即live visited hover active四．值和单位1.数字2.百分数3.颜⾊命名颜⾊：blue green white red black maroon ...⽤GRB指定颜⾊函数式RGB颜⾊(百分数法：0%-100%，数字法：0-255)Eg:rgb(100%,100%,100%)rgb(0%,0%,0%)rgb(255,255,255)rgb(0,0,0)灰度表：p.one {color: rgb(0%,0%,0%);}p.two {color: rgb(20%,20%,20%);}p.three {color: rgb(40%,40%,40%);}p.four {color: rgb(60%,60%,60%);}p.five {color: rgb(80%,80%,80%);}p.six {color: rgb(0,0,0);}p.seven {color: rgb(51,51,51);}p.eight {color: rgb(102,102,102);}p.nine {color: rgb(153,153,153);}p.ten {color: rgb(204,204,204);}25%*255=63.75=64⼗六进制RGB颜⾊Web颜⾊：rgb值20%和52和33（⼗六进制）整除4.长度单位a)绝对长度单位：in,cm,mm,pt(点),pc（派卡）1in=2.54cm 1cm=0.3394in1 in=72pt 1 in=6pcB) 相对长度单位Em和ex:Px:1em=14px 1em=2exEm最好的度量单位5.URL绝对URL相对URL注意：url和开始括号之间不能有空格6.关键字None:不同于0，Inherit:它的属性值和⽗元素相同7.css2单位：p(110)a)⾓度值：deg, grad 和 radb)时间值：s,ms 1000ms=1sc)频率值：hz,mhz五．字体1.字体系列制定字体系列：p {font-family: TimesNR,serif;}p {font-family: Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;} 有空格、包括“#”和”$”的时候加“单引号”Cursive必须加“双引号”2.字体加粗a)Font-weight:bold bolder mormal 100 --900 lighterb)相对⼤⼩关键字:Bolder 是相对于⽗级字体粗细⽽⾔3.字体⼤⼩a)Font-size:xx-small x-small small medium large x-large xx-large smaller larger inheritb)相对⼤⼩关键字：larger smallerc)绝对⼤⼩：xx-small x-small small medium large x-large xx-larged)百分数：根据⽗元素继承的⼤⼩来计算strong {font-weight: lighter; font-size:larger;}strong b {font-weight:lighter; font-size:200%;}4.风格和变形a)字体风格：Font-style:italic oblique normal inheritb)字体变形：font-variant:small-caps normal inherit（只对英⽂有⽤，对汉语没有影响）c)转换⼤⼩写：p{ text-transform:uppercase;}5.拉伸和调整字体a)字体拉伸：font-stretch:normal| wider | narrower | ultra-condensed | exTRa-condensed| condensed| semi-condensed| semi-expanded| expanded| exTRa-expanded| ultra-expanded | inheritb)我的浏览器不⽀持（可以忽略）6.Font属性a)等价：h1{ font-style:inherit; font-weight:bold; font-variant:small-caps; font-size：20px; font-family:Candara,Corbel;}h1{ font:inherit bold small-caps20px Candara,Corbel; }b)注意;前两个可以互换，后两个不可以，normal 可以省略c)增加⾏⾼：line-height,Eg：body {font-size: 12px;}h1 {font: bold italic200%/1.2Verdana,Helvetica,Arial,sans-serif;}7.字体匹配六．⽂本属性1.缩进和⽔平对齐a)缩进⽂本：(只能⽤于块级元素！)text-indent:3em 10%b)⽔平对齐：(只能⽤于块级元素！)text-align:left center right justify(两端对齐⽂本) inherit2.垂直对齐：元素中⽂本基线之间的最⼩距离a)Line-height:”line-height”减去“font-size”等于⾏间距i.Line-height:18px,0.33in,150%,1.5emii.适⽤于所有元素iii.⾏⾼和继承：Line-height值从⽗元素继承时，要从⽗元素计算，⽽不是⼦元素上计算。
css style用法CSS（CascadingStyleSheets）是一种用于网页设计的样式表语言。
它可以控制HTML文档中的元素的外观和布局，使得网页设计更加美观、简洁、易于维护。
在本篇文章中，我们将探讨CSS style用法的基础知识和常见技巧。
基础知识CSS样式表由一系列的规则（rule）组成，每个规则包含一个选择器（selector）和一组声明（declaration）。
选择器用于指定要应用样式的HTML元素，声明则用于定义这些元素的样式。
例如，下面的CSS规则将为所有h1元素设置红色字体、黑色背景和20像素的上下内边距：```cssh1 {color: red;background-color: black;padding: 20px 0;}```在这个例子中，h1是选择器，color、background-color和padding是声明，它们用冒号（:）分隔开来，每个声明以分号（;）结尾。
需要注意的是，CSS规则是区分大小写的，因此h1和H1是不同的选择器。
选择器选择器是指定要应用样式的HTML元素的标识符。
下面是一些常见的选择器类型：1. 元素选择器（Element Selector）：通过HTML元素的名称来指定要应用样式的元素。
```cssp {color: blue;}```这个规则将为所有p元素设置蓝色字体。
2. ID选择器（ID Selector）：通过HTML元素的id属性来指定要应用样式的元素。
```css#header {background-color: gray;}```这个规则将为id为“header”的元素设置灰色背景。
3. 类选择器（Class Selector）：通过HTML元素的class属性来指定要应用样式的元素。
```css.highlight {font-weight: bold;}```这个规则将为所有class为“highlight”的元素设置粗体字。
css总结笔记
CSS 是层叠样式表的缩写，是一种用于设计和布局网页的编程语言。
以下是CSS 总结笔记的全文:
一、CSS 的概述
CSS 用于设计和布局网页，可以让网页变得更加生动、美观和易读。
CSS 可以用于网页的头部、主体和底部，以及用于网页的各个部分。
二、CSS 的语法
CSS 的语法包括选择器、属性和值等。
选择器用于选择网页中的元素，属性和值用于设置元素的样式。
三、CSS 的样式
CSS 的样式包括颜色、字体、大小、边框、背景等。
通过设置这些样式，可以让网页变得更加美观。
四、CSS 的应用场景
CSS 的应用场景包括网页的布局、元素的样式设置和网页的颜色搭配等。
通过使用 CSS，可以让网页变得更加生动、美观和易读。
五、CSS 的兼容性
CSS 在不同的浏览器中有不同的兼容性问题。
为了解决这个问题，可以使用CSS 的媒体查询和伪元素等方法。
六、CSS 的优化
CSS 的优化可以提高网页的加载速度和用户体验。
可以通过减少重排、减少重写和压缩 CSS 等方式进行优化。
七、CSS 的拓展
CSS 还有很多拓展功能，如响应式设计、动画效果、Web 组件等。
通过使用CSS，可以让网页变得更加生动、美观和易读。
八、CSS 的总结
CSS 是网页设计中不可或缺的一部分。
通过使用 CSS，可以让网页变得更加生动、美观和易读。
在学习 CSS 时，需要熟练掌握语法、样式和应用场景，并了解 CSS 的兼容性和拓展功能。
css的入门教程css的入门教程CSS是CascadingStyleSheets(层叠样式表)的缩写。
是一种对web文档添加样式的简单机制，属于表现层的布局语言。
1.基本语法规范分析一个典型CSS的语句：p{COLOR:#FF0000;BACKGROUND:#FFFFFF}其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；样式声明写在一对大括号"{}"中；COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；"#FF0000"和"#FFFFFF"是属性的值(value)。
2.颜色值颜色值可以用RGB值写，例如：color:rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。
如果十六进制值是成对重复的.可以简写，效果一样。
例如:#FF0000可以写成#F00。
但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
3.定义字体body{font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}字体按照所列出的顺序选用。
如果用户的计算机含有LucidaGrande字体，文档将被指定为LucidaGrande。
没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；LucidaGrande字体适合MacOSX；Verdana字体适合所有的Windows系统；Lucida适合UNIX用户"宋体"适合中文简体用户;如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;4.群选择器当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：p,td,li{font-size:12px;}5.派生选择器可以使用派生选择器给一个元素里的子元素定义样式，例如这样：listrong{font-style:italic;font-weight:normal；}就是给li下面的子元素strong定义一个斜体不加粗的样式。
CSS知识点1、未知宽⾼的元素实现⽔平垂直居中⽅法⼀：flexbox布局优点：⽅便缺点：兼容性不好,IE⽀持很差<style>.parent4{display: flex;justify-content: center;align-items: center;width: 300px;height:300px;background: #FD0C70;}.parent4 .child{color:#fff;}</style><body><div class="parent4"><div class="child">hello world</div></div></body></html>⽅法⼆：使⽤CSS3的transform + 绝对定位优点：⽅便，⽀持webkit内核缺点：transform兼容性差，IE9以下不⽀持<style>.parent3{position: relative;height:300px;width: 300px;background: #FD0C70;}.parent3 .child{position: absolute;top: 50%;left: 50%;color: #fff;transform: translate(-50%, -50%);}</style><body><div class="parent3"><div class="child">hello world</div></div></body>⽅法三：使⽤display: table-cell优势：⽗元素可以动态改变⾼度。
一、善用css缩写规则/*注意上、右、下、左的书写顺序*/1. 关于边距（4边）：1px 2px 3px 4px (上、右、下、左)1px 2px 3px （省略的左等于右）1px 2px (省略的上等于下)1px （四边都相同）2. 简化所有：*/ body{margin:0}------------表示网页内所有元素的margin为0#menu{ margin:0}------------表示menu盒子下的所有元素的margin为03. 缩写（border）特定样式：Border:1px solid #ffffff;Border-width:0 1px 2px 3px;4. 关于文字的缩写规则：Font-style:italic; 斜体形式Font-variant:small-caps/normal; 变体样式：小型大写字母/正常Font-weight:bold;Font-size:12px;Line-height:1.2em(120%)/1.5em(150%);Font-family:arrial,sans-serif,verdana;缩写成：Font:italic small-caps bold 12px/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);二、运用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的一个基本概念，基本规则如下：1.规则结构：h1 {color:red;}选择器 {属性:值;}这类是元素选择器，基本可以包括所有html的元素属性值可以包括多个元素，如：border：1px solid red;常用语法1)分组：选择器和声明都可以分组:h1,h2,h3{color:red;background:#fff;} ,选择器用“,”分割开,属性用”;”分割2)类选择器,即通过class=”stylename”应用的声明定义:.stylename{color:red;}注意:在html中可以使用多类选择:如class=”cn1 cn2 cn3″3)ID选择器,即与id属性对应的样式定义:#a{color:red;} ->这个定义对用id=”a”的元素2.这部分都是我们常见的css语法，下面谈一下我们不常见的选择器语法1)父子结构,跟文档结构图对应如p span{border:1px solid red;}对应的是<p>下面的<li>标签,这个很用用途,可以准确定位.一些特殊应用(IE7支持):(1) p > span{},匹配所有p下所有的span(2) p + span{} ,匹配紧接着p元素后出现的第一个span标签,2者要有相同的父标签2)属性选择器:(注意:属性选择器ie7才开始支持,以下版本并不支持,其他的浏览器基本可以)语法:img[alt]{border:1px solid;}表示对应有alt属性的img标签,当然可以支持多个属性对应,如img[alt][title]{};表示这个2个属性都有的img标签,也可以与具体值对应:如:img[alt=”摄影”]{};属性选择器中的高级应用,特殊匹配:(1)img[class~=”b”], ~= : 与属性中的一个值对应的,即与<img class=”a b c”>对应(2)[class^=”a”],以a开头的(3)[class$=”a”],以a结束的(4)[class*=”a”],包含a的(5)[class|=”a”],等于a或以a开头的3)伪类和伪元素日常使用中主要是<a>标签的几个伪类:link:hover:active:visited以及:first-child:first:before:left:right:lang:focus:fist-line等等注意:动态伪类可以应用到任何元素,如,input:focus{background:red;}当input标签获得焦点时背景变红以上语法组合使用,就能实现定位准确、简单间接的样式了。
三、选择器分类整合优先级别遵循：行内样式 >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 { ... })四、使用子选择器减少id和class的定义示例结构：<div id="menu"><div class="menulist"><div class="selectit">content</div></div></div>示例CSS：#menu { ... }#menu .menulist { ... }#menu .menulist .selectit { ... }五、使用组选择器为不同元素应用相同的样式如h1,h2,h3,div{font-size:16px;font-weight:bold}则h1,h2,h3,div元素的样式都为字体16像素，字体粗体六、伪类和选择符的配合使用将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：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>七、 CSS的最近优先原则/*如果对一个元素定义了多次样式，则以最近的一级优先，最近一级的样式将覆盖其他行内样式 >ID > Class >标记 */以下是引用片段：CSS: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）注意样式的几个优先顺序(优先级由上至下递减，下面的样式覆盖上面的样式)：--元素style设定--head区<style></style>中的设定--外部引用css文件（2）优先级不是按访问顺序来设定的，而是又css中的声明顺序来设的。
如上例中<p class="yellow blue">此处显示为黄色</p>也显示为黄色，因为在css 定义中.yellow在.blue的后面。
八、书写正确的链接样式当用css定义链接的各种状态时，要注意书写的顺序即：:link :visited :hover :active利用首字母：L V H A，你可以通过记忆LoVe,Hate,两个单词来记住其顺序。
:link --------链接的颜色:visited -----鼠标点击后的颜色:hover -------鼠标放上去未点的颜色（悬停）:active-------鼠标点击瞬间的颜色九、:hover的灵活运用IE6不支持除a标签以外的:hover属性，我们了解:hover属性是鼠标悬停效果。
在IE7和FF中，对几乎任意元素都可以设置:hover属性效果。
这对我们做不同的访问效果很好。
如：p {width : 360px;height : 80px;padding : 20px;margin : 50px auto 0 auto;border : 1px solid #ccc;line-height : 25px;background : #fff;}p:hover {border : 1px solid #000;background : #ddd;}----------------此效果针对IE7和FFp a {color : #00f;text-decoration : none;font-size : 13px;}p a:hover {color : #036;text-decoration : underline;}-----------------此效果针对IE6十、定义A标签要注意的小问题当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。
