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>外部样式表
通过 <link> 标签引入独立的 .css 文件。适用于多页面共享样式，便于维护。
<head>
<link rel="stylesheet" href="styles.css">
</head>文件 styles.css 内容示例：
body {
background-color: #f0f0f0;
}
h1 {
text-align: center;
}CSS 选择器示例
标签选择器
直接匹配 HTML 标签名称。
p {
line-height: 1.5;
}类选择器
通过 .classname 匹配元素的 class 属性。
<div class="box">内容</div>.box {
border: 1px solid #000;
}ID 选择器
通过 #idname 匹配元素的 id 属性（一个页面中应唯一）。
<button id="submit-btn">提交</button>#submit-btn {
background-color: green;
}常用 CSS 属性
文本样式
.text {
font-size: 14px;
color: #333;
text-decoration: underline;
}盒模型
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
border: 1px dashed #ccc;
}布局示例
Flexbox 实现水平居中：
.flex-container {
display: flex;
justify-content: center;
}
