一、CSS3新增属性用法整理

1、box-shadow(阴影效果)
2、border-color(为边框设置多种颜色)
3、border-image(图片边框)
4、text-shadow(文本阴影)
5、text-overflow(文本截断)
6、word-wrap(自动换行)
7、border-radius(圆角边框)
8、opacity(透明度)
9、box-sizing(控制盒模型的组成模式)
10、resize(元素缩放)
11、outline(外边框)
12、background-size(指定背景图片尺寸)
13、background-origin(指定背景图片从哪里开始显示)
14、background-clip(指定背景图片从什么位置开始裁剪)
15、background(为一个元素指定多个背景)
16、hsl(通过色调、饱和度、亮度来指定颜色颜色值)
17、hsla(在hsl的基础上增加透明度设置)
18、rgba(基于rgb设置颜色,a设置透明度)
二、H5新增的标签
1.article: 标签定义外部的内容。
2.aside:标签定义 article 以外的内容。a
3.audio:h5新增音频标签。没有高宽属性。
4.canvas:h5新增画布标签。
5.command: 定义命令按钮(未测试)
6.datalist:标签定义选项列表。
7.datalist 及其选项不会被想显示出来,它仅仅是合法的输入值列表。
8.details:标签用于描述文档或文档某个部分的细节。
9.figure:标签用于对元素进行组合。
10.figcaption:定义 figure 元素的标题。
11.footer:定义 section 或 document 的页脚。
12.header:定义 section 或 document 的页眉。
13.hgroup:用于对网页或区段(section)的标题进行组合。
14.keygen:标签规定用于表单的密钥对生成器字段
15.mark:标签定义带有记号的文本。
16.meter:通过min="0" max="20"的方式定义度量衡。仅用于已知最大和最小值的度量。
17.nav:定义document或section或article的导航。
18.output:定义不同的输出类型,比如脚本。
19.progress:定义任何类型的任务的进度。
20rp:定义若浏览器不支持 ruby 元素显示的内容
21.rt:定义 ruby 注释的解释
22.ruby:定义 ruby 注释
23section:标签定义文档中的节、区段。比如章节、页眉、页脚或文档中的其他部分。
24source:audio和video的属性之一。为audio和video定义媒介源。
25.summary:为details定义标题。
26.time:定义日期或时间。
27.video:h5新增视频标签。具有高宽属性。
三、CSS3编码规定:

四、属性选择器

[att^=value]:该属性的值以指定值开始。

[att$=value]:该属性的值以指定的值结束。

[att*value]:该属性的值包含指定的值,而无论其位置。

实例

使用[att$=value]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div[class$="i"]{
color: #30f;
font-family: "微软雅黑";
font-size: 16px;
}
</style>
</head>
<body>
<div class="title">该属性的值包含指定的值</div>
<div class="ti">除了Internet explore 6,所有的主浏览器都支持属性选择器</div>
</body>
</html>

  运行结果

五、练习

1.使用RGBA颜色值

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input,
textarea {
padding: 4px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
background: #FFFFFF;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
} input:hover,
textarea:hover,
input:focus,
textarea:focus {
border-color: #C9C9C9;
} label {
margin-left: 10px;
color: #999999;
display: block;
} .submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
}
</style>
</head> <body>
<form>
<p class="name">
<label for="name">姓名</label>
<input type="text" name="name" id="name" />
</p>
<p class="email">
<label for="email">邮箱</label>
<input type="text" name="email" id="email" />
</p>
<p class="submit">
<input type="submit" value="提交" />
</p>
</form>
</body> </html>

运行结果

2.添加阴影效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
-webkit-box-shadow: 2px 2px 10px #06c;
height: 240px;
}
div{
padding: 5px;
margin: 5px;
height: 50px;
width: 150px;
background-color: #ccc;
-webkit-box-shadow: 2px 2px 20px #06c; }
p{
text-shadow: 10px 10px 20px #0066CC;
}
</style>
</head>
<body>
<img src="img/pic2.jpg" />
<div></div>
<p>添加阴影效果</p>
</body>
</html>

  运行结果

3.设计椭圆图形

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 300px;
width: 300px;
background: url(img/bg1.jpg) no-repeat;
border: 1px solid red;
-moz-border-radius: 100px;
-webkit-border-radius:100px ;
border-radius: 100px; }
</style>
</head>
<body>
<div></div>
</body>
</html>

  运行结果

4.定义背景坐标

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
height: 600px;
width: 416px;
border: solid 1px red;
padding: 120px 4em 0;
background: url(img/p3.jpg) no-repeat;
-moz-background-origin: border;
-webkit-background-origin: border;
background-origin: border;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
overflow: hidden;
} div h1 {
font-size: 18px;
font-family: "幼圆";
text-align: center;
} div p {
text-indent: 2em;
line-height: 2em;
font-family: "楷体";
margin-bottom: 2em;
}
</style>
</head> <body>
<div>
<h1>春</h1>
<p>盼望着,盼望着,东风来了,春天的脚步近了。一切都像刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水长起来了,太阳的脸红起来了。小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去,一大片一大片满是的。坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回迷藏。风轻悄悄的,草绵软软的。 </p>
<p>桃树、杏树、梨树,你不让我,我不让你,都开满了花赶趟儿。红的像火,粉的像霞,白的像雪。花里带着甜味,闭了眼,树上仿佛已经满是桃儿、杏儿、梨儿!花下成千成百的蜜蜂嗡嗡地闹着,大小的蝴蝶飞来飞去。野花遍地是:杂样儿,有名字的,没名字的,散在草丛里,像眼睛,像星星,还眨呀眨的。</p>
</div>
</body> </html>

  运行结果

六、问题

鼠标移入onmouseover,移出onmouseout
<a href="#" onmouseover="this.style.fontSize='30px'">注册</a>
在js里面添加的属性名使用驼峰法,在css里面使用连接线
 

HTML5+CSS3(3)的更多相关文章

  1. 前端笔记之HTML5&CSS3(上)新特性&音频视频&本地存储&自定义属性

    一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...

  2. 前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  3. 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  4. 菜鸟学习HTML5+CSS3(一)

    主要内容: 1.新的文档类型声明(DTD) 2.新增的HTML5标签 3.删除的HTML标签 4.重新定义的HTML标签 一.新的文档类型声明(DTD)    HTML 5的DTD声明为:<!d ...

  5. HTML5+CSS3(2)

    一.视频与音频 1.用JavaScript检测音频格式支持 <!DOCTYPE html> <html> <head> <meta charset=" ...

  6. HTML5漫谈(7)——如何保护HTML5应用代码

    独家供稿:移动Labs HTML5应用采用的仍然是Javascript(JS).HTML.CSS 等Web语言,因而其代码保护就是这些Web代码的保护,而HTML5应用主要功能一般采用JS实现,因此J ...

  7. HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素

    欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...

  8. 使用HTML5画布(canvas)生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  9. HTML5测试(二)

    HTML5测试(四) 1.input 元素中,下列哪个类型属性定义了输入电话号码的控件? A.mob B.tel C.mobile D.telephone 答案:B 具有 type 属性的 input ...

随机推荐

  1. Web应用程序的安全问题

    常规的安全问题主要分为以下几大类 一,跨站脚本攻击(XSS) 指的是攻击者向web页面注入恶意的Javascript代码,然后提交给服务器,但是服务器并没有做校验和转义等处理,随即服务器的响应页就被植 ...

  2. 《python for data analysis》第二章,美国1880-2010年出生人口姓名的数据分析

    <利用python进行数据分析>第二章的姓名例子,代码.整个例子的所有代码集成到了一个文件中,导致有些对象名如year同时作为了列名与行名,会打印warning,可分不同的part依次运行 ...

  3. python3 多线程爆破ftp、mysql、ssh

    当然 也支持ip 为 127.0.0.1-255 这样的 字典放到 dict 目录里 链接: https://pan.baidu.com/s/1htchOyN5hK9nmZlWfTiFzA 密码: v ...

  4. 手机游戏引擎 Cocos

    Cocos是全球最受欢迎的移动游戏开发解决方案,整合了Cocos 2d-x.Cocos 2d-js.Cocos Studio.Cocos Code IDE等框架及工具,无论您是开发新手还是行业资深人士 ...

  5. NodeJS 学习笔记

    1. NodeJs的事件模型被称为非阻塞式IO或者事件驱动IO 2. Node.js 几乎每一个 API 都是支持回调函数的. 3. Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现 ...

  6. day-09内存管理

    内存管理 引用计数:垃圾回收机制的依据 # 1.变量的值被引用,该值的引用计数 +1# 2.变量的值被解绑,该值的引用计数 -1# 3.引用计数为0时就会被垃圾回收机制回收​ 引用计数会出现循环引用问 ...

  7. kotlin 编译 运行 hello world

    kotlin 编译器下载地址:https://github.com/JetBrains/kotlin/releases/tag/v1.3.31 解压:kotlin-compiler-1.3.31.zi ...

  8. Python(四) —— 函数

    什么是函数? 把一堆代码放一起就叫函数 函数用来干什么? 不复写代码,提高代码重复利用程度 怎么定义以及调用函数: def fun1(): #定义函数 print('这是一个函数') #函数体,里面什 ...

  9. 事件冒泡(event bubbling)与事件捕捉(event capturing)

    事件捕捉: 单击<div>元素就会以下列顺序触发click 事件. Document => Element html => Element body => Element ...

  10. python 基础之自动类型转换和强制类型转换

    一:自动类型转换 自动类型转换注意针对Number数据类型来说的 当2个不同类型的数据进行运算的时候,默认向更高精度转换 数据类型精度从低到高:bool int float complex #关于bo ...