CSS3的学习之路(一)

最新推荐文章于 2024-09-15 19:00:01 发布

努力努力再努力zqx

最新推荐文章于 2024-09-15 19:00:01 发布

阅读量129

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/Qixinzhu/article/details/115408739

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

CSS3的学习之路（一）

CSS3：基础

    <style>
        div{
            width: 100px;
            height: 100px;
            background: bisque;
            transition: 1s;        /* 过渡 标准 */

            -webkit-transition: 1s; /* Chrom Safari */
            -moz-transition: 1s;    /* Firefox */
            -ms-transition: 1s;     /* IE */
            -o-transition: 1s;      /* Opera*/
        }
        div:hover{
            width: 200px;
            height: 200px;
            background: rebeccapurple;
        }
    </style>
    <body>
        <div></div>
    </body>

选择器
（1）标签选择器

<style>
        p:nth-child(1){
            background: brown;
        }
        /* 从E标签的父级去找第N个标签&&必须是E标签 */
    </style>
    <body>
        <div>
            <p>red</p>
            <span>green</span>
            <p>yellow</p>
        </div>
    </body>

效果如图：
在这里插入图片描述
（2）标签选择器-奇数、偶数行

<style>
        li:nth-child(odd){
            background:coral;
        }
        /* odd--奇数行
            even--偶数行 */
    </style>
    <body>
        <ul>
            <li>red</li>
            <li>blue</li>
            <li>yellow</li>
        </ul>
    </body>

效果如图：
在这里插入图片描述

锚点–target

<style>
        a{
            font: 20px/20px  "微软雅黑";
        }
        div{
            width: 100px;
            height: 100px;
            background: coral;
            text-align: center;
            display: none;
        }
        div:target{
            display: block;  
            /* 修改锚点 */
        }
    </style>
    <body>
        <a href="#div1">div1</a>
        <a href="#div2">div2</a>
        <a href="#div3">div3</a>

        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </body>

checkbox、radio选中后状态

<style>
        input[type='checkbox']:checked{
            width: 50px;
            height: 50px;
            /* 选中后的状态 */
        }
    </style>
    <body>
        <input type="checkbox"/>
        <input type="radio"/>
    </body>

效果如图

文字状态

<style>
        p{
            width: 300px;
            border: 1px solid darkblue;
        }
        p::first-line{
            color: darkorange;
            font: 20px/50px "微软雅黑";
        }
        p::first-letter{
            color: darkorchid;
            font: 100px;
        }
        /*  first-line   第一行文字的状态
            first-letter 第一个文字的状态 
            selection  p标签里文字被选中的状态
            before     在p标签的最前面添加内容
            after      在p标签的最后面添加内容  */
    </style>
    <body>
        <p>
            大护法规划对规范和任何附加那个风口聚四氟的囧事见覅偶打火机是返回回复超过一个回
        </p>
    </body>