CSS 美化页面（一）

一、CSS概念

     CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML 或 XML（如 SVG、XHTML）文档 样式 的样式表语言。它控制网页的 外观和布局，包括字体、颜色、间距、背景、动画等视觉效果。

二、CSS 的作用

1. 样式与结构分离

   • HTML 负责网页的 内容结构（如标题、段落、图片）。

   • CSS 负责 视觉表现（如字体大小、颜色、布局）。

   • 两者分离使代码更易维护和修改。

2. 控制网页外观

   • 精确调整元素的 颜色、字体、间距、边框、背景 等。

   • 实现 响应式设计（适配手机、平板、电脑等不同设备）。

3. 布局与动画

   • 通过 Flexbox、Grid 等实现复杂布局。

   • 使用 过渡（Transition）和动画（Animation） 增强交互体验。

三、CSS 的基本工作原理

1. 选择器（Selector）
   指定要样式化的 HTML 元素（如 p、.class、#id）。

2. 属性与值（Property & Value）
   定义具体的样式规则（如 color: red;）。

3. 层叠（Cascading）

   • 当多个样式规则冲突时，按 优先级 决定最终效果。

   • 优先级规则：!important > 内联样式 > ID > 类 > 元素选择器。

 四、CSS 基本语法

选择器 {属性: 值;  /* 声明块 */
}

h1 {color: red;     /* 文字颜色 */font-size: 24px; /* 字号 */
}

 五、CSS 的三种引入方式

方式	示例	适用场景
内联样式	<p style="color: red;">	快速测试，但不推荐大规模使用
内部样式表	<style> p { color: red; } </style>	小型项目或单页
外部样式表	<link href="style.css" rel="stylesheet">	主流方式，便于维护

六、CSS 基础选择器

选择器类型	示例	作用
元素选择器	p	选择所有 <p> 标签
类选择器	.active	选择 class="active" 的元素
ID 选择器	#main	选择 id="main" 的元素
通配选择器	*	选择所有元素
属性选择器	[type="text"]	选择指定属性的元素
分组选择器	h1, h2	同时选择多个元素

补充说明

• 优先级：ID 选择器 > 类选择器 > 元素选择器 > 通配选择器。

• 组合使用：基础选择器可组合成更复杂的选择器（如后代选择器 .box p）。

实际应用：

1. 元素选择器（标签选择器）

 场景：统一设置所有段落文本的样式。

  <p>这是一个普通段落。</p><p>这是另一个段落。</p>

/* 选中所有 <p> 元素 */p {font-size: 36px;line-height: 1.5;color: #bd2222;border: 3px solid #ccc;}

2. 类选择器（Class Selector）

场景：标记需要高亮的按钮和警告文本。

    <button class="btn-primary">提交</button><div class="alert">警告信息！</div>

 /* 选中所有 class="btn-primary" 的元素 */.btn-primary {background: blue;color: white;}/* 选中所有 class="alert" 的元素 */.alert {color: rgb(178, 192, 95);font-weight: bold;background: rgb(48, 35, 35);border: 1px solid rgb(178, 192, 95);width:100px;height:20px;}

 

3. ID 选择器

场景：设置页面顶部导航栏的样式（ID 唯一）。

 <nav id="main-nav"><a href="#">首页</a><a href="#">登录</a><a href="#">注册</a></nav>

 /* 选中 id="main-nav" 的元素 */#main-nav {background: black;padding: 10px;}/* 选中导航栏内的 <a> 标签 */#main-nav a {color: white;text-decoration: none;padding: 5px 10px;}

4. 通配选择器（Universal Selector）

场景：重置默认边距和盒模型。

/* 全局重置 */
* {margin: 0;padding: 0;box-sizing: border-box;
}

  所有元素的外边距和内边距被清零，盒模型更易控制。

 

5. 属性选择器（Attribute Selector）

场景：为所有外部链接添加图标。

  <a href="https://www.baidu.com" target="_blank">外部链接</a><a href="./my.html" name="inner">内部链接</a>

  /* 选中带有 target="_blank" 的 <a> 标签 */a[target="_blank"]::after {content: "↗";margin-left: 5px;}a[name="inner"]::after {content: "↗";margin-left: 5px;}

6. 分组选择器（Grouping Selector）

场景：统一标题字体。

    <h1>标题1</h1><h2>标题2</h2><h3>标题3</h3>

/* 同时选中 h1, h2, h3 */h1,h2,h3 {font-family: "Microsoft YaHei", sans-serif;margin-bottom: 10px;color: blueviolet;}

综合案例：一个简单的卡片组件

  <div class="card" id="featured-card"><h2 class="card-title">特别推荐</h2><p class="card-content">请单击查看详情</p><button type="button" class="btn">了解更多</button></div>

     /* 元素选择器 */p {margin: 5px 0;}/* 类选择器 */.card {width: 150px;height: 180px;/* 为卡片添加边框 */border: 5px solid #ddd;padding: 5px;}.card-title {font-size: 25px;text-align: center;}.card-content {font-size: 20px;text-align: center;color: cadetblue;} .btn {background: orange;color: white;margin-left: 60px;margin-top: 30px;}/* ID 选择器 */#featured-card {border-color: gold;/* 高亮特色卡片 */}