CSS基础

^小桃冰茶

于 2025-04-30 14:38:26 发布

阅读量776

点赞数 30

文章标签： css 前端

本文链接：https://blog.csdn.net/2403_89524622/article/details/147578476

版权

在网页开发的世界里，HTML 负责搭建网页的骨架，而 CSS 则赋予网页绚丽的外观和独特的风格。无论是简洁大气的企业官网，还是交互丰富的电商页面，CSS 都发挥着不可或缺的作用。接下来，我们将深入探讨 CSS 的核心知识，包括 CSS 概述、CSS 的结构和规则、颜色、背景、字体、文本以及 CSS 盒子模型，通过案例分析、图表展示和题目示范，帮助你全面掌握这些重要内容。

一、CSS 概述

1.1 概念

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML 或 XML（包括 SVG、MathML、XHTML 等）文档样式的语言。它通过定义元素的布局、颜色、字体、大小等样式属性，实现网页的美化和排版，使网页内容呈现出多样化的视觉效果。

1.2 作用

分离内容与表现：将网页的内容（HTML）和样式（CSS）分离，使得代码结构更加清晰，便于维护和修改。例如，修改网站的整体配色，只需在 CSS 文件中统一修改相关样式，而无需在每个 HTML 文件中逐一更改。

实现网页个性化：能够为不同的网页元素设置独特的样式，打造出具有独特风格和视觉吸引力的网页，满足不同用户和项目的需求。

响应式设计：通过 CSS 媒体查询等技术，使网页在不同设备（如手机、平板、电脑）上都能呈现出良好的显示效果，提升用户体验。

1.3 CSS 的引入方式

内联样式：直接在 HTML 元素的 style 属性中编写 CSS 代码，只对当前元素生效。例如：

<!DOCTYPE html>
<html>

<body>
  <p style="color: red; font-size: 16px;">这是一段红色、16像素字体大小的文字。</p>
</body>

</html>

内部样式表：在 HTML 文件的 <head> 标签内，使用 <style> 标签定义 CSS 样式，对当前 HTML 文件中的所有相关元素生效。示例：

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>

<body>
  <p>这是一段蓝色、18像素字体大小的文字。</p>
  <p>这是另一段同样样式的文字。</p>
</body>

</html>

外部样式表：创建独立的 .css 文件，在 HTML 文件中通过 <link> 标签引入，实现样式的复用，适用于多个页面的样式统一管理。

<!-- index.html -->
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <p>这是应用外部样式表的文字。</p>
</body>

</html>

/* styles.css */
p {
  color: green;
  font-size: 20px;
}

1.4 重点注意

内联样式优先级最高，但会导致代码耦合度高，不便于维护，应尽量少用。

外部样式表可以提高代码复用性，建议在大型项目中优先使用。

二、CSS 的结构和规则

2.1 结构

CSS 由一系列规则组成，每条规则由选择器和声明块组成。选择器用于指定要应用样式的 HTML 元素，声明块包含一个或多个属性 - 值对，用于定义元素的具体样式。

/* 选择器 {
  属性: 值;
  属性: 值;
} */
h1 {
  color: orange;
  text-align: center;
}

在上述代码中，h1 是选择器，选中所有的 <h1> 元素；{ color: orange; text-align: center; } 是声明块，其中 color 和 text-align 是属性，orange 和 center 是对应的值。

2.2 选择器类型

标签选择器：根据 HTML 标签名称选择元素，会选中页面中所有该标签的元素。例如：

body {
  background-color: lightgray;
}

类选择器：通过给 HTML 元素添加 class 属性，使用 .类名选择器来选中具有特定类名的元素。一个元素可以有多个类，不同元素也可以使用相同的类名。

<!DOCTYPE html>
<html>

<head>
  <style>
   .highlight {
      color: purple;
    }
  </style>
</head>

<body>
  <p class="highlight">这段文字是紫色的。</p>
  <span class="highlight">这个 span 元素的文字也是紫色的。</span>
</body>

</html>

ID 选择器：每个 HTML 元素的 id 属性值在页面中必须是唯一的，使用 #id名选择器选中特定的元素。

<!DOCTYPE html>
<html>

<head>
  <style>
    #main-heading {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <h1 id="main-heading">这是一个标题，字体大小为 24px。</h1>
</body>

</html>

属性选择器：根据元素的属性及属性值来选择元素。例如，选择所有带有 title 属性的 a 元素：

a[title] {
  text-decoration: underline;
}

组合选择器：包括后代选择器（用空格分隔，如 div p 表示选择 div 元素内部的所有 p 元素）、子选择器（用 > 分隔，如 div > p 表示选择 div 元素的直接子元素 p）等。

2.3 优先级

当多个 CSS 规则作用于同一个元素时，会根据选择器的特殊性来确定优先级。一般来说，优先级从高到低为：内联样式 > ID 选择器 > 类选择器、属性选择器、伪类选择器 > 标签选择器。如果优先级相同，则遵循 “就近原则”，后定义的样式会覆盖先定义的样式。

2.4 重点注意

编写 CSS 规则时，要注意选择器的准确性和特异性，避免样式冲突和意外覆盖。

合理使用组合选择器，可以更精确地选择目标元素，减少不必要的样式重复。

三、颜色、背景、字体、文本

3.1 颜色

表示方法：

p {
  color: red;
}

h2 {
  color: #0000FF;
}

div {
  color: rgb(0, 128, 0);
}

span {
  color: rgba(0, 0, 255, 0.3);
}

预定义颜色名称：如 red（红色）、blue（蓝色）、green（绿色）等。

十六进制值：以 # 开头，后跟 6 位十六进制数表示颜色，如 #FF0000 表示红色，#00FF00 表示绿色。

RGB 值：通过 rgb(红, 绿, 蓝) 函数表示，每个参数取值范围是 0 - 255。例如 rgb(255, 0, 0) 表示红色。

RGBA 值：在 RGB 的基础上增加透明度参数，取值范围是 0 - 1，如 rgba(255, 0, 0, 0.5) 表示半透明的红色。

3.2 背景

背景颜色：使用 background-color 属性设置元素的背景色。

body {
  background-color: #f0f0f0;
}

背景图像：通过 background-image 属性设置背景图片，常用值为 url(图片路径)。

div {
  background-image: url('image.jpg');
  background-repeat: no-repeat; /* 不重复平铺 */
  background-size: cover; /* 背景图像完全覆盖容器 */
  background-position: center; /* 背景图像居中显示 */
}

背景简写属性：background 可以同时设置多个背景相关属性，如 background: #f0f0f0 url('image.jpg') no-repeat center cover;

3.3 字体

字体族：使用 font-family 属性设置字体，多个字体之间用逗号分隔，浏览器会按照顺序查找可用字体。

p {
  font-family: Arial, sans-serif;
}

字体大小：font-size 属性设置字体大小，常用单位有 px（像素）、em（相对单位，相对于父元素字体大小）、rem（相对于根元素 html 的字体大小）。

h3 {
  font-size: 18px;
}

字体样式：font-style 用于设置字体是否为斜体，如 font-style: italic;；font-weight 用于设置字体粗细，常见值有 normal（正常）、bold（加粗）等。

3.4 文本

文本对齐：text-align 属性设置文本在元素内的水平对齐方式，值包括 left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）。

p {
  text-align: center;
}

文本装饰：text-decoration 用于设置文本的装饰线，如 text-decoration: underline;（下划线）、text-decoration: line-through;（删除线）。

文本缩进：text-indent 属性设置文本首行的缩进量，如 text-indent: 2em; 表示首行缩进两个字符宽度。

3.5 重点注意

选择字体时，要考虑不同设备和浏览器的兼容性，优先使用系统默认字体或广泛支持的字体。

设置背景图像时，注意图片的大小和格式，避免因图片过大影响页面加载速度。

四、CSS 盒子模型

4.1 概念

在 CSS 中，每个 HTML 元素都被看作是一个盒子，盒子模型用于描述元素的大小、边距、边框和内边距等属性。盒子模型主要包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。

4.2 组成部分

内容（content）：盒子的核心部分，用于显示元素的文本、图像等实际内容。通过 width 和 height 属性设置内容区域的宽度和高度（默认情况下，元素的宽度和高度仅指内容区域，不包括内边距、边框和外边距）。

div {
  width: 200px;
  height: 150px;
}

内边距（padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。可以分别设置上、右、下、左四个方向的内边距，如 padding-top、padding-right、padding-bottom、padding-left，也可以使用简写属性 padding，例如 padding: 10px 20px 10px 20px;（顺序为上、右、下、左）。

p {
  padding: 10px;
}

边框（border）：围绕在内容和内边距外面的线框，通过 border-width（边框宽度）、border-style（边框样式，如实线 solid、虚线 dashed 等）、border-color（边框颜色）属性设置，也可以使用简写属性 border，如 border: 1px solid black;。

div {
  border: 2px dashed red;
}

外边距（margin）：元素与其他元素之间的空白区域，用于控制元素与周围元素的距离。同样可以分别设置四个方向的外边距，也有简写属性 margin，例如 margin: 15px;。

h1 {
  margin: 20px 0;
}

4.3 box-sizing 属性

默认情况下，元素的 width 和 height 只包括内容区域，内边距和边框会增加元素的实际大小。通过设置 box-sizing 属性为 border-box，可以使元素的 width 和 height 包含内容、内边距和边框，方便进行布局。

div {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 5px solid gray;
  box-sizing: border-box;
}

4.4 重点注意

外边距存在合并现象，当两个垂直方向相邻的元素都设置了外边距时，它们之间的距离会取两者中较大的值，而不是相加，需要特别注意这种情况对布局的影响。

合理使用 box-sizing 属性，可以简化布局计算，提高开发效率。

五、简单案例分析

5.1 案例一：简单的卡片布局

需求：创建一个带有边框、背景颜色、内边距和外边距的卡片，卡片内有标题和段落文字，标题为蓝色，段落文字为黑色，文字居中对齐。

<!DOCTYPE html>
<html>

<head>
  <style>
   .card {
      width: 300px;
      height: 200px;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 20px;
      margin: 20px auto;
      box-sizing: border-box;
    }

   .card h2 {
      color: blue;
      text-align: center;
    }

   .card p {
      color: black;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="card">
    <h2>卡片标题</h2>
    <p>这是卡片内的段落内容。</p>
  </div>
</body>

</html>

在这个案例中，使用类选择器 .card 定义了卡片的整体样式，包括大小、背景颜色、边框、内边距和外边距，并设置 box-sizing: border-box 确保尺寸计算符合预期。同时，分别对卡片内的 h2 和 p 元素设置了颜色和文本对齐方式。

5.2 案例二：带背景图像的导航栏

需求：创建一个导航栏，背景为一张图片，导航项文字为白色，水平排列，鼠标悬停时文字颜色变为黄色。

<!DOCTYPE html>
<html>

<head>
  <style>
    nav {
      background-image: url('nav-bg.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      height: 60px;
    }

    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      font-size: 18px;
    }

    nav ul li a:hover {
      color: yellow;
    }
  </style>
</head>

<body>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</body>

</html>

此案例中，先为 nav 元素设置背景图像及相关属性，然后通过 display: flex 对导航项进行水平布局，使用 :hover 伪类实现鼠标悬停时文字颜色的变化。

六、题目示范

6.1 题目一

问题：将一个段落的文字颜色设置为深绿色，字体大小为 16 像素，首行缩进 2 个字符，背景颜色为浅黄色，并且添加 1 像素实线边框。

答案：

p {
  color: #006400;
}

6.2 题目二

问题：创建一个宽度为 400 像素，高度为 300 像素的盒子，盒子内边距为 15 像素，外边距为 30 像素，边框为 2 像素虚线蓝色，盒子内容区域背景颜色为淡紫色，并且盒子水平居中显示在页面中。

答案：

.box {
  width: 400px;
  height: 300px;
  padding: 15px;
  margin: 30px auto;
  border: 2px dashed #0000ff;
  background-color: #e6e6fa;
  box-sizing: border-box;
}