CSS概述

CSS（层叠样式表）用于定义HTML元素的样式：


/* 基本CSS语法 */
selector {
    property: value;
}

/* 示例 */
h1 {
    color: blue;
    font-size: 24px;
}

样式效果

这是一个标题

选择器

CSS选择器用于选择要设置样式的HTML元素：

元素选择器


p {
    color: red;
}

类选择器


.highlight {
    background: yellow;
}

ID选择器


#header {
    background: #35424a;
}

盒模型

CSS盒模型描述了元素的内容、内边距、边框和外边距：

内容区域


.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    margin: 20px;
    border: 2px solid #e8491d;
    background: #f8f9fa;
}

布局

CSS提供了多种布局方式：

Flexbox

项目1

项目2

项目3


.flex-container {
    display: flex;
    gap: 1rem;
}

Grid

1

2

3

4

5

6


.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

动画和过渡

CSS可以创建动画和过渡效果：

动画


@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.animated {
    animation: bounce 2s infinite;
}

过渡


.transition {
    transition: all 0.3s ease;
}

.transition:hover {
    transform: scale(1.2);
}

响应式设计

使用媒体查询创建响应式布局：


/* 响应式布局示例 */
@media (max-width: 768px) {
    .container {
        width: 95%;
    }
    
    .grid {
        grid-template-columns: 1fr;
    }
}

CSS最佳实践

使用语义化的类名
避免过度嵌套选择器
使用CSS变量
模块化CSS
优化选择器性能
使用CSS预处理器
遵循BEM命名规范
保持代码可维护性

HTML CSS教程

CSS概述

样式效果

这是一个标题

选择器

元素选择器

类选择器

ID选择器

盒模型

布局

Flexbox

Grid

动画和过渡

动画

过渡

响应式设计

CSS最佳实践

CSS应用示例

卡片设计

卡片标题

按钮样式

导航菜单