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

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

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

●     方法一：行内样式表（style属性）

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

<html>

<head>

<title>例子</title>

</head>

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

<p>这个页面是红色的</p>

</body>

</html>

●     方法二：内部样式表（style元素）

为HTML应用CSS的另一种方法，是采用HTML元素style，添加在<head></head>元素之间。比如下面这样：

<html>

<head>

<title>例子</title>

<style type="text/css">

body {background-color: #FF0000;}

</style>

</head>

<body>

<p>这个页面是红色的</p>

</body>

</html>

●     方法三：外部样式表（引用一个样式表文件）

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

body {background-color: #FF0000;}

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

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

要在href属性里给出样式表文件的地址。这行代码必须被插入HTML代码的头部（header），即放在标签<head>和标签</head>之间：

<html>

<head>

<title>例子</title>

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

</head>

<body>

<p>这个页面是红色的</p>

</body>

</html>

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>登录</title>

</head>

<body>

<div id="box">

<div id="title">登录</div>

<table id="loginTable">

<tr>

<td width="90px;"><label for="username">用户名：</label></td>

<td><input type="text" name="username" id="username"

style="width: 120px;" /></td>

</tr>

<tr>

<td><label for="password">密码：</label></td>

<td><input type="password" name="password" id="password"

style="width: 120px;" /></td>

</tr>

</table>

<br />

<div id="submit"><span style="width: 100px;"> <input

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

<a href="register.do?method=init">注册</a></span></div>

</div>

</body>

</html>

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

图3-1  使用CSS之前的页面

然后我们在该页面的<head></head>中添加如下的样式表代码：

<style>

body{

margin: 0px;

padding: 0px 0px 0px 0px;

font-family:Arial,"MS Sans Serif",Tahoma,sans-serif;

font-size: 12pt;

text-align:center;

}

#box{

width: 350px;

margin:15% auto;

background:#f6f8f7 url(images/bottom-left.gif) no-repeat left bottom;

padding:0px 0px 20px 0px;

border-top: 1px solid #d1d1d1;

border-right: 1px solid #d1d1d1;

}

#title{

text-align : left;

padding:5px 10px 5px 5px;

font-family: Courier, "Courier New", monospace;

font-size: 15pt;

color: #000033;

font-weight :bolder;

border-left:1px solid #d1d1d1;

}

#loginTable{

border:0;

margin:0 auto;

text-align:left;

}

#submit{

font-weight:bolder;

}

input:focus{

background:#ffc;

}

</style>

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

图3-2 使用CSS以后的页面

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

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

转载于:https://www.cnblogs.com/haoxia/archive/2009/06/04/1496289.html

在HTML中使用CSS美化网页的三种方法相关推荐

  1. js中当等于最小值是让代码不执行_网页中JS函数自动执行常用三种方法

    本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下 一.JS方法 1.最简单的调用方式,直接写到html的body标签里面: 2.在JS语句调用: function myfun ...

  2. html网页自动运行函数,在网页中JS函数自动执行常用三种方法

    在网页中JS函数自动执行常用三种方法 在HTML中的Head区域中,有如下函数: functionn MyAutoRun() { //以下是您的函数的代码,请自行修改先! alert("函数 ...

  3. vbs执行ctrl+空格_VBS中解决路径带空格的三种方法

    vbs中,如果需要运行的程序中带有空格,按照通常的方式往往会提示错误,其实有两种形式不同的解决方法: 在应用程序前后分别加三个双引号,代码如下: Set wshell=CreateObject(&qu ...

  4. css设置行间距的三种方法

    css设置行间距的三种方法 1.使用数值来设置行间距 CSS <!DOCTYPE html> <html><head><meta charset=" ...

  5. python网页爬取方法_Python爬取网页的三种方法

    # Python爬取网页的三种方法之一:  使用urllib或者urllib2模块的getparam方法 import urllib fopen1 = urllib.urlopen('http://w ...

  6. ABAP中创建动态内表的三种方法（转载）

    BAP中创建动态内表的三种方法 第一种: 如果我们需要的动态内表字段或者动态工作区和数据字典中的类型一致,可以直接使用CREATE DATA生成,当然也可以是自定义类型. 比如要产生和数据表MARA结 ...

  7. android启动其他app的服务器,Android中通过外部程序启动App的三种方法

    这篇文章主要介绍了Android中通过外部程序启动App的三种方法, 本文讲解了直接通过包名. 通过自定义的Action. 通过Scheme三种方法,并分别给出操作代码,需要的朋友可以参考下 ==== ...

  8. CSS画心形的三种方法，超级简单

    CSS画心形的三种方法,超级简单 一.一颗div一颗心 用一个div画出一个心,核心的方法就是使用伪元素 首先,我们在页面上先写出一个div 使用CSS,将这个div变为一个橘红色的正方形: 接着我们 ...

  9. css画心形原理,CSS画心形的三种方法

    下面,介绍三种CSS画心形的方法.实现过程都非常简单,保证你一看就会. 1.一颗div一颗心 用一个div画出一个心,核心的方法就是使用伪元素. 首先,我们在页面上先写出一个div: 使用CSS,将这 ...

最新文章

  1. 【题解】 [HNOI2015]落忆枫音 （拓扑排序+dp+容斥原理）
  2. [LeetCode] Reverse Linked List I II - 链表翻转问题
  3. java中CompletionService的使用
  4. mysql截取字符串中的部分内容_Mysql字符串截取及获取指定字符串中的数据
  5. hibernate+oracle+servlet实现插入数据的时候，不立马显示！！
  6. python中oxf2是什么_0x02-StartingPoint-Oopsie
  7. 人脸检测与对齐之MTCNN网络
  8. zookeeper3.5.4源码环境搭建
  9. 下一代软件工程的思考与点滴实践
  10. 从 Web1.0 到 3.0 你不知道的互联网的演进史！
  11. RSA host key for xxx has changed and you have requested strict checking.
  12. 使用WinDbg搭建edk2 DEBUG环境
  13. win10系统许可证即将过期的解决方法
  14. kon-boot启动盘测试
  15. SpringCloud神兽（二）之Ribbon
  16. openlayers设置黑色底图，自定义修改天地图颜色
  17. 【讨论】读博最多收入的高校是哪个？中国高校硕博补贴大盘点！
  18. AndroidStudy---搭建后台服务器
  19. [Realtek sdk-3.4.14b]RTL8197FH-VG增加IPv6功能支持
  20. 如何胜任知名企业的商业数据分析师？

热门文章

  1. python错误-Python错误处理和异常处理
  2. python在哪里写程序和运行-如何编写和运行Python程序
  3. 汇编和python-python语言属于汇编语言吗？_后端开发
  4. 学python需要什么基础知识-学习Python需要知道哪些基础入门知识？
  5. python利器的使用-PPython：PHP 拥抱 Python 的利器
  6. python序列类型-Python内置序列类型之集合类型详解
  7. python编程实例视屏-python爬视频实例
  8. python与php8-详解Python中Unicode和utf-8
  9. python3-Python3 数字(Number)
  10. 自学python还是报班-零基础学Python是应该报课还是自学？