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 基本语法

css 复制代码
选择器 {
  属性: 值;  /* 声明块 */
}
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. 元素选择器(标签选择器)

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

html 复制代码
  <p>这是一个普通段落。</p>
  <p>这是另一个段落。</p>
css 复制代码
        /* 选中所有 <p> 元素 */
        p {
            font-size: 36px;
            line-height: 1.5;
            color: #bd2222;
            border: 3px solid #ccc;
        }

2. 类选择器(Class Selector)

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

html 复制代码
    <button class="btn-primary">提交</button>
    <div class="alert">警告信息!</div>
css 复制代码
 /* 选中所有 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 唯一)。

html 复制代码
 <nav id="main-nav">
        <a href="#">首页</a>
        <a href="#">登录</a>
        <a href="#">注册</a>
    </nav>
css 复制代码
 /* 选中 id="main-nav" 的元素 */
        #main-nav {
            background: black;
            padding: 10px;
        }

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

4. 通配选择器(Universal Selector)

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

css 复制代码
/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

5. 属性选择器(Attribute Selector)

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

html 复制代码
  <a href="https://www.baidu.com" target="_blank">外部链接</a>
    <a href="./my.html" name="inner">内部链接</a>
css 复制代码
  /* 选中带有 target="_blank" 的 <a> 标签 */
        a[target="_blank"]::after {
            content: "↗";
            margin-left: 5px;
        }
        a[name="inner"]::after {
            content: "↗";
            margin-left: 5px;
        }

6. 分组选择器(Grouping Selector)

场景:统一标题字体。

html 复制代码
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
css 复制代码
        /* 同时选中 h1, h2, h3 */
        h1,
        h2,
        h3 {
            font-family: "Microsoft YaHei", sans-serif;
            margin-bottom: 10px;
            color: blueviolet;
        }

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

html 复制代码
  <div class="card" id="featured-card">
        <h2 class="card-title">特别推荐</h2>
        <p class="card-content">请单击查看详情</p>
        <button type="button" class="btn">了解更多</button>
    </div>
css 复制代码
     /* 元素选择器 */
        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;
            /* 高亮特色卡片 */
        }
相关推荐
雪碧聊技术7 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了8 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust