CSS 常用指南

目录

基础语法

CSS 的基本语法结构：

1
2
3
选择器 {
    属性: 值;
}

选择器

基础选择器

  • 元素选择器：div { }
  • 类选择器：.className { }
  • ID选择器：#idName { }
  • 通用选择器：* { }

组合选择器

  • 后代选择器：div span { }
  • 子元素选择器：div > span { }
  • 相邻兄弟选择器：div + p { }
  • 通用兄弟选择器：div ~ p { }

伪类和伪元素

  • :hover - 鼠标悬停
  • :active - 激活状态
  • :focus - 聚焦状态
  • ::before - 元素之前
  • ::after - 元素之后

选择器使用示例

1. 基础选择器示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* 元素选择器 - 选择所有段落 */
p {
    color: #333;
}

/* 类选择器 - 选择带有 .button 类的元素 */
.button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
}

/* ID选择器 - 选择 ID 为 header 的元素 */
#header {
    background-color: #f8f9fa;
    padding: 20px;
}

/* 属性选择器 - 选择带有特定属性的元素 */
input[type="text"] {
    border: 1px solid #ddd;
}

/* 选择带有特定属性值的元素 */
a[target="_blank"] {
    color: #ff6b6b;
}

2. 组合选择器示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 后代选择器 - 选择 nav 内的所有 a 标签 */
nav a {
    text-decoration: none;
    color: #333;
}

/* 子元素选择器 - 只选择 ul 的直接子元素 li */
ul > li {
    list-style: none;
    margin: 5px 0;
}

/* 相邻兄弟选择器 - 选择紧跟在 h2 后面的 p */
h2 + p {
    font-size: 1.1em;
    line-height: 1.6;
}

/* 通用兄弟选择器 - 选择 h2 后面的所有 p */
h2 ~ p {
    color: #666;
}

3. 伪类和伪元素示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* 链接状态 */
a:link { color: #007bff; }
a:visited { color: #6610f2; }
a:hover { color: #0056b3; }
a:active { color: #003380; }

/* 表单状态 */
input:focus {
    outline: 2px solid #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

/* 结构伪类 */
li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
li:nth-child(odd) { background-color: #f8f9fa; }
li:nth-child(even) { background-color: #e9ecef; }

/* 伪元素 */
.quote::before {
    content: """;
    font-size: 2em;
    color: #007bff;
}

.quote::after {
    content: """;
    font-size: 2em;
    color: #007bff;
}

/* 首字母和首行 */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
}

p::first-line {
    color: #666;
}

4. 组合使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 组合多个条件 */
.card.featured {
    border: 2px solid gold;
}

/* 特定状态下的样式 */
.button:hover.primary {
    background-color: #0056b3;
}

/* 父元素状态影响子元素 */
.dropdown:hover > .dropdown-menu {
    display: block;
}

/* 复杂选择器组合 */
.sidebar nav ul li > a:hover {
    background-color: #f8f9fa;
}

这些选择器可以根据需要组合使用，创建更精确的样式规则。记住要避免过度特定化，这可能会导致样式难以维护和覆盖。

盒模型

盒模型组成

1
2
3
4
5
6
7
.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 1px solid #000;
    margin: 10px;
}

盒模型类型

1
2
3
.box {
    box-sizing: border-box; /* 或 content-box */
}

布局

Flexbox

1
2
3
4
5
6
7
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

Grid

1
2
3
4
5
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

Position

1
2
3
4
5
.element {
    position: relative | absolute | fixed | sticky;
    top: 0;
    left: 0;
}

文本样式

字体

1
2
3
4
5
6
.text {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
}

文本对齐

1
2
3
4
5
.text {
    text-align: left | center | right;
    text-decoration: none | underline;
    text-transform: uppercase | lowercase | capitalize;
}

常用属性

背景

1
2
3
4
5
6
.element {
    background-color: #f0f0f0;
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
}

边框

1
2
3
4
5
.element {
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

响应式设计

媒体查询

1
2
3
4
5
6
7
8
/* 移动端优先 */
@media screen and (min-width: 768px) {
    /* 平板样式 */
}

@media screen and (min-width: 1024px) {
    /* 桌面样式 */
}

响应式单位

1
2
3
4
5
6
.element {
    font-size: 1rem;
    width: 100%;
    max-width: 1200px;
    height: 50vh;
}

最佳实践

  1. 命名规范

    • 使用有意义的类名
    • 采用 BEM 命名方法
    • 避免过度嵌套

  2. 性能优化

    • 避免使用!important
    • 压缩CSS文件
    • 合理使用选择器

  3. 维护性

    • 模块化CSS
    • 保持代码整洁
    • 添加适当的注释

  4. 兼容性

    • 考虑浏览器前缀
    • 测试跨浏览器兼容性
    • 使用规范化CSS（Normalize.css）
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章