用记事本制作css网页
准备工作
确保电脑已安装记事本(Notepad)或其他纯文本编辑器。准备一个文件夹用于存放网页文件,建议命名为my_website。
创建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: 20px;
}
h1 {
color: #333366;
text-align: center;
}
p {
color: #666;
line-height: 1.6;
}
保存文件
将index.html和style.css放在同一文件夹内。确保文件扩展名正确(不是.txt),保存时选择“所有文件”类型,编码为UTF-8。
测试网页
双击index.html文件,默认浏览器会打开网页。检查样式是否正常加载,文字颜色、背景等是否符合预期。
扩展功能
如需添加更多样式,可在style.css中继续编写:
a {
color: #0066cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
调试建议
若样式未生效,检查以下事项:

- CSS文件名是否与HTML中
href属性一致 - 文件是否在同一目录
- 浏览器缓存问题(尝试Ctrl+F5强制刷新)






