2.2 CSS基本语法_网页设计与网站建设从入门到精通-QQ阅读男生玄幻网

上QQ阅读APP看书，第一时间看更新

2.2 CSS基本语法

在进一步学习DIV CSS之前，我们先要了解CSS中常用的基本语法。

2.2.1 编辑CSS样式的字体格式

在HTML中，CSS字体属性用于定义文字的字体、大小、粗细的表现等。

通常使用font-family定义使用什么字体，font-size定义字体大小，font-style定义斜体字，font-variant定义小型的大写字体，font-weight定义字体的粗细，font统一定义字体的所有属性。字体属性如下。

● font-family属性：定义使用的字体。

● font-size属性：定义字体的大小。

● font-style属性：定义字体显示的方式。

● font-variant属性：定义小型的大写字母字体，对中文没什么意义。

● font-weight属性：定义字体的粗细。

1. font-family属性

下面通过一个例子来认识font-family。

比如中文的宋体，英文的Arial，可以定义多种字体连在一起，使用“, ”（逗号）分隔。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-family属性示例</title>
<style type="text/css" media="all">
p#songti{font-family:"宋体"; }
p#Arial{font-family:Arial; }
p#all{font-family:"宋体", Arial; }
</style>
</head>
<body>
<p id="songti">使用宋体．</p>
<p id="Arial">使用arial字体．</p>
</body>
</html>

2. font-size属性

中文常用的字体大小是12px，像文章的标题等应该显示大字体，但此时不应使用字体大小属性，应使用h1、h2等HTML标签。

HTML的big、small标签定义了大字体和小字体的文字，此标签已经被W3C抛弃，真正符合标准网页设计的显示文字大小的方法是使用font-size CSS属性。在浏览器中可以使用Ctrl++增大字体，Ctrl--缩小字体。

下面通过一个例子来认识font-size。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-size属性绝对字体尺寸示例</title>
<style type="text/css" media="all">
p{font-size:12px; }
p#xxsmall{font-size:xx-small; }
p#xsmall{font-size:x-small; }
p#small{font-size:small; }
p#medium{font-size:medium; }
p#xlarge{font-size:x-large; }
p#xxlarge{font-size:xx-large; }
</style>
</head>
<body>
<p id="xxsmall">font-size中的xxsmall字体</p>
<p id="xsmall">font-size中的xsmall字体</p>
<p id="small">font-size中的small字体</p>
<p id="medium">font-size中的medium字体</p>
<p id="xlarge">font-size中的xlarge字体</p>
<p id="xxlarge">font-size中的xxlarge字体</p>
</body>
</html>

3. font-style属性

网页中的字体样式都是不固定的，开发者可以用font-style来实现目的，其属性包含如下内容。

● normal：正常的字体，即浏览器默认状态。

● italic：斜体，对于没有斜体变量的特殊字体，将应用oblique。

● oblique：倾斜的字体，即没有斜体变量。

下面通过一个例子来认识font-style。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-style属性示例</title>
<style type="text/css" media="all">
p#normal{font-style:normal; }
p#italic{font-style:italic; }
p#oblique{font-style:oblique; }
</style>
</head>
<body>
<p id="normal">正常字体．</p><p id="italic">斜体．</p><p id="oblique">斜体．</p>
</body>
</html>

4. font-variant属性

在网页中常常可以碰到需要输入内容的地方，如果输入汉字的话是没问题的，可是当需要输入英文时，那么它的大小写是令我们头疼的问题。在CSS中可以通过font-variant的几个属性来实现输入时不受其限制的功能，其属性如下。

● Normal：正常的字体，即浏览器默认状态。

● small-caps：定义小型的大写字母。

下面通过一个例子来认识font-variant。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-variant属性示例</title>
<style type="text/css" media="all">
p#small-caps{font-variant:small-caps; }
p#uppercase{text-transform:uppercase; }
</style>
</head>
<body>
<p id="small-caps">The quick brown fox jumps over the lazy dog.</p>
<p id="uppercase">The quick brown fox jumps over the lazy dog.</p>
</body>
</html>

2.2.2 编辑CSS样式的文本格式

CSS文本属性用于定义文字、空格、单词、段落的样式。

通常使用letter-spacing属性控制字母之间的距离，word-spacing属性控制文字之间的距离，text-decoration属性定义文本是否有下画线，text-transform属性控制英文的大小写， text-align属性定义文本的对齐方式，text-indent属性定义文本的首行缩进，white-space属性定义文本与文档源代码的关系。

文本属性如下。

● letter-spacing属性：定义文本中字母的间距（中文为文字的间距）。

● word-spacing属性：定义以空格间隔文字的间距（就是空格本身的宽度）。

● text-decoration属性：定义文本是否有画线以及画线的方式。

● text-transform属性：定义文本的大小写状态，此属性对中文无意义。

● text-align属性：定义文本的对齐方式。

● text-indent属性：定义文本的首行缩进（在首行文字之前插入指定的长度）。

1. letter-spacing属性

该属性在应用时有两种情况，如下所示。

● Normal：默认间距（主要是根据用户所使用的浏览器等设备）。

● <length>：由浮点数字和单位标识符组成的长度值，允许为负值。

下面通过一个例子来认识letter-spacing。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS letter-spacing属性示例</title>
<style type="text/css" media="all">
.ls3px{letter-spacing: 3px; }
.lsn3px{letter-spacing: -3px; }
</style>
</head>
<body>
<p class="ls3px">
<strong><ahref="http://www.dreamdu.com/css/property_letter-spacing/">letter-spacing</a>示例：</strong>
<p>All i have to do, is learn CSS.(仔细看是字母之间的距离，不是空格本身的宽度。)</p>
</p>
<p>
<strong><ahref="http://www.dreamdu.com/css/property_letter-spacing/">letter-spacing</a>示例：</strong>
<p class="lsn3px">All i have to do, is learn CSS.</p>
</p>
</body>
</html>

2. word-spacing属性

该属性在应用时有两种情况，如下所示。

● Normal：默认间距，即浏览器的默认间距。

● <length>：由浮点数字和单位标识符组成的长度值，允许为负值。

下面通过一个例子来认识word-spacing。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS word-spacing属性示例</title>
<style type="text/css" media="all">
.ws30{word-spacing: 30px; }
.wsn30{word-spacing: -10px; }
</style>
</head>
<body><p><strong>word-spacing 示例：</strong>
<p class="ws30">All i have to do, is learn CSS.</p></p><p>
<strong>word-spacing 示例：</strong><p class="wsn30">All i have to do, is learn
CSS.</p>
</p>
</body>
</html>

3. text-decoration属性

该属性在应用时有4种情况，如下所示。

● underline：定义有下画线的文本。

● overline：定义有上画线的文本。

● line-through：定义直线穿过文本。

● blink：定义闪烁的文本。

下面通过一个例子来认识text-decoration。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS text-decoration属性示例</title>
<style type="text/css" media="all">
p#line-through{text-decoration: line-through; }
</style>
</head>
<body>
<p id="line-through">示例<a href="#">CSS 教程</a>, <strong><a
href="#">text-decoration</a></strong>示例，属性值为line-through中画线．</p>
</body>
</html>

4. text-transform属性

该属性在应用时有4种情况，如下所示。

● Capitalize：首字母大写。

● Uppercase：将所有设定此值的字母变为大写。

● Lowercase：将所有设定此值的字母变为小写。

● None：正常无变化，即输入状态。

下面通过一个例子来认识text-transform。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS text-transform属性示例</title>
<style type="text/css" media="all">
p#capitalize{text-transform: capitalize; }
p#uppercase{text-transform: uppercase; }
p#lowercase{text-transform: lowercase; }
</style>
</head>
<body>
<p id="capitalize">hello world</p><p id="uppercase">hello world</p>
<p id="lowercase">HELLO WORLD</p>
</body>
</html>

5. text-align属性

该属性在应用时有4种情况，如下所示。

● Left：对于当前块的位置为左对齐。

● Right：对于当前块的位置为右对齐。

● Center：对于当前块的位置为居中。

● Justify：对齐每行的文字。

下面通过一个例子来认识text-align。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS text-align属性示例</title>
<style type="text/css" media="all">
p#left{text-align: left; }
</style>
</head>
<body>
<p id="left">left 左对齐</p>
</body>
</html>

6. text-indent属性

该属性在应用时有2种情况，如下所示。

● <length>：百分比数字由浮点数字和单位标识符组成的长度值，允许为负值。

● <percentage>：百分比表示法。

下面通过一个例子来认识text-indent。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS text-indent属性示例</title>
<style type="text/css" media="all">
p#indent{text-indent:2em; top:10px; }
p#unindent{text-indent:-2em; top:210px; }
p{width:150px; margin:3em; }
</style>
</head>
<body>
<p id="indent">示例<a href="#">CSS 教程</a>, <strong><a
href="#">text-indent</a></strong>示例，正值向后缩，负值向前进．text-indent属性可以定义首
行的缩进，是我们经常使用到的CSS属性．</p>
<p id="unindent">示例<a href="#">CSS 教程</a>, <strong><a
href="#">text-indent</a></strong>示例，正值向后缩，负值向前进．</p>
</body>
</html>

2.2.3 编辑CSS样式的背景格式

背景（background），文字颜色可以使用color属性，但是包含文字的p段落、div层、page页面等的颜色与背景图片可以使用background等属性。

通常使用background-color定义背景颜色， background-image定义背景图片， background-repeat定义背景图片的重复方式，background-position定义背景图片的位置， background-attachment定义背景图片随滚动轴的移动方式。

背景属性如下。

● background-color属性：背景色，定义背景的颜色。

● background-image属性：定义背景图片。

● background-repeat属性：定义背景图片的重复方式。

● background-position属性：定义背景图片的位置。

● background-attachment属性：定义背景图片随滚动轴的移动方式。

1. background-color属性

在CSS中可以定义背景颜色，内容没有覆盖的地方就按照设置的背景颜色显示，其值如下。

● <color>：颜色表示法，可以是数值表示法，也可以是颜色名称。

● Transparent：背景色透明。

下面通过一个例子来认识background-color。

定义网页的背景使用绿色，内容白字黑底，示例代码如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-color属性示例</title>
<style type="text/css" media="all">
body{background-color:green; }
h1{color:white; background-color:black; }
</style>
</head>
<body>
<h1>白字黑底</h1>
</body>
</html>

2. background-image属性

在CSS中还可以设置背景图像，其值如下。

● <uri>：使用绝对或相对地址指定背景图像。

● None：将背景设置为无背景。

下面通过一个例子来认识background-image。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-image属性示例</title>
<style type="text/css" media="all">
.para{background-image:none; width:200px; height:70px; }
.div{width:200px; color:#FFF; font-size:40px;
font-weight:bold; height:200px; background-image:url(images/small.jpg); }
</style>
</head>
<body>
<div class="para">div 段落中没有背景图片</div>
<div class="div">div中有背景图片</div>
</body>
</html>

3. background-repeat属性

在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者希望沿着一个方向平铺，可以使用background-repeat属性实现。该属性可以设置为4种平铺方式。

● Repeat：平铺整个页面，左右与上下。

● repeat-x：在x轴上平铺，左右。

● repeat-y：在y轴上平铺，上下。

● no-repeat：当背景大小比所要填充背景的块小时，图片不重复。

下面通过一个例子来认识background-repeat。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-repeat属性示例</title>
<style type="text/css" media="all">
body{background-image:url('images/small.jpg'); background-repeat:no-repeat; }
p{background-image:url('images/small.jpg'); background-repeat:repeat-y; backgroun
d-position:right; top:200px; left:200px; width:300px; height:300px; border:1px solid
black; margin-left:150px; }
</style>
</head>
<body>
<p>示例 CSS 教程，repeat-y 竖着重复的背景(div的右侧).</p>
</body>
</html>

4. background-position属性

将标题局中或者右对齐可以使用background-postion属性，其值如下。

（1）水平方向

● left：对于当前填充背景位置居左。

● center：对于当前填充背景位置居中。

● right：对于当前填充背景位置居右。

（2）垂直方向

● top：对于当前填充背景位置居上。

● center：对于当前填充背景位置居中。

● bottom：对于当前填充背景位置居下。

（3）垂直与水平的组合

. x-% y-%；
. x-pos y-pos；

下面通过一个例子来认识background-position。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-position属性示例</title>
<style type="text/css" media="all">
body{background-image:url('images/small.jpg'); background-repeat:no-repeat; }
p{background-image:url('images/small.jpg'); background-position:right
bottom ; background-repeat:no-repeat; border:1px solid
black; width:400px; height:200px; margin-left:130px; }
div{background-image:url('images/small.jpg'); background-position:50%
20% ; background-repeat:no-repeat; border:1px solid
black; width:400px; height:150px; }
</style>
</head>
<body>
<p>p 段落中右下角显示橙色的点．</p>
<div>div中距左上角x 轴50%, y 轴20%的位置显示橙色的点．</div>
</body>
</html>

5. background-attachment属性

设置或检索背景图像是随对象内容滚动还是固定的，其值如下。

● Scroll：随着页面的滚动，背景图片将移动。

● Fixed：随着页面的滚动，背景图片不会移动。

下面通过一个例子来认识background-attachment。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-attachment属性示例</title>
<style type="text/css" media="all">
body{background:url('images/list-orange.png'); background-attachment:fixed; backg
round-repeat:repeat-x; background-position:center
center; position:absolute; height:400px; }
</style>
</head>
<body>
<p>拖动滚动条，并且注意中间有一条橙色线并不会随滚动条的下移而上移．</p>
</body>
</html>

2.2.4 编辑CSS链接格式

在HTML语言中，超链接是通过标记<a>来实现的，链接的具体地址则是利用<a>标记的href属性，代码如下所示。

<a href="http://www.baidu.com">链接文本</a>

在浏览器默认的浏览方式下，超链接统一为蓝色并且有下画线，被点击过的超链接则为紫色并且也有下画线。这种最基本的超链接样式现在已经无法满足广大设计师的需求。通过CSS可以设置超链接的各种属性，而且通过伪类别还可以制作很多动态效果。首先用最简单的方法去掉超链接的下画线，代码如下所示。

/*超链接样式* /
a{text-decoration:none; margin-left:20px; } /*去掉下画线*/

可制作动态效果的CSS伪类别属性如下。

● a:link：超链接的普通样式，即正常浏览状态的样式。

● a:visited：被点击过的超链接的样式。

● a:hover：鼠标指针经过超链接上时的样式。

● a:active：在超链接上单击时，即“当前激活”时超链接的样式。

2.2.5 编辑CSS样式的列表属性

CSS列表属性可以改变HTML 列表的显示方式。列表的样式通常使用list-style-type属性来定义，list-style-image属性定义列表样式的图片，list-style-position属性定义列表样式的位置，list-style属性统一定义列表样式的几个属性。

通常的列表主要采用<ul>或者<ol>标记，然后配合<li>标记罗列各个项目。CSS列表有以下几个常见属性。

1. list-style-image属性

list-style-image设置或检索作为对象的列表项标记的图像，其值如下。

● URL：一般是一个图片的网址。

● None：不指定图像。

示例代码如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-image属性示例</title>
<style type="text/css" media="all">
ul{list-style-image: url("images/list-orange.png"); }
</style>
</head>
<body>
<ul>
<li>使用图片显示列表样式</li>
<li>本例中使用了list-orange.png图片</li>
<li>我们还可以使用list-green.png top.png或up.png图片</li>
<li>大家可以尝试修改下面的代码</li>
</ul>
</body>
</html>

2. list-style-position属性

list-style-position设置或检索作为对象的列表项标记如何根据文本排列，其值如下。

● Inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。

● Outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

示例代码如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-position属性示例</title>
<style type="text/css" media="all">
ul#inside{list-style-position: inside; list-style-image:
url("images/list-orange.png"); }
ul#outside{list-style-position: outside; list-style-image:
url("images/list-green.png"); }
p{padding: 0; margin: 0; }
li{border:1px solid green; }
</style>
</head>
<body>
<p>内部模式</p>
<ul id="inside">
<li>内部模式 inside</li>
<li>示例 XHTML 教程．</li>
<li>示例 CSS 教程．</li>
<li>示例 JAVASCRIPT 教程．</li>
</ul>
<p>外部模式</p>
<ul id="outside">
<li>外部模式 outside</li>
<li>示例 XHTML 教程．</li>
<li>示例 CSS 教程．</li>
<li>示例 JAVASCRIPT 教程．</li>
</ul>
</body>
</html>

3. list-style-type属性

list-style-type设置或检索对象的列表项所使用的预设标记，其值如下。

● Disc：点。

● Circle：圆圈。

● Square：正方形。

● Decimal：数字。

● None：无（取消所有的list样式）。

示例代码如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-type属性示例</title>
<style type="text/css" media="all">
ul{list-style-type: disc; }
</style>
</head>
<body>
<ul>
<li>正常模式</li>
<li>示例 XHTML 教程．</li>
<li>示例 CSS 教程．</li>
<li>示例 JAVASCRIPT 教程．</li>
</ul>
</body>
</html>

2.2.6 编辑CSS样式的区块属性

块级元素就是一个方块，像段落一样，默认占据一行位置。内联元素又叫行内元素。顾名思义，它只能放在行内，就像一个单词一样不会造成前后换行，起辅助作用。一般的块级元素包括段落<p>、标题<h1><h2>、列表<ul><ol><li>、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。

内联元素包括表单元素<input>、超级链接<a>、图像<img>、<span>等。块级元素的显著特点是：它都是从一个新行开始显示，而且其后的元素也需另起一行显示。

下面通过一个示例来看一下块级元素与内联元素的区别。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-type属性示例</title>
<style type="text/css" media="all">
ul{list-style-type: disc; }
img{ width:100px; height:70px; }
</style>
</head>
<body>
<p>标记不同行：</p>
<div><imgsrc="flower.jpg" /></div>
<div><imgsrc="flower.jpg" /></div>
<div><imgsrc="flower.jpg" /></div>
<p>标记同一行：</p>
<span><imgsrc="flower.jpg" /></span>
<span><imgsrc="flower.jpg" /></span>
<span><imgsrc="flower.jpg" /></span>
</body>
</html>

在前面示例中，3个div元素各占一行，相当于在它之前和之后各插入了一个换行，而内联元素span没对显示效果造成任何影响，这就是块级元素和内联元素的区别。正因为有了这些元素，才使网页变得丰富多彩。

如果没有CSS的作用，块级元素会以每次换行的方式一直往下排。而有了CSS以后，可以改变这种HTML的默认布局模式，把块级元素摆放到想要的位置上，而不是每次都另起一行。也就是说，可以用CSS的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块级元素。

代码修改如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-type属性示例</title>
<style type="text/css" media="all">
ul{list-style-type: disc; }
img{ width:100px; height:70px; }
</style>
</head>
<body>
<p>标记同一行：</p>
<div style="display:inline"><imgsrc="flower.jpg" /></div>
<div style="display:inline"><imgsrc="flower.jpg" /></div>
<div style="display:inline"><imgsrc="flower.jpg" /></div>
<p>标记不同行：</p>
<span style="display:block"><imgsrc="flower.jpg" /></span>
<span style="display:block"><imgsrc="flower.jpg" /></span>
<span style="display:block"><imgsrc="flower.jpg" /></span>
</body>
</html>

由此可以看出，display属性改变了块级元素与行内元素默认的排列方式。另外，display属性值为none的话，可以使该元素隐藏，并且不会占据空间。代码如下。

<html>
<head>
<title>display属性示例</title>
<style type=" text/ css">
div{width:100px; height:50px; border:1px solid red}
</style>
</head>
<body>
<div>第一个块级元素</div>
<div style="display:none">第二个块级元素</div>
<div >第三个块级元素</div>
</body>
</html>

2.2.7 编辑CSS样式的宽高属性

2.2.6小节介绍了块级元素与行内元素的区别，本节介绍两者宽高属性的区别，块级元素可以设置宽度与高度，但行内元素是不能设置的。例如，span元素是行内元素，给span设置宽、高属性代码如下。

<html>
<head>
<title>宽高属性示例</title>
<style type=" text/ css">
span{ background:#CCC }
.special{ width:100px; height:50px; background:#CCC}
</style>
</head>
<body>
<span class="special">这是span 元素1</span>
<span>这是span 元素2</span>
</body>
</html>

在这个示例中，显示的结果是设置了宽高属性span元素1与没有设置宽高属性的span元素2，显示效果是一样的。因此，行内元素不能设置宽高属性。如果把span元素改为块级元素，效果会如何呢？

根据2.2.6小节所学内容，可以通过设置display属性值为block来使行内元素变为块级元素，代码如下。

<html>
<head>
<title>宽高属性示例</title>
<style type=" text/ css">
span{ background:#CCC; display:block ; border:1px solid #036}
.special{ width:200px; height:50px; background:#CCC}
</style>
</head>
<body>
<span class="special">这是span 元素1</span>
<span>这是span 元素2</span>
</body>
</html>

在浏览器的输出中，可以看出，当把span元素变为块级元素后，类为special的span元素1按照所设置的宽高属性显示，而span元素2 则按默认状态占据一行显示。

2.2.8 编辑CSS边框属性

border一般用于分隔不同的元素。border的属性主要有3个，即colo（r颜色）、width（粗细）和style（样式）。在使用CSS来设置边框时，可以分别使用border-color、border-width和border-style属性设置它们。

● border-color：设定border的颜色。通常情况下颜色值为十六进制数，如红色为“#ff0000”，当然也可以是颜色的英语单词，如red, yellow等。

● border-width：设定border的粗细程度，可以设为thin、medium、thick或者具体的数值，单位为px，如5px等。border默认的宽度值为medium，一般浏览器将其解析为2px。

● border-style：设定border的样式，none（无边框线）、 dotted（由点组成的虚线）、dashed（由短线组成的虚线）、 solid（实线）、double（双线，双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度）、groove（根据颜色画出3D沟槽状的边框）、ridge（根据颜色画出3D脊状的边框）、inset（根据颜色画出3D内嵌边框，颜色较深）、outset（根据颜色画出3D外嵌边框，颜色较浅）。

|提示|

border-style属性的默认值为none，因此边框要想显示出来，必须设置border-style值。

为了更清楚地看到这些样式的效果，通过一个例子来展示，其代码如下。

<html>
<head>
<title>border 样式示例</title>
<style type=" text/ css">
div{ width:300px; height:30px; margin-top:10px;
border-width:5px; border-color:green }
</style>
</head>
<body>
<div style="border-style:dashed">边框为虚线</div>
<div style="border-style:dotted">边框为点线</div>
<div style="border-style:double">边框为双线</div>
<div style="border-style:groove">边框为3D 沟槽状线</div>
<div style="border-style:inset">边框为3D内嵌边框线</div>
<div style="border-style:outset">边框为3D 外嵌边框线</div>
<div style="border-style:ridge">边框为3D 脊状线</div>
<div style="border-style:solid">边框为实线</div>
</body>
</html>

在上面的例子中，分别设置了border-color、border-width和border-style属性，其效果是对上下左右4条边同时产生作用。在实际应用中，除了采用这种方式，还可以分别对4条边框设置不同的属性值，方法是按照规定的顺序，给出2个、3个、4个属性值，分别代表不同的含义。给出2个属性值：前者表示上下边框的属性，后者表示左右边框的属性。给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性。给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。

示例代码如下。

<html>
<head>
<title>border 样式示例</title>
<style type=" text/ css">
div{ border-width:5px 8px; border-color:green yellow red; border-style:dotted
dashed solid double }
</style>
</head>
<body>
<div>设置边框</div>
</body>
</html>

给DIV设置的样式为上下边框宽度为5px，左右边框宽度为8px；上边框的颜色为绿色，左右边框的颜色为黄色，下边框的颜色为红色；从上边框开始，按照顺时针方向，四条边框的样式分别为点线、虚线、实线和双线。

如果某元素的4条边框的设置都一样，还可以简写为：

border:5px solid red;

如果想对某一条边框单独设置，例如：

border-left:5px solid red;

这样就可以只设置左边框为红色、实线、宽为5px。其他3条边设置类似，3个属性分别为：border-right、border-top、border-bottom，以此就可以设置右边框、上边框、下边框的样式。

如果只想设置某一条边框某一个属性，例如：

border-left-color: red;

这样就可以设置左边框的颜色为红色。其他属性设置类似，不再一一举例。

本周热推：

HTML5实验室 Vue.js Web开发案例教程（在线实训版）Dreamweaver CS3网站制作炫例精讲 CorelDRAW X3包装创意设计（中文版）网络技术·商业网站全程开发情景案例教学