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>
执行结果:
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>
执行结果:
这张截图有点,看起来乱七八糟的。可是依据代码来找效果,也是非常快的。
非常easy搞明确,每一句代码的意思。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>
执行结果:
截图中所显示的两个列表各自是一个无序列表和一个有序列表。
可是在以后的开发中,我们基本不会使用默认的图像,都是自己定义列表前面的图像。
style="list-style-type:none.这句代码就是将列表前的符号风格设置为空,然后我们就能够自行加入自己须要的图像了。
李硕
CSDN博客地址:http://blog.csdn.net/wzqnls