用记事本制作css网页
使用记事本制作CSS网页
创建HTML文件
打开记事本,输入以下基础HTML结构代码,保存为index.html:
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个用记事本制作的CSS网页示例。</p>
</body>
</html>
创建CSS文件
新建一个记事本文件,输入以下CSS代码,保存为style.css:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
line-height: 1.6;
}
保存文件
确保两个文件保存在同一文件夹中。index.html是主文件,style.css是样式表文件。
打开网页
双击index.html文件,浏览器将打开网页并应用CSS样式。
进阶修改
可以继续编辑CSS文件来调整网页样式。例如添加更多样式规则:
/* 添加链接样式 */
a {
color: #0066cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* 添加容器样式 */
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
验证代码
使用W3C的在线验证工具检查HTML和CSS代码是否符合标准:
- HTML验证器:https://validator.w3.org/
- CSS验证器:https://jigsaw.w3.org/css-validator/
注意事项
- 保存文件时确保扩展名正确(.html和.css)
- 避免在文件名中使用空格或特殊字符
- CSS属性值后面需要加分号
- 注释在CSS中使用/ /,在HTML中使用







