常见样式属性

文本

主要属性示例

文本属性	说明
font-size	字体大小
font-family	字体类型
font-style	字体样式
color	设置或检索文本的颜色
text-align	文本对齐

css_text_css.html
<STYLE type="text/css">
  p {
    font-size: 12px;
    font-family: "宋体";
    text-align: left;
  }

  /* 大字体的样式*/
  .bigFont {
    font-size: 16px;
    color: red;
  }
</STYLE>

源代码

css_text_css.html
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <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>

背景

主要属性示例

背景属性	说明
background-color	设置背景颜色
background-image	设置背景图像
background-repeat	设置一个指定的图像如何被重复可取值repeat-x、 repeat、 no-repeat、repeat-y

css_background.html
<STYLE type="text/css">
  /*设置表格的背景图片样式*/
  table {
    background-image: url(img/type_back.jpg);
    background-repeat: no-repeat;
  }
</STYLE>

源代码

css_background.html
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <TITLE>宝贝类目</TITLE>

  <STYLE type="text/css">
    /* 表格单元格小字体的样式*/
    TD {
      font-size: 14px;
      font-family: "宋体";
      padding-left: 10px;
    }

    /* 大字体的样式*/
    .bigFont {
      font-size: 16px;
      color: #0000FF;

    }

    /* 表格虚线边框的样式*/
    .tableBorder {
      border-right-width: 2px;
      border-right-style: dashed;
    }

    /*设置无下划线的超连接样式*/
    A {
      color: blue;
      text-decoration: none;
    }

    A:hover {
      /*鼠标在超链接上悬停时变为颜色*/
      color: red;
    }

    /*设置表格的背景图片样式*/
    table {
      background-image: url(img/type_back.jpg);
      background-repeat: no-repeat;
    }
  </STYLE>
</HEAD>

<BODY>
  <P><IMG src="img/logo.gif" width="250" height="40" />您好，欢迎来淘宝！</P>
  <P>&nbsp;</P>
  <TABLE width="92%">
    <TR>
      <TD width="26%">&nbsp;</TD>
      <TD width="36%">&nbsp;</TD>
      <TD width="29%">&nbsp;</TD>
      <TD width="9%">&nbsp;</TD>
    </TR>
    <TR>
      <TD>&nbsp;</TD>
      <TD>&nbsp;</TD>
      <TD>&nbsp;</TD>
      <TD>&nbsp;</TD>
    </TR>
    <TR>
      <TD class="tableBorder"> <A href="#" class="bigFont">手机充值、IP卡/电话卡</A> <BR />
        <A href="#">移动</A> | <A href="#">联通</A> | <A href="#">铁通</A> <A href="#"></A>
      </TD>
      <TD class="tableBorder"> <A href="#" class="bigFont">网游、点卡、金币 </A> <BR />
        <A href="#">征途</A> | <A href="#">魔兽</A> | <A href="#">自动发货</A>
      </TD>
      <TD colspan="2" class="tablePad"> <A href="#" class="bigFont">电子彩票 </A> <BR />
        <A href="#">福彩</A> | <A href="#">体彩</A> | <A href="#">足彩</A>
      </TD>
    </TR>
    <TR bgcolor="#EBEFFF">
      <TD class="tableBorder"><A href="#" class="bigFont">手机(诺基亚 MOTO ) </A><BR />
        <A href="#">N73</A> | <A href="#">N72</A> | <A href="#">N95</A>
      </TD>
      <TD class="tableBorder"><A href="#" class="bigFont">电脑硬件、网络设备 </A><BR />
        <A href="#">CPU</A> | <A href="#">主板</A> | <A href="#">内存</A> | <A href="#">硬盘</A>
      </TD>
      <TD colspan="2" class="tablePad"><A href="#" class="bigFont">数码相机</A><BR />
        <A href="#">索尼</A> | <A href="#">佳能</A> | <A href="#">三星</A>
      </TD>
    </TR>
    <TR bgcolor="#EBEFFF">
      <TD class="tableBorder"><A href="#" class="bigFont">笔记本电脑 </A><BR />
        <A href="#">IBM</A> | <A href="#">惠普</A> | <A href="#">DELL</A>
      </TD>
      <TD class="tableBorder"><A href="#" class="bigFont">办公设备、耗材 </A><BR />
        <A href="#">打印机</A> | <A href="#">电子辞典</A> | <A href="#">墨盒</A> <A href="#"></A>
      </TD>
      <TD colspan="2" class="tablePad"><A href="#" class="bigFont">MP3、MP4</A><BR />
        <A href="#">魅族</A> | <A href="#">纽曼</A> | <A href="#">索尼</A> <A href="#"></A>
      </TD>
    </TR>
  </TABLE>
  <P>&nbsp;</P>
  <P>&nbsp;</P>
</BODY>

</HTML>

框

框模型主要属性示例1示例2

框属性	CSS名称	说明
边界属性	margin-top	设置对象的上边距
边界属性	margin-right	设置对象的右边距
边界属性	margin-bottom	设置对象的下边距
边界属性	margin-left	设置对象的左边距
边框属性	border-style	设置边框的样式
边框属性	border-width	设置边框的宽度
边框属性	border-color	设置边框的颜色
填充属性	padding-top	设置内容与上边框之间的距离
填充属性	padding-right	设置内容与右边框之间的距离
填充属性	padding-bottom	设置内容与下边框之间的距离
填充属性	padding-left	设置内容与左边框之间的距离

css_border_css.html
<STYLE type="text/css">
  .tableBorder {
    border-right-width: 3px;
    border-right-color: red;
    border-right-style: dashed;
    padding-top: 20px;
    padding-left: 10px;
  }
</STYLE>

源代码

css_border_css.html
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>表格虚线框的样式</TITLE>
  <STYLE type="text/css">
    .tableBorder {
      border-right-width: 3px;
      border-right-color: red;
      border-right-style: dashed;
      padding-top: 20px;
      padding-left: 10px;
    }

    TR {
      background: yellow;
    }
  </STYLE>
</HEAD>

<BODY>
  <TABLE border="0">
    <TR>
      <TD class="tableBorder">手机冲值</TD>
      <TD class="tableBorder">电子彩票</TD>
    </TR>
    <TR>
      <TD class="tableBorder">电脑硬件</TD>
      <TD class="tableBorder">数码相机</TD>
    </TR>
  </TABLE>
</BODY>

</HTML>

css_small_textcss.html
<STYLE type="text/css">
  .textBorder {
    border-width: 1px;
    border-style: solid;
  }
</STYLE>

源代码

css_small_textcss.html
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>细边框的文本框</TITLE>
</HEAD>
<STYLE type="text/css">
  .textBorder {
    border-width: 1px;
    border-style: solid;
  }
</STYLE>

<BODY>
  <FORM name="form1" method="post" action="">
    <P>名字：
      <INPUT name="fname" type="text" class="textBorder">
    </P>
    <P>密码：
      <INPUT name="pass" type="password" class="textBorder" size="21">
    </P>
  </FORM>
</BODY>

</HTML>

特殊样式（超连接）

主要属性示例

伪类	说明
a:link{color:#FF0000}	未被访问的链接红色
a:visited {color: #00FF00}	已被访问过的链接绿色
a:hover {color: #FFCC00}	鼠标悬浮在上的链接橙色
a:active {color: #0000FF}	鼠标点中激活链接蓝色

css_none_underLineLinkCSS.html
<STYLE type="text/css">
  A {
    /*设置无下划线的超连接样式*/
    color: blue;
    text-decoration: none;
  }

  A:hover {
    /*鼠标在超链接上悬停时变为颜色*/
    color: red;
  }
</STYLE>

源代码

css_none_underLineLinkCSS.html
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>文本样式</TITLE>
  <STYLE type="text/css">
    A {
      /*设置无下划线的超连接样式*/
      color: blue;
      text-decoration: none;
    }

    A:hover {
      /*鼠标在超链接上悬停时变为颜色*/
      color: red;
    }
  </STYLE>
</HEAD>

<BODY>
  <TABLE width="300" border="1">
    <TR>
      <TD width="150">手机</TD>
      <TD width="150">电脑</TD>
    </TR>
    <TR>
      <TD><A href="#">诺基亚</A> | <A href="#">摩托罗拉</A></TD>
      <TD><A href="#">联想</A> | <A href="#">戴尔</A></TD>
    </TR>
  </TABLE>
</BODY>

</HTML>