CSS笔记(20) 非常重要

y191024

发布于 2022-09-20 19:36:03

51800

代码可运行

文章被收录于专栏：睡不着所以学编程睡不着所以学编程

运行总次数：0

代码可运行

好几天没有更新,因为我在偷懒...

又到了新的内容了,现在学习HTML5和CSS3的新特征.

HTML的新增特性主要是针对于以前的不足,增加了一些新的表单,新的标签和新的表单属性等.

这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性的问题,可以大量使用这些新特性.(呵呵,IE我杀了你)

声明:

新特性增加了很多,但是我们专注于开发常用的新特性.
基础班讲解部分新特性,就业班还会继续讲解其他新特性.

HTML5新增的语义化标签:

<header>: 头部标签.
<nav>: 导航标签
<article>: 内容标签
<section>: 定义文档某个区域
<aside>: 侧边栏标签
<footer>: 尾部标签

注意:

这种语义化标签主要是针对搜索引擎的.
这些新标签页面中可以使用多次
在IE9中,需要把这些元素转化成块级元素
其实,我们移动端更喜欢使用这些标签
HTML5中还增加了很多其他的标签,我们后面再继续学.

新增的多媒体标签主要包含两个:

音频<audio>
视频<video>

使用他们可以很方便的在页面中嵌入音频和视频,而不再去使用flash和其他浏览器插件.

HTML5在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然,支持的格式是有限的.

视频<video>

几乎所有的浏览器都支持MP4格式的视频,所以我们尽量放这种格式.

语法:

<video>的属性:

HTML5新增的表单属性:

CSS3的现状:

新增的CSS3特性有兼容性问题,IE9+才支持.
移动端支持优于PC端
不断改进中
应用相对广泛.
先阶段主要学习:新增选择器和盒子模型以及其它特性.

CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素

属性选择器
结构伪类选择器
伪元素选择器

属性选择器:

属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助于类或者id选择器(第二个是重点!!!),没想到我还是躲不开正则表达式.

举个栗子:

第一个input里面有value属性值,所以可以更改字体颜色.

这次两个都有type属性,但是我们只选择type=password的元素,修改它的文字颜色.

现在我们有一个需求,将下面4个icon小图标改成红色,该怎么做呢?

如果是以前,我们可以给每个元素加一个类名叫做icon,或者用并集选择器把他们都选上,但是这样是很麻烦的,这时不妨采用上面的属性选择器.

选出所有属性为class的,且值为icon开头的元素.(不得不说真的很牛逼)

类选择器,属性选择器,伪类选择器的权重都是10,像上面的

div为标签选择器,权重为1.后面的为属性选择器,权重为10,权重加起来一共是11.

结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择器里面的子元素(第三个是重点!)

nth-child(n)选择某个父元素的一个或多个特定的子元素,注意括号里的字母只能是n.

n可以是数字,关键字和公式
n如果是数字,就是选择第n个子元素,里面的数字从1开始
n可以是关键字:even偶数,odd奇数
n可以使公式:常见的公式如下(如果n是公式,则从0jisuan,但是第0个元素的个数会被忽略)

比如说,我们想做一个隔行变色的效果,该怎么实现呢?

这时候一个一个数字的填就非常麻烦,这个时候我们可以使用odd(奇数)/even{偶数}将他们选中.

现在就非常简单了吧!

小结:

结构伪类选择器一般用于选择父级里面的第几个孩子.
nth-child对父元素里面所有孩子排序(序号是固定的),先找到第n个孩子,然后看看是否和E匹配.
nth-of type对父元素里面指定子元素进行排序选择.先去匹配E,然后再根据E找到第n个孩子.
关于nth-child(n)我们要知道n是从0开始计算的,要记住常用的公式
如果是无序列表,我们肯定用nth-child更多.
权重问题.类选择器,伪类选择器,属性选择器的权重都是10.

伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构.

before和after创建一个元素,但是属于行内元素.
新创建的这个元素再文档树中识别找不到的,所以我们称为伪元素.
语法:element::before{}
before和after都必须要有content属性.
before在父元素的前面创建元素,after在父元素的后面插入元素.
伪元素选择器和标签选择器一样,权重为1.

用一张图来解释:假设放了一个div盒子,然后写上div::before{},那么就是在div里面的前面放了一个新盒子,after同理,在div盒子里面的后面放了一个新盒子.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        div::before {
            content: "我";
        }
        div::after {
            content: "小猪佩奇";
        }
</style>
</head>
<body>
    <div>
        是
    </div>
</body>
</html>

如果想要更改创建出来的行内元素的大小,我们需要先将他转换成行内块元素才行.

我们之前做过一个土豆网的案例.

每次都需要放一个mask的盒子,这样会使我们的代码变得复杂,结构比样式更重要,所以现在我们要改进一下.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tudou {
            position: relative;
            width: 448px;
            height: 252px;
            background-color: pink;
        }
        用CSS来创建一个盒子,在文档树中是找不到的
        .tudou::before {
            position: absolute;
            content: '';
            width: 448px;
            height: 252px;
            display: none;
            background: rgba(0,0,0,.4) url(../images/arr.png) no-repeat center;
        }
        注意下面当鼠标经过tudou这个盒子时,它的::before的盒子会发生变化
        .tudou:hover::before {
            display: block;
        }
</style>
</head>
<body>
    <div class="tudou">
        <img src="../images/tudou.jpg" alt="">
    </div>
</body>
</html>

之前我们学习过运用伪元素来清除浮动,现在学到了伪元素,可以解释一下原理了.