HTML5 & CSS3
以下都是有兼容性问题的
- 新的标签
- 新的表单
- 新的表单属性
1. 新增的语义化标签
2. 多媒体标签(video/audio)
- vedio
支持格式MP4 WebM Ogg,一般就MP4就可以了
语法:
/*
1.controls 控件
2.mute google默认是不自动播放的加上这个就可以了
3.autoplay 自动播放
2. width / height 宽度和高度
3. loop 重复播放
4. poster 加载等待的图片
*/
<video src="文件地址" controls="controls"></video>
低版本浏览器不支持有的格式，可以写全
<video controls="controls">
<source src="move.mp4" type="video/mp4">
<source src="move.ogg" type="video/ogg">
您的浏览器不支持video格式
</video>
- audio
支持格式mp3,Wav,Ogg，一般来说MP3就可以了
/*
1.autoplay
2. controls 控件
3. loop 重复播放
4. src
*/
<audio src="文件地址" controls="controls"></audio>
<audio controls="controls">
<source src="haha.mp3" type="audio/mp3">
<source src="haha.ogg" type="audio/ogg">
您的浏览器不支持audio格式
</video>
3. input类型(新增的表单)
基本格式:
<input type="email">
url限制链接类型 date日期类型 time时间类型 month月类型
week周类型 number数字类型 tel 手机号码 search搜索框 color生成一个颜色选择表单
3.1. HTML5新增的表单属性
1. required:required; 必填
2. placeholder
3. autofocus:autofocus; 自动聚焦 网页加载完自动定位到表单
4. autocompleted:on | off;
5. multiple:multiple 多选文件提交(input type="file" multiple:multiple)
placeholder可以通过伪元素来修改里面的颜色
input::placeholder {
color:pink;
}
4. CSS3选择器(属性选择器，结构伪类选择器，伪元素选择器)
4.1. 属性选择器
1.情况一
/*必须是input必须里面有value属性*/
input[value] {
color:pink;
}
/*以前都是id选择器和class选择器*/
<input type="text" value="请输入用户名">
<input type="text" value="">
2.情况二(这个是重点，属性=值)
input[type='text'] {
color:pink;
}
<input type="text" value="" name="" id="">
<input type="password" name="" id="">
3.情况三(选择属性开头的某些元素)
div[class^=icon]{
/*首先选择的是div具有class属性并且是icon开头的这些元素*/
}
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
4.情况四(选择属性结尾的某些元素)
section[class$=date]{
clolor: blue
}
<section class="icon1-date">123</section>
<section class="icon2-date">456</section>
<section class="icon3-icon">789</section>
5.情况五(只要值里面有就会被选中)
section[class*=icon]{
clolor: blue
}
<section class="icon1-date">123</section>
<section class="icon2-date">456</section>
<section class="icon3-icon">789</section>
重点:类选择器，属性选择器，伪类选择器，权重为10
4.2. 结构伪类选择器(根据问的那个结构选择的,常用于父级选择器里面的子元素)
总结:
4.3. 伪元素选择器(重点)，属于行内元素，权重是1
可以帮助我们利用css创建新的标签，而不需要html，简化html，比如说这个三角形，小的样式
为什么叫伪元素选择器? 在文档树中是找不到的
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
语法:
element::before{
content:''; //这个属性是必须要有的
}
伪元素选择器和标签选择器一样的权重是1
4.3.1 伪元素配合字体图标使用
4.3.2 伪元素清除浮动的本质
方法一:
.clearfix:after { /*单标签是为了照顾低版本浏览器，也可以写成.clear::after*/
content:""; /*伪元素必写属性*/
display:block; /*插入的元素必须是块级元素才能起效果*/
height:0; /*不要看见这个元素*/
clear:both; /*核心清除浮动代码*/
visibility:hidden; /*visibility:hidden隐藏保留原来的位置display:none隐藏不保留原来的位置*/
}
方法二:
.clearfi:befor,.clearfix:after {
content:"";
display:table; /*转换为块级元素，并且在一行显示*/
}
.clearfix:after {
clear:both;
}
5. CSS3的盒子模型
CSS3可以通过box-sizing来指定盒模型，有两个值content-box,border-box
box-sizing:content-box这个就是以前的模式box-sizing:border-box新的模式盒子的大小就是width 盒子有宽度给padding不会撑大盒子
其它特性
- css3滤镜filter(图片变模糊，颜色偏移)
filter:blur(5px),数组越大越模糊，数值要加px单位 - calc 函数 在声明css属性的时候执行一些计算
width:calc(100%-80px)可以是(+ - * /)
6. CSS3过渡效果 transition
重点:谁做过渡给谁加
语法:
/*
transition: 要过渡的属性 花费的时间 运动曲线 延时出发时间
1.属性 宽度 高度 颜色 内外边距 或者全部都变话就是all
2.单位是秒 0.5s
3.运动曲线 默认ease
4. 延时出发时间 默认是0
*/
div {
width:200px;
height:300px;
background-color:pink;
transition:width .5s;
}
div:hover {
width:400px;
}
经常和:hover 一起配合使用
7. 2D转换(transform)以及相关案例
- 移动
translate - 旋转
rotate - 缩放
scale
网页中的 X越往右越大，越往左越小
网页中的 Y越往下越大，越往上越小
7.1 移动 translate(内让盒子移动的方法:定位，外边距，移动)
基本语法:
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
重点:
- 2D转换是沿着x轴和y轴移动的
2. 不会影响其他盒子的位置
3. translate的百分比是相对于自身的
4. 对行内标签没有效果
案例:让盒子水平居中垂直居中，定位和盒子translate混合运用
/*让盒子水平居中，垂直居中*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>让盒子水平居中，垂直居中</title>
<style>
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
/* 以前的这边的值都是要手动去计算的，不是很方便
margin-top: -100px;
margin-left: -100px;
*/
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
7.2旋转 rotate
语法:
transform:rotate(度数);
重点：
rotate(度数)后面加单位rotate(45deg)- 默认是以元素中心点旋转的
- 度数为正 顺时针旋转 度数为负值 逆时针旋转
- 和
transition配合使用
案例:CSS3书写三角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3书写三角</title>
<style>
div {
position: relative;
width: 200px;
height: 20px;
border: 1px solid #ccc;
}
div::after {
content: '';
position: absolute;
top: 2px;
right: 10px;
width: 10px;
height: 10px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
transform: rotate(45deg);
/* 谁做动画给谁加 */
transition: all 0.2s;
}
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
7.2.2 旋转中心点 (transform-origin)
- 语法:
transform-origin: x y;
- 重点
- 后面的 x y 用空格隔开
x y默认的转换中间点是元素的中心点(50% 50%)- 除了给
x y像素，还可以把这个值设置成方位名字top right center left bottom
7.3 scale 缩放
语法:
transform:scale(x, y);
重点：
**优势:**放大的是后，不会影响到其他的盒子
7.3.1 2D转换的综合写法
/*当同时有位移和其他属性的时候，记得要将位移放在最前面*/
transform: translate(100px,200px) rotate(200deg) scale(1.2);
8.animation(动画)
相比于过渡，动画可以实现更多的变化，更多的控制，连续自动播放灯效果。更加强大一些。
使用步骤:
- 先定义动画
- 再调用动画
语法
/*或者是from to*/
@keyframes 动画名称{
0% {
width:100%
}
100% {
width:20%
}
}
/*---------------------------*/
div {
animation:move;
animation-duration:2s;
}
/*常用的一些属性*/
3. animation-duration: 经过的时常
4. animation-timing-function 动画曲线
5. animation-delay 规定延迟多久开始
6. animation-iteration-count:infinite; 无限次数
7. animaiton-deraction:normal; 是否反复播放 反方向就写aternate;
8. animation-fill-mode:forwards(保持状态); backwards(回到起始位置);
9. animation-play-state:running; paused;
简写:
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态;
animation:move 5s linear 2s infinite alternate;
9. 3D转换
语法:
transform:translateX();
transform:translateY();
transform:translateZ();
transform:translate3D(X,Y,Z);
视距就是人眼睛到屏幕的距离，单位是px 距离越近物体越大
透视写在被观察元素的父盒子上 perspective
10. 3D旋转
语法:
transform:rotateX(45deg);
transform:rotate3D(x,y,z,deg);
transform:rotate3D(1,1,0,45deg);
/*1,1,0是沿着对角线旋转的*/
- 3D呈现 transfrom-style
重点: 代码一定要写给子盒子
私有前缀:
-moz--
228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
