|
CSS的属性非常庞大，庞大得好几本书都写不完，不过，没关系，我们可以从网上搜索相关资料或者查阅相关专著。这里只列出常用的且实用的CSS属性。下面我们就先来学习文本属性。
本节单词记忆：属性 1.background-color 2.background-image 3.text-align 4.background-repreat 5.margin 6.padding 7.border
网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。
一、文本属性
文本属性主要用来对网页中的文字进行控制，如控制文字的大小、类型、样式、颜色以及对齐方式等，从而使页面中的文本达到我们想要的外观。下表列出了常用的文本属性。
| 属性 | 说 明 |
|---|
| font-size |
设置文本的字体大小 |
| font-family |
设置文本字体类型 |
| font-style |
设置文本的字体样式 |
| color |
设置文本的颜色 |
| text-align |
设置文本的对齐方式 |
下面示例1采用了文档样式和类样式，其中的样式规则使用了文本属性，从而有效地控制了网页中的文本效果。
示例1:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>文本属性样式</TITLE>
<STYLE type="text/css">
p
{
font-size: 12px;
font-family: "宋体";
text-align:left;
}
/* 大字体的样式*/
.bigFont
{
font-size: 16px;
color:red;
}
</STYLE>
</HEAD>
<BODY>
【新闻】[设搜狐为首页] 9月1日
<p class="bigFont">·世锦赛刘翔12秒95夺冠成就大满贯</p>
<p>·我国实施不安全食品召回制度 遏制非法出口</p>
<p>·中国代表向联合国通报军备透明制度举措</p>
<p class="bigFont">·博客| 刘翔：最后胜利的感觉真好！ </p>
</BODY>
</HTML>
示例1在浏览器中预览效果，如图1所示。
在示例1中第一个段落<P>和第四个段落<P>都应用了标签样式<P>和类样式bigFont，到底哪个样式起作用？有了，就近原则，当有不同的样式规则应用在同一个标签上时，
根据这些样式规则距离修饰的文本的远近，来决定应用哪一个样式规则，如示例3对第一个段落<P>和第四个段落<P>起作用的应该是类样式bigFont，而不是标签样式<P>。
图1 文本属性效果 二、背景属性
恰当地使用背景，可以使页面既美观显示速度又快。背景包括背景颜色、背景图像以及背景图像以何种方式平铺在指定的区域内。下表列出了常用的背景属性。
| 属 性 | 说 明 |
|---|
| background-color |
设置背景颜色 |
| background-image |
设置背景图像 |
| background-repeat |
设置一个指定的背景图像如何被重复显示。
可取的值有：repeat(铺满整个区域，默认情况)、no-repeat(不平铺)、repeat-x（只在水平方向上平铺）、repeat-y(只在垂直方向上平铺) |
下面示例2对一个表格设置了背景图像，并且背景图像不平铺。
示例2:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>宝贝类目</TITLE>
<STYLE type="text/css">
/*设置表格的背景图片样式*/
table
{
background-image: url(images/type_back.jpg);
background-repeat:no-repeat;
}
</STYLE>
</HEAD>
<BODY>
<P><IMG src="images/logo.gif" width="250" height="40" />您好，欢迎来淘宝！</P>
<P> </P>
<TABLE width="92%" >
<TR>
<TD width="26%"> </TD>
<TD width="36%"> </TD>
<TD width="29%"> </TD>
<TD width="9%"> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> <A href="#">手机充值、IP卡/电话卡</A> <BR />
<A href="#">移动</A> | <A href="#">联通</A> | <A href="#">铁通</A> <A href="#"></A></TD>
<TD> <A href="#">网游、点卡、金币 </A> <BR />
<A href="#">征途</A> | <A href="#">魔兽</A> | <A href="#">自动发货</A> </TD>
<TD colspan="2"> <A href="#">电子彩票 </A> <BR />
<A href="#">福彩</A> | <A href="#">体彩</A> | <A href="#">足彩</A> </TD>
</TR>
<TR bgcolor="#EBEFFF">
<TD><A href="#">手机(诺基亚 MOTO ) </A><BR />
<A href="#">N73</A> | <A href="#">N72</A> | <A href="#">N95</A></TD>
<TD><A href="#">电脑硬件、网络设备 </A><BR />
<A href="#">CPU</A> | <A href="#">主板</A> | <A href="#">内存</A> | <A href="#">硬盘</A></TD>
<TD colspan="2"><A href="#">数码相机</A><BR />
<A href="#">索尼</A> | <A href="#">佳能</A> | <A href="#">三星</A></TD>
</TR>
<TR bgcolor="#EBEFFF">
<TD><A href="#">笔记本电脑 </A><BR />
<A href="#">IBM</A> | <A href="#">惠普</A> | <A href="#">DELL</A> </TD>
<TD><A href="#">办公设备、耗材 </A><BR />
<A href="#">打印机</A> | <A href="#">电子辞典</A> | <A href="#">墨盒</A> <A href="#"></A> </TD>
<TD colspan="2"><A href="#">MP3、MP4</A><BR />
<A href="#">魅族</A> | <A href="#">纽曼</A> | <A href="#">索尼</A> <A href="#"></A> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
示例2在浏览器中预览效果，如图2所示：
图2 表格背景图像不平铺效果
|
