Skip to content

CSS 简介

什么是 CSS?

CSS 的全称是 Cascading Style Sheets,中文译为「层叠样式表」。它是一种用来描述网页外观和版式的样式语言。

可以这样理解:

  • HTML 负责网页的「内容」和「结构」(标题、段落、图片、链接等)。
  • CSS 负责网页的「样子」:颜色、字体、间距、布局等。

没有 CSS 的网页只能显示浏览器默认的样式,往往不好看;加上 CSS 后,就可以做出美观、统一的界面。

为什么需要 CSS?

  1. 分离结构与样式:把「写什么」和「长什么样」分开,代码更清晰,维护更方便。
  2. 一次定义,多处使用:同一套样式可以应用到很多页面或很多元素上。
  3. 精确控制:可以控制颜色、字体、边距、布局等几乎所有视觉细节。
  4. 适配不同设备:通过媒体查询等,让同一套 HTML 在不同屏幕上有不同表现(响应式设计)。

CSS 能做什么?

  • 设置文字的颜色、大小、字体、行距等。
  • 设置背景颜色或背景图片。
  • 设置边框外边距内边距
  • 控制布局:元素如何排列、是否换行、是否浮动等。
  • 添加动画过渡效果。
  • 针对不同设备(手机、平板、电脑)设置不同样式。

一个简单例子

下面是一段 HTML,以及用 CSS 给它加样式的例子。

HTML:

html
<p>这是一段普通文字。</p>

CSS:

css
p {
  color: blue;
  font-size: 18px;
}

效果是:这段文字会变成蓝色,字号为 18 像素。

小结

  • CSS 是「层叠样式表」,用来控制网页的外观和版式
  • 与 HTML 配合使用:HTML 管结构,CSS 管样式。
  • 掌握 CSS 是学习前端和做网页美化的基础。

接下来我们会从「CSS 编辑器」和「如何创建、书写 CSS」开始,一步步带你入门。