CSS 基础
Web开发
|
本文最后更新于 100 天前，其中的信息可能已经有所发展或是发生改变。

CSS（Cascading Style Sheets，层叠样式表）是一种样式表语言，用于控制 Web 页面上的 HTML 元素的外观。CSS 的作用是与 HTML 分离，使得开发者可以单独处理页面的布局和样式，而不需要每次修改 HTML 结构。

为什么要使用 CSS？

  • 提高网页可维护性：将样式与内容分开，使得修改样式时不需要更改 HTML 代码。
  • 实现页面一致性：同一套 CSS 样式可以应用到多个 HTML 页面，保持整个网站的一致性。
  • 增强用户体验：通过精心设计样式，使得网页更加美观、用户友好。

CSS 语法基础

CSS 的基本结构由选择器（selector）和声明（declaration）组成。

CSS 语法格式：

selector {
  property: value;
  property2: value2;
}
  • selector（选择器）：用于选择 HTML 元素
  • property（属性）：定义我们想要设置的样式类型
  • value（值）：设置属性的具体值

例如，以下是一个简单的 CSS 示例：

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

这个例子表示，所有 <p> 元素的文字颜色将变为红色，字体大小为 16 像素。

常见的选择器

  1. 元素选择器：选择特定 HTML 元素，如 p、h1、div 等。css复制代码p { color: blue; }
  2. 类选择器：选择具有指定类名的元素，前面加点（.）。css复制代码.button { background-color: green; }
  3. ID 选择器：选择具有特定 ID 的元素，前面加井号（#）。css复制代码#header { background-color: lightgray; }

常见 CSS 属性

CSS 有成百上千种属性，这里列出一些常见的属性，它们帮助我们快速修改网页的外观。

颜色与背景

  • color: 设置文字颜色
  • background-color: 设置背景颜色
  • background-image: 设置背景图片
h1 {
  color: darkblue;
  background-color: lightyellow;
}

字体样式

  • font-family: 设置字体类型
  • font-size: 设置字体大小
  • font-weight: 设置字体粗细
p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
}

布局与位置

  • margin: 设置元素外边距
  • padding: 设置元素内边距
  • width 和 height: 设置元素的宽度和高度
  • display: 设置元素的显示方式（例如：block、inline、flex）
div {
  margin: 20px;
  padding: 10px;
  width: 300px;
}

文本与对齐

  • text-align: 设置文本的对齐方式（left, center, right）
  • line-height: 设置行高
  • text-decoration: 设置文本装饰（如：underline）
h2 {
  text-align: center;
  text-decoration: underline;
}

CSS 布局模型

了解如何使用 CSS 布局控制网页元素的位置和排列方式是 Web 开发中最重要的技能之一。常见的布局方式包括 盒子模型 和 Flexbox 布局。

盒子模型（Box Model）

每个网页元素都可以看作是一个盒子，CSS 的盒子模型描述了元素的外边距（margin）、边框（border）、内边距（padding）以及内容（content）的关系。通过调整这些属性，我们可以控制元素的大小和位置。

div {
  margin: 10px;
  padding: 20px;
  border: 1px solid black;
  width: 200px;
  height: 100px;
}

Flexbox 布局

Flexbox 是一种用于布局的 CSS 模型，它使得元素能够在容器内按照不同方向排列并控制对齐方式。Flexbox 让网页布局更加灵活。

基本使用方法：

.container {
  display: flex;
  justify-content: center; /* 主轴对齐方式 */
  align-items: center; /* 交叉轴对齐方式 */
}

响应式设计

随着移动设备的普及，响应式设计成为现代 Web 开发中的关键。响应式设计允许网页根据不同设备的屏幕大小自适应调整布局和样式。

使用媒体查询（Media Queries）

媒体查询可以帮助我们根据屏幕尺寸或设备特性应用不同的样式。以下是一个基本的媒体查询示例，它会在屏幕宽度小于 768 像素时，修改字体大小：

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

CSS 实用技巧

使用颜色的 HEX 和 RGB 表示法

CSS 允许我们使用多种方式来表示颜色，常见的有：

  • HEX 颜色：#FF5733（红色）
  • RGB 颜色：rgb(255, 87, 51)（红色）

使用 Google Fonts 引入字体

Google Fonts 提供了大量免费的 Web 字体，我们可以在项目中使用这些字体：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
body {
  font-family: 'Roboto', sans-serif;
}
css
上一篇
下一篇