菜单 搜索
首页 前端知识 CSS3学习教程，从入门到精通， CSS3 样式引入语法知识点及案例代码（2）

CSS3学习教程，从入门到精通， CSS3 样式引入语法知识点及案例代码（2）

2025-03-15 13:03:57 前端知识 前端哥 403 38 我要收藏

CSS3 样式引入语法知识点及案例代码

一、CSS3 样式引入方式

CSS3 样式可以通过以下几种方式引入到 HTML 文档中：

1. 内联样式 (Inline Styles)
  • 语法： 直接在 HTML 元素的 style 属性中编写 CSS 代码。
  • 优点： 优先级最高，方便调试。
  • 缺点： 不利于维护和复用，代码冗余。
  • 案例：
<p style="color: red; font-size: 16px;">这是一个段落。</p>
复制
2. 内部样式表 (Internal Style Sheet)
  • 语法： 在 HTML 文档的 <head> 标签内使用 <style> 标签定义 CSS 样式。
  • 优点： 方便管理页面样式，优先级高于外部样式表。
  • 缺点： 只能在当前页面使用，不利于多页面复用。
  • 案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>内部样式表</title>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>这是一个段落。</p>
</body>
</html>
复制
3. 外部样式表 (External Style Sheet)
  • 语法： 将 CSS 代码保存在单独的 .css 文件中，然后在 HTML 文档中使用 <link> 标签引入。
  • 优点： 利于维护和复用，代码简洁，优先级低于内部样式表。
  • 缺点： 需要额外 HTTP 请求。
  • 案例：

style.css

p {
  color: green;
  font-size: 20px;
}
复制

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>外部样式表</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>这是一个段落。</p>
</body>
</html>
复制
4. 导入样式表 (@import)
  • 语法： 在 CSS 文件中使用 @import 规则导入其他 CSS 文件。
  • 优点： 可以将样式表模块化。
  • 缺点： 会增加 HTTP 请求，影响页面加载速度。
  • 案例：

style.css

@import url("reset.css");
 
p {
  color: purple;
  font-size: 22px;
}
复制

二、CSS3 选择器

CSS3 提供了丰富的选择器，用于选择需要样式化的 HTML 元素。

1. 基本选择器
  • 元素选择器： 选择指定的 HTML 元素。
  • 类选择器： 选择具有指定 class 属性的元素。
  • ID 选择器： 选择具有指定 id 属性的元素。
  • 通配符选择器： 选择所有元素。

案例：

/* 元素选择器 */
p {
  color: red;
}
 
/* 类选择器 */
.text-center {
  text-align: center;
}
 
/* ID 选择器 */
#main-title {
  font-size: 24px;
}
 
/* 通配符选择器 */
* {
  margin: 0;
  padding: 0;
}
复制
2. 组合选择器
  • 后代选择器： 选择指定元素的后代元素。
  • 子元素选择器： 选择指定元素的直接子元素。
  • 相邻兄弟选择器： 选择指定元素之后的相邻兄弟元素。
  • 通用兄弟选择器： 选择指定元素之后的所有兄弟元素。

案例：

/* 后代选择器 */
div p {
  color: blue;
}
 
/* 子元素选择器 */
ul > li {
  list-style: none;
}
 
/* 相邻兄弟选择器 */
h1 + p {
  margin-top: 0;
}
 
/* 通用兄弟选择器 */
h2 ~ p {
  color: green;
}
复制
3. 属性选择器
  • 存在和值选择器： 选择具有指定属性或属性值的元素。
  • 子串匹配选择器： 选择属性值包含指定子串的元素。

案例：

/* 存在和值选择器 */
a[target] {
  color: red;
}
 
a[target="_blank"] {
  color: blue;
}
 
/* 子串匹配选择器 */
img[src*="logo"] {
  border: 1px solid black;
}
复制
4. 伪类选择器
  • 动态伪类： 根据用户行为选择元素。
  • 结构伪类： 根据元素在文档树中的位置选择元素。
  • 否定伪类： 选择不符合指定条件的元素。

案例：

/* 动态伪类 */
a:hover {
  color: red;
}
 
/* 结构伪类 */
li:first-child {
  font-weight: bold;
}
 
/* 否定伪类 */
p:not(.text-center) {
  text-align: left;
}
复制
5. 伪元素选择器
  • 用于选择元素的特定部分。

案例：

/* 在元素内容之前插入内容 */
p::before {
  content: "**";
}
 
/* 选择元素的第一行 */
p::first-line {
  font-weight: bold;
}
复制

三、CSS3 常用属性

1. 文本属性
  • color： 文本颜色。
  • font-size： 字体大小。
  • font-family： 字体族。
  • text-align： 文本对齐方式。
  • text-decoration： 文本装饰。

案例：

p {
  color: #333;
  font-size: 16px;
  font-family: Arial, sans-serif;
  text-align: justify;
  text-decoration: underline;
}
复制
2. 背景属性
  • background-color： 背景颜色。
  • background-image： 背景图片。
  • background-repeat： 背景图片重复方式。
  • background-position： 背景图片位置。

案例：

body {
  background-color: #f0f0f0;
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
}
复制
3. 盒模型属性
  • width： 元素宽度。
  • height： 元素高度。
  • padding： 内边距。
  • border： 边框。
  • margin： 外边距。

案例：

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 20px;
}
复制
4. 布局属性
  • display： 元素显示方式。
  • float： 元素浮动。
  • position： 元素定位方式。
  • flexbox： 弹性盒子布局。
  • grid： 网格布局。

案例：

/* 使用 flexbox 实现水平居中 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
复制

四、CSS3 新特性

1. 圆角 (border-radius)

案例：

.box {
  border-radius: 10px;
}
复制
2. 阴影 (box-shadow)

案例：

.box {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
复制
3. 渐变 (gradient)

案例：

.box {
  background: linear-gradient(to right, red, yellow);
}
复制
4. 过渡 (transition)

案例：

.box {
  transition: all 0.5s ease-in-out;
}
 
.box:hover {
  transform: scale(1.2);
}
复制
5. 动画 (animation)

案例：

@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
 
.box {
  animation: myAnimation 2s infinite;
}
复制

五、案例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS3 案例</title>
  <style>
    /* 全局样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
 
    /* 导航栏样式 */
    .navbar {
      background-color: #333;
      color: #fff;
      padding: 10px;
    }
 
    .navbar a {
      color: #fff;
      text-decoration: none;
      margin-right: 15px;
    }
 
    /* 内容区域样式 */
    .content {
      padding: 20px;
    }
 
    /* 按钮样式 */
    .btn {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
 
    .btn:hover {
      background-color: #0056b3;
    }
 
    /* 卡片样式 */
    .card {
      width: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
 
    .card img {
      width: 100%;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
 
    .card-body {
      padding: 15px;
    }
 
    .card-title {
      font-size: 18px;
      margin-bottom: 10px;
    }
 
    .card-text {
      font-size: 14px;
      color: #666;
    }
  </style>
</head>
<body>
  <!-- 导航栏 -->
  <div class="navbar">
    <a href="#">首页</a>
    <a href="#">关于我们</a>
    <a href="#">联系我们</a>
  </div>
 
  <!-- 内容区域 -->
  <div class="content">
    <h1>欢迎来到 CSS3 世界</h1>
    <p>这是一个简单的 CSS3 案例。</p>
    <button class="btn">点击我</button>
 
    <!-- 卡片 -->
    <div class="card">
      <img src="image.jpg" alt="图片">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容...</p>
      </div>
    </div>
  </div>
</body>
</html>
复制

六、总结

以上是 CSS3 样式引入语法知识点及案例代码的详细介绍。通过学习这些内容，你可以掌握 CSS3 的基本语法和使用方法，并能够使用 CSS3 来美化网页。

七、案例代码

以下是一些实际开发中常见的 CSS3 案例，涵盖了常见的布局、样式和交互效果。每个案例都附有详细的代码和注释。

案例 1：响应式导航栏
描述：

一个常见的响应式导航栏，在小屏幕上显示汉堡菜单，点击后展开菜单项。

代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式导航栏</title>
  <style>
    /* 基础样式 */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
 
    /* 导航栏容器 */
    .navbar {
      background-color: #333;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
 
    /* 品牌标志 */
    .navbar-brand {
      color: #fff;
      font-size: 24px;
      text-decoration: none;
    }
 
    /* 菜单按钮（汉堡菜单） */
    .navbar-toggle {
      display: none; /* 默认隐藏 */
      background: none;
      border: none;
      color: #fff;
      font-size: 24px;
      cursor: pointer;
    }
 
    /* 菜单项 */
    .navbar-menu {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }
 
    .navbar-menu li {
      margin-left: 20px;
    }
 
    .navbar-menu a {
      color: #fff;
      text-decoration: none;
      font-size: 18px;
    }
 
    /* 响应式设计：小屏幕 */
    @media (max-width: 768px) {
      .navbar-toggle {
        display: block; /* 显示汉堡菜单 */
      }
 
      .navbar-menu {
        display: none; /* 默认隐藏菜单 */
        flex-direction: column;
        width: 100%;
        background-color: #444;
      }
 
      .navbar-menu.active {
        display: flex; /* 点击后显示菜单 */
      }
 
      .navbar-menu li {
        margin: 10px 0;
        text-align: center;
      }
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <a href="#" class="navbar-brand">我的网站</a>
    <button class="navbar-toggle" onclick="toggleMenu()">&#9776;</button>
    <ul class="navbar-menu" id="navbarMenu">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </nav>
 
  <script>
    function toggleMenu() {
      const menu = document.getElementById('navbarMenu');
      menu.classList.toggle('active');
    }
  </script>
</body>
</html>
复制
案例 2：卡片布局
描述：

一个常见的卡片布局，适用于展示产品、文章等内容。

代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片布局</title>
  <style>
    /* 基础样式 */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }
 
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 20px;
    }
 
    /* 卡片样式 */
    .card {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      margin: 15px;
      width: 300px;
      overflow: hidden;
      transition: transform 0.3s ease;
    }
 
    .card:hover {
      transform: translateY(-10px);
    }
 
    .card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
 
    .card-body {
      padding: 15px;
    }
 
    .card-title {
      font-size: 20px;
      margin: 0 0 10px;
    }
 
    .card-text {
      font-size: 14px;
      color: #666;
    }
 
    .card-button {
      display: inline-block;
      padding: 10px 15px;
      background-color: #007bff;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      margin-top: 10px;
    }
 
    .card-button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="card">
      <img src="https://via.placeholder.com/300x200" alt="图片">
      <div class="card-body">
        <h3 class="card-title">卡片标题 1</h3>
        <p class="card-text">这是卡片的内容描述，可以写一些简短的介绍。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
    <div class="card">
      <img src="https://via.placeholder.com/300x200" alt="图片">
      <div class="card-body">
        <h3 class="card-title">卡片标题 2</h3>
        <p class="card-text">这是卡片的内容描述，可以写一些简短的介绍。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
    <div class="card">
      <img src="https://via.placeholder.com/300x200" alt="图片">
      <div class="card-body">
        <h3 class="card-title">卡片标题 3</h3>
        <p class="card-text">这是卡片的内容描述，可以写一些简短的介绍。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
  </div>
</body>
</html>
复制
案例 3：加载动画
描述：

一个简单的 CSS3 加载动画，适用于页面加载或数据加载时的等待提示。

代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>加载动画</title>
  <style>
    /* 基础样式 */
    body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f4f4f4;
    }
 
    /* 加载动画 */
    .loader {
      border: 8px solid #f3f3f3;
      border-top: 8px solid #3498db;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      animation: spin 1s linear infinite;
    }
 
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="loader"></div>
</body>
</html>
复制
案例 4：模态框（Modal）
描述：

一个常见的模态框，点击按钮后弹出，点击背景或关闭按钮后消失。

代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模态框</title>
  <style>
    /* 基础样式 */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
 
    /* 按钮样式 */
    .open-modal-btn {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
 
    /* 模态框背景 */
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
    }
 
    /* 模态框内容 */
    .modal-content {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      width: 300px;
      text-align: center;
    }
 
    /* 关闭按钮 */
    .close-modal-btn {
      padding: 10px 20px;
      background-color: #ccc;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="open-modal-btn" onclick="openModal()">打开模态框</button>
 
  <div class="modal-overlay" id="modalOverlay">
    <div class="modal-content">
      <h2>模态框标题</h2>
      <p>这是模态框的内容。</p>
      <button class="close-modal-btn" onclick="closeModal()">关闭</button>
    </div>
  </div>
 
  <script>
    function openModal() {
      document.getElementById('modalOverlay').style.display = 'flex';
    }
 
    function closeModal() {
      document.getElementById('modalOverlay').style.display = 'none';
    }
  </script>
</body>
</html>
复制
总结

以上案例涵盖了实际开发中常见的需求，包括响应式导航栏、卡片布局、加载动画和模态框。通过这些案例，你可以更好地理解 CSS3 的实际应用，并快速上手开发。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/23697.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

【EB-07】TC397 Tresos 导入通信ARXML

2025-03-15 13:03:18

力扣-单调栈-739 每日温度

2025-03-15 13:03:17

代码随想录二刷|图论2

2025-03-15 13:03:59

数据库原理4

2025-03-15 13:03:58

使用WebSocket进行通信的图形用户界面应用程序

2025-03-15 13:03:57

爬虫面试：关于爬虫破解验证码的13个经典面试题

2025-03-15 13:03:57

代码随想录第五十天| 图论理论基础

2025-03-15 13:03:56

java常见面试01

2025-03-15 13:03:56

Floyd算法——有向图

2025-03-15 13:03:55

将数据库结构化数据整合到RAG问答中的方式

2025-03-15 13:03:54

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000
3

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
4

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
5

CSS常用属性（文本属性）

2024-11-04 09:11:111000
6

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
7

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
8

vue使用datav echarts

2024-09-06 00:09:381000
9

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
10

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！