在这里不提及CSS3的语法,因为对于目前尚未有软件支持的CSS3,任何语法的探讨都像是空中楼阁,毫无意义可言。以下我就列举一下CSS3中部分新内容。
1、最令人欣喜的一个发现就是用CSS终于也能做出圆角表格了!经常有人在论坛上问怎么做圆角表格,回答无非是用图片或VML技术,这一回,CSS族们也可以骄傲地说一声:CSS同样可以!对应属性:border-radius。2、以往对网页上的文字加特效只能用filter这个属性,这次CSS3中专门制订了一个加文字特效的属性,而且不止加阴影这种效果哦。对应属性:font-effect。3、丰富了对链接下划线的样式,以往的下划线都是直线,这次可不一样了,有波浪线、点线、虚线等等,更可对下划线的颜色和位置进行任意改变,哈哈~~下划线的世界从此不再单一。(还有对应顶线和中横线的样式,效果与下划线类似)对应属性:text-underline-style,text-underline-color,text-underline-mode,text-underline-position。4、我们在做笔记时经常要在文字下点几个点或打个圈什么的,以示重点,CSS3也开始加入了这项功能,这应该在某些特定网页上很有用。对应属性:font-emphasize-style和font-emphasize-position。
除了这些比较醒目的特征外,还有许多的相关属性,只是有的效果看参考图感觉一般,就不提了;还有的碍于本人英文一般,有的并没有看透其所以然,不敢胡乱写上来,望见谅。
题外话:这次的CSS3对日文颇为照顾哦,有几个属性是专门针对日文的,或许W3C觉得英文没有什么可挖掘的了,开始转到亚洲文字上了。
一、 h5是html的最新版本,是14年由w3c完成标准制定。增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验满意度,让开发更加方便。
- h5新增的标签:
video : 表示一段视频并提供播放的用户界面
audio : 表示音频
canvas: 表示位图区域
source: 为video和audio提供数据源
track : 为video和audio指定字母
svg: 定义矢量图
code: 代码段
figure : 和文档有关的图例
figcaption : 图例的说明
time: 日期和时间值
mark: 高亮的引用文字
datalist : 提供给其他控件的预定义选项
keyge: 秘钥对生成器控件
output : 计算值
rogress : 进度条
menu: 菜单
embed: 嵌入的外部资源
menuitem: 用户可点击的菜单项
menu: 菜单
二、 css3被划分为模块,最重要的几个模块包括:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面。
新增属性:
选择器
框模型
背景和边框
border-radius、box-shadow、border-image、
background-size:规定背景图片的尺寸
background-origin:规定背景图片的定位区域
background-clip:规定背景的绘制区域
文本效果(常用)
text-shadow:设置文字阴影
word-wrap:强制换行
word-break
css3提出@font-face规则,规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
2/3D转换
transform:向元素应用2/3D转换
transition:过渡
动画
@keyframes规则:
animation、animation-name、animation-duration等
用户界面(常用)
box-sizing、resize
css3新增伪类
:nth-child()
:nth-last-child()
:only-child
:last-child
:nth-of-type()
:only-of-type()
:empty
:target 这个伪类允许我们选择基于URL的元素,如果这个元素有一个识别器(比如跟着一个#),那么:target会对使用这个ID识别器的元素增加样式。
:enabled
:disabled
:checked
:not