码迷,mamicode.com
首页 > Web开发 > 详细

CSS之常用样式

时间:2017-02-25 14:01:00      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:xhtml   xmlns   背景   upper   合并   orm   操作   字体   大小写   

1、对背景、文本的操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    
    /*操作背景的属性 */
    body{
        /*background-color:#CCC;  设置背景颜色*/
        background-image:url(2.jpg);
        background-repeat:no-repeat;  /*  设置背图片是否要重复 */
        background-position:370px 100px; /* 设置背景图片的位置, 第一个参数是左上角的左边距, 第二个参数是左上角的上边距 */
    }
    
    
    /* 操作文本的样式 */
    
    div{
        color:#F00;       /*设置字体的颜色*/
        font-size:16px;   /*设置字体的大小*/
        line-height:40px;             /*设置行高*/
        letter-spacing:10px;      /*设置字体之间的间距*/
        text-align:center;       /*设置文本的位置*/
        text-decoration:none;    /*设置文本得修饰(线)*/ 
        text-transform:uppercase;    /*转换字体的大小写*/
        
    }
    
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <div>
    <pre>
                   seven步诗
            煮豆燃豆萁,豆在釜中泣。
            本是同根生,相煎何太急。
    </pre>
    </div>

</body>
</html>

 技术分享

 

2、对表格的操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

    table{
        /*border-collapse:collapse; 合并表格的边框*/
        border-spacing:20px; /* 设置单元格的边框与表格的边框距离*/
        table-layout:fixed;/*设置单元格的列宽*/
    }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <table border="1px" width="400px" height="300px" align="center" >
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>人品</th>
            </tr>
            
            
            <tr>
                <td>张三</td>
                <td>98</td>
                <td></td>
            </tr>
           
           
            <tr>
                <td>李四</td>
                <td>50</td>
                <td>极好极好极好极好极好极好极好极好极好极好极好极好极好极好极好</td>
            </tr>
            
            
            <tr>
                <td>综合测评</td>
                <td >不错</td>
            </tr>
        
        
    </table>

</body>
</html>

 技术分享

3、设置边框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    /* 
        div默认是没有边框呃。
    */
    
    div{
        width:100px;
        height:100px;
        border-style:dotted solid double ; /* 设置边框的样式  上 右 下 左*/(缺少时上下一样,左右一样)设置边框分格
        border-color:#F00;
        border-bottom-color:#0FF;  /*单独设置底边*/
        border-top-width:100px;
    }


</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <div>这个是第一个div</div>
    
</body>
</html>

 

CSS之常用样式

标签:xhtml   xmlns   背景   upper   合并   orm   操作   字体   大小写   

原文地址:http://www.cnblogs.com/mswangblog/p/6441581.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!