1. 内联样式
内联样式是通过在HTML元素的style属性中定义CSS样式来实现的。这种方式是在HTML元素中直接设置样式，不需要引入外部CSS文件。
代码示例：
<div style="color: red; font-size: 16px;">这是一个内联样式的示例</div>这种方式的优点是简单快捷，可以针对具体的元素进行个性化的样式设置。但是由于样式定义直接写在HTML中，当需要大量使用相同样式的元素时，代码重复度高，不易维护和扩展。
内联样式的使用应该尽量少，只在必要的情况下使用。
2. 内部样式表
内部样式表是在HTML文档的<head>标签内通过<style>标签来定义CSS样式的一种方式。
代码示例：
<head>
<style>
div {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<div>这是一个内部样式表的示例</div>
</body>
这种方式适合用于针对整个HTML文档的样式定义，可以集中管理所有样式，便于维护和修改。但是如果需要在多个HTML文件中使用相同的样式，还是需要重复编写。
3. 外部样式表
外部样式表是将CSS样式定义在一个独立的.css文件中，通过<link>标签将其引入到HTML文档中。
代码示例：
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div>这是一个外部样式表的示例</div>
</body>
这种方式将CSS样式与HTML文档分离，可以在多个HTML文件中共用同一个样式表文件，减少代码重复编写。外部样式表的修改只需要修改一个文件即可，方便快捷。
推荐多数情况下使用外部样式表，这也是最常见的方式。
4. 导入样式表
导入样式表是通过在外部样式表中使用@import语句引入其他CSS文件的一种方式。
代码示例：
@import url("styles.css");
这种方式可以将不同的样式表文件进行分离，方便管理和维护。但是由于每次导入都会增加一次HTTP请求，对页面加载速度有一定的影响。
综上所述，CSS和HTML可以通过内联样式、内部样式表、外部样式表和导入样式表四种方式进行结合。根据实际需求和项目规模的不同，选择合适的方式来管理和应用样式。外部样式表是最常用和推荐的方式，可以实现样式的复用、可维护性和扩展性。