用CSS美化你的网页

原创 2005年05月28日 10:30:00
现在我们设计网页已经离不开CSS,使用CSS可以美化我们的网页,这已经是大家所共知的了!

  CSS是“Cascading Style Sheets”的缩写,译为样式表。HTML允许我们利用CSS来实现风格的显示,举个简单的例子:我们可以使用<b>标签来使页面的字体加粗。如:

  <b>网页教学网加粗字体显示</b>

  如果你使我们使字体显示为红色、宋体、并且加粗显示我们可以使用下面的代码:

  <font color="#FF0000" face="宋体"><strong>网页教学网字体演示</strong></font>

  这时我们观察上面的代码时我们发现网页中的元素比较多了,当我们自己编写时可能显得很凌乱,这时我们该想有没有一种方法使用的代码比较少,而同时达到上面显示的要求呢?回答是肯定的,这时我们就要用到CSS了。用CSS设置一种风格,设置好我们需要的特性,给它命名一个唯一的名字,然后保存放在网站的其它地方,然后我们在编写HTML时引用刚才的风格的名字就可以达到这种要求。如:

  <p class="myNewStyle">网页教学网的 CSS 风格文本</p>

  然后在网页的头部<head></head>之间加上设置风格的代码,如:

  <style type="text/css">

  <!--

  .myNewStyle {

  font-family: 宋体;

  font-weight: bold;

  color: #FF0000;

  }

  -->

  </style>

  如果你想使上面的CSS控制你的网页的每个页面,那么我们复制粘贴上面的代码就可以了,如果觉得比较麻烦或者说你觉得网页的头部很乱的话,我们也可以把CSS设置的风格单独保存为一个文件(文件的扩展名为.CSS),之后我们在HTML直接引用那个保存的文件就可以引用样式了。如你保存的文件的名字为:myFirstStyleSheet.css,那么我们可以使用下面代码来引用:

  <link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">

  注意:上述代码要放到HTML页面的<head>区域内。

  至于CSS的设置就在这里不提了,我们可以专门打开一个记事本,或使用专门的设计工具如DW等。

  在编辑CSS注意不要再加上如下代码了:

  <style type="text/css">

  </style>

  我们在CSS文件中只要设置CSS风格就行了,如:

  .myNewStyle {

  font-family: 宋体;

  font-weight: bold;

  font-size: 8pt;

  color: #FF0000;

  }

  .my2ndNewStyle {

  font-family: 宋体;

  font-weight: bold;

  font-size: 9pt;

  color: #FF0000;

  }

  .my3rdNewStyle {

  font-family: 宋体;

  font-weight: bold;

  font-size: 12pt;

  color: #FF0000;

  }

  然后直接保存为扩展名为css的文件就行了(如:myFirstStyleSheet.css)

  最后我们在HTML代码的BODY区域内加入如下代码就可以引用我们的设置了:

  <p class="myNewStyle">网页教学网CSS字体显示1</p>

  <h2 class="my2ndNewStyle">网页教学网CSS字体显示2</h2>

  <h3 class="my3rdNewStyle">网页教学网CSS字体显示3</h3>

  我们在上面的代码中用到了<h2>标签,我们在CSS中也可以直接对标签进行风格的定义:

  h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }

  然后我们就可以直接在代码中加入:

  <h1>网页教学网CSS字体显示2</h1>

  那么同样按我们设置的风格来显示。

  我们也可以对其它的标签设置风格,举个例子:我们对整个页面的边框进行设置:

  body { margin-left: 15%; margin-right: 15%; }

  我们也可以对DIV标签进行设置:

  div {

  background: rgb(204,204,255);

  padding: 0.5em;

  border: 1px solid #000000;

  }

  在HTML代码中只要在 <div>和</div>之间的内容将都按上述的风格进行显示。

  最后在举个例子,关于超级连接的变色:

  .a:link { color: rgb(0, 0, 153) } /* 未访问连接的情况 */

  .a:visited { color: rgb(153, 0, 153) } /* 访问连接之后的连接 */

  .a:hover { color: rgb(0, 96, 255) } /* 鼠标盘旋的状态 */

  .a:active { color: rgb(255, 0, 102) } /* 连接激活的状态 */

  然后在HTML代码中加入:

  <a href="http://www.webjx.com">网页教学网</a>

  上述代码可以按我们设置的风格显示。

  最后给大家扩展一下,因为最近总有网友在论坛中问,如何使在同一页面的连接不同呢?我们接最后这个例子给大家介绍一下。这时我们需要设置CSS的另一种风格:

  .a1:link { COLOR: #ff0000; TEXT-DECORATION: underline }/* 红色、有下划线*/

  .a1:hover { COLOR: #ff0000; TEXT-DECORATION: underline }

  .a1:visited { COLOR: #000000; TEXT-DECORATION: none }/* 黑色、无下划线*/

  .a1:active { COLOR: #0000ff; TEXT-DECORATION: none }

  然后在HTML代码中加入:

  <a href="http://www.webjx.com">网页教学网</a>

  <a href="http://www.webjx.com" class="a1">网页教学网</a>

  就会出现两种连接效果了。

  CSS在我们设置网页时功能是非常强大的,希望大家在制作网页时要熟练的运用,以使我们的页面更加漂亮和统一。在本站有好多关于CSS的教材希望大家好好研究吧!希望这篇文章能起到画龙点睛的作用。

用CSS美化你的网页

现在我们设计网页已经离不开CSS,使用CSS可以美化我们的网页,这已经是大家所共知的了!   CSS是“Cascading Style Sheets”的缩写,译为样式表。HTML允许我们利用CSS来实...
  • chenitx
  • chenitx
  • 2005-05-28 10:30:00
  • 921

史上最全的HTML、CSS知识点总结,浅显易懂。

Javaweb、HTML+css知识点总结,浅显易懂,你把这些看完了,HTML和css知识点你也就会了。...
  • qiushi_1990
  • qiushi_1990
  • 2014-10-19 10:00:23
  • 11698

在HTML中使用CSS美化网页的三种方法

CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。它...
  • liuzhongbing
  • liuzhongbing
  • 2009-09-09 14:25:00
  • 3064

css美化网页元素

《span》标签 语法:内容 然后在head里面的style标签中调用span{  } 《既可以在类选择器和ID选择器、标签选择器中使用》 字体样式: 1. font-f...
  • tj857172
  • tj857172
  • 2017-09-28 15:13:06
  • 146

css知识点

1、css在定义时的 . 是什么意思,怎么使用? 答:是类选择符 2、css在定义时的空格是什么意思,怎么使用? 3、后代选择和子元素选择区别?(空格和>的区别)...
  • gghh2015
  • gghh2015
  • 2017-10-10 11:08:18
  • 60

总结css常用的样式

会持续更新:1、强制文本换行div { word-break: break-all; word-wrap:break-word; white-space: normal; }2、input更改plac...
  • DIWUCH
  • DIWUCH
  • 2018-01-12 16:03:41
  • 39

用CSS美化你的网页

 CSS是“Cascading Style Sheets”的缩写,译为样式表。HTML允许我们利用CSS来实现风格的显示,举个简单的例子:我们可以使用标签来使页面的字体加粗。如:  网页教学网加粗字体...
  • jxcjxinxing
  • jxcjxinxing
  • 2007-04-16 16:24:00
  • 669

总结:用CSS进行网页样式设计攻略全集

一.使用css缩写  使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法结见附》,这里就不展开描述。  二.明确定义单位,除非值为0  忘记定义尺寸的...
  • courseware
  • courseware
  • 2007-12-03 00:09:00
  • 403

自己总结的html css知识点

标签 ????块状还是内联 答:是块状 a标签??文本居中 答:align:center a标签可以有id ul li p 标签可以有id吗 答:应该不可以 ul可以有,我...
  • mozuncangtianbaxue
  • mozuncangtianbaxue
  • 2017-07-27 20:59:39
  • 184

基于CSS样式的网页表格的美化

  • 2007年09月14日 20:11
  • 77KB
  • 下载
收藏助手
不良信息举报
您举报文章:用CSS美化你的网页
举报原因:
原因补充:

(最多只允许输入30个字)