关闭

一个最基本的CSS文件处理

81人阅读 评论(0) 收藏 举报
分类:

敲入如下代码

#layout {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
height: 300px;
width: 400px;
background-color: #66CCFF;
}

这段代码是通过DW生成的。打开DW,新建html网页,建立CSS样式。保存。


DW生成的代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="layout">此处显示  id "layout" 的内容</div>
</body>
</html>


下面我打开记事本,写入如下代码,并生成html文件:(这里不再像上面的文件那样,指定css文件路径,而是将样式文件写在代码中。)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type = "text/css">
#layout1{font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
height: 600px;
width: 300px;
margin:auto;
background-color: #66CCFF;}
</style>
</head>
<body>
<div id="layout1">此处显示  id "layout" 的内容</div>
</body>
</html>

下面我再调整一下html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type = "text/css">
#layout1{font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
height: 300px;
width: 300px;
margin:auto;
background-color: #66CCFF;}


#layout2{font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
height: 300px;
width: 300px;
background-color: #66CCFF;}
</style>
</head>


<body>
<div id="layout1">此处显示  id "layout1" 的内容</div>
<div id="layout2">此处显示  id "layout2" 的内容</div>
</body>
</html>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2230次
    • 积分:81
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:21篇
    • 译文:0篇
    • 评论:0条
    文章分类