ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 在HTML中使用CSS美化网页的三种方法

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

原创 Linux操作系统 作者:wenjianan 时间:2009-06-16 18:46:12 0 删除 编辑

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

CSSCascading Style. Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。它可以省去你大量时间,令你可以采用一种全新的方式来设计网站。CSS是每个网页设计人员所必须掌握的。

HTML文档应用CSS,有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法(即外部样式表)予以关注。

     方法一:行内样式表(style属性)

HTML应用CSS的第一种方法,是使用HTML属性style,将属性和值放在style属性中即可。我们在上例的基础之上,通过行内样式表将页面背景设为红色:

</SPAN></SPAN><SPAN style="FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'" mce_style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman';">例子</SPAN><SPAN lang=EN-US><SPAN style="FONT-FAMILY: 宋体, MS Song" mce_style="font-family: 宋体, MS Song;">

style="background-color: #FF0000;">

这个页面是红色的

     方法二:内部样式表(style元素)

HTML应用CSS的另一种方法,是采用HTML元素style,添加在元素之间。比如下面这样:

</SPAN></SPAN><SPAN style="FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'" mce_style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman';">例子</SPAN><SPAN lang=EN-US><SPAN style="FONT-FAMILY: 宋体, MS Song" mce_style="font-family: 宋体, MS Song;">

body {background-color: #FF0000;}

这个页面是红色的

     方法三:外部样式表(引用一个样式表文件)

我们推荐采用这种引用外部样式表的方法。外部样式表就是一个扩展名为css的文本文件。跟其他文件一样,你可以把样式表文件放在Web服务器上或者本地硬盘上。比方说你的样式表文件名为style.cssstyle.css文件的代码如下例所示:

body {background-color: #FF0000;}

在一个HTML文档里引用一个外部样式表文件(style.css)的方法是:在HTML文档里创建一个指向外部样式表文件的链接(link)即可:

href="style.css" />

要在href属性里给出样式表文件的地址。这行代码必须被插入HTML代码的头部(header),即放在标签和标签之间:

</SPAN></SPAN><SPAN style="FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'" mce_style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman';">例子</SPAN><SPAN lang=EN-US><SPAN style="FONT-FAMILY: 宋体, MS Song" mce_style="font-family: 宋体, MS Song;">

这个页面是红色的

这个链接告诉浏览器:在显示该HTML文件时,应使用给出的CSS文件进行布局。

这种方法的优越之处在于:多个HTML文档可以同时引用一个样式表。换句话说,可以用一个CSS文件来控制多个HTML文档的布局。这一方法可以令你省去许多工作。例如,假设你要修改某网站的所有网页(比方说有100个网页)的背景颜色,采用外部样式表可以避免你手工一一修改这100HTML文档的工作。采用外部样式表,这样的修改只需几秒钟即可搞定——修改外部样式表文件里的代码即可。

CSS可以使用更多的属性来定义网页的显示样式,先来让我们看看下面这段没有CSS样式修饰的HTML代码的显示效果:

</SPAN></SPAN><SPAN style="FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'" mce_style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman';">登录</SPAN><SPAN lang=EN-US><SPAN style="FONT-FAMILY: Times New Roman" mce_style="font-family: Times New Roman;">

登录

   

       

       

   

   

       

       

   

            style="width: 120px;" />

            style="width: 120px;" />


    type="submit" name="submit" value="登录" style="width: 80px;">

注册

显示的界面样式如下所示:

 

使用CSS之前的页面

 

3-1  使用CSS之前的页面

然后我们在该页面的中添加如下的样式表代码:

经过美化后的效果如图3-2所示:

使用CSS以后的页面

 

3-2 使用CSS以后的页面

对比上面两个页面的代码,我们发现,两者的唯一区别就是一个没有使用CSS而另一个使用了,其余的代码完全一样。由此可见CSSWeb页面中发挥的重要作用。

 

本文出自《Java高手真经. 网络开发卷:Java Web核心技术:Web基础+数据库+JSP/JavaBean/Servlet+JSF 》一书

Java Web核心技术

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/9215421/viewspace-606531/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2009-06-09

  • 博文量
    111
  • 访问量
    108144