css制作代码
CSS 基础语法
CSS（层叠样式表）通过选择器和声明块控制 HTML 元素的样式。基本语法结构如下：
选择器 {
属性: 值;
属性: 值;
}内联样式
直接在 HTML 元素的 style 属性中编写 CSS：
<p style="color: blue; font-size: 16px;">内联样式示例</p>内部样式表
在 HTML 文件的 <head> 部分通过 <style> 标签嵌入 CSS：
<head>
<style>
p {
color: red;
font-family: Arial;
}
</style>
</head>外部样式表
将 CSS 代码保存在独立的 .css 文件中，通过 <link> 标签引入：
<head>
<link rel="stylesheet" href="styles.css">
</head>styles.css 文件内容示例：
body {
background-color: #f0f0f0;
margin: 0;
}常用选择器
-
元素选择器：通过标签名选择
h1 { text-align: center; } -
类选择器：通过
.classname选择.highlight { background-color: yellow; } -
ID 选择器：通过
#idname选择#header { height: 100px; } -
属性选择器：通过属性选择
input[type="text"] { border: 1px solid #ccc; }
盒模型
CSS 盒模型包含内容、内边距、边框和外边距：
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}布局技术
-
Flexbox：弹性布局
.container { display: flex; justify-content: space-between; } -
Grid：网格布局
.grid-container { display: grid; grid-template-columns: 1fr 2fr; }
响应式设计
使用媒体查询实现响应式布局：
@media (max-width: 600px) {
.column {
width: 100%;
}
}动画效果
创建简单的动画：
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.animate {
animation: example 2s infinite;
}变量使用
定义和使用 CSS 变量：
:root {
--main-color: #3498db;
}
.element {
color: var(--main-color);
}预处理器示例（Sass）
Sass 提供了变量、嵌套等高级功能：
$primary-color: #333;
body {
font: 100% $primary-color;
.container {
width: 80%;
}
}
