css制作样式
CSS 样式制作方法
CSS（层叠样式表）用于控制网页的样式和布局。以下是几种常见的 CSS 样式制作方法。
内联样式
直接在 HTML 元素的 style 属性中编写 CSS 规则。
<p style="color: blue; font-size: 16px;">这是一段蓝色文本。</p>内部样式表
在 HTML 文件的 <head> 部分使用 <style> 标签定义样式。
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一段蓝色文本。</p>
</body>外部样式表
将 CSS 规则写入独立的 .css 文件，并通过 <link> 标签引入。
<head>
<link rel="stylesheet" href="styles.css">
</head>styles.css 文件内容：
p {
color: blue;
font-size: 16px;
}常用 CSS 属性
- 文本样式：
p { color: #333; font-family: Arial, sans-serif; font-size: 14px; text-align: center; } - 盒模型：
div { width: 200px; height: 100px; padding: 10px; margin: 20px; border: 1px solid #ccc; } - 背景与颜色：
body { background-color: #f4f4f4; background-image: url('bg.jpg'); }
选择器
- 类选择器：
.highlight { background-color: yellow; }<p class="highlight">高亮文本</p> - ID 选择器：
#header { font-size: 24px; }<div id="header">标题</div> - 伪类选择器：
a:hover { color: red; }
响应式设计
使用媒体查询适配不同设备屏幕。
@media (max-width: 600px) {
body {
font-size: 12px;
}
}Flexbox 布局
实现灵活的盒子布局。
.container {
display: flex;
justify-content: center;
align-items: center;
}CSS 动画
通过 @keyframes 创建动画效果。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 2s;
}以上方法可以根据需求灵活组合使用，以实现丰富的网页样式效果。
