首页 > 代码库 > CSS之常用样式

CSS之常用样式

2024-09-05 23:03:49   217人阅读

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之常用样式


联系
我们