HTML CSS

CSS（Cascading Style Sheets，层叠样式表）负责网页的"长相"：颜色、字体、大小、间距、布局都由它控制。HTML 管内容与结构，CSS 管表现与样式，二者配合才能做出美观的页面。这一节讲 CSS 的引入方式与基础语法，让你立刻能给 HTML"上妆"。

CSS 是什么

HTML 负责告诉浏览器"有什么内容"，CSS 则告诉浏览器"这些内容长什么样"。比如同样是段落，CSS 可以把它变成红色、加大字号、居中排列。CSS 还能一次定义、多处复用，让整站风格统一，改一处样式全站生效。

三种引入方式

  1. 行内样式：直接写在元素的 style 属性里，只影响当前元素。
  2. 内嵌样式：写在 <head> 的 <style> 标签中，影响当前整个页面。
  3. 外部样式：把 CSS 存成独立 .css 文件，用 <link> 引入，最推荐——多页面共享、便于维护。
<p style="color: red;">行内样式：这段文字是红色</p>

<head>
  <style>
    p { color: blue; }
  </style>
</head>

<head>
  <link rel="stylesheet" href="style.css">
</head>

CSS 基本语法

CSS 规则由选择器、属性和属性值组成：选择器指明"给谁设置"，大括号里是"设置什么"：

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

上面的规则表示：页面中所有 <p> 段落文字变成红色、字号 20 像素。每条声明以分号结尾，属性与值之间用冒号隔开。

常用 CSS 属性

下面是一组高频属性，颜色用 color，背景用 background-color，字体大小用 font-size，文字对齐用 text-align：

<p style="color: #00ff00; font-size: 24px; text-align: center;">
  绿色、居中、24像素的文字
</p>

在浏览器中显示为：一行居中的绿色文字，字号明显比默认段落大。

选择器的基本类型

  • 标签选择器：直接写标签名，如 p、h1，作用于所有该标签。
  • class 选择器：以点开头，如 .note，作用于所有 class="note" 的元素，可复用。
  • id 选择器：以井号开头，如 #title，作用于唯一 id 的元素，一页只能用一次。
.note { color: orange; }     /* class 选择器 */
#title { font-size: 30px; }  /* id 选择器 */

常见坑提醒

  • 行内样式的优先级最高，会覆盖内嵌和外部样式，调试时先想想"样式是不是被行内写法盖住了"。
  • 属性值别漏单位：font-size: 20 没写 px 会被忽略。
  • id 别滥用：它能复用 class 解决的问题，就不要用 id，保持页面简洁、样式可控。

小结

CSS 用"选择器 + 属性: 值"的规则控制页面外观，推荐使用外部样式表统一管理。HTML 搭骨架、CSS 穿衣裳，记住这句口诀，你就能做出既清晰又漂亮的页面。

笔记加载中…

标签：#HTML

返回知识库