12_CSS3基础

JRealcs

已于 2022-12-30 21:51:38 修改

阅读量44

点赞数

分类专栏： HTML5+CSS3 文章标签： css3 css html

于 2022-07-20 19:03:39 首次发布

本文链接：https://blog.csdn.net/weixin_58764638/article/details/125898750

版权

HTML5+CSS3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3中的各种选择器，包括属性选择器、结构选择器、UI选择器、否定选择器和目标伪类选择器。同时，讲解了浏览器前缀的重要性和使用，以及CSS3新增的文本属性、边框圆角属性和背景尺寸设置。通过实例展示了如何利用这些特性实现丰富和精细的页面样式控制。

摘要由CSDN通过智能技术生成

一、CSS3中的选择器

CSS3中的属性选择器

E[attr] 表示选择标签和标签中的属性
E[attr=“value”] 表示选择标签和标签的属性属性值
E[attr^=“value”] 表示选择标签和标签的属性属性值,并且以xx开头
E[attr$=“value”] 表示选择标签和标签的属性属性值,并且以xx结束

二、CSS3中的结构选择器

CSS3中的结构伪类选择器:表示将很多的标签放在一起通过选择第几个进行修饰
一:当所有的标签名称是一样的时候:将所有相同的标签组成一个集合,再从集合下面进行选择第几个

集合名称:first-child 表示选择集合下面的第一个
集合名称:last-child 表示选择集合下面的最后一个
集合名称:nth-child(n) 表示选择到集合下面的第几个(从前往后)
集合名称:nth-last-child(n) 表示选择到集合下面的第几个(从后往前)
- 小括号里面的n表示数字,默认为n的时候表示选择到全部
- 2n、3n、2n-1
- odd、even 奇数、偶数

二:当所有的标签名称不一样的时候:将标签=进行筛选相同标签组成一个集合,再从集合下面挑选第几个

集合名称:first-of-type 表示选择集合下面的第一个
集合名称:last-of-type 表示选择集合下面的最后一个
集合名称:nth-of-type(n) 表示选择到集合下面的第几个(从前往后)
集合名称:nth-last-of-type(n) 表示选择到集合下面的第几个(从后往前)
- 小括号里面的n表示数字,默认为n的时候表示选择到全部
- 2n、3n、2n-1
- odd、even 奇数、偶数

三、UI选择器

    <style>
        input:enabled{
            background: pink
        }
        input:disabled{
            background: #ccc
        }
        input:checked{
            width: 20px;
            height: 20px;
        }
    </style>

<body>
    <input type="text">
    <input type="text" disabled>
    <input type="checkbox" checked>
</body>

四、否定选择器

    <style>
        div:not(.box){
            color: red
        }
    </style>

<body>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div class="box">小强D毛</div>
</body>

五、目标伪类选择器

    <style>
        #box:target{
            font-size: 50px;
        }
    </style>

<body>
    <!-- 通过点击a标签 实现div标签变化 -->
    <div id="box">灯</div>
    <a href="#box">开关</a>
</body>

目标选择器:表示通过事件可以选取当前活动目标元素(哪个元素改变状态就给哪个元素设置目标选择器)

使用: 选择器:target
注意: 结合a标签使用、锚点

六、浏览器前缀的认识

项目的开发思想:渐进增强、优雅降级

渐进增强:先保证低版本的正常使用再在高版本中做效果
优雅降级:先实现高版本的效果,再考虑低版本浏览器的适配

市场上五大浏览器:谷歌、火狐、IE、欧朋、safari
市场上常见的弟弟浏览器:UC、百度、360、搜狐、qq、王牌2345、夸克
为什么要有浏览器前缀?由于浏览器的制作厂商不一样源码不一样(浏览器内核解析html和css)
由于CSS3是新版本,增加了新的属性,在部分浏览器上解析的时候会出现问题,为了支持这些属性每个浏览器都有自己的前缀

-webkit- safari 谷歌浏览器
-ms- IE浏览器
-moz- 火狐浏览器
-o- 欧朋浏览器遗弃
-blink- 欧朋浏览器和谷歌浏览器

七、CSS3中的新增文本属性

一:文本阴影

属性:text-shadow
属性值:常用的属性值有4个
- 第一个属性值表示水平方向
- 第二个属性值表示垂直方向
- 第三个属性值表示模糊程度
- 第四个属性值表示颜色

二:盒子阴影

属性:box-shadow
属性值:常见的属性值有4个
- 第一个属性值表示水平方向
- 第二个属性值表示垂直方向
- 第三个属性值表示模糊程度
- 第四个属性值表示颜色
- 第五个属性值表示inset 规定盒子阴影在内部显示

八、边框圆角属性的使用

边框圆角属性的使用

属性:border-radius(半径)
属性值
- 一个属性值:设置宽高一半/50%~100% 形成圆
- 两个属性值:左上角右下角右上角左下角
- 三个属性值:左上角右上角左下角右下角
- 四个属性值:左上右上右下左下
- 八个属性值:左上x 右上x 右下x 左下x/左上y 右上y 右下y 左下y

九、价值200w的logo

    <style>
        div{
            width: 153px;
            height: 153px;
            background: #fe5e00;
            margin: 200px auto;
            border-radius: 56px;
        }
    </style>

<body>
    <div></div>
</body>

十、背景尺寸大小设置

背景尺寸大小的设置

属性:background-size
属性值:
- 第一种:设置固定的宽高大小 100px 200px
- 第二种:100% 100% 表示百分比相对于父级元素计算会沾满父级盒子
- 第三种:100% auto
- 第四种:cover 覆盖(不会让图片变形但是图片超出去的时候会裁剪)
- 第五种:contain 覆盖(表示某一侧碰到父级包含框就会停止变化,不会变形也不会被裁剪)