好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

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

1.字体

 		 				 font 				 						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;						}				 		 		 				

this is header one

this is header two

this is a paragraph


运行结果:


2.文本

 		 				 text 				 						 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;						 }				 		 		 				

this is header one

this is header two

this is a paragraph

baidu

运行结果:


3.背景

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

 		 				 background 				 						 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				 		 		 				

this is header one

this is header two

this is a paragraph

aaaaaaaaaaaaaaaaa

运行结果:


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

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

 		 				 border 				 					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;					}										 		 		 				

aaaaaa

查看更多关于CSS常用属性和值_html/css_WEB-ITnose的详细内容...

  阅读:42次