CSS常用属性和值_html/css_WEB-ITnose

下载高清图：css常用属性和值（思维导图总结）

1.字体

						<title>font</title>				<style>						h1{							font-family:times,courter;							font-size:150%							font-style:italic;							font-variant:normal;							font-weight:normal;						}						h2{							font-family:serif,times;							font-size:1cm;							font-style:normal;							font-variant:small-caps;							font-weight:900;						}						p{														font:oblique small-caps bold 1cm sans-serif;						}				</style>								<h1>this is header one</h1>				<h2>this is header two</h2>				<p>this is a paragraph </p>		

运行结果：

2.文本

						<title>text</title>				<style>						 h1{								letter-spacing:-3px;								text-align:right;								text-decoration:overline;						 }						 h2{								letter-spacing:0.5cm;								text-align:center;								text-decoration:line-through;						 }						 p{								text-align:left;								text-decoration:underline;								text-indent:1cm;								text-transform:lowercase;						 }						 a{								/*去掉链接下划线*/								text-decoration:none;								text-indent:0.8cm;								text-transform:uppercase;						 }				</style>								<h1>this is header one</h1>				<h2>this is header two</h2>				<p>this is a paragraph </p>				<a href="http://www.baidu.com">baidu</a>		

运行结果：

3.背景

由于博主懒的去找背景的素材，所以运行之后，丑的不堪入目，不过重点没有错误嘛，大家关注代码所对应的效果就好了。

						<title>background</title>				<style>						 body{								background-color:yellow;								background-image:url(a.png);								background-repeat:repeat;								background-attachment:fixed;						}						 h1{								background-color:green;								background-image:url(bb.png);								background-repeat:repeat-x;								background-position:bottom;						 }						 h2{								background-color:blue;						 }						 p{								background-image:url(bb.png);								background-repeat:no-repeat;								height:100px;								background-position:center;						 }						 a{								background:red url(bb.png) no-repeat left center;								padding:10px;						 }b				</style>								<h1>this is header one</h1>				<h2>this is header two</h2>				<p>this is a paragraph </p>				<a href="http://www.baidu.com">aaaaaaaaaaaaaaaaa</a>					

运行结果：

这张截图有点，看起来乱七八糟的，但是根据代码来找效果，也是很快的。很容易搞明白，每一句代码的意思。url就是自己随便哦添加的路径，大家不必在意。

4.边框（PS:加几句关于鼠标指针的代码）

						<title>border</title>				<style>					div{							width:80px;							height:25px;							border-style:solid dotted;							cursor:move;					}					h1{							border-style:solid double dashed inset;							border-top-style:solid;							border-right-style:double;							border-bottom-style:dashed;							border-left-style:inset;							border-width:1px 2px 3px 4px;							/*							设置边框第二种方式：							border-top-width:1px;							border-right-width:2px;							border-bottom-width:3px;							border-left-width:4px;							*/							border-color:red yellow green blue;							cursor:wait;					}					h2{							border:3px solid green;							/*会覆盖上面的border设置*/							border:1px dashed red;							cursor:pointer;					}										</style>								<div>						aaaaaa				</div>				<h1>this is header one</h1>				<h2>this is header two</h2>		

运行结果：

当鼠标移到三个边框上时，鼠标指针会发生相应变化：分别变成移动，等待，还有小手的状态。具体参考

5.列表

						<title>list</title>				<style>										</style>								

• aaaaaaaaaaaaa
• aaaaaaaaaaaaa
• aaaaaaaaaaaaa
• aaaaaaaaaaaaa
• aaaaaaaaaaaaa
• aaaaaaaaaaaaa

1. aaaaaaaaaaaaa
2. aaaaaaaaaaaaa
3. aaaaaaaaaaaaa
4. aaaaaaaaaaaaa
5. aaaaaaaaaaaaa
6. aaaaaaaaaaaaa

运行结果：

截图中所显示的两个列表分别是一个无序列表和一个有序列表。

但是在以后的开发中，我们基本不会使用默认的图像，都是自定义列表前面的图像。style="list-style-type:none.这句代码就是将列表前的符号风格设置为空，然后我们就可以自行添加自己需要的图像了。

document.body.oncopy=function(){
event.returnValue=false;
var t=document.selection.createRange().text;
l4ever = parent.document.location;
var s=”本文来源: 李硕的专栏”;
var y=”原文地址:” + http://blog.csdn.net/wzqnls + ” “;
clipboardData.setData(’Text’,”+t+’\r\n’+s+’\r\n’+y+”);
}