前端之CSS

发布于：2025-07-19 ⋅ 阅读:(19) ⋅ 点赞:(0)

前端三大件核心概念 (HTML, CSS, JavaScript)

  • HTML (HyperText Markup Language)：定义页面框架结构与内容语义
  • CSS (Cascading Style Sheets)：负责样式修饰与视觉呈现
  • JavaScript：实现行为交互、动态效果与逻辑处理

CSS：层叠样式表 (Cascading Style Sheet)

一、引入方式

  1. 行内样式 (Inline Styles)

    • 语法：在 HTML 标签内使用 style 属性
    • 示例：<p style="color: red; font-size: 16px;">文本</p>
    • 特点：仅作用于当前标签；样式之间无顺序要求
    • 缺点：难以维护，代码冗余，不利于复用

  2. 页内样式 (Internal Styles / Embedded Styles)

    • 语法：在 HTML 文件 <head> 中使用 <style> 标签定义 CSS 规则
    • 示例：
      <head>
    <style>
        p {
            color: blue;
            text-align: center;
        }
    </style>
</head>
    • 特点：作用于当前页面所有匹配元素
    • 缺点：无法跨页面复用

  3. 外部样式表 (External Stylesheet)

    • 语法：使用 <link> 标签引入独立的 .css 文件
    • 示例：<link rel="stylesheet" href="styles.css">
    • 特点：最佳实践！实现样式与结构分离，高度可维护和复用
引入方式 作用范围 维护性 复用性 推荐度
行内样式 单个标签 差 无 ⭐
页内样式 当前页面 中 页面内 ⭐⭐
外部样式表 所有引入页面 高 高 ⭐⭐⭐

二、选择器 (Selectors)

用于指定 CSS 规则应用的目标元素

基础选择器
  1. 元素选择器 (Tag Selector)：p { ... } (选择所有 <p> 标签)
  2. ID 选择器 (ID Selector)：#header { ... } (选择 id="header" 的元素)
  3. 类选择器 (Class Selector)：.highlight { ... } (选择 class="highlight" 的元素) - 最常用
  4. 通配符选择器 (Universal Selector)：* { ... } (选择所有元素) - 慎用
复合选择器
  1. 子代选择器 (Child Selector)：ul > li { ... } (仅选择 ul 的直接子元素 li)
  2. 后代选择器 (Descendant Selector)：div p { ... } (选择 div 内部所有层级的 p)
  3. 相邻兄弟选择器 (Adjacent Sibling Selector)：h1 + p { ... } (选择紧跟在 h1 后的第一个 p)
  4. 通用兄弟选择器 (General Sibling Selector)：h1 ~ p { ... } (选择 h1 后面所有的 p)
  5. 交集选择器 (Compound Selector)：p.special { ... } (选择同时具有 p 标签和 .special 类的元素)
  6. 并集选择器 (Grouping Selector)：h1, h2, .title { ... } (同时选择 h1, h2 和 .title)
伪类选择器 (Pseudo-classes)
  • 基于元素状态或位置
  1. 链接伪类：
    • :link - 未访问链接
    • :visited - 已访问链接
    • :hover - 鼠标悬停 (适用于所有元素)
    • :active - 激活状态 (如点击瞬间)
    • 顺序口诀：:link -> :visited -> :hover -> :active (LoVe HAte)
  2. 子元素伪类：
    • :first-child - 父元素的首个子元素
    • :last-child - 父元素的最后一个子元素
    • :nth-child(n) - 父元素的第 n 个子元素 (n 可填数字、even, odd, 公式如 2n+1)
伪元素选择器 (Pseudo-elements)
  • 创建虚拟元素用于修饰
    • ::before - 在元素内容前插入
    • ::after - 在元素内容后插入

    注意：规范要求使用双冒号 :: (单冒号 : 在 CSS3 前兼容)

三、常用样式属性

属性 (Property) 作用 (Purpose) 常用值 (Common Values)
color 文本（前景）颜色 red, #ff0000, rgb(255, 0, 0)
font-weight 字体粗细 normal, bold, lighter, bolder, 100-900
font-size 字体大小 12px, 1em, 1.5rem, 100%
background-color 背景颜色 同 color
width / height 内容区域宽度/高度 200px, 50%, auto
font-family 字体族 'Arial', 'Microsoft YaHei', sans-serif
text-decoration 文本装饰 none, underline, line-through
text-align 文本水平对齐 left, center, right, justify
border-radius 边框圆角 5px, 50%
list-style 列表项标记样式 none, disc, circle, decimal
border 边框（简写） 1px solid #ccc
单位与颜色表示法
  • 长度单位 (Length Units)：
    • px (像素)：最常用基础单位
      • 物理像素 (Physical Pixel)：设备屏幕的实际发光点 (如 2560x1440)
      • 逻辑像素 / CSS 像素 (Logical Pixel / CSS Pixel)：CSS 中使用的抽象单位 (如 800x600)
  • 颜色表示法 (Color Representations)：
    1. 颜色关键词：red, blue, transparent
    2. RGB 函数：rgb(255, 0, 0) (红绿蓝分量，各值 0-255)
    3. 十六进制：#ff0000 (Red: ff/255, Green: 00/0, Blue: 00/0)
    4. 简写十六进制：当每两位相同时可简写为一位，如 #f00 等价于 #ff0000

核心概念：盒模型 (Box Model)

CSS 将每个元素视为一个矩形盒子 (Box)

  • 组成部分：

    • 内容区 (Content)：元素的实际内容（宽/高 width/height）
    • 内边距 (Padding)：内容区与边框之间的透明区域 (padding-top, padding-right, padding-bottom, padding-left)
    • 边框 (Border)：围绕内边距和内容的线条 (border-width, border-style, border-color)
    • 外边距 (Margin)：盒子与其他盒子之间的透明区域 (margin-top, margin-right, margin-bottom, margin-left)

  • 尺寸计算：

    • 总宽度 = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right
    • 总高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom

  • 简写属性：

    /* 4值: 上 右 下 左 */
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;

/* 3值: 上 左右 下 */
margin: 10px 20px 30px;

/* 2值: 上下 左右 */
margin: 10px 20px;

/* 1值: 上下左右 */
margin: 10px;

文档流 (Normal Flow) 与布局控制

文档流默认规则

  1. 块级元素 (Block Elements)：从上到下垂直排列，独占一行 (如 <div>, <p>, <h1>-<h6>)。可设置宽高。
  2. 行内元素 (Inline Elements)：从左到右水平排列，不独占一行 (如 <span>, <a>, <strong>)。宽高由内容决定，设置宽高无效。

浮动 (Float)

  • 作用：使元素脱离标准流，向左或向右移动，直到碰到包含框或另一个浮动元素。常用于实现文字环绕或早期布局。
  • 值：float: left; / float: right; / float: none;

清除浮动 (Clear)

解决父元素高度塌陷（因浮动元素脱离文档流导致父元素高度计算为0）问题

  • 原则：
    1. 必须作用于块级元素 (block 或 inline-block)。
    2. 必须位于所有浮动元素之后。
    3. 必须是浮动元素的兄弟元素。
  • 值：clear: left; / clear: right; / clear: both; (最常用)
  • 常用方法：在浮动元素末尾添加一个空元素并设置 clear: both;，或使用伪元素 ::after 清除。

显示模式 (Display)

  • 作用：控制元素的显示类型及其子元素的布局方式。
  • 常用值：
    • display: block; - 块级元素
    • display: inline; - 行内元素
    • display: inline-block; - 行内块元素 (具有行内元素的排列特性，同时可设置宽高)
    • display: none; - 隐藏元素，不占据空间
    • display: flex; - 弹性盒子布局 (现代布局核心)
    • display: grid; - 网格布局 (现代布局核心)

定位 (Positioning)

精确控制元素在页面中的位置，打破文档流规则

  • 属性：position
  • 常用值：
    1. static (默认)：静态定位，元素遵循标准流。
    2. relative：相对定位。
      • 参照物：元素在标准流中的原始位置。
      • 使用 top, right, bottom, left 进行偏移。
      • 占据原始空间（偏移后原位置保留空白）。
    3. absolute：绝对定位。
      • 参照物：最近的非 static 定位祖先元素。若无，则相对于初始包含块 (通常是 <html> 或 <body>）。
      • 完全脱离文档流，不占据空间。
      • 使用 top, right, bottom, left 进行定位。
    4. fixed：固定定位。
      • 参照物：浏览器视口 (Viewport)。
      • 完全脱离文档流，不随页面滚动而移动。
      • 使用 top, right, bottom, left 进行定位。
    5. sticky (补充)：粘性定位。
      • 特性：在特定阈值内表现为 relative，超出后变为 fixed。
      • 参照物：最近的滚动祖先或视口。
      • 需配合 top, right, bottom, left 设置阈值。

CSS 布局 (Layout)

HTML 页面设计与实现的过程，本质就是布局的过程

  • 核心目标：在页面上合理、灵活地排列和组织元素。
  • 经典布局模式：
    • 圣杯布局 (Holy Grail Layout)：
      • 三栏布局（左右固定宽度，中间自适应）。
      • 中间内容在 HTML 结构中优先出现 (利于 SEO)。
      • 实现技术：浮动 + 负外边距 + 相对定位。
    • 等分布局 (Equal Column Layout)：
      • 多列宽度相等且自适应容器宽度。
      • 实现技术：浮动、Flexbox (flex: 1;)、Grid (grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));) 均可实现。
  • 现代布局技术：
    • Flexbox (弹性盒子)：适合一维布局（行或列）。
    • Grid (网格)：适合二维布局（行列同时控制）。
    • Responsive Design (响应式设计)：使用媒体查询 (@media)、Flexbox、Grid 等技术使页面适应不同屏幕尺寸。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布