CSS 基础概念

CSS 基础概念

CSS(层叠样式表)用于控制网页的视觉表现,包括布局、颜色、字体等。通过选择器和属性组合,将样式应用到 HTML 元素。

css 复制代码
/* 示例:修改段落文本颜色和字体 */
p {
  color: blue;
  font-family: Arial;
}

常用选择器

  • 元素选择器 :直接针对 HTML 标签(如 pdiv)。
  • 类选择器 :通过 .classname 定义,可重复使用。
  • ID 选择器 :通过 #idname 定义,具有唯一性。
  • 伪类选择器 :如 :hover:active 定义交互状态。
css 复制代码
.button {
  background-color: #4CAF50;
}
#header {
  font-size: 24px;
}
a:hover {
  text-decoration: underline;
}

盒模型

每个 HTML 元素被视为一个盒子,包含 contentpaddingbordermargin

  • 标准盒模型widthheight 仅指内容区域。
  • 替代盒模型box-sizing: border-box 包含边框和内边距。
css 复制代码
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: border-box; /* 启用替代盒模型 */
}

布局技术

  • Flexbox:一维布局,适合动态排列项目。
  • Grid:二维布局,支持复杂网格结构。
  • 浮动(Float):传统布局方式,现多用于图文环绕。
css 复制代码
/* Flexbox 示例 */
.container {
  display: flex;
  justify-content: space-between;
}

/* Grid 示例 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

响应式设计

使用媒体查询(@media)适配不同设备屏幕尺寸。

css 复制代码
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

动画与过渡

通过 transition@keyframes 实现动态效果。

css 复制代码
/* 过渡效果 */
.button {
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: red;
}

/* 关键帧动画 */
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
.slide-element {
  animation: slide 2s infinite;
}

预处理器(如 Sass)

扩展 CSS 功能,支持变量、嵌套和混合。

scss 复制代码
$primary-color: #333;
.button {
  background-color: $primary-color;
  &:hover {
    opacity: 0.8;
  }
}

性能优化

  • 减少选择器复杂性。
  • 使用 will-change 提示浏览器优化渲染。
  • 压缩 CSS 文件以减少加载时间。
css 复制代码
.element {
  will-change: transform; /* 提前告知浏览器变化属性 */
}
相关推荐
IT_陈寒4 小时前
SpringBoot实战:这5个隐藏技巧让我开发效率提升200%,90%的人都不知道!
前端·人工智能·后端
ObjectX前端实验室4 小时前
【图形编辑器架构】节点树与渲染树的双向绑定原理
前端·计算机图形学·图形学
excel4 小时前
Vue2 与 Vue3 生命周期详解与对比
前端
一只猪皮怪55 小时前
React 18 前端最佳实践技术栈清单(2025版)
前端·react.js·前端框架
Misnice5 小时前
React渲染超大的字符串
前端·javascript·react.js
天天向上的鹿茸5 小时前
用矩阵实现元素绕不定点旋转
前端·线性代数·矩阵
李鸿耀8 小时前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者13 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost14 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_110614 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台