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-size: 18px;
}
</style>
</head>
<body>
<p>这是一段内部样式的文本。</p>
</body>外部样式表
将 CSS 代码保存在单独的 .css 文件中，并通过 <link> 标签引入 HTML。
<head>
<link rel="stylesheet" href="styles.css">
</head>styles.css 文件内容：
p {
color: green;
font-size: 20px;
}常用 CSS 属性
-
颜色和背景
color: #ff0000; background-color: #f0f0f0; background-image: url('image.jpg'); -
文本
font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; text-align: center; text-decoration: underline; -
盒模型
width: 100px; height: 100px; padding: 10px; margin: 20px; border: 1px solid black; -
布局
display: flex; justify-content: center; align-items: center; position: relative; float: left;
选择器类型
-
元素选择器
p { color: blue; } -
类选择器
.highlight { background-color: yellow; } -
ID 选择器
#header { font-size: 24px; } -
后代选择器
div p { color: green; } -
伪类选择器
a:hover { color: red; }
响应式设计
使用媒体查询适配不同设备屏幕尺寸。
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}Flexbox 布局
Flexbox 提供一种更高效的布局方式。
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.item {
flex: 1;
}CSS 动画
使用 @keyframes 创建动画效果。
@keyframes slidein {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
.slide {
animation: slidein 3s;
}变量
CSS 变量可以在全局或局部范围内定义和使用。
:root {
--main-color: #4CAF50;
}
body {
background-color: var(--main-color);
}预处理器（如 Sass）
Sass 扩展了 CSS 的功能，支持变量、嵌套、混合等。
$primary-color: #333;
body {
color: $primary-color;
}
.button {
background-color: $primary-color;
&:hover {
background-color: darken($primary-color, 10%);
}
}
