八卦阵 发表于 2025-3-16 11:21:40

CSS3学习教程,从入门到精通, CSS3入门介绍的语法知识点及案例(1)

CSS3入门介绍

一、CSS3选择器

1.1 基本选择器

<!DOCTYPE html>
<html>
<head>
    <style>
      /* 元素选择器 */
      p {
            color: red;
      }
      
      /* 类选择器 */
      .myClass {
            font-size: 20px;
      }
      
      /* ID选择器 */
      #myId {
            background-color: yellow;
      }
      
      /* 通用选择器 */
      * {
            margin: 0;
            padding: 0;
      }
    </style>
</head>
<body>
    <p>这是一个段落</p>
    <p class="myClass">这是一个带有类的段落</p>
    <p id="myId">这是一个带有ID的段落</p>
</body>
</html>
1.2 属性选择器

<!DOCTYPE html>
<html>
<head>
    <style>
      /* 属性选择器 */
       {
            color: green;
      }
      
      /* 属性值选择器 */
       {
            font-weight: bold;
      }
      
      /* 属性值包含选择器 */
       {
            text-decoration: underline;
      }
    </style>
</head>
<body>
    <a href="https://www.example.com">Example</a>
    <a href="https://www.test.com">Test</a>
</body>
</html>
二、CSS3盒模型

2.1 尺度盒模型

<!DOCTYPE html>
<html>
<head>
    <style>
      .box {
            width: 200px;
            height: 100px;
            border: 2px solid black;
            padding: 10px;
            margin: 10px;
            /* 标准盒模型 */
            box-sizing: content-box;
      }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
2.2 边框半径

<!DOCTYPE html>
<html>
<head>
    <style>
      .box {
            width: 200px;
            height: 100px;
            border: 2px solid black;
            border-radius: 10px;
      }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
三、CSS3背景和边框

3.1 多背景

<!DOCTYPE html>
<html>
<head>
    <style>
      .box {
            width: 200px;
            height: 100px;
            border: 2px solid black;
            background-image: url('image1.jpg'), url('image2.jpg');
            background-position: left top, right bottom;
            background-repeat: no-repeat, no-repeat;
      }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
3.2 渐变

<!DOCTYPE html>
<html>
<head>
    <style>
      .box {
            width: 200px;
            height: 100px;
            background: linear-gradient(to right, red, blue);
      }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
四、CSS3文字和字体

4.1 文字阴影

<!DOCTYPE html>
<html>
<head>
    <style>
      .text {
            font-size: 30px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      }
    </style>
</head>
<body>
    <div class="text">文字阴影示例</div>
</body>
</html>
4.2 字体

<!DOCTYPE html>
<html>
<head>
    <style>
      @font-face {
            font-family: 'MyFont';
            src: url('font.woff') format('woff');
      }
      
      .text {
            font-family: 'MyFont', sans-serif;
            font-size: 30px;
      }
    </style>
</head>
<body>
    <div class="text">自定义字体示例</div>
</body>
</html>
五、CSS3 2D/3D变更

5.1 2D变更

<!DOCTYPE html>
<html>
<head>
    <style>
      .box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: transform 0.3s;
      }
      
      .box:hover {
            transform: rotate(45deg) scale(1.2);
      }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
5.2 3D变更

<!DOCTYPE html>
<html>
<head>
    <style>
      .container {
            perspective: 1000px;
      }
      
      .box {
            width: 100px;
            height: 100px;
            background-color: red;
            transform: rotateY(45deg);
            transition: transform 0.3s;
      }
      
      .box:hover {
            transform: rotateY(0deg);
      }
    </style>
</head>
<body>
    <div class="container">
      <div class="box"></div>
    </div>
</body>
</html>
六、CSS3过渡、动画

6.1 过渡

<!DOCTYPE html>
<html>
<head>
    <style>
      .box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: background-color 0.3s, width 0.3s;
      }
      
      .box:hover {
            background-color: blue;
            width: 200px;
      }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
6.2 动画

<!DOCTYPE html>
<html>
<head>
    <style>
      @keyframes myAnimation {
            0% { background-color: red; }
            50% { background-color: green; }
            100% { background-color: blue; }
      }
      
      .box {
            width: 100px;
            height: 100px;
            animation: myAnimation 2s infinite;
      }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
七、CSS3多列结构

<!DOCTYPE html>
<html>
<head>
    <style>
      .columns {
            column-count: 3;
            column-gap: 20px;
            column-rule: 1px solid black;
      }
    </style>
</head>
<body>
    <div class="columns">
      <p>这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。</p>
    </div>
</body>
</html>
八、CSS3弹性结构

<!DOCTYPE html>
<html>
<head>
    <style>
      .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100px;
      }
      
      .item {
            width: 100px;
            height: 100px;
            background-color: red;
      }
    </style>
</head>
<body>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
</body>
</html>
九、CSS3网格结构

<!DOCTYPE html>
<html>
<head>
    <style>
      .container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px;
            gap: 10px;
      }
      
      .item {
            background-color: red;
      }
    </style>
</head>
<body>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
</body>
</html>
十、CSS3媒体查询

<!DOCTYPE html>
<html>
<head>
    <style>
      /* 大屏幕 */
      @media (min-width: 992px) {
            .box {
                width: 200px;
                height: 100px;
                background-color: red;
            }
      }
      
      /* 中等屏幕 */
      @media (min-width: 768px) and (max-width: 991px) {
            .box {
                width: 150px;
                height: 75px;
                background-color: green;
            }
      }
      
      /* 小屏幕 */
      @media (max-width: 767px) {
            .box {
                width: 100px;
                height: 50px;
                background-color: blue;
            }
      }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
以上是CSS3的一些常用知识点及案例代码,盼望对你有所帮助!
以下是CSS3在实际开发中的一些详细案例,涵盖了动画、结构、相应式计划等方面:
CSS3动画案例


[*]渐变背景动画
<!DOCTYPE html>
<html>
<head>
    <style>
      body {
            margin: 0;
            height: 100vh;
            background: linear-gradient(45deg, red, yellow);
            animation: gradient 5s infinite;
      }
      
      @keyframes gradient {
            0% { background-position: 0% 50%; }
            100% { background-position: 100% 50%; }
      }
    </style>
</head>
<body>
</body>
</html>
该案例实现了页面背景的渐变色循环动画,通过@keyframes界说动画的关键帧,animation属性设置动画的连续时间、循环方式等。

[*]按钮点击效果
<!DOCTYPE html>
<html>
<head>
    <style>
      button {
            padding: 10px 20px;
            background-color: blue;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
      }
      
      button:hover {
            background-color: darkblue;
      }
      
      button:active {
            background-color: black;
      }
    </style>
</head>
<body>
    <button>点击我</button>
</body>
</html>
通过transition属性实现按钮在鼠标悬停和点击时的平滑颜色过渡效果,增强了用户交互体验。

[*]文本闪灼效果
<!DOCTYPE html>
<html>
<head>
    <style>
      @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
      }
      
      p {
            animation: blink 1s infinite;
      }
    </style>
</head>
<body>
    <p>闪烁的文本</p>
</body>
</html>
使用@keyframes界说文本的透明度变革,实现闪灼效果,可用于吸引用户注意特定信息。
CSS3结构案例


[*]相应式导航菜单
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>响应式导航菜单</title>
    <style>
      /* 导航菜单样式 */
      .nav-menu {
            list-style-type: none;
            overflow: hidden;
            background-color: #333;
      }
      
      .nav-menu li {
            float: left;
      }
      
      .nav-menu li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
      }
      
      /* 响应式布局 */
      @media screen and (max-width: 600px) {
            .nav-menu li {
                float: none;
            }
      }
    </style>
</head>
<body>
    <ul class="nav-menu">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">联系</a></li>
    </ul>
</body>
</html>
通过媒体查询@media,在屏幕宽度小于600px时,导航菜单的结构从程度变为垂直,以顺应移动端设备。

[*]两栏结构
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>两栏布局</title>
    <style>
      /* 两栏布局样式 */
      .container {
            width: 80%;
            margin: 0 auto;
      }
      
      .left {
            width: 50%;
            float: left;
            background-color: #f2f2f2;
            padding: 20px;
      }
      
      .right {
            width: 50%;
            float: right;
            background-color: #ddd;
            padding: 20px;
      }
    </style>
</head>
<body>
    <div class="container">
      <div class="left">
            左侧内容
      </div>
      <div class="right">
            右侧内容
      </div>
    </div>
</body>
</html>
使用浮动float实现页面的两栏结构,左右两部分各占50%的宽度,实用于简朴的页面结构。

[*]Flexbox结构
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Flexbox布局</title>
    <style>
      /* Flexbox布局样式 */
      .flex-container {
            display: flex;
            justify-content: space-between;
            padding: 20px;
      }
      
      .flex-item {
            flex: 1;
            background-color: #f2f2f2;
            padding: 20px;
            margin: 10px;
      }
    </style>
</head>
<body>
    <div class="flex-container">
      <div class="flex-item">
            Flexbox元素1
      </div>
      <div class="flex-item">
            Flexbox元素2
      </div>
      <div class="flex-item">
            Flexbox元素3
      </div>
    </div>
</body>
</html>
通过display: flex将容器设置为弹性结构,justify-content属性控制子元素在主轴上的对齐方式,flex: 1使子元素自动分配剩余空间,实现等宽结构,实用于必要灵活调整元素位置和巨细的场景。
CSS3相应式计划案例


[*]图片轮播
<!DOCTYPE html>
<html>
<head>
    <style>
      .carousel {
            width: 300px;
            overflow: hidden;
            position: relative;
      }
      
      .carousel img {
            width: 100%;
            display: none;
      }
      
      .carousel img.active {
            display: block;
      }
      
      .carousel img:nth-child(1) {
            display: block;
      }
    </style>
</head>
<body>
    <div class="carousel">
      <img src="image1.jpg" alt="图片1" class="active">
      <img src="image2.jpg" alt="图片2">
      <img src="image3.jpg" alt="图片3">
    </div>
</body>
</html>
通过控制图片的display属性,在不同的时间显示不同的图片,实现简朴的轮播效果,常用于展示多张图片或广告。

[*]侧边栏展开效果
<!DOCTYPE html>
<html>
<head>
    <style>
      .sidebar {
            width: 200px;
            background: #333;
            position: fixed;
            top: 0;
            bottom: 0;
            transition: left 0.3s;
            left: -200px;
      }
      
      .sidebar.open {
            left: 0;
      }
      
      .sidebar .toggle {
            cursor: pointer;
            padding: 10px;
            color: white;
            background: #555;
      }
    </style>
</head>
<body>
    <div class="sidebar">
      <div class="toggle">菜单</div>
      <!-- 侧边栏内容 -->
    </div>
    <script>
      document.querySelector('.toggle').addEventListener('click', function() {
            document.querySelector('.sidebar').classList.toggle('open');
      });
    </script>
</body>
</html>
使用transition属性实现侧边栏展开和收起的平滑过渡效果,通过JavaScript控制类的切换来改变侧边栏的位置,实用于移动端或必要隐蔽式导航的页面。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: CSS3学习教程,从入门到精通, CSS3入门介绍的语法知识点及案例(1)