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; /* 提前告知浏览器变化属性 */
}
相关推荐
神膘护体小月半6 分钟前
css 的 clip-path 属性,绘制气泡
css
code_YuJun7 分钟前
管理系统——应用初始化 Loading 动画
前端
oak隔壁找我8 分钟前
JavaScript 模块化演进历程:问题与解决方案。
前端·javascript·架构
代码改变世界1008613 分钟前
像素塔防游戏:像素守卫者
css·游戏·css3·1024程序员节
Elieal21 分钟前
AJAX 知识
前端·ajax·okhttp
sulikey41 分钟前
Qt 入门简洁笔记:从框架概念到开发环境搭建
开发语言·前端·c++·qt·前端框架·visual studio·qt框架
烛阴1 小时前
循环背后的魔法:Lua 迭代器深度解析
前端·lua
元拓数智2 小时前
现代前端状态管理深度剖析:从单一数据源到分布式状态
前端·1024程序员节
mapbar_front2 小时前
Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
天一生水water2 小时前
three.js加载三维GLB文件,查看三维模型
前端·1024程序员节