前端跟随黑马学前端前端连载黑马 CSS

跟随黑马学前端-17，CSS初始化。H5C3新增内容

Joker2Yue2023-01-012023-01-01

第十七天：CSS初始化。H5C3新增内容

'任意’键在哪里？

学习目标

CCS初始化
H5C3新增

CSS初始化

不同浏览器对有些标签的默认值是不同的，为了能够解决不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

简单理解：CSS初始化是指重设浏览器的样式（CSS reset）

每个网页都必须首先进行CSS初始化

* {
    /* 边距清零 */
    margin: 0;
    padding: 0
}

em,
i {
    /* 去掉em和i的斜体 */
    font-style: normal
}

li {
    /* 去掉li的小圆点 */
    list-style: none
}

img {
    /* 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /*取消图片底部有空白缝隙的为标题*/
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button按钮的时候，鼠标会变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* 解决文字模糊 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

.mod_price {
    font-size: 14px;
    color: #e33333
}

.mod_price i {
    margin-right: 3px;
    font-family: arial, sans-serif;
    font-weight: 400;
    font-size: 12px
}

.o2_wide {
    min-width: 1190px
}

.o2_mini {
    min-width: 990px
}

.grid_c1 {
    margin: 0 auto;
    width: 1190px
}

.o2_mini .grid_c1 {
    width: 990px
}

.grid_c2 {
    width: 590px
}

.o2_mini .grid_c2 {
    width: 490px
}

.grid_c4 {
    width: 290px
}

.o2_mini .grid_c4 {
    width: 240px
}

.mod_ver {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    font-size: 0
}

Unicode编码字体：

把中文字体的名称用相对应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码出现乱码的问题

黑体\9ed1\4f53
宋体\5b8b\4f53
微软雅黑\5fae\8f6f\96c5\9ed1

HTML5的新特性

HTML5的新增特性主要是针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等

这些新的特性都有兼容性的问题，基本是IE9+以上版本才支持的，如果不考虑兼容性问题，那么就可以大量使用这些新特性

HTML5新增的语义化标签

以前布局，我们基本使用div来做，div对于搜索引擎来说是没有语义的

下面是新增的语义化div标签：

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

<!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>HTML5新增语义化标签</title>
    <style>
        header {
            height: 120px;
            background-color: pink;
            border-radius: 15px;
            width: 800px;
            margin: 15px auto;
        }

        nav {

            height: 120px;
            background-color: pink;
            border-radius: 15px;
            width: 800px;
            margin: 15px auto;
        }
        section{
            width: 500px;height: 300px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <header>头部标签</header>
    <nav>导航栏标签</nav>
    <section>某个区域</section>
</body>

</html>

注意:

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

HTML5新增的多媒体标签

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

音频<audio>

<audio> 标签定义声音，比如音乐或其他音频流。

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

语法:

1	<audio src="文件地址" controls="controls"></audio>

为了兼容性,我们可以采取下列写法:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

常见属性:

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	URL	规定音频文件的 URL。

视频<video>

<video> 标签定义视频，比如电影片段或其他视频流。

目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始	YES	YES
Safari	YES	NO	NO
Opera	YES 从 Opera 25 版本开始	YES	YES

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

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

语法:

1	<video src="文件地址" controls="controls"></videos>

为了兼容性,我们可以采取下列写法:

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

这样,浏览器将会自上而下依次执行mp4,ogg直到显示视频成功或者显示"您的浏览器不支持 video 标签。"

常见属性:

属性	值	描述
autoplay	autoplay	视频在就绪后自动播放。
controls	controls	向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	循环播放视频
muted	muted	静音播放视频
poster	URL	规定视频的预览图片，直到用户点击播放按钮。
preload	auto (预先加载视频) none(不预先加载)	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

HTML5新增的input标签

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为url类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月份类型
type=“week”	限制用户输入必须为星期类型
type=“number”	限制用户输入必须为数值类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择菜单

HTML5新增的表单属性

属性	值	说明
required	required	表单拥有该元素表示不能为空,表示必填
placeholder	提示文本	表单的提示信息,存在默认值将不显示.有输入信息将会不显示
autofocus	autofocus	自动聚焦,页面加载完成将自动聚焦到指定表单
autocomplete	off/on	当用户在字段中开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项默认情况下已经打开.想要自动提示,需要此input有name属性并且成功提交过
multiple	multiple	可以多选文件提交,用在type=“file”

CSS3新特性

CSS3的现状

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

CSS3新增选择器

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

属性选择器

属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助于类或者id选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性并且值等于val的E属性
E[att^=“val”]	匹配具有att属性且值以val开头的E属性
E[att$=“val”]	匹配具有att属性且值以val结尾的E元素
E[att*=“val”]	匹配具有att属性且值中含有val的E元素

注意:类选择器、属性选择器、伪类选择器，权重为10

<!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>CSS3新增属性选择器</title>
    <style>
        input[value] {
            /* 1. 表示选取input并且input具有value属性的 */
        }

        input[type="text"] {
            /* 2.表示选取input中具有type属性且type属性为text的 */
        }

        div[class^="icon"]{
            /* 3.选择首先是div 然后具有class属性 并且属性值是icon开头的值 */
            color: red;
        }
        section[class$="data"]{
            /* 4.与3 相反，这个是选择末尾的 */
            color: blue;
        }
    </style>
</head>

<body>
    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <input type="text" value="请输入用户名">
    <input type="text">

    <!-- 2. 属性选择器还可以选择属性=值的某些元素-->
    <input type="text">
    <input type="password">

    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1"> 小图标 1</div>
    <div class="icon2"> 小图标 2</div>
    <div class="icon3"> 小图标 3</div>
    <div class="icon4"> 小图标 4</div>
    <div>我是打酱油的</div>

    <!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是孙行者</section>
    <section class="icon2-data">我是行者孙</section>
    <section class="icon3-ico">我是者行孙</section>
</body>

</html>

结构伪类选择器

结构伪类选择器主要是根据文档结构来选择元素，常用于根据父级选择器里面的子元素

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中第n个子元素E
E:fisrt-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

<!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>CSS伪类选择器</title>
    <style>
        /* 1.选择ul中第一个孩子 小li */
        ul li:first-child{
            background-color: pink;
        }
        /* 2.选择ul中最后一个孩子 小li */
        ul li:last-child{
            background-color: pink;
        }
        /* 2.选择ul中第二个孩子 小li */
        ul li:nth-child(2){
            background-color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

nth-child(n)选择某个父元素的一个或多个特定的子元素

n可以是数字、关键字或公式
n如果是数值，就是选择第n个子元素，里面从数字1开始
n关键字：even偶数、odd奇数
n公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

公式取值

2n 偶数

2n+1 奇数

5n 5 10 15…

n+5 从第5个开始（包含第5个）到最后

-n-5 前5个（包含第5个）

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15…
n+5	从第5个开始（包含第5个）到最后
-n-5	前5个（包含第5个）

<!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>CSS伪类选择器</title>
    <style>
        /* 1. 选择其中的偶数孩子 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }

        /* 2. 选择其中的奇数孩子 */
        ul li:nth-child(odd) {
            background-color: gray;
        }

        /* 3.nth-child（n）这里面必须是n 不能是其他的字符 */
        ol li:nth-child(n){
            /* 从0开始，每次加一，向后面计算 */
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ol>
</body>

</html>

nth-child与nth-pf-type的区别

<!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>CSS伪类选择器</title>
    <style>
        /* nth-child会把所有的盒子都排列序号 */
        /* 执行的时候会先看 :nth-child(1)  之后回去看 与类型匹不匹配，这里类型是div */
        section div:nth-child(1){
            background-color: red;
        }
        
        /* nth-pf-type会选择盒子中符合类型的第n个 */
        section div:nth-of-type(1){
            background-color: blue;
        }
    </style>
</head>

<body>
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

</html>

伪元素选择器

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

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

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

<!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>伪类选择器</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        div::before{
            /* 这个content是必须要写的 */
            content:'我';
        }

        div::after{
            content: '帅哥';
        }
    </style>
</head>
<body>
    <div> 是 </div>
</body>
</html>

伪元素的使用

<!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>伪元素选择器使用场景：字体图标</title>
    <style>
        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }
        div::after{
            content:'1';
            position:absolute;
            top: 10px;
            right: 10px;
            
        }
    </style>
</head>

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

</html>

伪元素清除浮动的本质

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒子模型，有两个值：即可指定为content-box、boder-box，这样我们计算盒子大小的方式就发生了改变

可以分为两种情况：

box-sizing:content-box 盒子大小为width+padding+border（以前默认的）
box-sizing:border-box 盒子大小为width

如果盒子模型我们更改了为box-sizing:border-box;那padding和border就不会撑大盒子（前提padding和border不会超过width宽度）

<!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>CSS3盒子</title>
    <style>
        div{
            width: 200px;height: 200px;background-color: pink;
            border: 10px solid red;
            padding: 15px;
            box-sizing: content-box;
        }
        p{
            width: 200px;height: 200px;background-color: pink;
            border: 10px solid red;
            padding: 15px;
            box-sizing: content-box;
            /* CSS3盒子模型 盒子的大小就是width的大小 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>小猪佩奇</div>
    <p>小猪佩奇</p>
</body>
</html>

CSS3的其他特性

图片模糊
计算盒子宽度width:calc函数

CSS3滤镜filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

filter:函数();
/* 例如：*/
filter:blur(5px);
/*blur模糊处理，数值越大越模糊*/

CSS3calc函数

calc()此CSS函数让你在声明CSS属性值时进行一些计算

1	width:calc(100%-80px);

括号里面可以使用+-*/来进行计算，可以进行一些灵活的宽度设置

CSS3过渡（重点）

过渡(transition)是CSS3中的具有颠覆性的特性之一，我们可以在不使用Flash动画或者JavaScript的情况下，当元素从一种动画效果转换为另一种样式时为元素添加效果

过渡动画：是从一个状态过渡到另一个状态

可以让我们的界面更好看、更动感十足，虽然低版本（ie9以下）不支持，但不会影响页面布局

我们经常和:hover一起搭配使用

语法：

1	transition:要过渡的属性花费时间运动曲线何时开始;

属性：想要变化的CSS属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都过渡，加一个all即可
花费时间：单位是秒（必须写单位），比如0.5s
运动曲线：默认是ease（可以省略）
何时开始：单位是秒（必须写单位）可以设置延迟触发的事件，默认是0s（可以省略）

口诀：谁要过渡给谁加

<!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>CSS过渡动画</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color:pink;
            /* transition：变化的属性 花费时间 运动曲线 何时开始; */
            transition: width 1s ease 1s, height 1s ease 1s;
        }
        div:hover{
            width: 400px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

如果先写多个属性，可以利用逗号进行分割

进度条案例

<!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>CSS过渡动画-进度条案例</title>
    <style>
        .bar{
            width: 150px;
            height: 15px;
            border:1px solid red;
            border-radius: 7px;
            padding:1px ;
        }
        .bar_in{
            width: 50%;
            height: 100%;
            background-color: red;
            border-radius: 7px;
            transition: all .5s;
        }
        .bar:hover .bar_in{
            width: 100%;

        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>
</html>

狭义的H5C3

狭义的H5指的是HTML5的相关标签，狭义的C3指的是CSS3相关样式

广义的H5是值HTML5本身+CSS3+JavaScript