CSS常用属性和值

1.字体

[html] view
plain copy

1. <html>  
2.         <head>  
3.                 <title>font</title>  
4.                 <style>  
5.                         h1{  
6.                             font-family:times,courter;  
7.                             font-size:150%  
8.                             font-style:italic;  
9.                             font-variant:normal;  
10.                             font-weight:normal;  
11.                         }  
12.                         h2{  
13.                             font-family:serif,times;  
14.                             font-size:1cm;  
15.                             font-style:normal;  
16.                             font-variant:small-caps;  
17.                             font-weight:900;  
18.                         }  
19.                         p{  
20.                               
21.                             font:oblique small-caps bold 1cm sans-serif;  
22.                         }  
23.                 </style>  
24.         </head>  
25.         <body>  
26.                 <h1>this is header one</h1>  
27.                 <h2>this is header two</h2>  
28.                 <p>this is a paragraph </p>  
29.         </body>  
30. </html>  

运行结果：

2.文本

[html] view
plain copy

1. <html>  
2.         <head>  
3.                 <title>text</title>  
4.                 <style>  
5.                          h1{  
6.                                 letter-spacing:-3px;  
7.                                 text-align:right;  
8.                                 text-decoration:overline;  
9.                          }  
10.                          h2{  
11.                                 letter-spacing:0.5cm;  
12.                                 text-align:center;  
13.                                 text-decoration:line-through;  
14.                          }  
15.                          p{  
16.                                 text-align:left;  
17.                                 text-decoration:underline;  
18.                                 text-indent:1cm;  
19.                                 text-transform:lowercase;  
20.                          }  
21.                          a{  
22.                                 /*去掉链接下划线*/  
23.                                 text-decoration:none;  
24.   
25.                                 text-indent:0.8cm;  
26.                                 text-transform:uppercase;  
27.                          }  
28.   
29.                 </style>  
30.         </head>  
31.         <body>  
32.                 <h1>this is header one</h1>  
33.                 <h2>this is header two</h2>  
34.                 <p>this is a paragraph </p>  
35.                 <a href="http://www.baidu.com">baidu</a>  
36.         </body>  
37. </html>  

运行结果：

3.背景

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

[html] view
plain copy

1. <html>  
2.         <head>  
3.                 <title>background</title>  
4.                 <style>  
5.                          body{  
6.                                 background-color:yellow;  
7.                                 background-image:url(a.png);  
8.                                 background-repeat:repeat;  
9.                                 background-attachment:fixed;  
10.                         }  
11.                          h1{  
12.                                 background-color:green;  
13.                                 background-image:url(bb.png);  
14.                                 background-repeat:repeat-x;  
15.                                 background-position:bottom;  
16.                          }  
17.                          h2{  
18.                                 background-color:blue;  
19.                          }  
20.                          p{  
21.                                 background-image:url(bb.png);  
22.                                 background-repeat:no-repeat;  
23.                                 height:100px;  
24.                                 background-position:center;  
25.                          }  
26.                          a{  
27.                                 background:red url(bb.png) no-repeat left center;  
28.                                 padding:10px;  
29.                          }  
30. b  
31.                 </style>  
32.         </head>  
33.         <body>  
34.                 <h1>this is header one</h1>  
35.                 <h2>this is header two</h2>  
36.                 <p>this is a paragraph </p>  
37.                 <a href="http://www.baidu.com">aaaaaaaaaaaaaaaaa</a>  
38.               
39.   
40.   
41.         </body>  
42. </html>  

运行结果：

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

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

[html] view
plain copy

1. <html>  
2.         <head>  
3.                 <title>border</title>  
4.                 <style>  
5.                     div{  
6.                             width:80px;  
7.                             height:25px;  
8.                             border-style:solid dotted;  
9.                             cursor:move;  
10.                     }  
11.                     h1{  
12.                             border-style:solid double dashed inset;  
13.                             border-top-style:solid;  
14.                             border-right-style:double;  
15.                             border-bottom-style:dashed;  
16.                             border-left-style:inset;  
17.                             border-width:1px 2px 3px 4px;  
18.                             /*  
19.                             设置边框第二种方式：  
20.                             border-top-width:1px;  
21.                             border-right-width:2px;  
22.                             border-bottom-width:3px;  
23.                             border-left-width:4px;  
24.                             */  
25.                             border-color:red yellow green blue;  
26.                             cursor:wait;  
27.                     }  
28.                     h2{  
29.                             border:3px solid green;  
30.                             /*会覆盖上面的border设置*/  
31.                             border:1px dashed red;  
32.                             cursor:pointer;  
33.   
34.                     }  
35.                           
36.                 </style>  
37.         </head>  
38.         <body>  
39.                 <div>  
40.                         aaaaaa  
41.                 </div>  
42.                 <h1>this is header one</h1>  
43.                 <h2>this is header two</h2>  
44.         </body>  
45. </html>  

运行结果：

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

5.列表

[html] view
plain copy

1. <html>  
2.         <head>  
3.                 <title>list</title>  
4.                 <style>  
5.                           
6.                 </style>  
7.         </head>  
8.         <body>  
9.                 <ul style="list-style-type:none; list-style-image:url(bb.png)">  
10.                         <li>aaaaaaaaaaaaa</li>  
11.                         <li>aaaaaaaaaaaaa</li>  
12.                         <li>aaaaaaaaaaaaa</li>  
13.                         <li>aaaaaaaaaaaaa</li>  
14.                         <li>aaaaaaaaaaaaa</li>  
15.                         <li>aaaaaaaaaaaaa</li>  
16.                 </ul>  
17.                 <ol style="list-style-type:upper-roman">  
18.                         <li>aaaaaaaaaaaaa</li>  
19.                         <li>aaaaaaaaaaaaa</li>  
20.                         <li>aaaaaaaaaaaaa</li>  
21.                         <li>aaaaaaaaaaaaa</li>  
22.                         <li>aaaaaaaaaaaaa</li>  
23.                         <li>aaaaaaaaaaaaa</li>  
24.                 </ol>  
25.         </body>  
26. </html>  

运行结果：

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

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