HTML5新标签和CSS3新样式
2016-12-27 15:42:05 0 举报AI智能生成
html5新标签
作者其他创作
大纲/内容
HTML5
1.html5入门
介绍
追加了本地数据库等web应用的功能
画布canvas
多媒体的video和audio
更多新的标签元素
现代的浏览器都支持 HTML5。
新标签及属性
H5中不支持的元素
center
使文字居中的标签
font
定义字体的标签
strike
定义加删除线的文字
basefont
定义页面中默认的字体、颜色和尺寸
big
定义大号文本
dir
定义目录列表
noframes
定义不支持框架的用户的代替内容
不建议(ifream)
新的语义标签
header
定义section或者document页眉
article
定义文章
使用
论坛帖子
博客文章
新闻故事
评论
aside
定义文章的侧边栏
figure
一组媒体对象及文字
定义独立的流内容(图像,图表,照片,代码)
figcaption
定义figure的标题
section
定义文档中的某个区域。div
footer
定义section或者document的页脚
使用
文档创建者姓名
文档版权信息
使用条款的连接
联系信息
…
nav
定义导航部分
main(不推荐使用)
标签规定文档的主要内容
在一个文档中，不能出现一个以上的 <main> 元素
不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>
IE不支持
mark
定义带有标记的文本
datalist
定义选项列表
与 input 元素配合使用
通过input的list属性跟datalist的id连接
safari不支持
结构
表单元素
日期和时间
date
日期
time
事件
datetime-local
日期和事件
email
必须输入email
url
必须输入url(也就是带有http|https请求头)
提交时检测
number
必须输入数字
range
输入一定范围内的数字值
color
search
tel
对于表单元素还新增了属性
placeholder
提示文字
required
该input是否为必填项
注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
新的全局属性
hidden
影藏某个元素
影藏后,位置被删除
contenteditable
设置是否可以编辑
CSS3
css
选择器
子元素选择器
div > p {}
相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同的父元素
h1 + p {}
同级元素选择器
匹配任何在p元素之后的同级ul元素
p ~ ul {}
属性选择器
[target] 选择带有target属性的所有元素
a[target = _blank] 选择带有target=“_blank”的所有元素
伪类
:before
p:before {}
在每个 <p> 元素的内容之前插入内容
:after
p:after {}
在每个p元素的内容之后插入内容
清浮动原理
<div id="ss"><p>张猛</p><br clear="all"/></div>
#ff:after{content: '';clear: both;display: block;*zoom: 1;}
:first-line
选中某个元素中的第一行文字
:first-letter
选中某个元素中的文字首字母(英文)或者第一个字(中文,日文等汉子)
:not
排除某元素下的某个子元素
p:not(#aa){color: cyan;}
:empty
指定内容为空白的元素
:target
使用target选择器对页面中的某个target元素(该元素的id呗当做页面中的超链接来使用)指定样式
该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用
实现tab切换
:nth-child(n)
p:nth-child(2)
选择属于其父元素的第二个子元素
:nth-last-child(n)
p:nth-last-child(2)
同上，从最后一个元素开始计数
:nth-of-type(n)
p:nth-of-type(2)
选择属于其父元素的第二个p元素
:nth-last-of-type(n)
p:nth-last-of-type(2)
同上，但是从最后一个子元素开始计数
:last-child
p:last-child
选择属于其父元素最后一个子元素，每个p元素
:first-child
UI元素状态伪类选择
:hover
:active
:focus
:enabled
input元素
:disabled
:read-only
:read-write
css3-边框
border-radius
边框圆角度
border-radius: x y z k;
参数课分别写1,2,3,4个,可写像素值,可写百分比
练习
分支主题
border-image
source
图片路径
slice
图片边框向内偏移,用来分解引入的图片,拆分成9份
例如:border-image-slice:10 10 10 10
width
图片边框宽度
outset
边框图像区域超出边框的量
repeat
边框是否应平铺(repeated),铺满(round),拉伸(stretch)
outline
css3-阴影
box-shadow
阴影效果
chrome,safari,firefox,opera支持
box-shadow: 1px 1px 5px red;
box-shadow: inset 1px 1px 5px blue;
inset代表内阴影
text-shadow
文字阴影效果
chrome,safari,firefox,opera支持
text-shadow: 1px 1px 5px blue;
练习
分支主题
css3-背景
新特性
透明背景
背景原点控制
背景剪切控制
渐变背景
background-size
lenght
长度值指定
background-size: 200px 300px;
如果只写一个,第二个默认auto
percentage
以父元素的百分比指定
background-size: 100% 100%;
如果只写一个,第二个默认auto
cover
等比例缩放到完全覆盖容器，背景图像有可能超出容器
contain
将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
auto
真实大小
background-origin
作用：决定图片的原始起始位置
值
border-box
默认
从border放置图片
padding-box
从padding放置图片
content-box
从content放置图片
background-clip
作用：将背景图片做适当的裁剪
值
border-box
默认值
从border往下
padding-box
从padding往下
content-box
从content往下
分支主题
裁剪方法：根据设置的分支部位，图片在这个部位的边缘以外的部分都会不可见
渐变
线性渐变
background:linear-gradient(0deg,red,yellow,green)
第一个参数多种写法
to left bottom
to bottom
10deg
分支主题
径向渐变
background:radial-gradient(at left top,red,yellow)
第一个参数不写默认在中间
字体
1.服务器字体
能够加载服务器端的字体文件，让客户端显示客户端没有安装的字体
http://www.zhaozi.cn/s/all/otf/index_6.php
语法
font-face
@font-face {
font-family: hehe;
src: url("2.otf");
}
p{font-family: hehe;}
2.字体图标
http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
http://fontawesome.dashgame.com
<p class="fa fa-camera-retro"></p> fa-lg
<p class="fa fa-camera-retro fa-2x"></p> fa-2x
使用字体图标的好处
减少兼容性处理
小,性能高
可以通过-size随时改变大小
resize
设置允许拖动元素大小
值
none
不能修改
both
可以同时修改宽高
horizontal
只能修改宽度
vertical
只能修改高度
同时需要设置 overflow: auto;
0 条评论
下一页
