-

CSS样式层叠表(图文教程)

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

上篇:核心功能
1. 尺寸
2. 背景处理
3. 文本处理

查看案例>>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      *{
        margin:0;
        padding:0;
      }
      .box{
        /* 1. 尺寸 */
        width:500px;
        height:280px;
        border:3px dotted grey;
        border-radius:8px;
        padding:15px 20px;
        /*width:100%;*/
        box-sizing:border-box;
        /*margin:30px;
        margin-bottom:50px;*/
        /*margin-left:auto;
        margin-right:auto;*/

        /* 2. 背景处理 */
        margin:50px auto;
        background-color:#f9f9f9;
        /*background-image:url('./bg.jpg'); */
        box-shadow:5px 5px 5px grey;
        position:relative;
      } 

      /* 3. 文本处理 */
      .box p{
        color:red;
        text-indent:2em;
      }
      .box h1{
        font-size:50px;
        /*font-family:'宋体';*/
        font-weight:normal;
        text-align:center;
        background-color:orange;
        height:80px;
        line-height:80px;
        text-shadow: 2px 2px 20px green;
        text-decoration:dashed underline;
      }
      .box span{
        color:orange;
        writing-mode:vertical-lr;
        text-orientation:upright;
        /* 4. 位置 */
        position:fixed;  
        top:20px;
        left:5px;
      }
    </style>
</head>

<body>
    <div class="box">
        <h1>CSS:层叠样式表</h1>
        <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力</p>
        <span>小孙学前端CSS,好好学习天天向上</span>
    </div>
    <div>
        <h1>CSS:层叠样式表</h1>
        <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力</p>
        <span>小孙学前端,好好学习天天向上</span>
    </div>
    <div>
        <h1>CSS:层叠样式表</h1>
        <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力</p>
        <span>小孙学前端,好好学习天天向上</span>
    </div>
    <div>
        <h1>CSS:层叠样式表</h1>
        <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力</p>
        <span>小孙学前端,好好学习天天向上</span>
    </div>
</body>

</html>

中篇:布局技术
1. flex布局
2. grid布局

查看案例>>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       *{
            margin:0;
            padding:0;
         }
         .flex-container{
            width:100%;
            max-width:800px;
            min-width:500px; 
            margin: 0 auto;
            background-color:red;
            height:800px;
            display:flex; 
 /*           align-items:flex-end;
            justify-content:center;*/
         }
         .flex-item{
            padding:10px;
            border: 1px solid #ccc;
            border-radius:5px;
            background-color:#f9f9f9;
            /*max-height:500px;*/
            /*max-width:200px;*/
            /*flex:2;*/
         }
         .flex-item:nth-child(2){
            flex:3;
            min-width:250px; 
         }
         .flex-item:nth-child(2n+1){
            width:200px;
         }
 
         .grid-container{
            display:grid;
            /*grid-template-columns:200px 300px 200px;*/
            /*grid-template-columns:20% 50% 30%;*/
            /*grid-template-columns:1fr 1fr 1fr;*/
            /*grid-template-columns:repeat(3,1fr); /* 重复三次  */ 
            grid-template-columns:300px auto 200px;
            height:600px;
            grid-template-rows:1fr 2fr;
         }
         .grid-item{
            padding:10px;
            border:1px solid #ccc;
            border-radius:5px;
            background-color:#f9f9f9;
            overflow:hidden;
         }

    </style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">
            <h1>1、CSS:层叠样式表</h1>
            <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力</p>
        </div>
        <div class="flex-item">
            <h1>2、CSS:层叠样式表</h1>
            <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力</p> 
        </div>
        <div class="flex-item">
            <h1>3、CSS:层叠样式表</h1>
            <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力</p> 
        </div>
    </div>


    <div class="grid-container">
        <div class="grid-item">
            <h1>4、CSS:层叠样式表</h1>
            <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力</p>
        </div>
        <div class="grid-item">
            <h1>5、CSS:层叠样式表</h1>
            <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力</p> 
        </div>
        <div class="grid-item">
            <h1>6、CSS:层叠样式表</h1>
            <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力</p> 
        </div>
    </div>
</body>

</html>
下篇:过渡、变换、动画
过渡、变换、动画
查看案例>>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       *{
            margin:0;
            padding:0;
         }
         .transition-box{
            width:100px;
            height:100px;
            background-color:orange;
            /*transition:width 1s, height 2s, background-color 2s;*/
            transition:all 1s ease-in;  /*linear=均匀速度*/
            position:absolute;
            left:0; 
         }
         .transition-box:hover{
            width:200px;
            height:200px;
            background-color:red;
            left:200px;
         }


         .container{
            width:200px;
            margin:0 auto;
            transform-style:preserve-3d; /*3d*/
            perspective:500px;
         }
         .transform-box{
            width:200px;
            height:200px;
            background-color:green;
            transition:all 1s;
            position:absolute;
            left:100px;
            top:300px;
            transform-origin:right bottom;
         }
         .transform-box:hover{
            /*transform:translate(10px,20px);*/
            /*transform:translateX(10px) translateY(20px);*/
            /*transform:rotate(30deg);*/  /*旋转*/
/*            transform:scale(.5);  /*缩放*/
  /*          transform:skew(20deg,20deg);/*变形*/
            transform:translate3d(0px, 0px, 100px); 
            transform:rotate3d(0, 1, 0, 100deg);

         }
    </style> 
</head>

<body>
   <div class="transition-box"></div> 
   <div class="container">
        <div class="transform-box"></div>
   </div>

 
</body>

</html>
模糊
blur模糊,让隐藏字符模糊
查看案例>>
<style>
.blur {
     -webkit-transform: translateY(2px); 
     transform: translateY(2px); 
     -webkit-filter: blur(4px); 
     filter: blur(4px); 
     display: inline-block; 
}
</style> 
<strong>1320<span class='blur'>****</span>037</strong>