2. css表格属性、文本属性、列表属性、边距属性、尺寸属性

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

1. 表格属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        (1) border-collapse	        规定是否合并表格边框; (coollapse, separate, inherit)	
        (2) border-spacing	        规定相邻单元格边框之间的距离	
        (3) caption-side	        规定表格标题的位置	(top, bottom, inherit)
        (4) empty-cells	            规定是否显示表格中的空单元格上的边框和背景	(hide, show, inherit)
        (5) table-layout	        设置用于表格的布局算法 (automatic, fixed, inherit)
     -->
    <style>
        table {
            width: 100%;
            height: 350px;
            border-collapse: separate;
            caption-side: top;
            border-spacing: 15px;
            empty-cells: hide;
            table-layout: fixed;
        }
    </style>
</head>
<body>
    <table border = "1">
        <caption>The results of person</caption>
        <tr>
            <th>姓名</th>
            <th>编号</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>Zhang</td>
            <td>101</td>
            <td>23</td>
            <td>man</td>
        </tr>
        <tr>
            <td>Wang</td>
            <td>103</td>
            <td>21</td>
            <td>woman</td>
        </tr>
        <tr>
            <td>Long</td>
            <td>107</td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

2. 案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            height: 250px;
        }

        th {
            height: 35px;
        }

        table,
        td,
        th {
            border: 1px solid green;
            border-collapse: collapse;          /* 否则两个单元格重合时发生重叠边线加粗 */
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table cellpadding="0" cellspacing="0" align="center">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="../images/image.png"></td>
                <td>345</td>
                <td>123</td>
                <td>贴吧 百度</td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td>上升</td>
                <td>456</td>
                <td>256</td>
                <td>贴吧 百度</td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td>上升</td>
                <td>456</td>
                <td>479</td>
                <td>贴吧 百度</td>
            </tr>
            <tr>
                <td>4</td>
                <td>东游记</td>
                <td>下降</td>
                <td>123</td>
                <td>563</td>
                <td>贴吧 百度</td>
            </tr>
            <tr>
                <td>5</td>
                <td>三国演义</td>
                <td>下降</td>
                <td>321</td>
                <td>589</td>
                <td> <a href="#">百科</a> <a href="#"> 贴吧</a></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

在这里插入图片描述

3. 文本属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        color	                设置文本的颜色;	
        direction	            规定文本的方向/书写方向;	
        letter-spacing  	    设置字符间距;	
        line-height	            设置行高;	
        text-align	            规定文本的水平对齐方式;	
        text-decoration	        规定添加到文本的装饰效果;	
        text-indent	            规定文本块首行的缩进;	
        text-transform	        控制文本的大小写;		
        vertical-align	        设置元素的垂直对齐方式;	
        white-space	            设置怎样给一元素控件留白;	
        word-spacing	        设置单词间距;
        text-emphasis	        向元素的文本应用重点标记以及重点标记的前景色;	
        hanging-punctuation	    指定一个标点符号是否可能超出行框;	
        punctuation-trim	    指定一个标点符号是否要去掉;	
        text-align-last	        当text-align 设置为 justify 时最后一行的对齐方式;
        text-justify	        当text-align 设置为 justify 时指定分散对齐的方式;	
        text-outline	        设置文字的轮廓;	
        text-overflow	        指定当文本溢出包含的元素应该发生什么;	
        text-shadow	            为文本添加阴影;	
        text-wrap	            指定文本换行规则;	
        word-break	            指定非CJK文字的断行规则;
        word-wrap	            设置浏览器是否对过长的单词进行换行;
     -->
</head>
<body>
    
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1. 首行缩进 */
        p {
            text-indent: 2em;
        }

        /* 2. 行间距  = 文本高度+下间距+上间距*/
        div {
                            /*文本默认高度是16px */
        line-height: 36px;  /* 此处表示文本高度是16px上下间距各为10px */
    }
    </style>
</head>
<body>
    <!-- 
        1. text-align:      文本水平对齐; 
        2. text-decoration: 下划线/删除线/上划线等;
        3. text-indent:     首行缩进(只是首行);
                            em是一个相对单位, 就是当前元素(font-size)一个文字的大小,   
                            如果当前元素没有设置大小, 则会按照父元素的一个文字大小缩进;
        4. line-height:     行间距 = 文本高度 + 上间距 + 下间距;
     -->
     <p>HelloWorld</p>
     <div>中国人</div>
</body>
</html>

在这里插入图片描述


行间距展示
在这里插入图片描述

4. 列表属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        (1) list-style:             在一个声明中设置所有的列表属性;
        (2) list-style-image:       将图象设置为列表项标记; 
        (3) list-style-position:    设置列表项标记的放置位置; (inside, outside, inherit)
        (4) list-style-type:        设置列表项标记的类型;  (none, dist, circle, square, decimal, lower-roman ... ...) 
    -->
    <style>
        li {
            /* list-style-type: lower-alpha; */
            /* list-style-image: url("../../res/1.ico"); */
            background-color: red;
        }

        li.inside {
            list-style-position: inside;
            list-style-type: square;
        }

        li#outside {
            list-style-position: outside;
        }

        li:hover {
            cursor: wait;
        }
    </style>
</head>

<body>
    <ul>
        These are the inside items:
        <li class="inside">香蕉</li>
        <li class="inside">橘子</li>
        <li class="inside">苹果</li>

        These are the outside items:
        <li id="outside">老虎</li>
        <li id="outside">大象</li>
        <li id="outside">狮子</li>
    </ul>
</body>

</html>

在这里插入图片描述

5. 边距属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        padding	            在一个声明中设置所有填充属性	
        padding-bottom	    设置元素的底填充	
        padding-left	    设置元素的左填充	
        padding-right	    设置元素的右填充	
        padding-top	        设置元素的顶部填充
     -->
</head>
<body>
    
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        margin	            在一个声明中设置所有外边距属性;	
        margin-bottom	    设置元素的下外边距;	
        margin-left	        设置元素的左外边距;	
        margin-right	    设置元素的右外边距;	
        margin-top	        设置元素的上外边距;
     -->
</head>
<body>
    
</body>
</html>

6. 尺寸属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
    height	    设置元素的高度
    max-height	设置元素的最大高度
    max-width	设置元素的最大宽度
    min-height	设置元素的最小高度
    min-width	设置元素的最小宽度
    width	    设置元素的宽度
     -->
</head>
<body>
    
</body>
</html>
阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6
标签: CSS

“2. css表格属性、文本属性、列表属性、边距属性、尺寸属性” 的相关文章