1、CSS(Cascading Style Sheets)简介在学 CSS 之前学习 CSS 之前，首先应学会写 HTML。如果你对 HTML 还一无所知，请参见 HTML 教程。CSS(Cascading Style Sheets)简介当初一帮技术人员想出 HTML，主要侧重于定义内容，比如表示一个段落， 表示标题，而并没有过多设计 HTML 的排版和界面效果。随着 Internet 的迅猛发展，HTML 被广泛应用，上网的人们当然希望网页做得漂亮些，因此 HTML 排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给 HTML 增加很多的属性结果
2、将代码变得很臃肿，将文本变成图片，过多利用 Table 来排版，用空白的图片表示白色的空间等。直到 CSS 出现。CSS 可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的 Tag 主要是定义网页的内容 (Content)，而 CSS 决定这些网页内容如何显示(Layout)。CSS 的英文是 Cascading Style Sheets，中文可以翻译成串联式样式表。CSS 按其位置可以分成三种： 内嵌样式(Inline Style) 内部样式表(Internal Style Sheet) 外部样式表(External Style Sheet)内嵌样式(Inline
3、Style)Inline Style 是写在 Tag 里面的。内嵌样式只对所在的 Tag 有效。内嵌式样式 (Inline Style)这个内嵌样式(Inline Style)定义段落里面的文字是 20pt 字体，字体颜色是红色。这段文字没有使用内嵌样式。内部样式表(Internal Style Sheet) 内部样式表是写在 HTML 的里面的。内部样式表只对所在的网页有效。H1.mylayout border-width:1; border:solid; text-align:center; color:red这个标题使用了 Style。这个标题没有使用 Style。内部样式表(Inter
4、nal Sytle Sheet)要用到 Style 这个 Tag，写法如下：外部样式表(External Style Sheet)如果很多网页需要用到同样的样式(Styles)，用什么方法呢？将样式(Styles)写在一个以.css 为后缀的 CSS 文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个 CSS 文件。比如可以用文本编辑器(NotePad) 建立一个叫 home 的文件，文件后缀不要用.txt，改成.css。文件内容如下：H1.mylayout border-width: 1; border: solid; text-align: center;color:red
5、然后你建立一个网页，代码如下：这个标题使用了 Style。这个标题没有使用 Style。显示示例这个标题使用了 Style。这个标题没有使用 Style。使用外部(Extenal)样式表，相对于内嵌(Inline)和内部式(Internal)的，有以下优点：样式代码可以复用。一个外部 CSS 文件，可以被很多网页共用。 便于修改。如果要修改样式，只需要修改 CSS 文件，而不需要修改每个网页。 提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个 CSS 文件，这个 CSS 文件多半已经在缓存区(其它网页早已经引用过它 )，网页显示的速度就比较快。 串联(Cascad
6、ing)CSS 第一个字母，是 Cascading，意为串联。它是指不同来源的样式(Styles)可以合在一起，形成一种样式。Cascading 的顺序是： 浏览器缺省(browser default)(优先级最低) 外部样式表(Extenal Style Sheet) 内部样式表(Internal Style Sheet) 内嵌样式表(Inline Style)(优先级最高)样式(Styles)的优先级依次是内嵌(inline), 内部(internal), 外部(external), 浏览器缺省(browser default)。假设内嵌(Inline) 样式中有 font-size:30
7、pt, 而内部(Internal)样式中有font-size:12pt，那么内嵌 (Inline)式样式就会覆盖内部(Internal)样式。Cascading Orderp font-size:12pt这个段落的内嵌样式(Inline Style)覆盖(overwrite)了内部样式表(Internal Style Sheet)，显示的字体大小是 30pt，而不是 12pt。转换为繁体中文基本语法一个样式(Style)的语法由三部分构成：Selector( 中文叫选择器有点怪怪的，就用英文吧)，属性(Property)，属性值(Value)。selector property: value举
8、个例子，下面的代码 p 就是 selector，color 就是属性，blue 就是属性值。p color:blueHTML 中所有的 Tag 都可以作为 selector。注：如果你想为 Style 加多个属性，在两个属性之间要用分号加以分隔。下面的 Style 就包含 2 个属性，一个是对齐方式居中，一个字体颜色为红，当中用分号分隔开。p text-align:center;color:red 为了提高 Style 代码的可读性，你也可以分行写：ptext-align: center;color: black;font-family: arial 组合(Grouping)你也可以将相同的属
9、性和属性值赋予多个 Selector。Selector 之间用逗号分隔。h1,h2,h3,h4,h5,h6 color: red上面的例子是将所有正文标题(到) 的字体颜色都变成红色。Class Selector利用 Class Selector，你可以用同样的 HTML Tag 构成不同的样式。比如说，你希望段落有两种样式，一种是居中对齐，一种是居右对齐。你就可以写如下样式：p.right text-align:rightp.center text-align:center其中 right 和 center 就是两个 class。然后你就可以引用这两个 class，示例代码如下：这一段居中显
10、示。这一段是居右显示。演示示例Class Selectorp.right text-align:rightp.center text-align:center这一段居中显示。这一段是居右显示。你也可以不用 HTML Tag，直接用.加上 Class 名称作为一个 Selector。示例代码如下：.center text-align: center 这种通用的 Class Selector 就没有 Tag 的局限性，可以用于不同的 Tag。比如：这个标题居中显示。这个段落居中显示。 演示示例Generic Class Selector .center text-align:center这个标题居
11、中显示。这个段落居中显示。Contextual Selector你可以为嵌入其它 Tag 的 Tag 定义样式，示例代码如下：p emcolor: redEm 这个 Tag 嵌套在 P 里面。p em 就叫做 Contextual Selector，定义嵌套于 P 里的 Em的样式。这个例子表示，在 P 里面的用 Em 这个 Tag 标记的字体颜色是红色。演示示例Class Selectorp em color:red这个段落中用 em 强调的字是红色的。这个标题中用 em 强调的字 不是红色的。CSS 注释为了方便你自己或者他人日后更好地理解你的 CSS 代码，你可以写 CSS 代码注释。C
12、SS代码注释以/* 开头，以*/ 结束。/* 段落样式 */ptext-align: center;/* 居中显示 */color: black;font-family: arial CSS 常用文本属性文本对齐属性(text-align)这个属性用来设定文本的对齐方式。有以下值： left (居左，缺省值) right (居右) center (居中) justify (两端对齐) 示例代码如下：.p2 text-align:right演示示例文本对齐属性 text-align.p1text-align:left.p2 text-align:right.p3text-align:center
13、这段的本文对齐属性(text-align)值为居左。这段的本文对齐属性(text-align)值为居右。这段的本文对齐属性(text-align)值为居中。文本修饰属性(text-decoration)这个属性主要设定文本划线的属性。有以下值： none (无，缺省值) underline (下划线) overline (上划线) line-through (当中划线)示例代码如下：.p2 text-decoration: underline演示示例文本修饰属性 text-decoration.p1text-decoration: none.p2 text-decoration: underl
14、ine.p3text-decoration: line-through.p4 text-decoration:overline文本修饰属性(text-decoration) 的缺省值是 none。这段的文本修饰属性(text-decoration) 值是 underline。这段的文本修饰属性(text-decoration) 值是 line-through。这段的文本修饰属性(text-decoration) 值是 overline。文本缩进属性(text-indent)这个属性设定文本首行缩进。其值有以下设定方法： length (长度，可以用绝对单位 (cm, mm, in, pt, p
15、c)或者相对单位 (em, ex, px) percentage (百分比，相当于父对象宽度的百分比)示例代码如下：.p1 text-indent: 8mm演示示例文本缩进属性 text-indent.p1 text-indent: 8mm.d1 width:300px.p2 text-indent:50%下面两端都设定 CSS 文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百分比方法设值。芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧
16、。”芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”行高属性(line-height)这个属性设定每行之间的距离。其值有以下设定方法： normal (缺省值) length (长度，可以用绝对单位 (cm, mm, in, pt,pc)或者相对单位 (em, ex, px) percentage (百分比，相当于父对象高度的百分比)示例代码如下：.p1 line-height:1cm演示示例行高属性 line-height.p1 line-height:1
17、cm.p2 line-height:2cm这个段落的 CSS 行高属性(line-hight)值为 1cm，即每行之间的距离是 1厘米。这个段落的 CSS 行高属性(line-hight)值为 2cm，即每行之间的距离是 2厘米。字间距属性(letter-spacing)这个属性用来设定字符之间的距离。 normal (缺省值) length (长度，可以用绝对单位 (cm, mm, in, pt, pc)或者相对单位 (em, ex, px)示例代码如下：.p1 letter-spacing: 3mm演示示例字间距属性 letter-spacing.p1 letter-spacing: 3m
18、m这段没有设置字间距属性(letter-spacing)。这段设定字间距属性(letter-spacing)值为 3 毫米。颜色属性(color)用颜色属性(color)可以改变文本的字体颜色。字体颜色代码请参见 HTML 颜色参考(HTML Color Reference)。示例代码如下：.p1color:gray演 示示例颜色属性 color.p1color:gray.p2 color:#FF0000.p3color:#3300FF这段没有设置颜色属性(color)。这段的颜色属性(color) 值是灰色。这段的颜色属性(color) 值是红色。这段的颜色属性(color) 值是蓝色。颜色
19、属性 color.p1color:gray.p2 color:#FF0000.p3color:#3300FF这段没有设置颜色属性(color)。这段的颜色属性(color) 值是灰色。这段的颜色属性(color) 值是红色。这段的颜色属性(color) 值是蓝色。CSS 常用文本属性转换为繁体中文文本对齐属性(text-align)这个属性用来设定文本的对齐方式。有以下值： left (居左，缺省值) right (居右) center (居中) justify (两端对齐) 示例代码如下：.p2 text-align:right演示示例文本对齐属性 text-align.p1text-ali
20、gn:left.p2 text-align:right.p3text-align:center这段的本文对齐属性(text-align)值为居左。这段的本文对齐属性(text-align)值为居右。这段的本文对齐属性(text-align)值为居中。文本修饰属性(text-decoration)这个属性主要设定文本划线的属性。有以下值： none (无，缺省值) underline (下划线) overline (上划线) line-through (当中划线)示例代码如下：.p2 text-decoration: underline演示示例文本修饰属性 text-decoration.p1t
21、ext-decoration: none.p2 text-decoration: underline.p3text-decoration: line-through.p4 text-decoration:overline文本修饰属性(text-decoration) 的缺省值是 none。这段 a 的文本修饰属性(text-decoration)值是 underline。这段的文本修饰属性(text-decoration) 值是 line-through。这段的文本修饰属性(text-decoration) 值是 overline。文本缩进属性(text-indent)这个属性设定文本首行缩进
22、。其值有以下设定方法： length (长度，可以用绝对单位 (cm, mm, in, pt, pc)或者相对单位 (em, ex, px) percentage (百分比，相当于父对象宽度的百分比)示例代码如下：.p1 text-indent: 8mm演示示例文本缩进属性 text-indent.p1 text-indent: 8mm.d1 width:300px.p2 text-indent:50%下面两端都设定 CSS 文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百分比方法设值。芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无
23、情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”行高属性(line-height)这个属性设定每行之间的距离。其值有以下设定方法： normal (缺省值) length (长度，可以用绝对单位 (cm, mm, in, pt,pc)或者相对单位 (em, ex, px) percentage (百分比，相当于父对象高度的百分比)示例代码如下：.p1 lin
24、e-height:1cm演示示例行高属性 line-height.p1 line-height:1cm.p2 line-height:2cm这个段落的 CSS 行高属性(line-hight)值为 1cm，即每行之间的距离是 1厘米。这个段落的 CSS 行高属性(line-hight)值为 2cm，即每行之间的距离是 2厘米。字间距属性(letter-spacing)这个属性用来设定字符之间的距离。 normal (缺省值) length (长度，可以用绝对单位 (cm, mm, in, pt, pc)或者相对单位 (em, ex, px)示例代码如下：.p1 letter-spacing:
25、3mm演示示例颜色属性(color)用颜色属性(color)可以改变文本的字体颜色。字体颜色代码请参见 HTML 颜色参考(HTML Color Reference)。示例代码如下：.p1color:gray演示示例字间距属性 letter-spacing.p1 letter-spacing: 3mm这段没有设置字间距属性(letter-spacing)。这段设定字间距属性(letter-spacing)值为 3 毫米。CSS 背景属性转换为繁体中文背景颜色属性(background-color)这个属性为 HTML 元素设定背景颜色，相当于 HTML 中 bgcolor 属性。body ba
26、ckground-color:#99FF00;上面的代码表示 Body 这个 HTML 元素的背景颜色是翠绿色的。演示示例背景颜色 background-colorbody background-color:#99FF00;这个 HTML 使用了 CSS 的 background-color 属性，将 HTML 的背景颜色变成翠绿色。背景图片属性(background-image)这个属性为 HTML 元素设定背景图片，相当于 HTML 中 background 属性。上面的代码为 Body 这个 HTML 元素设定了一个背景图片。演示示例背景图片 background-image这个 HTM
27、L 使用了 CSS 的 background-image 属性，设置了背景图片。 背景重复属性(background-repeat)这个属性和 background-image 属性连在一起使用，决定背景图片是否重复。如果只设置background-image 属性，没设置 background-repeat 属性，在缺省状态下，图片既横向重复，又竖向重复。 repeat-x 背景图片横向重复 repeat-y 背景图片竖向重复 no-repeat 背景图片不重复body background-image:url(/images/css_tutorials/background.jpg); b
28、ackground-repeat:repeat-y上面的代码表示图片竖向重复。演示示例背景重复 background-repeatbody background-image:url(/images/css_tutorials/background.jpg); background-repeat:repeat-y这个 HTML 使用了 CSS 的 background-repeat 属性，使背景图片竖向重复。 常用的 background-repeat 的属性值有: repeat-x(横向重复) ，repeat-x(横向重复), no-repeat(不重复)。background-repeat
29、属性要和 background-image 一起用。背景附着属性(background-attachment)这个属性和 background-image 属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。这个属性有两个值，一个是 scroll，一个是 fixed。缺省值是 scroll。body background-image:url(/images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed上面的代码表示图片固定不动，不随内容滚动而动。演示示例背景附着
30、属性 background-attachmentbody background-image:url(/images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed这个 HTML 使用了 CSS 的 background-attachment 属性，将背景图片固定，不随内容滚动而滚动。背景附着(background-attachment)属性有两个值。一个是 scroll，表示随内容滚动而动；一个是 fixed，表示固定不动，不受内容滚动影响。缺省值是 scroll。b
31、ackground-attachment 要和 background-image 一起用。这个 HTML 使用了 CSS 的 background-attachment 属性，将背景图片固定，不随内容滚动而滚动。背景附着(background-attachment)属性有两个值。一个是 scroll，表示随内容滚动而动；一个是 fixed，表示固定不动，不受内容滚动影响。缺省值是 scroll。background-attachment 要和 background-image 一起用。这个 HTML 使用了 CSS 的 background-attachment 属性，将背景图片固定，不随内容
32、滚动而滚动。背景附着(background-attachment)属性有两个值。一个是 scroll，表示随内容滚动而动；一个是 fixed，表示固定不动，不受内容滚动影响。缺省值是 scroll。background-attachment 要和 background-image 一起用。这个 HTML 使用了 CSS 的 background-attachment 属性，将背景图片固定，不随内容滚动而滚动。背景附着(background-attachment)属性有两个值。一个是 scroll，表示随内容滚动而动；一个是 fixed，表示固定不动，不受内容滚动影响。缺省值是 scroll。b
33、ackground-attachment 要和 background-image 一起用。背景位置属性(background-position)这个属性和 background-image 属性连在一起使用，决定了背景图片的最初位置。body background-image:url(/images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px上面的代码表示背景图片的初始位置距离网页最左面 20px，距离网页最上面 60px。演示示例背景位置属性 backgrou
34、nd-positionbody background-image:url(/images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px这个 HTML 使用了 CSS 的 background-position 属性。这个属性和 background-image 属性连在一起使用，决定了背景图片的最初位置。上面的代码表示背景图片的初始位置距离网页最左面 20px，距离网页最上面60px。背景属性(background)这个属性是设置背景相关属性的一种快捷的综合写法，
35、 包括 background-color, background-image, background-repeat, backgroundattachment, background-position。body background:#99FF00 url(/images/css_tutorials/background.jpg) no-repeat fixed 40px 100px上面的代码表示，网页的背景颜色是翠绿色，背景图片是 background.jpg 图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面 40px，距离网页最上面 100px。演示示例背景属性
36、backgroundbody background:#99FF00 url(/images/css_tutorials/background.jpg) no-repeat fixed 40px 100px这个属性是设置背景相关属性的一种快捷的综合写法， 包括 background-color, background-image, background-repeat, backgroundattachment, background-position。这个 HTML 所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg 图片，背景图片不重复显示，背景图片不随内容滚动
37、而动，背景图片距离网页最左面 40px，距离网页最上面 100px。这个属性是设置背景相关属性的一种快捷的综合写法， 包括 background-color, background-image, background-repeat, backgroundattachment, background-position。这个 HTML 所用的背景属性表示，网页的背景颜色是翠绿色，背景图片background.jpg 图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面 40px，距离网页最上面 100px。这个属性是设置背景相关属性的一种快捷的综合写法， 包括 backgro
38、und-color, background-image, background-repeat, backgroundattachment, background-position。这个 HTML 所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg 图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面 40px，距离网页最上面 100px。转换为繁体中文边框风格属性(border-style)这个属性用来设定上下左右边框的风格，它的值如下： none (没有边框，无论边框宽度设为多大) dotted (点线式边框) dashed (破折线式边
39、框) solid (直线式边框) double (双线式边框) groove (槽线式边框) ridge(脊线式边框 ) inset (内嵌效果的边框) outset (突起效果的边框)演示示例：分别使用 none,dotted, dashed, solid, double, groove, ridge, inset, outset 的CSS 边框风格属性示例边框风格属性 border-style .d1 border-style:none;.d2 border-style:solid;.d3 border-style:dotted;.d4 border-style:dashed;.d5 bo
40、rder-style:double;.d6 border-style:groove;.d7 border-style:ridge;.d8 border-style:inset;.d9 border-style:outset;这个 div 的 CSS 边框风格(border-style)属性缺省值是 none。这个 div 的 CSS 边框风格(border-style) 属性是 none。这个 div 的 CSS 边框风格(border-style) 属性是 solid。这个 div 的 CSS 边框风格(border-style) 属性是 dotted。这个 div 的 CSS 边框风格(b
41、order-style) 属性是 dashed。这个 div 的 CSS 边框风格(border-style) 属性是 double。这个 div 的 CSS 边框风格(border-style) 属性是 groove。这个 div 的 CSS 边框风格(border-style) 属性是 ridge。这个 div 的 CSS 边框风格(border-style) 属性是 inset。这个 div 的 CSS 边框风格(border-style) 属性是 outset。边框宽度属性(border-width)这个属性用来设定上下左右边框的宽度，它的值如下： medium (是缺省值) thin
42、 (比 medium 细) thick (比 medium 粗) 用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。演示示例： 分别用 medium, thin, thick 和长度单位定制的 CSS 边框宽度属性示例边框宽度 border-width.d1 border-style:solid;.d2 border-width:thin;border-style:solid;.d3 border-width:thick;border-style:solid;.d4 border-width:10px;border-styl
43、e:solid;.d5 border-width:5mm;border-style:solid;这个 div 的 CSS 边框宽度(border-width)属性缺省值是 medium。这个 div 的 CSS 边框宽度(border-width)属性值是 thin。这个 div 的 CSS 边框宽度(border-width)属性值是 thick。这个 div 的 CSS 边框宽度(border-width)属性值是 10px。这个 div 的 CSS 边框宽度(border-width)属性值是 5mm。边框颜色属性(border-color)这个属性用来设定上下左右边框的颜色。例句如下：
44、.d5 border-color:gray;border-style:solid;演示示例边框颜色属性 border-color.d1 border-color:#FFA500;border-style:solid;.d2 border-color:#33CC00;border-style:solid;.d3 ;border-color:#6600FF;border-style:solid;.d4 border-color:#FF6347;border-style:solid;.d5 border-color:gray;border-style:solid;这个 div 的 CSS 边框颜色(
45、border-color) 属性值是橙色。这个 div 的 CSS 边框颜色(border-color) 属性值是绿色。这个 div 的 CSS 边框颜色(border-color) 属性值是蓝色。这个 div 的 CSS 边框颜色(border-color) 属性值是番茄红。这个 div 的 CSS 边框颜色(border-color) 属性值是灰色。边框属性(border)这个属性是边框属性的一个快捷的综合写法，它包含 border-width, border-style 和border-color。例句如下：.d1 border:5px solid gray;演示示例 边框属性 bord
46、er.d1 border:5px solid gray;这个 div 的边框属性：边框宽度(border-width)为 5px；边框风格(border-style)为直线式；边框颜色为灰色。单边边框属性上下左右四个边框不但可以统一设定，也可以分开设定。设定上边框属性，你可以使用 border-top, border-top-width, border-top-style, border-top-color。设定下边框属性，你可以使用 border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。设定左
47、边框属性，你可以使用 border-left, border-left-width, border-left-style, border-left-color。设定上边框属性，你可以使用 border-right, border-right-width, border-right-style, border-right-color。演示示例：设置单边边框属性的示例单个边框属性 .d1 border-top:5px solid #FF0000.d2 border-bottom:5px solid #FF0000.d3 border-left:5px solid #FF0000.d4 border
48、-right:5px solid #FF0000单个边框属性：设置上边框用 border-top设置下边框用 border-bottom设置左边框用 border-left设置右边框用 border-right转换为繁体中文边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。左边距属性(margin-left)这个属性用来设定左边距的宽度。示例如下：.d1margin-left:1cm演示示例CSS 左边距属性 margin-left.D1border:1px solid #FF0000;.D2border:1px solid gray;.D3margin-left:1cm;border:1px solid gray;没有 margin上面两个 div 没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个 div的 border 设为红色，里面那个 div 的 border 属性设为灰色。和上面两个 div 的 CSS 属性设置唯一不同的是，下面两个 div 中，里面的那个 div 设置了左边距属性(margin-left)，表示这个 div 左边距为 1 厘米。margin-left 设为 1cm右边距属性(margin-right)这个属性用来设定右边距的宽度。示例如下：.d1 margin-right:1cm演示示例请参照左边距属性示
