CSS语言知识点汇总

前言

这里只是简单列出CSS的知识点

---

一、基础语法

1.1 基本结构

selector {
    property: value;
    /* 注释 */
}

1.2 引入方式

<!-- 内联样式 -->
<div style="color: red;"></div>

<!-- 内部样式表 -->
<style>
    body { font-family: Arial; }
</style>

<!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">

---

二、选择器

2.1 基本选择器

选择器	示例	说明
元素选择器	p	选择所有 元素
类选择器	.class	选择class=”class”的元素
ID选择器	#id	选择id=”id”的元素
通配符	*	选择所有元素

2.2 组合选择器

选择器	示例	说明
后代选择器	div p	选择div内的所有p元素
子元素选择器	div > p	选择div的直接子元素p
相邻兄弟	h1 + p	选择紧接在h1后的p元素
通用兄弟	h1 ~ p	选择h1后的所有p兄弟元素

2.3 属性选择器

[attribute]          /* 具有该属性 */
[attribute="value"]  /* 属性等于value */
[attribute^="val"]   /* 属性以val开头 */
[attribute$="ue"]    /* 属性以ue结尾 */
[attribute*="alu"]   /* 属性包含alu */

2.4 伪类与伪元素

/* 伪类 */
a:hover {}      /* 鼠标悬停 */
li:nth-child(2) {} /* 第二个li */

/* 伪元素 */
p::first-line {} /* 第一行文本 */
p::before {}    /* 在元素前插入内容 */

---

三、盒模型

3.1 标准盒模型

内容区 → padding → border → margin

3.2 相关属性

.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
    box-sizing: border-box; /* IE盒模型 */
}

---

四、常用属性

4.1 文本样式

p {
    color: #333;
    font-size: 16px;
    font-family: "Microsoft YaHei";
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
}

4.2 背景样式

div {
    background-color: #fff;
    background-image: url("bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

4.3 边框与圆角

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

---

五、布局方式

5.1 Flex布局

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.item {
    flex: 1;
}

5.2 Grid布局

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

5.3 定位

.absolute {
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 10;
}

---

六、响应式设计

6.1 媒体查询

@media (max-width: 768px) {
    .menu { display: none; }
}

6.2 视口单位

.header {
    height: 100vh; /* 视口高度 */
    width: 100vw;  /* 视口宽度 */
    font-size: 5vmin; /* 视口较小尺寸的5% */
}

---

七、动画与过渡

7.1 过渡效果

.button {
    transition: all 0.3s ease-in-out;
}
.button:hover {
    transform: scale(1.1);
}

7.2 关键帧动画

@keyframes slidein {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.slide {
    animation: slidein 1s forwards;
}

---

八、CSS变量

:root {
    --primary-color: #4285f4;
    --spacing: 16px;
}

.element {
    color: var(--primary-color);
    padding: var(--spacing);
}

---

九、最佳实践

1. 使用语义化类名（BEM规范）
2. 避免使用!important
3. 合理使用继承属性
4. 样式模块化组织
5. 使用CSS预处理器（Sass/Less）
6. 添加浏览器前缀（autoprefixer）
7. 移动端优先设计
8. 性能优化（减少重绘回流）
9. 使用CSS Reset/Normalize
10. 保持代码可维护性

---

十、现代CSS特性

10.1 CSS3新特性

/* 多列布局 */
.columns {
    column-count: 3;
    column-gap: 20px;
}

/* 滤镜效果 */
.image {
    filter: blur(5px) grayscale(50%);
}

/* 混合模式 */
.overlay {
    mix-blend-mode: multiply;
}

注：CSS是网页样式描述语言，与HTML和JavaScript共同构成网页开发三大核心技术。

---