初识H5-CSS3.md

时间 2019-11-17

标签 h5 css3.md css 栏目 CSS 繁體版

原文原文链接

HTML5新标签与特性

HTML 发展

文档类型设定

文档类型	文档开头
HTML
XHTML
HTML5

字符设定

：HTML与XHTML中建议这样去写
：HTML5的标签中建议这样去写

经常使用新标签

w3c 手册中文官网 : w3schoolphp

header：定义文档的页眉头部
nav：定义导航连接的部分
footer：定义文档或节的页脚底部
article：定义文章。
section：定义文档中的节（section、区段）
aside：定义其所处内容以外的内容侧边

<header> 语义 :定义页面的头部  页眉</header>
<nav>  语义 :定义导航栏 </nav> 
<footer> 语义: 定义 页面底部 页脚</footer>
<article> 语义:  定义文章</article>
<section> 语义： 定义区域</section>
<aside> 语义： 定义其所处内容以外的内容 侧边</aside>

datalist 标签订义选项列表。请与 input 元素配合使用该元素

<input type="text" placeholder="输入明星" list="star"/> <!-- input里面用 list -->
<datalist id="star">   <!-- datalist 里面用 id 来实现和 input 连接 -->  
  <option>周杰伦1</option>
  <option>周杰伦2</option>
  <option>周杰伦3</option>
  <option>周杰伦4</option>
  <option>周杰伦5</option>
  <option>周杰伦6</option>
</datalist>

fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

<fieldset>
  <legend>用户登陆</legend>  标题
  用户名: <input type="text"><br /><br />
  密　码: <input type="password">
</fieldset>

新增的 input type 属性值

类型	使用示例	含义
email		输入邮箱格式
tel		输入手机号码格式
url		输入url格式
number		输入数字格式
search		搜索框（体现语义化）
range		自由拖动滑块
time		小时分钟
date		年月日
datetime		时间
month		月年
week		星期年

经常使用新属性

属性	用法	含义
placeholder		占位符当用户输入的时候里面的文字消失删除全部文字，自动返回
autofocus		规定当页面加载时 input 元素应该自动得到焦点
multiple		多文件上传
autocomplete		规定表单是否应该启用自动完成功能有2个值，一个是on 一个是off on 表明记录已经输入的值 1.autocomplete 首先须要提交按钮 2.这个表单您必须给他名字
required		必填项内容不能为空
accesskey		规定激活（使元素得到焦点）元素的快捷键采用 alt + s的形式

多媒体标签

embed：标签订义嵌入的内容
audio：播放音频
video：播放视频

多媒体 embed

embed能够用来插入各类多媒体，格式能够是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，能够是相对路径或绝对路径。存在兼容问题.css

<embed src='http://player.youku.com/player.php/sid/XMzU4MzIzMzY1Mg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' 
allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

多媒体还能看到 iframe 标签html

<iframe style="width:704px;height:436px;" src="http://cdn.aixifan.com/player/ACFlashPlayer.out.swf?vid=6550021&ref=http://www.acfun.cn/v/ac4839859" 
id="ACFlashPlayer-re" frameborder="0"></iframe>

多媒体 audio

HTML5经过<audio>标签来解决音频播放的问题。html5

<audio autoplay="autoplay" loop="loop" controls="controls">
  <source src="bgsound.mp3">
  <source src="bgsound.wav">
  <source src="bgsound.ogg>
</audio>

能够经过附加属性能够更友好控制音频的播放，如：css3

autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放若是这个属性不写默认播放一次
因为版权等缘由，不一样的浏览器可支持播放的格式是不同的，以下图供参考：

audio 兼容

多浏览器支持的方案， <source />标签容许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

多媒体 video

HTML5经过<video>标签来解决音频播放的问题。web

<video autoplay controls loop>
  <source src="mp4.mp4">
  <source src="mp4.ogg">
  <source src="mp4.webm">
</video>

一样，经过附加属性能够更友好的控制视频的播放：浏览器

autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
因为版权等缘由，不一样的浏览器可支持播放的格式是不同的，以下图供参考：

video 兼容

多浏览器支持的方案， <source />标签容许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

CSS3

CSS3 选择器

结构(位置)伪类选择器（CSS3)

:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型，n 能够是 2n，2n+1，4n，4n+1
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每一个元素，不论元素的类型，从最后一个子元素开始计数。n 能够是数字、关键词或公式
:nth-child(even) ：偶数个子元素
:nth-child(odd) ：奇数个子元素

li:first-child { /* 选择第一个孩子 */
  color: pink; 
}
li:last-child {   /* 最后一个孩子 */
  color: purple;
}
li:nth-child(4) {   /* 选择第4个孩子 n 表明 第几个的意思 */ 
  color: skyblue;
}

属性选择器

选取标签带有某些特殊属性的选择器，如：input[type=text]app

/* 获取到 拥有 该属性的元素 */
div[class] { /* class 表示 有属性的元素 */
  color: red;
}
div[class^=font] { /* class^=font 表示 font 开始位置就好了 */
  color: pink;
}
div[class$=footer] { /* class$=footer 表示 footer 结束位置就好了 */
  color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置均可以 */
  color: green;
}

<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="24font">属性选择器123</div>
<div class="sub-footer">属性选择器footer</div>
<div class="jd-footer">属性选择器footer</div>
<div class="news-tao-nav">属性选择器</div>
<div class="news-tao-header">属性选择器</div>
<div class="tao-header">属性选择器</div>

伪元素选择器（CSS3)

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；

p::first-letter {
  font-size: 20px;
  color: hotpink;
}
/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}
p::selection {
  background-color: pink;
  color: orange;
}

E::before 和 E::after
在E元素内部的开始位置和结束位建立一个元素，该元素为行内元素，且必需要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

E:after、E:before 在旧版本里是伪元素，CSS3 的规范里 “:” 用来表示伪类，“::” 用来表示伪元素，可是在高版本浏览器下 E:after、E:before 会被自动识别为E::after、E::before，这样作的目的是用来作兼容处理。ide

":" 与 "::" 区别在于区分伪类和伪元素oop

之因此被称为伪元素，是由于他们不是真正的页面元素，html没有对应的元素，可是其全部用法和表现行为与真正的页面元素同样，能够对其使用诸如页面元素同样的css样式，表面上看上去貌似是页面的某些元素来展示，其实是css样式展示的行为，所以被称为伪元素。是伪元素在html代码机构中的展示，能够看出没法伪元素的结构没法审查

注意
伪元素 :before 和 :after 添加的内容默认是 inline 元素，这个两个伪元素的 content 属性，表示伪元素的内容，设置 :before 和 :after 时必须设置其 content 属性，不然伪元素就不起做用。

CSS3盒模型

CSS3 中能够经过 box-sizing 来指定盒模型，便可指定为 content-box、border-box，这样咱们计算盒子大小的方式就发生了改变。能够分红两种状况：

1.box-sizing: content-box 盒子大小为 width + padding + border content-box: 此值为其默认值，其让元素维持W3C的标准 Box Mode

2.box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

注：上面的标注的 width 指的是CSS属性里设置的 width: length，content 的值是会自动调整的。

div:first-child {
  width: 200px;
  height: 200px;
  background-color: pink; 
  box-sizing: content-box;  /* 之前的标准盒模型 w3c */
  padding: 10px;
  border: 15px solid red;
  /* 盒子大小为 width + padding + border content-box: 此值为其默认值，其让元素维持W3C的标准Box Mode */
}
div:last-child {
  width: 200px;
  height: 200px;
  background-color: purple;
  padding: 10px;
  box-sizing: border-box;   /* padding border 不撑开盒子 */
  border: 15px solid red;
  /* 盒子大小为 width 就是说 padding 和 border 是包含到width里面的 */
}

过渡(CSS3)

过渡（transition) 是 CSS3 中具备颠覆性的特征之一，咱们能够在不使用 Flash 动画或 JavaScript 的状况下，当元素从一种样式变换为另外一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另一个状态
帧动画：经过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

在 CSS3 里使用 transition 能够实现补间动画（过渡效果），而且当前元素只要有“属性”发生变化时即存在两种状态(咱们用A和B代指），就能够实现平滑的过渡，为了方便查看用 hover 切换两种状态，可是并不只仅局限于 hove r状态来实现过渡。

transition: 要过渡的属性  花费时间  运动曲线  什么时候开始;
若是有多组属性变化，仍是用逗号隔开。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。单位是秒 s，好比 0.5s，s单位必须写。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果什么时候开始。默认是 0。

transition-timing-function 属性

div {
  width: 200px;
  height: 100px;
  background-color: pink;
  /* transition: 要过渡的属性 花费时间 运动曲线 什么时候开始; */
  transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
  /* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */
}
div:hover {  /* 鼠标通过盒子，咱们的宽度变为400 */
  width: 600px;
  height: 300px
}
transition: all 0.6s;  /* 全部属性都变化用all 就能够了 后面俩个属性能够省略 */

2D变形(CSS3) transform

transform 是 CSS3 中具备颠覆性的特征之一，能够实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，能够取代大量以前只能靠Flash才能够实现的效果。

移动 translate(x, y)

translate 移动

translate(50px,50px);使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

能够改变元素的位置，x、y可为负值；

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）

让定位的盒子居中：

.box {
  width: 400px;
  height: 400px;
  background: pink;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  /* 走的本身的一半 */
}

缩放 scale(x, y)

scale 缩放

transform:scale(0.8,1);能够对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，做用使一个元素缩小；而任何大于或等于1.01的值，做用是让元素放大 1.

旋转 rotate(deg)

能够对元素进行旋转，正值为顺时针，负值为逆时针：

rotate 旋转

transform:rotate(45deg);单位是 deg 度数，表示顺时针旋转45度。也有

transform-origin能够调整元素转换变形的原点

transform-origin 指定转换原点

div{
  transform-origin: left top;transform: rotate(45deg); 
}  /* 改变元素原点到左上角，而后进行顺时旋转45度 */

若是是4个角，能够用 left top这些，若是想要精确的位置，能够用 px 像素。

倾斜 skew(deg, deg)

skew 倾斜

transform:skew(30deg,0deg);经过skew方法把元素水平方向上倾斜30度，处置方向保持不变。可使元素按必定的角度进行倾斜，可为负值，第二个参数不写默认为0。

3D变形(CSS3) transform

2d 只有 x轴 y轴， 3d 还有 z轴

3D变形x、y、z

rotateX()

就是沿着 x 立体旋转.

img {
  transition:all 0.5s ease 0s;
}
img:hover {
  transform:rotateX(180deg);
}

rotateY()

沿着y轴进行旋转

img {
  transition:all 0.5s ease 0s;
}
img:hover {
  transform:rotateX(180deg);
}

rotateZ()

沿着z轴进行旋转

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); 
}

透视(perspective)

透视能够将一个2D平面，在转换的过程中，呈现3D效果。

透视原理：近大远小。
浏览器透视：把近大远小的全部图像，透视在屏幕上。
perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。perspective 通常做为一个属性，设置给父元素，做用于全部3D转换的子元素

透视距离原理：

perspective 透视

目前浏览器都不支持 perspective 属性。Chrome 和 Safari 支持替代的 -webkit-perspective 属性。 -webkit-perspective:500;

translateX(x)

仅水平方向移动（X轴移动），主要目的实现移动效果

translateX X轴移动

translateY(y)

仅垂直方向移动（Y轴移动）

translateY Y轴移动

ranslateZ(z)

transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就必定会说到离什么参照物远或近，在这里参照物就是perspective属性）。好比设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，由于至关于跑到后脑勺去了，正常状况下，是看不到本身的后脑勺的。

translate3d(x,y,z)

其中，x和y能够是长度值，也能够是百分比，百分比是相对于其自己元素水平方向的宽度和垂直方向的高度和；z只能设置长度值。

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。
backface-visibility: visible | hidden; /* 只在 Internet Explorer 十、Firefox、Chrome 以及 Safari 中有效。 */

动画(CSS3) animation

动画是CSS3中具备颠覆性的特征之一，可经过设置多个节点来精确控制一个或一组动画，经常使用来实现复杂的动画效果。语法格式：

animation:动画名称 花费时间 运动曲线  什么时候开始  播放次数  是否反方向;
/* 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意 */

animation 动画属性

@keyframes 动画名称 {
  from{   开始位置   }  0%
  to{    结束    }  100%
}/* from 和 to 能够变成半分比，能够添加多个百分比，相似动画里面的帧 */

animation-iteration-count: infinite;  /* 无限循环播放 默认是1次 */
animation-direction： alternate;   /* 动画应该轮流反向播放 默认是 normal */
animation-play-state: paused;   /* 暂停动画，运行动画是 running */

伸缩布局(CSS3)

CSS3 在布局方面作了很是大的改进，使得咱们对块级元素的布局排列变得十分灵活，适应性很是强，其强大的伸缩性，在响应式开中能够发挥极大的做用。

主轴：Flex 容器的主轴主要用来配置 Flex 项目，默认是水平方向

侧轴：与主轴垂直的轴称做侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下。主轴和侧轴并非固定不变的，经过flex-direction能够互换。

flex 伸缩布局

Flex布局的语法规范通过几年发生了很大的变化，也给Flexbox的使用带来必定的局限性，由于语法规范版本众多，浏览器支持不一致，导致Flexbox布局使用很少

各属性详解

1.flex 子项目在主轴方向缩放比例，不指定 flex 属性，则不参与伸缩分配

min-width 表示最小值， min-width: 280px 最小宽度不能小于 280
max-width: 1280px 最大宽度不能大于 1280

2.flex-direction 调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列
flex-direction: row 水平排列
携程网手机端地址就是用的 flex 布局，携程网

文字阴影(CSS3)

给文字添加阴影效果 Shadow 影子

text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色;
/* 前两项是必须写的。 后两项能够选写。 */

text-shadow 文字阴影属性

背景渐变

在线性渐变过程当中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。兼容性问题很严重。

/* 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 */
background:  -webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；
background: -webkit-linear-gradient(left, red , blue); 
或者
background:  -webkit-linear-gradient(渐变的起始位置， 颜色， 颜色....)；
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);

背景缩放(CSS3)

经过background-size设置背景图片的尺寸，就像咱们设置img的尺寸同样，在移动Web开发中作屏幕适配应用很是普遍。

其参数设置以下：
a) 能够设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，若有溢出部分则会被隐藏。平时用的cover 最多
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('image.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

多背景(CSS3)

以逗号分隔能够设置多背景，可用于自适应布局作法就是用逗号隔开就行了。

一个元素能够设置多重背景图像。
每组属性间使用逗号分隔。
若是设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。

background: url(test1.jpg) no-repeat scroll 10px 20px/70px 90px, url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;