

首页  思维导图  详情



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

url

必须输入url(也就是带有http|https请求头)

提交时检测

number

必须输入数字

range

输入一定范围内的数字值

color

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元素的内容之后插入内容

清浮动原理

#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;

 Collect

Get Started

HTML5

 Collect

Get Started

CSS3

 Collect

Get Started

响应式Web设计HTML5和CSS3实战第2版

 Collect

Get Started

Html5





0 条评论

下一页