一、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. Virtualization

    time sharing——>virtualization. OS需要low-level machinery mechanisms and high-level intelligence. 前者 ...

  2. sql base and plsql and database

    sql base:  http://www.runoob.com/sql/sql-tutorial.html Oracle系统表整理+常用SQL语句收集: https://www.cnblogs.co ...

  3. java————数组 简单写出一个管理系统

    数组的特点 1,  数组是一块连续的空间,下标描述空间的位置. 2,  下标从0开始,最大下标为数组长度—1.(*.length-1) 3,  数组元素都是变量.(就是每个下标对应的内容).变量的类型 ...

  4. 让你真正了解Java（纯干货）

    “你学习一门技术的最佳时机是三年前,其次是现在.”这句话对于哪一种行业都很适用,如果你已经学习过Java,那么恭喜你你很有先见之明,如果你并不了解Java,这篇文章带你快速掌握Java的几个核心知识点 ...

  5. 选择排序-C#

    选择排序包括:简单选择排序和堆排序 简单选择排序: 基本思路:从所有序列中先找到最小的,然后放到第一个位置.之后再看剩余元素中最小的,放到第二个位置……以此类推 /// <summary> ...

  6. Java工程师可以从事的几大职业

    在重庆,程序员一直被认为是高薪职业,Java作为最受欢迎的语言,是很多初入行的人都会选择的方向.那么学习之后可以从事哪些工作呢?下面小编就给大家介绍一下. 一.大数据技术 Hadoop以及其他大数据处 ...

  7. mysql的事务和数据库锁的关系

    数据库加事务并不是数据就安全来了,事务和锁要分析清楚和配合使用 问题背景处于对高并发的秒杀环节的理解整理如下: 秒杀的时候高并发主要注意1.在秒杀的情况下,肯定不能如此高频率的去读写数据库,会严重造成 ...

  8. vue2-通过axios实现数据请求

    1.通过axios实现数据请求 vue.js默认没有提供ajax功能 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascr ...

  9. LOJ 2547 「JSOI2018」防御网络——思路+环DP

    题目:https://loj.ac/problem/2547 一条树边 cr->v 会被计算 ( n-siz[v] ) * siz[v] 次.一条环边会被计算几次呢?于是去写了斯坦纳树. #in ...

  10. 剑指offer 4.树 重建二叉树

    题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7, ...