html制作css
HTML 制作 CSS 的方法
内联样式
直接在 HTML 标签中使用 style 属性添加 CSS。适用于单个元素的样式设置，但不利于维护和复用。
<p style="color: red; font-size: 16px;">这是一段红色文字。</p>内部样式表
在 HTML 文件的 <head> 部分通过 <style> 标签定义 CSS。适用于单个页面的样式管理。
<head>
<style>
p {
color: blue;
font-family: Arial;
}
</style>
</head>外部样式表
通过链接外部 .css 文件实现样式与内容的分离。推荐用于多页面项目，便于统一维护。
- 创建
styles.css文件：body { background-color: #f0f0f0; } h1 { text-align: center; } - 在 HTML 中引入：
<head> <link rel="stylesheet" href="styles.css"> </head>
CSS 选择器类型
元素选择器
直接以 HTML 标签名作为选择器。
p {
line-height: 1.5;
}类选择器
通过 .classname 指定样式，可在多个元素中复用。
<p class="highlight">高亮文本</p>.highlight {
background-color: yellow;
}ID 选择器
通过 #idname 定义唯一元素的样式。
<div id="header">页眉</div>#header {
padding: 20px;
}常用 CSS 属性示例
文本样式
.text {
font-size: 14px;
color: #333;
text-decoration: underline;
}盒模型
.box {
width: 200px;
padding: 15px;
border: 1px solid #ddd;
margin: 10px auto;
}布局控制
.container {
display: flex;
justify-content: space-between;
}
