CSS3和HTML5新增特性及使用(保留方便查看)

CSS3

1.边框图片 border-image: url(test.png) 10/10px;  outline:10px solid #ff0;outline-offset:15px;边框的边框，两边框之间距离

2.三角形   span{display:inline-block;border:50px solid transparent;border-top-color:red;border-left-color:red;}

3.背景大小  background-size:50%/100px 200px/cover/contain;//原图50%/宽为100px 200px/覆盖/容纳

4.阴影    box-shadow:red 0px 0px 10px 0px inset/outside;阴影颜色 X偏移 Y偏移 阴影模糊半径 扩展半径

内部/外部显示  阴影累加box-shadow:red 0px 0px 10px 0px inset,green 0px 0px 10px 0px outside;

文本阴影： text-shadow:red 0px 0px 10px; 阴影颜色，X偏移，Y偏移，模糊半径

5.圆角   边框圆角border-radius:5px/10%;   border-radius:50%：圆

border-radius:150px 150px 0px 0px;/ border-radius:20px 100px 0px;/border-radius:20px 100px;

border-top-left-radius:150px;/border-top-left-radius:130px 40px;

6.HSLA   background:hsla(0,100%,100%,0.5); 色调,饱和度,亮度,透明度//(0,0%,100%)白;(0,0%,0%)黑

7.RGB    backgrund:rgb(255,0,0) 三个值的范围为0~255

(255,0,0)红；(0,255,0)绿，(0,0,255)蓝； (255,255,0)黄；(0,0,0)黑，(255,255,255)白

8.渐变   ①线性渐变：background: linear-gradient(#fff, #333);  //由#fff渐变为#333

background: linear-gradient(#000, #f00 50%, #090); //由#00渐变为#f00,并占50%,最后为#090，

background:linear-gradient(0deg,yellow 50px,blue 51px,blue 100px,#F89 101px,#F89 200px);

从下到上黄色高度0-50px，蓝色高度50-100px，#f89高度101-200px

background:linear-gradient(0deg,yellow 50px,blue 100px,#F89 200px);从下到上渐变

重复线性渐变：background:repeating-linear-gradient(45deg,#FFF,#FFF 45px,#ccc 46px)；

②径向渐变：background:radial-gradient(100px 100px,yellow,blue); 从内到外由yellow变为blue，

background:radial-gradient(100px 500px at 50px 10px,yellow,blue);

内部宽100px;高50px的黄色圆在距上面50px左边10px渐变为蓝色

重复径向渐变：background:repeating-radial-gradient(yellow,yellow 20px,blue 21px,blue 40px);

9.White-space处理文字空白：pre保留html中的格式nowrap强制不折行，直到遇到br标签+overflow：

hidde超出部分隐藏+text-overflow:ellipsis;以省略号的形式显示， (overflow:auto;带滚动条的隐藏)

div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}   div:hover{white-space: normal;}文字显示一行，划过全部显示

10.链接字体 @font-face { font-family : name ; src : url( url ) ; }

url('../font/lie_to_me_-_ttf-webfont.otf') format('otf'),  url('../font/lie_to_me_-_ttf-webfont.ttf') format('ttf'),

url('../font/lie_to_me_-_ttf-webfont.woff2') format('woff2'), url('../font/lie_to_me_-_ttf-webfont.woff') format('woff');

11.文本域的自由缩放resize:both;overflow:auto/horizontal/vertical; 整体/高/宽缩放

12.创建伸缩容器  display:flex;伸缩流方向;默认水平/row;竖直;column; 伸缩性：flex:2;容器按比例分配额外空间。

13.缩放    transform-origin:10% 20px;transform:scale(1.5,0.5);以X轴10%，Y轴的20px为中心点

缩放为原来的宽1.5倍，高0.5倍；//只有一个数值时宽高缩放一致。

14.旋转    div{transition:2s;}   div:hover{transform:rotateY(180deg);}  滑过div时2秒旋转180度

15.变形    transform:skew(-30deg,10deg) 内容逆时针倾斜30%；整体顺时针旋转10度；

16.位移    transform:translate(20px,40px);向水平方向位移20px;向竖直方向位移40px;

例：p:hover{ transform:translate(1000px) rotate(360deg);}

模块移动(文字、图片):  两次移动

font:normal 40px/1.5 'Ultra','Curlz MT','Bauhaus 93','Blackoak Std',Courier,Arial;color:#7e9409; -moz-animation: 3s slidein; -webkit-animation: 3s slidein; -webkit-perspective: 100; -moz-perspective: 300px; }

@-moz-keyframes slidein { from {top:-100px;} 85% {top:80%;} to {top:70%;} }

@-webkit-keyframes slidein { from {top:-100px;} 85% {top:80%;} to {top:70%;}    }

17.过渡    p:hover{ transform: translate(1000px); background:blue;color:#000;height:500px; }

p{transition:transform 2s ease-in 0.5s,background 1s ease-out,color 5s ease-in-out,height 1s lincar;}

p:hover{ transform: translate(1000px); background:blue;color:#000;height:500px; }

2s内加速位移1000px且延迟0.5s开始；1s内背景减速变蓝，

5s内字体颜色先加速再减速变白，1s内高度恒速变为500px

18.动画   p:hover{animation-play-state:paused;}

p{animation:a1 5s ease-in;animation-iteration-count:3;animation-direction:alternate;animation-fill-mode:forwards;}

@keyframes a1{ 0%{ transform:translate(0p,0px);} 30%{transform:translate(500px,0px);}

50%{transform:translate(1000px,300px);} 70%{transform:translate(300px,500px);}

100%{transform:translate(1300px,800px)} }

19.鼠标指针变化：变成抓手cursor:pointer;   cursor:move;

HTML5

1.插入音频:  支持格式：Oggvorbis、MP3和WAV

<audio  src=”a.mp3” >    属性:controls包含基本的播放控件(开始、结束、音量、位置)

preload=”auto/metadate/none”  音频文件的下载方式：整个文件/音频时长和开头/不预先下载

Loop/autoplay  无限次播放/自动播放  例：<audio src=”a.mp3” controls preload=”metadate” autoplay >

<source src="soundfile.ogg" type="audio/ogg">调整兼容

2.插入视频： 支持格式：OGG、MP4、WEBM

<video  src=”b.mp4” poster=”1.jpg”>当视频文件失效时,用poster图片代替原图片显示,其它属性与audio相同

<video controls>      <source src="butterfly.mp4" type="video/mp4" >

<source src="butterfly.ogv" type="video/ogg">

<p>两种格式都不支持的浏览器看到的是这行文字</p>

<object type="application/x-shockwave-flash" data="flowplayer-3.2.16.swf" width="500" height="375">

<param name="movie" value="flowplayer-3.2.16.swf">    <param name="flashvars" value='config={"clip":"butterfly.mp4"}' />

<p>如果html5标签和flash格式都不识别，请点击下载

<a href="butterfly.mp4">butterfly.mp4</a>或者<a href="butterfly.ogv">butterfly.ogv</a>  </p>

</object>

</video>

<hr>

<!--flash为主html5为辅，不识别点击下载a-->

<object type="application/x-shockwave-flash" data="flowplayer-3.2.16.swf" width="500" height="375">

<param name="movie" value="flowplayer-3.2.16.swf">

<param name="flashvars" value='config={"clip":"butterfly.mp4"}' />

<video controls>

<source src="butterfly.mp4" type="video/mp4">

<source src="butterfly.ogv" type="video/ogg">

<p>如果html5标签和flash格式都不识别，请点击下载

<a href="butterfly.mp4">butterfly.mp4</a>或者<a href="butterfly.ogv">butterfly.ogv</a>  </p>

</video>

</object>

3.<object>元素定义了在 HTML 文档中嵌入的对象，例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

<object width="400" height="50" data="bookmark.swf"></object>

<object width="100%" height="500px" data="snippet.html"></object>

4.新增html5布局标签

·<article> 标签定义外部的内容。

外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容

·<aside> 页面或站点主题之外的内容,可用在文章的侧栏

·<blockquote> 标签定义摘自另一个源的块引用。

·<center> 标签对其包围的文本进行水平居中处理。

·<figure> 独立于文本流之外的一段内容，如图片和图标等

·<figcaption>  figure中的标题

·<header>文档的页眉

·<footer>文档的页脚

·<nav>导航

·<section>文章的章节

·<detials>包含下拉隐藏效果的内容

·<summary>嵌套在detials中的概要或标题

·<mark>被突出标记的内容

·<meter>计量器    ·<adress>地址标记

·<program>进度指示

4.新增表单标签

<input  type=”search”>   搜索框

<input  type=”search”>   搜索框

<input  type=”email”>    邮箱输入

<input  type=”range”>   显示进度条

<input  type=”tel”>      电话号码输入

<input  type=”number”>  数字输入

<input  type=”URL”>   网址输入

<input  type=”date”>    日期类型(带时间控件)

<input  type=”datetime”>  日期类型(不带时间控件)

<input  type=”week”>    选择星期(带时间控件)

<input  type=”month”>   选择年月(带时间控件)

<input  type=”datetime-local”>年、月、日、时、分(带时间控件)

4.网页title滚动

<script type="text/javascript">

function scroll() {

var titleInfo = document.title;

var firstInfo = titleInfo.charAt(0);

var lastInfo = titleInfo.substring(1, titleInfo.length);

document.title = lastInfo + firstInfo;

}

setInterval("scroll()", 500);

</script>

5.获取地理位置

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟学堂</title>

</head>

<body>

<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>

<button onclick="getLocation()">点我</button>

<div id="mapholder"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script>

var x=document.getElementById("demo");

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition,showError);

}

else

{

x.innerHTML="该浏览器不支持获取地理位置。";

}

}

function showPosition(position)

{

lat=position.coords.latitude;

lon=position.coords.longitude;

latlon=new google.maps.LatLng(lat, lon)

mapholder=document.getElementById('mapholder')

mapholder.style.height='250px';

mapholder.style.width='500px';

var myOptions={

center:latlon,zoom:14,

mapTypeId:google.maps.MapTypeId.ROADMAP,

mapTypeControl:false,

navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}

};

var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);

var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});

}

function showError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED:

x.innerHTML="用户拒绝对获取地理位置的请求。"

break;

case error.POSITION_UNAVAILABLE:

x.innerHTML="位置信息是不可用的。"

break;

case error.TIMEOUT:

x.innerHTML="请求用户地理位置超时。"

break;

case error.UNKNOWN_ERROR:

x.innerHTML="未知错误。"

break;

}

}

</script>

</body>

</html>

附一：.响应式布局

Pc： 1902px   1600px   1366px   1280px

平板  1024px   992px    768px     ipad竖屏768X1024

手机  767px    480px    414px     414X395  375X365

外部样式：

<link rel="stylesheet" href="css/1.css" media="screen">    //user-scalable=no"页面不进行缩放

<link rel="stylesheet" href="css/2.css" media="screen and (max-width:480px)">

//手机页面自适应

<meta name="viewport" content="width:device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no">

<!-- 以下方式只是刷新不跳转到其他页面 -->

<meta http-equiv="refresh" content="10">

<!-- 以下方式定时转到其他页面 -->

<meta http-equiv="refresh" content="5;url=hello.html">

javascript的实现

<script language="javascript" type="text/javascript">

// 以下方式直接跳转window.location.href='hello.html';

// 以下方式定时跳转setTimeout("javascript:location.href='hello.html'", 5000);

</script>

导入样式

<style>   @import url('css/base.css') screen;   @import url('css/1024.css') screen and (max-width:1024px);

@import url('css/767.css') screen and (max-width:767px);

</style>

附二：.圣杯布局

<header>header头部</header>

<nav>nav导航</nav>

<div>

<aside>aside侧栏</aside>

<article>article文章</article>

</div>

<footer>footer</footer>

附三：大型门户站基础css样式命名和应用原则

1.CSS命名规范。

全局样式 base.css 公共块的样式;    首页样式 index.css

内容页面的样式 content.css        频道页面样式 channel.css    详细页面样式 detail.css

2.页面框架结构保留字。

页面容器：＃wrapper

页面头部：#header #head

页面中心内容：#maincontent

页面底部：#footer #foot

横向方位容器1：main，side

横向方位容器2：leftframe，midframe，rightframe

横向分段容器：section，field，column

盒子内容属性：contentbg

盒子上方属性：topbg

盒子下方属性：bottombg

盒子左边属性：leftbg

盒子右边属性：rightbg

3.导航保留字。

导航：nav

主导航：mainnav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

快速菜单：quickmenu

子菜单：submenu

下拉菜单：dropmenu

4.功能保留字。

列表：list

标题：title

摘要：intro

内容：text

按扭：btn

搜索：search

登陆：login

注册：regsiter

提示信息：msg

小技巧：tips

图标: icon

滚动：scroll

附四

(1).一段时间后页面自动跳转：

在head中<meta http-equiv=”refresh” content=”5;url=网页地址(可设置刷新效果)”

(2).网页关键词与介绍：

<meta name="keyword" content="厨房 厨具 卫具 厨房家电 ">

<meta name="description" content="厨房家电系列">
---------------------
作者：周瑜大人
来源：CSDN
原文：https://blog.csdn.net/qq_38266792/article/details/80525061
版权声明：本文为博主原创文章，转载请附上博文链接！