网络日志

CSS基础之边框样式、列表样式、表格样式(border, list and table style)

边框样式(border)

上午复习了编译原理和概率论,时间一下子就过去了,感觉也没做什么,所以要更加抓紧时间,六级迫近,这次一定要控制好时间。记住包含三个属性

1、border-width 边框的宽度,单位是px2、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)。