Head First HTML与CSS

第十章 div与span

CSS——掌控页面的表现

CSS简写方式（内边距、外边距、边框、背景和字体）

1.内边距简写

原CSS：

padding-top:0px;

padding-right:20px;

padding-bottom:30px;

padding-left:10px;

简写CSS：

padding:0px 20px 30px 10px;/*按照上右下左的顺序，中间用空格隔开*/

2.外边距简写

原CSS：

margin-top:0px;

margin-right:20px;

margin-bottom:30px;

margin-left:10px;

简写CSS：

margin:0px 20px 30px 10px;/*方法和内边距相同*/

如果四个方向上的内/外边距值都相同，还可以更简短：

padding:20px;

margin:30px;

如果上下边距相同，左右边距相同，可以这样写：

padding:20px 30px;/*先上下，后左右*/

margin: 40px 50px;/*先上下，后左右*/

3.边框简写

边框简写比边距更灵活，可以任意指定顺序。

原CSS:

border-width:thin;

border-style:solid;

border-color:#007e7e;

简写CSS：

border:thin solid #007e7e;/*个数随意，顺序随意*/

4.背景简写

类似于边框，可以任意指定顺序。

原CSS:

background-color:white;

background-image:url(images/cocktail.gif);

background-repeat:repeat-x;

简写CSS：

background:white url(images/cocktail.gif) repeat-x;/*顺序随意，个数随意，还可以指定另外一些值比如background-position*/

5.字体简写

字体属性众多，如font-family,font-style,font-weight,font-size,font-variant,line-height等。有一个简写可以将这些属性包装成一个属性：

font:font-style font-variant font-weight font-size/line-height font-family

前三个属性是可选的，顺序随意。

font-size属性是必须的，line-height属性是可选的，但必须写在“font-size/”后面。

最后要增加字体系列，也是可选的。

例如，原CSS:

font-size:small;

font-family:Verdana,Helvetica,Arial,sans-serif;

line-height:1.6em;

简写CSS：

font: small/1.6em Verdana,Helvetica,Arial,sans-serif;

6.问答

Q：是否一定要使用简写形式？

A：不一定，怎么合适怎么来。

<span>元素

<div>允许为块级元素创建逻辑分区，<span>元素则采用类似方法建立内联内容的逻辑分组。

可以利用类和<span>元素，对非同一元素中的同类文本进行归类，赋予相同的样式。

一般的内联元素（如span,em和strong）和块元素和图像也是可以设置宽度，增加外边距、内边距和边框的。只不过规则稍有不同。

---

欠账3篇。

这几天做实验，可能得假期补了。。。

fighting！