html+css怎么做网页?

html-css027

html+css怎么做网页?,第1张

创建一个文本文档,输入以下内容:

<!DOCTYPE html>

<html>

<head>

<style>

p {

background-color: lightblue

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>p标签拥有浅蓝色背景色!</p>

</body>

</html>

然后保存文件,将后缀名修改为.HTML,然后用浏览器打开,一个简单的网页就出现了。

html:

<!DOCTYPE html>

<html>

<head>

<title>My webpage</title>

</head>

<body>

<div>

<h1>My first div</h1>

<p>This div uses inline CSS to style its content.</p>

<style>

h1 {

color: red

}

p {

font-size: 16px

text-align: center

}

</style>

</div>

<div>

<h1>My second div</h1>

<p>This div uses an external CSS file to style its content.</p>

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

</div>

<div>

<h1>My third div</h1>

<p>This div uses an embedded style sheet to style its content.</p>

<style>

/* This is an embedded style sheet */

h1 {

color: blue

}

p {

font-size: 14px

text-align: left

}

</style>

</div>

</body>

</html>

style.css:

/* This is an external style sheet */

h1 {

color: green

}

p {

font-size: 18px

text-align: right

}

这段代码中,第一个div使用内联CSS来样式其内容,第二个div使用外部CSS文件来样式其内容,第三个div使用嵌入式样式表来样式其内容。