一、HTML5的新特性
1.1新增标签
-
:头部标签 - :内容标签
-
:定义文档某个区域
<body>
<header>头部标题</header>
<nav>:导航标签</nav>
<acticle>:内容标签</acticle>
<section>:定义文档某个区域</section>
<aside>:侧边栏标签</aside>
<footer>:尾部标签</footer>
</body>
1.2新增的多媒体标签
1.1、 视频一常见属性
1.2、音频
1.3、HTML新增的input类型
所写代码必须包含在表单域里面
<form action="">
<ul>
<li> 邮箱：<input type="email"> </li>
<li> 网站：<input type="url"> </li>
<li> 日期：<input type="date"> </li>
<li>时间： <input type="time"> </li>
<li> 数量：<input type="number"> </li>
<li> 手机号码：<input type="tel"> </li>
<li> 搜索：<input type="search"> </li>
<li> 颜色： <input type="color"> </li>
<li> <input type="submit"> 提交</li>
</ul>
</form>
1.4、HTML新增表单属性
二、CSS新增特性
1、CSS3新增属性选择器（权重为10）
<style>
input[value]{ /* 选择的这个元素 必须是input 但是同时具有value这个属性 */
background-color: pink;
}
input[type=text]{
color: skyblue;
}
div[class^=icon]{ /* 选择首先是div 然后具有class属性 并且属性值 必须是icon开头的这些元素 */
color: pink;
}
section[class$=data]{ /* 选择首先是section 然后具有class属性 并且属性值 必须是icon结尾的这些元素 */
color: blueviolet;
}
span[class*=z]{ /* 选择首先是span 然后具有class属性 并且属性值 必须含有“ Z”的这些元素 */
font-weight: 700px;
color: lawngreen;
}
</style>
<body>
<!-- 1、利用属性选择器就可以不用借助于类或id选择器 -->
<!-- <input type="text" value="请输入用户名">
<input type="text"> -->
<!-- 2、属性选择器还可以选择属性=值的某些元素 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 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>
<!-- 5、匹配属性中有包含某些字段的元素 -->
<span class="iconz">加油鸭豆沙包</span>
<span class="icon">加油鸭豆牛包</span>
<span class="iconz">加油鸭干饭王</span>
<span class="iconz">永不放弃</span>
</body>
2、结构伪类选择器
<style>
ul li:first-child{ /* 选择ul里面的第一个孩子 */
background-color: pink;
}
ul li:last-child{ /* 选择ul里面的最后一个孩子 */
background-color: skyblue;
}
ul li:nth-child(2){ /* 选择了第二个孩子*/
background-color: red;
}
</style>
1.1、nth-child(n)选择某一个元素的一个或多个特定的子元素
- n 可以是数字，关键字和公式
- n如果是数字，就是选择第n个子元素开始，里面从数字1开始.
- n也可以是关键字：even偶数，odd奇数
<style>
ul li:nth-child(even){ /* 1、把所有的偶数even的孩子选出来 */
background-color: yellow;
}
ul li:nth-child(odd){ /* 1、把所有的奇数odd的孩子选出来 */
background-color: greenyellow;
}
/* ol li:nth-child(n){ 从0开始往后 每次加1 往后面计算 这里面必须是n 不难是其他字母 相当于选择了所以的孩子
background-color: pink;
} */
ol li:nth-child(2n){ /* 如果写2n 等于选择了所有的偶数 */
background-color: pink;
}
ol li:nth-child(2n+1){ /* 如果写2n+1 等于选择了所有的奇数 */
background-color: skyblue;
}
</style>
1.2、nth-child 和nth-of-type的区别
-
1.nth- child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
-
2.nth-of-type对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子
<style>
/* nth-child 和nth-of-type的区别 */
/* nth-child会把所有的盒子都排列序号 */
/* 执行的时候首先看 ：nth-child(1) 之后再回去看前面的div*/
section div:nth-child(1){
background-color: red;
}
/* nth-of-type会把指定元素的盒子都排列序号 */
/* 执行的时候首先看div指定的元素 之后再回去看：nth-child(1)第几个孩子*/
section div:nth-of-type(1){
background-color: skyblue;
}
</style>
3、伪元素选择器（重点）
- 伪元素选择器可以帮助我们利用CSC创建新标签元素，而不需要HM标签，从而简化HTM结构。
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- before和 after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法: element: before
- before和 after必须有 content属性
- before在父元素内容的前面创建元素， after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
- 1.1伪元素选择器使用字体图标
<style>
div{
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after{
position: absolute;
top: 10px;
right: 10px;
font-family: "iconfont";
content: "\e6a1";
}
</style>
<body>
<div></div>
</body>
1.2伪元素选择器仿土豆网效果
<style>
.box::before{
content: '';
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
}
.box:hover::before{
display: block;
}
</style>
1.3伪元素选择器清除浮动
<style>
clearfix: after
content: '';
display: block
height: 0;
clear: both;
visibility: hidden;
clearfix:before, .clearfix: after {
content:'';
display: table; /* 转换成块级元素并且一行显示*/
}
- List item
clearfix:after {
clear: both;
}
</style>
三、CSS3盒子模型
- CSS3中可以通过 box- sizing 来指定盒模型，有2个值:即可指定为 content-box、 border-box，这样我们
计算盒子大小的方式就发生了改变
可以分为两种情况： - 1.box-sing: content -box盒子大小为width+ padding+ border（以前默认的）
- 2.box-sizing: border-box盒子大小为width
- 3.如果盒子模型我们改为了box- sizing; border-box，那padding和 border就不会撑大盒子了（前提是
padding 和 border不会超过width宽度）
3.1、CSS3滤镜filter
- filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
3.2、CSS3 calc函数
- calc{ }此CSS函数让你在声明CSS属性值时执行一些计算。
<style>
.father{
width: 300px;
height: 200px;
background-color: pink;
}
.son{
width: calc(100% - 30px); /* 注意中间要有空格 */
height: 50px;
background-color: aqua;
}
</style>
<body>
<div class="father">
<!-- 需求我们的子盒子永远比父盒子小30px -->
<div class="son"></div>
</div>
</body>
3.3 CSS3过渡（重点）
- transition:要过渡的属性 花费时间 运动曲线 何时开始; （谁过度给谁加）
- 1、属性:想要变化的css属性，宽度髙度背景颜色内外边距都可以。如果想要所有的属性都
变化过渡，写一个叫就可以 - 2、花费时间:单位是秒（必须写单位）比如055
- 3、运动曲线:默认是ease（可以省略）
- 4、何时开始:单位是秒（必须写单位）可以设置延迟触发时间默认是0s（可以省略）
<style>
div{
/* 哪个属性想要变化 transition 就写在哪 */
width: 200px;
height: 200px;
background-color: pink;
/* transition: 变化的属性 花费的时间 运动曲线 何时开始; */
/* transition: width 1s ease 0s; */
/* transition: width .5s, height .5s; 多个属性写在一起 */
/* transition: all 1s; /* 如果想要多个属性都变化 ，属性写all就可以了 */
}
div:hover{
width: 400px;
height: 500px;
background-color: skyblue;
}
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
