标签：des   com   http   blog   style   class   div   img   code   java   size   

前言：这是上学时期对CSS学习的整理，一直没见过光，由于不是专门做前端开发的，难免写不到重点，但对于看懂CSS，和掌握一些基本的用法，熟悉里面的门路还是大有裨益的。由于是从word中贴过来的，排版和格式都稍差些。方便日后自己查阅，方便自己同时也方便他人，多好的一件事啊，呵呵！

CSS目录

一、       CSS简介... 4

　　1.    CSS的分类... 4

　　1.1      内嵌样式... 4

　　1.2      内部样式表... 4

　　1.3      外部样式表... 4

　　2.    样式表的优先级... 4

二、       CSS语法... 5

　　1.    基本语法... 5

　　2.    Selector选择器的分类... 5

　　　　1.1      标签选择器... 5

　　　　1.2      id选择器... 5

　　　　1.3      类选择器... 5

　　　　1.4      组合选择器... 5

　　　　1.5      属性选择器（CSS 2）... 6

　　　　1.6      后代选择器... 6

　　　　1.7      子选择器（CSS 2）... 7

　　　　1.8      伪元素选择器... 7

　　3.    选择符的继承... 8

　　4.    选择器使用时的注意事项... 8

　　5.    CSS选择器中的空格... 8

三、       CSS中常用的属性和取值对照... 10

　　1.    字体属性... 10

　　　　1.1      font-family. 10

　　　　1.2      font-style. 11

　　　　1.3      font-variant 11

　　　　1.4      font-weight 11

　　　　1.5      font-size. 11

　　　　1.6      font 11

　　2.    文本属性... 12

　　　　2.1      letter-spacing. 12

　　　　2.2      line-height 12

　　　　2.3      text-align. 12

　　　　2.4      text-decoration. 13

　　　　2.5      text-indent 13

　　　　2.6      text-transform.. 13

　　　　2.7      vertical-align. 13

　　　　2.8      word-spacing. 14

　　3.    框填充属性... 14

　　　　3.1      padding-bottom.. 14

　　　　3.2      padding. 14

　　4.    框边框属性... 14

　　　　4.1      border-top. 14

　　　　4.2      border-top-width. 16

　　　　4.3      border-width. 16

　　　　4.4      border-color. 16

　　　　4.5      border-style. 16

　　　　4.6      border. 17

　　　　4.7      margin. 17

　　5.    框位置属性... 18

　　　　5.1      height 18

　　　　5.2      width. 18

　　　　5.3      float 18

　　　　5.4      clear. 18

　　6.    颜色和背景属性... 18

　　　　6.1      color. 18

　　　　6.2      background-color. 19

　　　　6.3      background-image. 19

　　　　6.4      background-repeat 19

　　　　6.5      background-attachment 19

　　　　6.6      background-position. 19

　　　　6.7      background. 20

　　7.    分类属性... 20

　　　　7.1      display. 20

　　　　7.2      white-space. 20

　　　　7.3      list-style-type. 21

　　　　7.4      list-style-image. 21

　　　　7.5      list-style-position. 21

　　　　7.6      list-style. 21

四、       span与div的比较... 22

五、       盒子模型（Box model）... 22

　　1.    外边距折叠现象（Collapsing margins）... 25

　　2.    对内联元素(Inline Element)设置margin和padding不显示的问题... 27

　　3.    display的属性值详解... 28

　　4.    overflow的作用详解... 30

　　5.    white-space属性详解... 31

　　6.    background-position用法详解... 31

　　7.    position用法详解... 34

六、       CSS中的缩写... 34

　　1.    色彩缩写... 34

　　2.    盒子大小：margin、padding的缩写... 34

　　3.    边框（border）的缩写... 35

　　4.    outline的简写... 35

　　5.    背景（background）的简写... 35

　　6.    字体（fonts）的简写... 36

　　7.    列表（lists）的简写... 37

七、       CSS中应该注意的地方... 38

八、       javascript调用css. 40

一、        CSS简介

CSS是层叠式样式表(Casding Style Sheet)的简称，它是用来对HTML文档的布局、字体、颜色、背景和其它文图效果实现更加精确的控制。

 1.    CSS的分类

CSS按其位置可以分成三种：

• 内嵌样式(Inline Style)
• 内部样式表(Internal Style Sheet)
• 外部样式表 (External Style Sheet)

1.1    内嵌样式

Inline Style是写在Tag（标签）里面的，内嵌样式只对所在的Tag有效。

例：

这个Style定义里面的文字是20pt，字体颜色是红色。

1.2    内部样式表

内部样式表是写在HTML的

例：

h1.mylayout {border-width:1; border:solid; text-align:center; color:red}

这个标题使用了style。

这个标题没有使用style。

1.3    外部样式表

将样式 (Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。

例：

 2.    样式表的优先级

在对页面作用时，优先级高的会覆盖优先级低的样式，所以一个标签内容的样式是通过一个层叠的样式表来确定的。

样式(Styles)的优先级依次是：

内嵌(inline) → 内部(internal) → 外部(external) → 浏览器缺省(browser default)

二、        CSS语法

1.      基本语法

一个样式 (Style)的语法由三部分构成：Selector(选择器)，属性(Property)，属性值 (Value)。

语法格式：

selector {property1:value[; property2:value; property3:value;...]}

有多个属性的话，属性间用分号隔开。

 2.      Selector选择器的分类

常用的选择器有：标签选择器、id选择器、类选择器、组合选择器、属性选择器、后代选择器、子选择器（直接后代选择器）、伪元素选择器

1.1    标签选择器

标签选择器，即选择符为HTML标签，HTML中所有的Tag都可以作为selector，比如 p、h1、em、a，甚至可以是 html 本身。

例：

p{font-size: large; color: red;}

如选择符是一个星号（*），那么其属性将应用于文档中的每一个标签元素。

1.2    id选择器

id选择器以“#”开头，选择器的名字必须以字母开头不能用数字或者下划线开头。注意ID调用在一个html页面中只能用一次。

例：

#wdg97{font-size: 20;color:yellow}

1.3    类选择器

直接用“.”加上Class名称作为一个Selector，Class Selector就没有Tag的局限性，可以用于不同的Tag

例：

.center {text-align: center}

这个标题居中显示。

这个段落居中显示。

1.4    组合选择器

前面的标签选择器、类选择器可以组合在一起，一同设置其style。

例：

p,h1,body{color:blue}

p,h1,.top{color:blue}

1.5    属性选择器（CSS 2）

CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。

简单属性选择器：

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

例1：

如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

例2：

只对有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

例3：

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。

例如，为了将同时有 href 和  title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

根据具体属性值选择

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。注意：属性与属性值必须完全匹配！

例1：

例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

例2：

可以把多个属性-值选择器链接在一起来选择一个文档。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

例3：

This paragraph is a very important warning.

如果写成 p[class="important"]，那么这个规则不能匹配示例标记。

要根据具体属性值来选择该元素，必须这样写：

p[class="important warning"] {color: red;}

根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

假设您想选择 class 属性中包含  important 的元素，可以用下面这个选择器做到这一点：

p[class~="important"] {color: red;}

1.6    后代选择器

后代选择器（descendant selector）又称为包含选择器。在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。

例1：

如果希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

This is a important heading

This is a important paragraph.

例2：

p b{}

p span{}

.special li{}

#one i{}

td.top .top1 strong{}

1.7    子选择器（CSS 2）

子选择器又称为直接后代选择器。与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器(Child selector)。

例：

如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

1.8    伪元素选择器

这里只讲锚伪类选择器。

伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示，甚至不同字体大小和风格。 优先级（显示的规则）：爱恨法则，LVHA，助记词：LoveHate

   A:link      {color:red}              /* unvisited link */

A:visited {color:green; font-size:85%} /* visited links  */

   A:hover   {color:yellow}            /* hover link */

   A:active  {color:blue; font-size:125%} /* active links   */

锚(a)伪类是最常用的伪类。

例句如下：

a:link {color: #FF0000} /* 未被访问的链接 红色 */

a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */

a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */

a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */

使用时，将会直接影响到页面超链接标记。

使用HTML的class属性来设定伪类。

例句如下：

a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */

a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */

a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */

a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */

使用时，直接在A标记里面使用class属性引入即可，上例中就使用class=“c1”的方式调用。

 3.      选择符的继承

       实际上，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更改。例如，一个BODY定义了的颜色值也会应用到段落的文本中。

 4.      选择器使用时的注意事项

①

This paragraph is a very important warning.

这两个词的顺序无关紧要，写成 warning important 也可以。

我们假设  class 为  important 的所有元素都是粗体，而  class 为 warning 的所有元素为斜体，class 中同时包含  important 和 warning 的所有元素还有一个银色的背景 。就可以写作：

.important {font-weight:bold;}

.warning {font-weight:italic;}

.important.warning {background:silver;}

这里有空格和没空格的结果是不一样的，没空格表示class同时为important和warning时的情况，有空格的话则是按后代选择器来处理。

如果是标签后直接跟class选择器（如：p.important），则它会匹配class属性为important的p标签。

例如：（红色表示匹配）

.pk p

 5.      CSS选择器中的空格

HTML文档是一棵树的结构，各元素以一种层次结构为基础构成‘树’的视图。文档树中的每个元素，要么是另一个元素的父元素，要么是另一个元素的子元素，这样，各元素之间就形成了‘父子关系’。基于这样的关系模型，CSS定义了后代选择器（descendant selector）也称为上下文选择器（contextual selector）。

后代选择器的写法为，子代元素以空格与父元素形成连接关系构成选择器，如：

div span{color:blue;}

以上规则的结果为：“作为div元素后代的任何span元素显示为蓝色字体”。

选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“...在...中找到”、“...作为...的一部分”、“...作为...的后代”，但是要求必须从右向左读选择器——《CSS权威指南》第三版

CSS还有两种选择器：类选择器和ID选择器，个中细则不是本文陈述的重点。本文的重点是：空格在后代选择器、类选择器和ID选择器相结合的情况中的种种问题，及解决方式。

先看看以下的规则：

div.blue {color:blue;}

以上规则的结果为：“所有class属性值为blue的div元素显示为蓝色字体”。然而我的要求并不是这样，我的要求是：“作为div元素后代的任何class属性值为blue的元素显示为蓝色字体”。试试以下的规则：

div .blue{color:blue;}

以上规则的改进之处为‘div‘与‘.blue‘之间多了一个空格，这样是否就能形成后代选择器呢？答案是否定的！该规则实现的结果依旧是：“所有class属性值为blue的div元素显示为蓝色字体”。

那么该怎么结合类选择器构成后代选择器的效果呢？方法是有的，那就是给父元素div设置一个class或者id属性，假设我给它加上一个class属性，于是规则就变为：

div.contain .blue{color:blue;}

以上规则的结果为：“所有class属性值为contain的div元素，其后代中class属性值为blue的任何元素显示为蓝色字体”。结果虽然不能完全达到我的苛刻要求，但已经很接近了。接近了，效果一定是很明显的，然而我却发现完全没有了蓝色字体，因为我把规则写为：

div.contain.blue{color:blue;}

以上规则的不同之处在于，‘.contain‘与‘.blue‘之间少了一个空格！少了空格，以上选择器就不是后代选择器了，而是另外一种选择器：“多类选择器”。

在HTML中，一个class值中有可能包含一个词列表，各个词之间用空格分隔。那么以上的多类选择器&am