一个最基本的CSS文件处理

敲入如下代码

#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>


阅读更多
个人分类: CSS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭