css简单制作
CSS 基础制作方法
内联样式
直接在 HTML 标签中使用 style 属性添加 CSS，适用于单个元素的快速样式设置。
<p style="color: blue; font-size: 16px;">示例文本</p>内部样式表
在 HTML 文件的 <head> 部分通过 <style> 标签定义样式，适用于单个页面。
<head>
<style>
p {
color: red;
font-family: Arial;
}
</style>
</head>外部样式表
创建独立的 .css 文件并通过 <link> 引入，适合多页面复用。
<head>
<link rel="stylesheet" href="styles.css">
</head>styles.css 文件内容示例：
body {
background-color: #f0f0f0;
margin: 0;
}常用 CSS 属性示例
文本样式
h1 {
color: #333;
text-align: center;
text-decoration: underline;
}盒模型
div {
width: 200px;
padding: 20px;
border: 1px solid black;
margin: 10px auto;
}背景与颜色
.header {
background: linear-gradient(to right, #ff9966, #ff5e62);
height: 100px;
}响应式设计基础
使用媒体查询适配不同设备屏幕：
@media (max-width: 600px) {
body {
font-size: 14px;
}
}实用技巧
- 使用
class和id选择器精确控制元素样式。 - 优先使用 Flexbox 或 Grid 布局替代传统浮动布局。
- 通过伪类（如
:hover）添加交互效果：button:hover { background-color: #555; }
