CSS常用属性和值

CSS常用属性和值

下载高清图:css常用属性和值(思维导图总结)

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>

运行结果:

CSS常用属性和值

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>

运行结果:

CSS常用属性和值

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>

运行结果:

CSS常用属性和值

这张截图有点,看起来乱七八糟的,但是根据代码来找效果,也是很快的。很容易搞明白,每一句代码的意思。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>

运行结果:

CSS常用属性和值

当鼠标移到三个边框上时,鼠标指针会发生相应变化:分别变成移动,等待,还有小手的状态。具体参考<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>

运行结果:

CSS常用属性和值

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

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



李硕

CSDN博客地址:http://blog.csdn.net/wzqnls

CSS常用属性和值

上一篇:jquery messagetip信息语提示控件


下一篇:nodeJS实战