在HTML页面中编写CSS的方法有多种，以下是一些常见的方法：
1、内联样式：在HTML元素的style属性中直接编写CSS代码，这种方法适用于对单个元素进行样式设置。
<p style="color: red; font-size: 20px;">这是一个红色的段落。</p>
2、内部样式表：在HTML文档的head部分使用<style>标签编写CSS代码，这种方法适用于对多个元素进行样式设置。
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是一个红色的段落。</p>
<p>这是另一个红色的段落。</p>
</body>
</html>
3、外部样式表：将CSS代码保存在一个单独的文件中，然后在HTML文档中使用<link>标签引入该文件，这种方法适用于对多个页面进行样式设置。
创建一个名为styles.css的CSS文件，内容如下：
p {
color: red;
font-size: 20px;
}
在HTML文档中使用<link>标签引入该文件：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <p>这是一个红色的段落。</p> <p>这是另一个红色的段落。</p> </body> </html>
4、使用CSS预处理器（如Sass、Less等）：这些预处理器允许您使用更高级的功能和语法来编写CSS代码，例如嵌套、变量、混合等，要使用预处理器，您需要先安装相应的编译器，然后将预处理器代码编译成普通的CSS代码，将编译后的CSS代码与HTML文件一起部署。
5、使用CSS框架（如Bootstrap、Foundation等）：这些框架提供了一套预先定义好的CSS样式和组件，可以帮助您快速构建响应式网站，要使用框架，您需要先下载并引入相应的CSS和JavaScript文件，然后在HTML文件中使用框架提供的类名和结构。
6、使用CSS模块化：这是一种将CSS代码分解为独立模块的方法，可以提高代码的可维护性和可重用性，要实现CSS模块化，您可以使用CSS预处理器（如Sass、Less等）或原生CSS的@import规则。
/* styles.css */
.container {
width: 100%;
}
/* module.css */
.button {
background-color: blue;
color: white;
}
在HTML文档中引入这两个文件：
<style> @import "module.css"; /* 原生CSS */ @import "module.css"; /* Sass/Less */ </style>
在HTML页面中编写CSS的方法有很多，您可以根据项目需求和个人喜好选择合适的方法，无论采用哪种方法，都要确保CSS代码具有良好的结构和可读性，以便其他开发人员能够轻松理解和修改您的代码。