当前位置： 首页 > article >正文

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

article 2025/3/17 11:09:41

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>
        /* 属性选择器 */
        [href] {
            color: green;
        }
        
        /* 属性值选择器 */
        [href="https://www.example.com"] {
            font-weight: bold;
        }
        
        /* 属性值包含选择器 */
        [href*="example"] {
            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动画案例

  1. 渐变背景动画
<!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属性设置动画的持续时间、循环方式等。

  1. 按钮点击效果
<!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属性实现按钮在鼠标悬停和点击时的平滑颜色过渡效果，增强了用户交互体验。

  1. 文本闪烁效果
<!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布局案例

  1. 响应式导航菜单
<!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时，导航菜单的布局从水平变为垂直，以适应移动端设备。

  1. 两栏布局
<!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%的宽度，适用于简单的页面布局。

  1. 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响应式设计案例

  1. 图片轮播
<!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属性，在不同的时间显示不同的图片，实现简单的轮播效果，常用于展示多张图片或广告。

  1. 侧边栏展开效果
<!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控制类的切换来改变侧边栏的位置，适用于移动端或需要隐藏式导航的页面。


http://www.kler.cn/a/586845.html

相关文章：

  • ssh通过22端口无法连接服务器问题处理
  • Python----数据可视化（Pyecharts三：绘图二：涟漪散点图，K线图，漏斗图，雷达图，词云图，地图，柱状图折线图组合，时间线轮廓图）
  • Java方法继承、方法重载、方法覆盖总结
  • Hive SQL 精进系列： IF 函数的强大功能与高级应用
  • Qlik Sense New Install with Restore
  • 【PlatformIO】基于Arduino的ESP8266 锂电池电压、电量测试
  • 射频前端模块（FEM）的基本原理与架构：从组成到WiFi路由器的应用
  • 1、操作系统引论
  • C语言 | 二叉树打印效果，控制台打印
  • 【Git学习笔记】Git初识及其结构原理分析(一)
  • JavaScript性能优化的几个方面入手
  • matlab 谐波分析公式绘图
  • Three.js 实现云状特效
  • Global Mapper 多功能的GIS软件
  • Python 本地翻译库 googletrans
  • 华为机试牛客刷题之HJ5 进制转换
  • 「为爱发电」的硬核打开方式，涂鸦智能用AIoT引领智慧能源变革
  • The Rust Programming Language 学习 (五)
  • 人工智能技术与应用演讲（61页PPT）（文末有下载方式）
  • [已解决]UserWarning: __floordiv__ is deprecated