css基本样式总结

1：背景（background）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="MyCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<div>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
    <p>background测试</p>
</div>



</body>
HTML代码
body{
    background-image: url("http://image.tianjimedia.com/uploadImages/2012/236/8N64JM0J1I72.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100px;
}
CSS代码

 

2：文本（text）

<p id="p">  哈哈哈哈哈呵呵呵</p>
<p id="p1"> LLLLLppppp   李鹏  iL </p>
<p id="p2"> LLLLLppppp   李鹏  iL </p>
<p id="p3"> LLLLLppppp   李鹏  iL </p>
HTML代码
#p{
    direction: ltr;  /*（屏幕上）左到右*/
    line-height: 50px;/*段落行高*/
    letter-spacing: 20px;
    text-indent: 5px;
}
#p1{ text-transform: capitalize }  /*每个单词的首字母变为大写*/
#p2{ text-transform: lowercase }   /*每个单词都变为小写*/
#p3{ text-transform: uppercase }   /*每个单词都变为大写*/
CSS代码

效果图：

文本的阴影效果：

text-shadow: 10px 10px 1px red ;  

解释:后面四个分辨为：依次为相对于原来文本左上角的X  -Y  透明度  和文本颜色；

文本的自动换行：

.p{

　　width:100px

　　text-wrap:normal

}

p标签内部  宽度为100px的   自动换行  而且如果是英文它不会截断单词

3：字体

 

    p{
            font-size: 40px;
            font-family: fantasy;
        }
        @font-face {
            font-family: myfont;
            font-weight: bold;
            src: url();
        }
        div{
            font-family: myfont;
        }

 

 @font-face可以引入字体

4：链接

   a:link{ color:#ff0000;
            text-decoration: none;
        }
        a:visited{ color:#00ff00 }
        a:hover{ color:#0000ff }
        a:active{ color: #ff0000}

 

 5：列表

6：表格

  #tb,te,th,td{
            border: 1px solid blueviolet;
            text-align: center;
            background: aqua;
        }

        #tb{
            /*折叠边框*/
            border-collapse: collapse;
            width: 200px;
            height: 200px;
        }

 7：轮廓

 

posted @ 2015-04-03 21:30  李_鹏  阅读(498)  评论(0)  编辑  收藏  举报