css3学习笔记

最新推荐文章于 2024-08-23 14:03:47 发布

anjiong5599

最新推荐文章于 2024-08-23 14:03:47 发布

阅读量126

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/wddx/p/5258844.html

版权

1、透明度:opacity rgba

<div id="one"></div>
<div id="two"></div>
<style type="text/css">
#one {
	width:100px;
	height:100px;
	background-color:rgb(0,0,0);
	opacity:0.5;
}
#two {
	width:100px;
	height:100px;
	background-color:rgb(0,0,0);
	background-color:rgba(0,0,0,0.5);
	position:relative;
	top:-50px;
	right:-50px;
}
</style>

效果：

2、颜色实例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Color</title>
<style type="text/css">
body {
	background-color:silver;
	color:white;
	padding:20px;
	font-family:Arial,Verdana,sans-serif;}
	h1{
		background-color:#ffffff;
		background-color:hsla(0,100%,100%,0.5);
		color:#64645A;
		padding:inherit;
	}
	p{
		padding:5px;
		margin:0px;
	}
	p.zero{
		background-color:rgb(238,62,128);}
	p.one{
		background-color:rgb(244,90,139);}
	p.two{
		background-color:rgb(243,106,152);}
	p.three{
		background-color:rgb(244,123,166);}
	p.four{
		background-color:rgb(245,240,178);}
	p.five{
		background-color:rgb(246,159,192);}
	p.six{
		background-color:rgb(245,176,204);}
	p.seven{
		background-color:rgb(0,187,136);}
	p.eight{
		background-color:rgb(140,202,242);}
	p.nine{
		background-color:rgb(114,193,240);}
	p.ten{
		background-color:rgb(84,182,237);}
	p.eleven{
		background-color:rgb(48,170,233);}
	p.twelve{
		background-color:rgb(0,160,230);}
	p.thirteen{
		background-color:rgb(0,149,226);}
	p.fourteen{
		background-color:rgb(0,136,221);}
</style>
</head>

<body>
<h1>pH Scale</h1>
<p class="fourteen">14.0</p>
<p class="thirteen">13.0</p>
<p class="twelve">12.0</p>
<p class="eleven">11.0</p>
<p class="ten">10.0</p>
<p class="nine">9.0</p>
<p class="eight">8.0</p>
<p class="seven">7.0</p>
<p class="six">6.0</p>
<p class="five">5.0</p>
<p class="four">4.0</p>
<p class="three">3.0</p>
<p class="two">2.0</p>
<p class="one">1.0</p>
<p class="zero">0.0</p>
</body>
</html>

效果图：

3、垂直对齐

vertical-align：

　　可以选用的属性包括：baseline sub super top text-top middle bottom text-bottom

4、文本缩进:text-index:**px;

5、投影 text-shadow

<style type="text/css">
body {
	background-color:silver;
	color:white;
	padding:20px;
	font-family:Arial,Verdana,sans-serif;}
	h1{
		background-color:#ffffff;
		background-color:hsla(0,100%,100%,0.5);
		color:#64645A;
		padding:inherit;
	}
	p{
		padding:5px;
		margin:0px;
	}
p.ten{
		background-color:#eeeeee;
		color:#666666;
		text-shadow:1px 1px 0px #000000;}
	p.eleven{
		background-color:#dddddd;
		color:#666666;
		text-shadow:1px 1px 3px #666666;}
	p.twelve{
		background-color:#cccccc;
		color:#ffffff;
		text-shadow:2px 2px 7px #111111;}
	p.thirteen{
		background-color:#bbbbbb;
		color:#cccccc;
		text-shadow:-1px -2px #666666;}
	p.fourteen{
		background-color:#aaaaaa;
		color:#ffffff;
		text-shadow:-1px -1px #666666;}
</style>
<body>
<h1>pH Scale</h1>
<p class="fourteen">14.0hello,world!hello,guys!</p>
<p class="thirteen">13.0hello,world!hello,guys!</p>
<p class="twelve">12.0hello,world!hello,guys!</p>
<p class="eleven">11.0hello,world!hello,guys!</p>
<p class="ten">10.0hello,world!hello,guys!</p>
</body>

效果图：

6、文本练习

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本</title>
<style type="text/css">
body{
	padding:20px;}
	h1,h2,h3,a{
		font-weight:normal;
		color:#0088dd;
		margin:0px;}
	h1{
		font-family:Georgia, Times, serif;
		font-size:250%;
		text-shadow:2px 2px 3px #666666;
		padding-bottom:10px;}
	h2{
		font-family:"Gill sans",Arial,sans-serif;
		font-size:90%;
		text-transform:uppercase;
		letter-spacing:0.2em;}
	h3{
		font-size:150%;}
	p{
		font-family:Verdana, Geneva, sans-serif;
		line-height:1.4em;
		color:#665544;}
	p.intro:first-line{
		font-weight:bold;}
		.credits {
			font-style:italic;
			text-align:right;}
		a{
			text-decoration:none;}
		a:hover{
			text-decoration:underline;}
		
</style>
</head>

<body>
<h1>Bsysysyd</h1>
<h2>Tgs syuasch ciudfwc jsfhwu </h2>
<p class="intro">The <a class="breed" href="http://en.wilkpedia.org/wikiBriard">braiard</a> 5uyh89;os hgbosuifvh jkjkjkjkjkjkjkjkjkweil bvhyyrrrrrrrrrrrrf</p>
<h3>Bdi9o3fu Jd93f</h3>
<p>5uyh89;os hgbosuifvh jkjkjkjkjkjkjkjkjkweil bvhyyrrrrrrrrrrrrf 5uyh89;os hgbosuifvh jkjkjkjkjkjkjkjkjkweil bvhyyrrrrrrrrrrrrf 5uyh89;os hgbosuifvh jkjkjkjkjkjkjkjkjkweil bvhyyrrrrrrrrrrrrf5uyh89;os hgbosuifvh jkjkjkjkjkjkjkjkjkweil bvhyyrrrrrrrrrrrrf 5uyh89;os hgbosuifvh jkjkjkjkjkjkjkjkjkweil bvhyyrrrrrrrrrrrrf 5uyh89;os hgbosuifvh jkjkjkjkjkjkjkjkjkweil bvhyyrrrrrrrrrrrrf</p>
<p class="credits">by txy Dsrsucl</p>
</body>

效果图：

转载于:https://www.cnblogs.com/wddx/p/5258844.html

anjiong5599

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3学习笔记

1、透明度:opacity rgba<div id="one"></div><div id="two"></div><style type="text/css">#one { width:100px; height:100px; background-color:rgb(0,0,0); opa...
复制链接

扫一扫