您的位置：首页 > Web前端 > CSS

CSS常用属性和值

2016-04-10 21:47 821 查看

1.字体

[html] view
plain copy

<html>

        <head>

                <title>font</title>

                <style>

                        h1{

                            font-family:times,courter;

                            font-size:150%

                            font-style:italic;

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航