CSS常用属性和值

来源：互联网发布：海洋cms自动采集插件编辑：程序博客网时间：2024/06/05 17:46

1.字体

[html] view plain copy
 
<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] view plain copy
 
<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] view plain copy
 
<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] view plain copy
 
<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] view plain copy
 
<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.这句代码就是将列表前的符号风格设置为空，然后我们就可以自行添加自己需要的图像了。

2 0