Nash

CSS 技术学习文档

Nash -

1. CSS 基础概述

CSS (Cascading Style Sheets) 用于定义网页的视觉表现和布局方式。

1.1 CSS 引入方式

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

<!-- 内部样式表 -->
<style>
    div {
        color: red;
    }
</style>

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

2. 选择器

2.1 基础选择器

/* 标签选择器 */
div {
    color: blue;
}

/* 类选择器 */
.container {
    width: 100%;
}

/* ID选择器 */
#header {
    height: 60px;
}

/* 属性选择器 */
input[type="text"] {
    border: 1px solid gray;
}

2.2 组合选择器

/* 后代选择器 */
.container p {
    margin: 10px;
}

/* 子元素选择器 */
.container > p {
    padding: 5px;
}

/* 相邻兄弟选择器 */
h1 + p {
    font-size: 1.2em;
}

/* 通用兄弟选择器 */
h1 ~ p {
    color: gray;
}

2.3 伪类和伪元素

/* 伪类 */
a:hover {
    color: red;
}

.button:active {
    background-color: darkblue;
}

/* 伪元素 */
p::first-line {
    font-weight: bold;
}

.box::before {
    content: "→";
}

3. 盒模型

3.1 标准盒模型

.box {
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 20px;
    border: 1px solid black;
    box-sizing: content-box; /* 标准盒模型 */
}

3.2 IE盒模型

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

4. 布局方式

4.1 Flexbox布局

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

.item {
    flex: 1;
    margin: 5px;
}

4.2 Grid布局

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

.grid-item {
    grid-column: span 2;
}

4.3 定位

/* 相对定位 */
.relative {
    position: relative;
    top: 10px;
    left: 20px;
}

/* 绝对定位 */
.absolute {
    position: absolute;
    top: 0;
    right: 0;
}

/* 固定定位 */
.fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

/* 粘性定位 */
.sticky {
    position: sticky;
    top: 0;
}

5. 样式规则

5.1 文本样式

.text {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    text-decoration: underline;
    color: #333;
}

5.2 背景样式

.background {
    background-color: #f0f0f0;
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

5.3 边框和阴影

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

6. 响应式设计

6.1 媒体查询

/* 移动设备 */
@media screen and (max-width: 768px) {
    .container {
        width: 100%;
        padding: 10px;
    }
}

/* 平板设备 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .container {
        width: 90%;
        margin: auto;
    }
}

/* 桌面设备 */
@media screen and (min-width: 1025px) {
    .container {
        width: 1200px;
        margin: auto;
    }
}

6.2 响应式图片

.responsive-image {
    max-width: 100%;
    height: auto;
}

7. CSS变量和计算

:root {
    --primary-color: #007bff;
    --spacing-unit: 8px;
}

.element {
    color: var(--primary-color);
    padding: calc(var(--spacing-unit) * 2);
}

8. 动画和过渡

/* 过渡 */
.button {
    transition: all 0.3s ease;
}

/* 动画 */
@keyframes slide-in {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.animated {
    animation: slide-in 0.5s ease-out;
}

9. 最佳实践

  1. 使用CSS预处理器（如SASS、LESS）
  2. 遵循BEM命名规范
  3. 避免过度嵌套选择器
  4. 使用简写属性
  5. 保持代码模块化
  6. 注意浏览器兼容性
  7. 优化性能（减少重排重绘）

10. 性能优化

  1. 合并和压缩CSS文件
  2. 使用CSS Sprite减少图片请求
  3. 避免使用@import
  4. 合理使用选择器
  5. 利用缓存机制

这份文档涵盖了CSS的主要特性和使用方法，可以作为开发参考指南。建议在实际项目中不断实践和深入学习各个特性的应用场景。