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标签名应用样式。
div {
border: 1px solid black;
}类选择器（Class）
通过.前缀匹配class属性，可重复使用。
.highlight {
background-color: yellow;
}ID选择器
通过#前缀匹配唯一id属性。
#header {
font-size: 24px;
}组合与伪类选择器
- 后代选择器：
div p（选择div内的所有p） - 伪类：
:hover（鼠标悬停状态）a:hover { color: green; }
常用CSS属性示例
文本与字体
p {
font-family: "Times New Roman", serif;
font-size: 18px;
text-align: justify;
line-height: 1.5;
}盒模型
.box {
width: 200px;
padding: 15px;
margin: 10px auto;
border: 2px dashed #ccc;
}布局与定位
.container {
display: flex;
justify-content: space-between;
}
.absolute {
position: absolute;
top: 50px;
left: 20px;
}响应式设计基础
使用媒体查询适配不同设备屏幕。
@media (max-width: 600px) {
body {
font-size: 14px;
}
.sidebar {
display: none;
}
}注意事项
- 外部样式表需确保文件路径正确。
- 选择器优先级：
!important> 内联 > ID > 类 > 元素。 - 使用开发者工具（如Chrome DevTools）调试CSS。
