css的制作
CSS 的基本概念
CSS（Cascading Style Sheets）是一种用于描述HTML或XML文档样式的语言。它定义了如何显示文档中的元素，包括布局、颜色、字体等。CSS可以与HTML结合使用，实现网页的美化和结构化。
CSS 的引入方式
内联样式
直接在HTML元素的style属性中编写CSS代码。
<p style="color: blue; font-size: 16px;">这是一个段落。</p>内部样式表
在HTML文档的<head>部分使用<style>标签定义CSS样式。
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>外部样式表
将CSS代码保存在独立的.css文件中，并通过<link>标签引入。
<head>
<link rel="stylesheet" href="styles.css">
</head>CSS 选择器
元素选择器
通过HTML标签名称选择元素。
p {
color: blue;
}类选择器
通过元素的class属性选择元素，以.开头。
.text {
font-size: 16px;
}ID选择器
通过元素的id属性选择元素，以#开头。
#header {
background-color: gray;
}后代选择器
选择嵌套在某个元素内的元素。
div p {
color: red;
}伪类选择器
定义元素的特殊状态，如悬停或点击。
a:hover {
color: green;
}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 black;
}背景与颜色
body {
background-color: #f4f4f4;
background-image: url('image.jpg');
}布局属性
.container {
display: flex;
justify-content: center;
align-items: center;
}CSS 的优先级规则
CSS的优先级由选择器的特异性决定，通常遵循以下顺序：
!important声明优先级最高。- 内联样式优先级高于内部或外部样式。
- ID选择器优先级高于类选择器和元素选择器。
- 相同优先级下，后定义的样式会覆盖之前的样式。
CSS 预处理器
CSS预处理器（如Sass、Less）扩展了CSS的功能，支持变量、嵌套、混合等特性。
Sass示例：
$primary-color: blue;
body {
background-color: $primary-color;
}CSS 框架
常见的CSS框架（如Bootstrap、Tailwind CSS）提供了预定义的样式和组件，加速开发。
Bootstrap示例：
<button class="btn btn-primary">点击</button>CSS 动画与过渡
过渡效果
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}关键帧动画
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 1s;
}CSS 响应式设计
使用媒体查询适配不同设备屏幕。
@media (max-width: 768px) {
body {
font-size: 12px;
}
}
