CSS常用属性和值

浏览数：24 / 时间：2015年06月09日

1.字体

<html>
		<head>
				<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>
		</head>
		<body>
				<h1>this is header one</h1>
				<h2>this is header two</h2>
				<p>this is a paragraph </p>
		</body>
</html>

运行结果：

2.文本

<html>
		<head>
				<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>
		</head>
		<body>
				<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>
		</body>
</html>

运行结果：

3.背景

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

<html>
		<head>
				<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>
		</head>
		<body>
				<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>
			


		</body>
</html>

运行结果：

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

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

<html>
		<head>
				<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>
		</head>
		<body>
				<div>
						aaaaaa
				</div>
				<h1>this is header one</h1>
				<h2>this is header two</h2>
		</body>
</html>

运行结果：

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

5.列表

<html>
		<head>
				<title>list</title>
				<style>
						
				</style>
		</head>
		<body>
				<ul style="list-style-type:none; list-style-image:url(bb.png)">
						<li>aaaaaaaaaaaaa</li>
						<li>aaaaaaaaaaaaa</li>
						<li>aaaaaaaaaaaaa</li>
						<li>aaaaaaaaaaaaa</li>
						<li>aaaaaaaaaaaaa</li>
						<li>aaaaaaaaaaaaa</li>
				</ul>
				<ol style="list-style-type:upper-roman">
						<li>aaaaaaaaaaaaa</li>
						<li>aaaaaaaaaaaaa</li>
						<li>aaaaaaaaaaaaa</li>
						<li>aaaaaaaaaaaaa</li>
						<li>aaaaaaaaaaaaa</li>
						<li>aaaaaaaaaaaaa</li>
				</ol>
		</body>
</html>

运行结果：