HTML5+CSS3(3)

2019/03/19 22:36
阅读数 3

一、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里面使用连接线

 

 

 

 

 
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
在线直播报名
返回顶部
顶部