CSS3学习教程，从入门到精通， CSS3入门介绍的语法知识点及案例（1） ...

八卦阵  金牌会员 | 2025-3-16 11:21:40 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 928|帖子 928|积分 2784

CSS3入门介绍

一、CSS3选择器

1.1 基本选择器

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         /* 元素选择器 */
  6.         p {
  7.             color: red;
  8.         }
  9.         
  10.         /* 类选择器 */
  11.         .myClass {
  12.             font-size: 20px;
  13.         }
  14.         
  15.         /* ID选择器 */
  16.         #myId {
  17.             background-color: yellow;
  18.         }
  19.         
  20.         /* 通用选择器 */
  21.         * {
  22.             margin: 0;
  23.             padding: 0;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <p>这是一个段落</p>
  29.     <p class="myClass">这是一个带有类的段落</p>
  30.     <p id="myId">这是一个带有ID的段落</p>
  31. </body>
  32. </html>
复制代码
1.2 属性选择器

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         /* 属性选择器 */
  6.         [href] {
  7.             color: green;
  8.         }
  9.         
  10.         /* 属性值选择器 */
  11.         [href="https://www.example.com"] {
  12.             font-weight: bold;
  13.         }
  14.         
  15.         /* 属性值包含选择器 */
  16.         [href*="example"] {
  17.             text-decoration: underline;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <a href="https://www.example.com">Example</a>
  23.     <a href="https://www.test.com">Test</a>
  24. </body>
  25. </html>
复制代码
二、CSS3盒模型

2.1 尺度盒模型

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .box {
  6.             width: 200px;
  7.             height: 100px;
  8.             border: 2px solid black;
  9.             padding: 10px;
  10.             margin: 10px;
  11.             /* 标准盒模型 */
  12.             box-sizing: content-box;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="box"></div>
  18. </body>
  19. </html>
复制代码
2.2 边框半径

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .box {
  6.             width: 200px;
  7.             height: 100px;
  8.             border: 2px solid black;
  9.             border-radius: 10px;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div class="box"></div>
  15. </body>
  16. </html>
复制代码
三、CSS3背景和边框

3.1 多背景

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .box {
  6.             width: 200px;
  7.             height: 100px;
  8.             border: 2px solid black;
  9.             background-image: url('image1.jpg'), url('image2.jpg');
  10.             background-position: left top, right bottom;
  11.             background-repeat: no-repeat, no-repeat;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="box"></div>
  17. </body>
  18. </html>
复制代码
3.2 渐变

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .box {
  6.             width: 200px;
  7.             height: 100px;
  8.             background: linear-gradient(to right, red, blue);
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <div class="box"></div>
  14. </body>
  15. </html>
复制代码
四、CSS3文字和字体

4.1 文字阴影

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .text {
  6.             font-size: 30px;
  7.             text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  12.     <div class="text">文字阴影示例</div>
  13. </body>
  14. </html>
复制代码
4.2 字体

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         @font-face {
  6.             font-family: 'MyFont';
  7.             src: url('font.woff') format('woff');
  8.         }
  9.         
  10.         .text {
  11.             font-family: 'MyFont', sans-serif;
  12.             font-size: 30px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="text">自定义字体示例</div>
  18. </body>
  19. </html>
复制代码
五、CSS3 2D/3D变更

5.1 2D变更

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .box {
  6.             width: 100px;
  7.             height: 100px;
  8.             background-color: red;
  9.             transition: transform 0.3s;
  10.         }
  11.         
  12.         .box:hover {
  13.             transform: rotate(45deg) scale(1.2);
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="box"></div>
  19. </body>
  20. </html>
复制代码
5.2 3D变更

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .container {
  6.             perspective: 1000px;
  7.         }
  8.         
  9.         .box {
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: red;
  13.             transform: rotateY(45deg);
  14.             transition: transform 0.3s;
  15.         }
  16.         
  17.         .box:hover {
  18.             transform: rotateY(0deg);
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="container">
  24.         <div class="box"></div>
  25.     </div>
  26. </body>
  27. </html>
复制代码
六、CSS3过渡、动画

6.1 过渡

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .box {
  6.             width: 100px;
  7.             height: 100px;
  8.             background-color: red;
  9.             transition: background-color 0.3s, width 0.3s;
  10.         }
  11.         
  12.         .box:hover {
  13.             background-color: blue;
  14.             width: 200px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div class="box"></div>
  20. </body>
  21. </html>
复制代码
6.2 动画

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         @keyframes myAnimation {
  6.             0% { background-color: red; }
  7.             50% { background-color: green; }
  8.             100% { background-color: blue; }
  9.         }
  10.         
  11.         .box {
  12.             width: 100px;
  13.             height: 100px;
  14.             animation: myAnimation 2s infinite;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div class="box"></div>
  20. </body>
  21. </html>
复制代码
七、CSS3多列结构

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .columns {
  6.             column-count: 3;
  7.             column-gap: 20px;
  8.             column-rule: 1px solid black;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <div class="columns">
  14.         <p>这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。</p>
  15.     </div>
  16. </body>
  17. </html>
复制代码
八、CSS3弹性结构

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .container {
  6.             display: flex;
  7.             justify-content: space-between;
  8.             align-items: center;
  9.             height: 100px;
  10.         }
  11.         
  12.         .item {
  13.             width: 100px;
  14.             height: 100px;
  15.             background-color: red;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="container">
  21.         <div class="item"></div>
  22.         <div class="item"></div>
  23.         <div class="item"></div>
  24.     </div>
  25. </body>
  26. </html>
复制代码
九、CSS3网格结构

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .container {
  6.             display: grid;
  7.             grid-template-columns: 100px 100px 100px;
  8.             grid-template-rows: 100px 100px;
  9.             gap: 10px;
  10.         }
  11.         
  12.         .item {
  13.             background-color: red;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="container">
  19.         <div class="item"></div>
  20.         <div class="item"></div>
  21.         <div class="item"></div>
  22.         <div class="item"></div>
  23.         <div class="item"></div>
  24.         <div class="item"></div>
  25.     </div>
  26. </body>
  27. </html>
复制代码
十、CSS3媒体查询

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         /* 大屏幕 */
  6.         @media (min-width: 992px) {
  7.             .box {
  8.                 width: 200px;
  9.                 height: 100px;
  10.                 background-color: red;
  11.             }
  12.         }
  13.         
  14.         /* 中等屏幕 */
  15.         @media (min-width: 768px) and (max-width: 991px) {
  16.             .box {
  17.                 width: 150px;
  18.                 height: 75px;
  19.                 background-color: green;
  20.             }
  21.         }
  22.         
  23.         /* 小屏幕 */
  24.         @media (max-width: 767px) {
  25.             .box {
  26.                 width: 100px;
  27.                 height: 50px;
  28.                 background-color: blue;
  29.             }
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div class="box"></div>
  35. </body>
  36. </html>
复制代码
以上是CSS3的一些常用知识点及案例代码，盼望对你有所帮助！
以下是CSS3在实际开发中的一些详细案例，涵盖了动画、结构、相应式计划等方面：
CSS3动画案例


  • 渐变背景动画
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         body {
  6.             margin: 0;
  7.             height: 100vh;
  8.             background: linear-gradient(45deg, red, yellow);
  9.             animation: gradient 5s infinite;
  10.         }
  11.         
  12.         @keyframes gradient {
  13.             0% { background-position: 0% 50%; }
  14.             100% { background-position: 100% 50%; }
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. </body>
  20. </html>
复制代码
该案例实现了页面背景的渐变色循环动画，通过@keyframes界说动画的关键帧，animation属性设置动画的连续时间、循环方式等。

  • 按钮点击效果
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         button {
  6.             padding: 10px 20px;
  7.             background-color: blue;
  8.             color: white;
  9.             border: none;
  10.             cursor: pointer;
  11.             transition: background-color 0.3s ease;
  12.         }
  13.         
  14.         button:hover {
  15.             background-color: darkblue;
  16.         }
  17.         
  18.         button:active {
  19.             background-color: black;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <button>点击我</button>
  25. </body>
  26. </html>
复制代码
通过transition属性实现按钮在鼠标悬停和点击时的平滑颜色过渡效果，增强了用户交互体验。

  • 文本闪灼效果
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         @keyframes blink {
  6.             0%, 100% { opacity: 1; }
  7.             50% { opacity: 0; }
  8.         }
  9.         
  10.         p {
  11.             animation: blink 1s infinite;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <p>闪烁的文本</p>
  17. </body>
  18. </html>
复制代码
使用@keyframes界说文本的透明度变革，实现闪灼效果，可用于吸引用户注意特定信息。
CSS3结构案例


  • 相应式导航菜单
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>响应式导航菜单</title>
  6.     <style>
  7.         /* 导航菜单样式 */
  8.         .nav-menu {
  9.             list-style-type: none;
  10.             overflow: hidden;
  11.             background-color: #333;
  12.         }
  13.         
  14.         .nav-menu li {
  15.             float: left;
  16.         }
  17.         
  18.         .nav-menu li a {
  19.             display: block;
  20.             color: white;
  21.             text-align: center;
  22.             padding: 14px 16px;
  23.             text-decoration: none;
  24.         }
  25.         
  26.         /* 响应式布局 */
  27.         @media screen and (max-width: 600px) {
  28.             .nav-menu li {
  29.                 float: none;
  30.             }
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <ul class="nav-menu">
  36.         <li><a href="#">首页</a></li>
  37.         <li><a href="#">关于我们</a></li>
  38.         <li><a href="#">产品</a></li>
  39.         <li><a href="#">联系</a></li>
  40.     </ul>
  41. </body>
  42. </html>
复制代码
通过媒体查询@media，在屏幕宽度小于600px时，导航菜单的结构从程度变为垂直，以顺应移动端设备。

  • 两栏结构
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>两栏布局</title>
  6.     <style>
  7.         /* 两栏布局样式 */
  8.         .container {
  9.             width: 80%;
  10.             margin: 0 auto;
  11.         }
  12.         
  13.         .left {
  14.             width: 50%;
  15.             float: left;
  16.             background-color: #f2f2f2;
  17.             padding: 20px;
  18.         }
  19.         
  20.         .right {
  21.             width: 50%;
  22.             float: right;
  23.             background-color: #ddd;
  24.             padding: 20px;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="container">
  30.         <div class="left">
  31.             左侧内容
  32.         </div>
  33.         <div class="right">
  34.             右侧内容
  35.         </div>
  36.     </div>
  37. </body>
  38. </html>
复制代码
使用浮动float实现页面的两栏结构，左右两部分各占50%的宽度，实用于简朴的页面结构。

  • Flexbox结构
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Flexbox布局</title>
  6.     <style>
  7.         /* Flexbox布局样式 */
  8.         .flex-container {
  9.             display: flex;
  10.             justify-content: space-between;
  11.             padding: 20px;
  12.         }
  13.         
  14.         .flex-item {
  15.             flex: 1;
  16.             background-color: #f2f2f2;
  17.             padding: 20px;
  18.             margin: 10px;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="flex-container">
  24.         <div class="flex-item">
  25.             Flexbox元素1
  26.         </div>
  27.         <div class="flex-item">
  28.             Flexbox元素2
  29.         </div>
  30.         <div class="flex-item">
  31.             Flexbox元素3
  32.         </div>
  33.     </div>
  34. </body>
  35. </html>
复制代码
通过display: flex将容器设置为弹性结构，justify-content属性控制子元素在主轴上的对齐方式，flex: 1使子元素自动分配剩余空间，实现等宽结构，实用于必要灵活调整元素位置和巨细的场景。
CSS3相应式计划案例


  • 图片轮播
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .carousel {
  6.             width: 300px;
  7.             overflow: hidden;
  8.             position: relative;
  9.         }
  10.         
  11.         .carousel img {
  12.             width: 100%;
  13.             display: none;
  14.         }
  15.         
  16.         .carousel img.active {
  17.             display: block;
  18.         }
  19.         
  20.         .carousel img:nth-child(1) {
  21.             display: block;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="carousel">
  27.         <img src="image1.jpg" alt="图片1" class="active">
  28.         <img src="image2.jpg" alt="图片2">
  29.         <img src="image3.jpg" alt="图片3">
  30.     </div>
  31. </body>
  32. </html>
复制代码
通过控制图片的display属性，在不同的时间显示不同的图片，实现简朴的轮播效果，常用于展示多张图片或广告。

  • 侧边栏展开效果
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .sidebar {
  6.             width: 200px;
  7.             background: #333;
  8.             position: fixed;
  9.             top: 0;
  10.             bottom: 0;
  11.             transition: left 0.3s;
  12.             left: -200px;
  13.         }
  14.         
  15.         .sidebar.open {
  16.             left: 0;
  17.         }
  18.         
  19.         .sidebar .toggle {
  20.             cursor: pointer;
  21.             padding: 10px;
  22.             color: white;
  23.             background: #555;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="sidebar">
  29.         <div class="toggle">菜单</div>
  30.         <!-- 侧边栏内容 -->
  31.     </div>
  32.     <script>
  33.         document.querySelector('.toggle').addEventListener('click', function() {
  34.             document.querySelector('.sidebar').classList.toggle('open');
  35.         });
  36.     </script>
  37. </body>
  38. </html>
复制代码
使用transition属性实现侧边栏展开和收起的平滑过渡效果，通过JavaScript控制类的切换来改变侧边栏的位置，实用于移动端或必要隐蔽式导航的页面。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

八卦阵

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表