前端基础：CSS

一、CSS 的魅力初现

同学们，上节课咱们了解了 HTML 是网页的骨架，那今天就来揭开 CSS 的神秘面纱。CSS（层叠样式表）就像是给网页这个 “骨架” 穿上漂亮衣服的魔法师，能让网页变得色彩斑斓、布局精巧。

二、CSS 基础知识 1：选择器的奥秘

基本概念

选择器是 CSS 中的关键部分，它决定了给网页中哪些元素添加样式，就好比我们要给不同房间挑选合适的壁纸，得先确定是客厅、卧室还是书房。

常见选择器及用法

  • 元素选择器 ：直接用 HTML 元素名称作为选择器。例p {color: red;}，这样页面上所有的段落文字（p 标签里的内容）都会变成红色，简单直接。

  • 类选择器 ：给元素加class属性，然后.加上类名来选择。比如先在 HTML 里<div class="highlight">重要信息</div>，再在 CSS 里.highlight {background-color: yellow;}，就能让带highlight这个类的元素背景变成黄色，就像给文字加上荧光标记。

  • ID 选择器 ：元素id属性是独一无二的，#加上 ID 名来选择。<h1 id="title">网页标题</h1>搭#title {text-align: center;}，就能让这个特定的标题居中显示，精准控制某个独特元素的样式。