乐趣区

关于css:CSS基础之边框样式列表样式表格样式border-list-and-table-style

jiezi

边框款式（border）

上午温习了编译原理和概率论，工夫一下子就过来了，感觉也没做什么，所以要更加抓紧时间，六级逼近，这次肯定要管制好工夫。
记住蕴含三个 属性：

1、border-width 边框的宽度，单位是 px
2、border-style 边框的外观，有 none、solid（实线）、dashed（虚线）等。
3、border-color 边框的色彩，
须要同时设置三个，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 边框 border</title>
        <style type="text/css">
            div{border: 2px solid red; width: 500px;height:50px;}
            #C{border-width: 10px; border-style: solid; border-color:blanchedalmond;}
            img{border: 2px dashed black;}
        </style>
    </head>
    <body>
        <div id="A"> 这里是第一局部 </div>
        <div id="B"> 这里是第二局部 </div>
        <div id="C"> 这里是第三局部 </div>
        <img src="./HTML.png" alt="HTML">
    </body>

</html>

显示成果：

阐明：在下面有两种写法，其实是等价的，也就是说

border: 2px solid red;

与

border-width: 10px; border-style: solid; border-color:blanchedalmond;

等价。还有别忘了图片也能够有边框；
最初一个是：border-top, border-left, border-right, border-bottom, 都能够别离设置款式。

表格款式（list-style-type）

表格款式 list-style-type 是针对 ol、ul 元素的，而不是对于 li 元素，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 列表款式 list</title>
        <style type="text/css">
            ol,ul{list-style: decimal;}
            #A{list-style: none;}
        </style>
    </head>
    <body>
        <ol>
            <li>C++</li>
            <li>Python</li>
            <li>Java</li>
        </ol>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Oracle</li>
        </ul>
        <ul id="A">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Oracle</li>
        </ul>
    </body>
</html>

显示成果：

阐明：感觉带上属性比拟丑的时候能够应用 none 属性，将他们去除。
其实 list 还能够利用 list-style-image 属性来将后面的序号改为难看的图片模式。
语法：

list-style-image: url(图片门路);

表格款式

只有记住有三个属性：
1、caption-side：表格题目地位：top、bottom。
2、border-collapse：表格边框合并：separate，边框离开，有空隙（默认值）；collapse，边框合并，无空隙；
3、border-spacing：改革边框间距，单位 px(pixel)。

退出移动版