☰

企业官网建设流程全解析

首页 / 建站日记 / 企业官网建设流程全解析
CSS 核心基础：样式表与选择器入门
2026/5/5 20:26:33 网站建设 项目流程

CSS 是什么

层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结 构分离.

CSS 就是 "东方四大邪术" 之化妆术.

基本语法规范

<style> p { /* 设置字体颜色 */ color: red; /* 设置字体大小 */ font-size: 30px; } </style> <p>hello</p>

选择器 + {一条/N条声明} 选择器决定针对谁修改 (找谁) 声明决定修改啥. (干啥) 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值

CSS 样式表的三种引入方式

CSS 样式表主要分为内部样式表、行内样式表和外部样式表三种引入方式，各自有不同的特点和适用场景。

一、内部样式表
  1. 定义：将样式写在<style>标签中，嵌入到 HTML 文档内部。
  2. 位置：理论上<style>可以放在 HTML 的任意位置，但通常放在<head>标签中（便于集中管理样式）。
  3. 优点：样式与页面结构实现了初步分离，比行内样式更易维护。
  4. 缺点：样式与 HTML 仍在同一文件中，分离不够彻底；当 CSS 内容较多时，会导致 HTML 文件臃肿。
  5. 适用场景：小体量页面、快速原型开发，搜狗搜索等部分网站仍保留这种写法。
  6. 代码示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>内部样式表示例</title> <!-- 内部样式表：style 标签放在 head 中 --> <style> div { font-size: 16px; color: blue; } </style> </head> <body> <div>这是内部样式表的效果</div> </body> </html>
二、行内样式表
  1. 定义：通过标签的style属性，为单个标签指定样式。
  2. 特点：
    • 只适用于编写简单样式，仅对当前标签生效。
    • 优先级较高，会覆盖内部样式表和外部样式表的同名样式。
  3. 缺点：无法编写复杂样式，样式与结构完全耦合，不利于维护（违背 “样式与结构分离” 的原则）。
  4. 代码示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>行内样式表示例</title> <style> /* 内部样式表设置为红色，但会被行内样式覆盖 */ div { color: red; } </style> </head> <body> <!-- 行内样式：color: green 覆盖了内部样式的 red --> <div style="color: green; font-size: 18px;">想要生活过的去，头上总得带点绿</div> </body> </html>
三、外部样式表（实际开发最常用）
  1. 定义：将样式单独写在.css后缀的外部样式文件中，再通过<link>标签引入到 HTML 文档中。
  2. 步骤：① 创建 CSS 文件（如style.css）；② 在 HTML 的<head>标签中使用<link>标签引入该 CSS 文件。
  3. 代码示例：
    • 第一步：创建style.css文件
    /* style.css 外部样式文件 */ div { color: purple; font-size: 20px; }
    • 第二步：创建demo.html文件，引入 CSS
    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外部样式表示例</title> <!-- 引入外部样式表：link 标签必须写，否则样式不生效 --> <link rel="stylesheet" href="style.css"> </head> <body> <div>上帝为你关上一扇门，然后就去睡觉了</div> </body> </html>
  4. 优点：样式与 HTML 结构彻底分离，便于多人协作开发和后期维护；同一个 CSS 文件可被多个 HTML 页面复用，减少代码冗余。
  5. 缺点：受浏览器缓存影响，修改 CSS 文件后，页面可能不会立刻生效。
  6. 解决缓存问题：
    • 浏览器中按Ctrl + F5强制刷新页面，强制重新加载 CSS 文件；
    • 给 CSS 文件添加版本号（如style.css?v=1.0），修改时更新版本号。

一、CSS 代码风格规范

  1. 样式格式

    • 紧凑风格：样式属性写在同一行（如p { color: red; font-size: 30px; }）
    • 展开风格（推荐）：每个属性单独换行，结构更清晰（如：

      css

      p { color: red; font-size: 30px; }

    ）

  2. 样式大小写CSS 本身不区分大小写，但开发中统一使用小写字母，保证代码一致性。

  3. 空格规范

    • 冒号（:）后需加空格（如color: red）
    • 选择器与左大括号（{）之间需加空格（如p {）

二、CSS 选择器

1. 选择器的功能

用于选中页面中的指定元素，是设置元素样式的前提（类似游戏中 “先选中单位，再指挥行动”）。

2. 选择器的种类（CSS2 标准）

分为基础选择器和复合选择器两类：

类别具体类型
基础选择器标签选择器、类选择器、id 选择器、通配符选择器
复合选择器后代选择器、子选择器、并集选择器、伪类选择器

注：CSS3 对选择器做了补充，需结合后续内容学习。

补充说明

CSS 选择器是控制页面样式的核心工具，不同选择器的优先级、适用场景不同：

  • 基础选择器用于选中单一类型的元素（如标签选择器选中所有同标签元素）；
  • 复合选择器用于更精准的元素选择（如后代选择器选中某元素内的子元素）。

三、基础选择器详解

1. 标签选择器
  • 定义：用 HTML 标签名作为选择器，选中所有该标签的元素。
  • 语法：标签名 { 样式属性; }
  • 示例：p { color: green; }（选中所有<p>标签设置文字绿色）
  • 特点：能快速为同类型标签统一设置样式，但无法差异化选择标签。
2. 类选择器
  • 定义：用类名选中元素，实现差异化样式设置。
  • 语法：
    • 定义：.类名 { 样式属性; }
    • 调用：<标签 class="类名">
  • 示例：
    .red { color: red; }
    <div class="red">红色文字</div>
  • 特点：
    • 一个类选择器可被多个标签调用
    • 一个标签可调用多个类名（类名之间用空格分隔），例如：<div class="red big">...</div>
    • 类名命名规范：不能以纯数字、中文命名，建议使用英文 + 数字，见名知意
3. id 选择器
  • 定义：用 id 属性值选中唯一的元素。
  • 语法：
    • 定义：#id名 { 样式属性; }
    • 调用：<标签 id="id名">
  • 示例：
    #nav { font-size: 16px; }
    <div id="nav">导航栏</div>
  • 特点：id 在 HTML 页面中是唯一的，一个 id 选择器只能被一个标签调用，不能复用。
4. 通配符选择器
  • 定义：用*表示，选中页面中所有的 HTML 元素。
  • 语法：* { 样式属性; }
  • 示例：
    * { margin: 0; /* 清除所有元素的外边距 */ padding: 0; /* 清除所有元素的内边距 */ }
  • 特点：无需调用，自动选中所有元素；常用于清除页面默认样式，特殊场景使用（因会增加浏览器渲染负担，不建议随意使用）。
基础选择器总结
选择器类型语法作用特点
标签选择器标签名 {...}选中所有同标签元素统一设置样式，无法差异化
类选择器. 类名 {...}选中一个 / 多个标签可复用，支持多类名
id 选择器#id 名 {...}选中单个标签唯一，不可复用
通配符选择器* { ... }选中所有标签自动选中，用于清除默认样式

四、复合选择器详解

1. 后代选择器（包含选择器）
  • 作用：选中父元素内的所有后代元素（包括子元素、孙元素等所有层级）。
  • 语法：元素1 元素2 { 样式属性; }（元素 1 和元素 2 之间用空格分隔）
  • 示例：
    ul li { color: blue; } /* 选中ul内所有li元素 */ .nav a { font-size: 14px; } /* 选中类为nav的元素内所有a元素 */
  • 注意：元素 1 是祖先元素，元素 2 是后代元素，可嵌套多层（如div ul li a）。
2. 子选择器（子元素选择器）
  • 作用：仅选中父元素的直接子元素（不包含孙元素等深层级元素）。
  • 语法：元素1>元素2 { 样式属性; }（元素 1 和元素 2 之间用 >` 分隔）
  • 示例：
    div>p { color: red; } /* 仅选中div的直接子元素p，不包含div内li中的p */ .box>a { text-decoration: none; } /* 仅选中类为box的元素的直接子元素a */
3. 并集选择器（群组选择器）
  • 作用：同时选中多个元素，为其设置相同的样式，减少代码冗余。
  • 语法：元素1, 元素2, 元素3 { 样式属性; }（元素之间用逗号分隔）
  • 示例：
    div, p, .red { color: green; font-size: 16px; } /* 同时选中所有div、p标签和类为red的元素 */ h1, .nav>li { font-weight: normal; } /* 选中h1标签和类为nav的元素的直接子元素li */
  • 书写规范：多个元素可换行书写，例如：
    div, p, .red { color: green; }
4. 伪类选择器
  • 作用：选中元素的特定状态（如链接的未访问 / 已访问状态、鼠标悬浮状态等）。
  • 特点：以冒号（:）结尾，用于表示元素的特殊状态。
  • 常见类型：
    （1）链接伪类选择器
    用于设置<a>标签的不同状态，需按LVHA顺序书写（否则样式可能失效）：
    • a:link：选中未被访问过的链接
    • a:visited：选中已被访问过的链接
    • a:hover：选中鼠标悬浮在上面的链接
    • a:active：选中鼠标点击并按住时的链接
    • 示例：
      a:link { color: #333; text-decoration: none; } /* 未访问链接：灰色，无下划线 */ a:visited { color: #666; } /* 已访问链接：深灰色 */ a:hover { color: red; text-decoration: underline; } /* 鼠标悬浮：红色，有下划线 */ a:active { color: green; } /* 点击时：绿色 */
    • 实际开发简化写法：通常只设置a（默认状态）和a:hover（悬浮状态），例如：
      a { color: #333; text-decoration: none; } a:hover { color: red; text-decoration: underline; }
    （2）焦点伪类选择器

    用于选中获取焦点的表单元素（如输入框input）。

    • 语法：input:focus { 样式属性; }
    • 示例：
      input:focus { outline: none; /* 清除默认焦点轮廓 */ border: 1px solid red; /* 焦点时边框变红 */ background-color: #f5f5f5; /* 焦点时背景色变浅 */ }
复合选择器总结
选择器类型语法作用关键符号
后代选择器元素 1 元素 2 {...}选中元素 1 内所有元素 2空格
子选择器元素 1 > 元素 2 {...}选中元素 1 的直接子元素 2>（大于号）
并集选择器元素 1, 元素 2 {...}选中元素 1 和元素 2,（逗号）
伪类选择器元素：伪类 {...}选中元素的特定状态:（冒号）（如 link、hover、focus）

CSS 属性有很多, 可以参考文档https://www.w3school.com.cn/cssref/index.asp 不需要全都背下来, 而是在使用中学习.

标签： 网站建设 企业官网 项目流程 UI设计 前端开发

热门文章

文章分类

标签云

网站建设 响应式设计 用户体验 SEO优化 前端开发 小程序 电商平台 性能优化

相关文章

您可能感兴趣的其他内容

需要专业的网站建设服务？

联系我们获取免费的网站建设咨询和方案报价，让我们帮助您实现业务目标

立即咨询