day14-css3基础

最新推荐文章于 2024-07-18 16:42:05 发布

user_lc

最新推荐文章于 2024-07-18 16:42:05 发布

阅读量96

点赞数

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

本文链接：https://blog.csdn.net/user_lc/article/details/127583336

版权

html css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<body>
    <!-- 
        快捷方式1
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        快捷方式2
        div[class="box$"]*3 
    -->
    <a href="pig1">豪华</a>
    <a href="pig2">锦安</a>
    <a href="pig3">小鹏</a>
</body>
</html>
<!-- 
    属性选择器的使用:通过标签中的属性选择修饰的对象
    1.E[attr]:通过选择到标签和属性
    2.E[attr="value"]:通过选择到标签和属性中属性值
    3.E[attr^="value"]:通过选择到标签和属性中属性值(开头)
    4.E[attr$="value"]:通过选择到标签和属性中属性值(结尾)
    5.E[attr*="value"]:通过选择到标签和属性中属性值,包含任意一个字符
 -->

结构选择器的使用：

<!-- 
    CSS3的结构选择器:把很多标签放在一起,通过选择到第几个进行修饰
    一:当标签名称全部都是一样的时候
    1.E:first-child 获取相同标签组成的集合下面的第一个子级元素
    2.E:last-child 	获取相同标签组成的集合下面的最后一个子级元素
    3.E:nth-child(n){} 获取相同标签组成的集合下面的第几个子级元素(从前往后数)
    4.E:nth-last-child(n){} 获取相同标签组成的集合下面的第几个子级元素(从后往前数)
        - nth-child(n){}
        - nth 表示选择第几个
        - child 子级、孩子
        - (n) 表示第几个,默认n为全部
        - n【重点】
            - 数字、1、2、3、4
            - even、odd 偶素、奇数
            - 2n、2n-1
            - 负数的用法:-n+数字 表示从第一个到第几个

    二:当标签名称不一样的时候:首先把相同标签组成一个集合,再从这个集合中选择到第几个
    1.E:first-of-type 获取相同标签组成的集合下面的第一个子级元素
    2.E:last-of-type 	获取相同标签组成的集合下面的最后一个子级元素
    3.E:nth-of-type(n){} 获取相同标签组成的集合下面的第几个子级元素(从前往后数)
    4.E:nth-last-of-type(n){} 获取相同标签组成的集合下面的第几个子级元素(从后往前数)
 -->

UI选择器：

    <style>
        input{
            outline: none
        }
        input:enabled{
            border: 1px solid green
        }
        input:disabled{
            background: #ccc
        }
        input:checked{
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text" disabled>
    <input type="radio" checked>
</body>

否定选择器：

<style>

div:not(.box){

color: red

}

</style>

目标选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box:target{
            font-size: 30px;
            color: red
        }
    </style>
</head>
<body>
    <div id="box">灯</div>
    <a href="#box">开关</a>
</body>
</html>
<!-- 
    目标选择器的使用
    1.语法: :target 表示可以点击改变元素的状态
    2.注意: 需要结合锚点实现
    3.解释: 谁改变就给谁添加即可
 -->

目标伪类实现手风琴效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        .wrapper{
            width:400px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto
        }
        a{
            display: block;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: #fff;
            background: #000
        }
        .wrapper div{
            height: 0;
            /* 过渡:初始状态过渡到结束状态 */
            transition: 0.8s
        }
        #box1:target{
            height: 350px;
            background: red
        }
        #box2:target{
            height: 350px;
            background: green
        }
        #box3:target{
            height: 350px;
            background: blue
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <!-- (a[href="#box$"]{按钮$}+div[id="box$"]{下拉列表})*3 -->
        <a href="#box1">按钮1</a>
        <div id="box1"></div>
        <a href="#box2">按钮2</a>
        <div id="box2"></div>
        <a href="#box3">按钮3</a>
        <div id="box3"></div>
    </div>
</body>
</html>

文本属性

<!--

一.文本阴影

1.属性:text-shadow

2.属性值:常用的有四个

- 第一个属性值表示水平方向

- 第二个属性值表示垂直方向

- 第三个属性值表示模糊程度

- 第四个属性值表示字体颜色

3.注意点

- 每个属性值之间需要使用空格隔开

- 后面可以接很多组的字体,只要每一组之间用逗号隔开即可

二.盒子阴影

1.属性:box-shadow

2.属性值:常用的有四个

- 第一个属性值表示水平方向

- 第二个属性值表示垂直方向

- 第三个属性值表示模糊程度

- 第四个属性值表示字体颜色

- 第五个属性值可以设置inset 表示阴影长在盒子的内部

3.注意点

- 每个属性值之间需要使用空格隔开

- 后面可以接很多组的字体,只要每一组之间用逗号隔开即可

-->

<!--

背景尺寸属性的使用

1.属性:background-size

2.属性值:尺寸可以设置两个方向(宽度和高度)

- 第一种情况:设置固定值

- 第二种情况:设置百分比 100% 100%

- 第三种情况:一个100%的时候不是简写方式,表示的是水平方向是100% 垂直是auto

- 第四种情况:cover 覆盖图片会裁剪但是不会变形

- 第五种情况:contain 包含/覆盖表示某一侧碰到父级边框就会停止等比例变化不会变形也不会裁剪

-->

<!--

边框圆角属性的使用

1.属性:border-radius(半径)

2.属性值:

- 一个属性值:表示四个角设置宽高的一半/50%~100%

- 两个属性值:表示对角左上角和右下角右上角和左下角

- 三个属性值:左上角右上角和左下角右下角

- 四个属性值:顺时针从左上角开始的,到左下角结束

- 八个属性值:左上角X 右上角X 右下角X 左下角X/左上角Y 右上角Y 右下角Y 左下角Y

3.可以利用ps软件量取元素的圆角值

-->

小米logo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3690121_lnwy4q4y9v.css">
    <style>
        div{
            width: 56px;
            height: 56px;
            background: #ff6900;
            border-radius: 19px;
            text-align: center;
            line-height: 56px;
            color: #fff;
        }
        div i{
            font-size: 30px !important;
        }
    </style>
</head>
<body>
    <div>
        <i class="iconfont icon-xiaomi"></i>
    </div>
</body>
</html>