【前端】css笔记（5）

足足一米58

已于 2022-07-27 17:27:08 修改

阅读量139

点赞数 2

分类专栏： css 文章标签：前端 css html

于 2022-07-26 16:08:32 首次发布

本文链接：https://blog.csdn.net/weixin_61731785/article/details/125993432

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

目录：

`list-style-type` 属性

指定列表项标记的类型：

<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>

ps：

none：不使用项目符号
disc：实心圆
circle：空心圆
square：实心方块
decimal：阿拉伯数字
decimal-leading-zero
lower-alpha：小写英文字母
lower-greek
lower-latin
lower-roman：小写罗马数字
upper-alpha：大写英文字母
upper-latin
upper-roman：大写罗马数字
armenian
cjk-ideographic
georgian
hebrew
hiragana
hiragana-iroha
katakana
katagana-iroha
inherit

对照图：

列表样式图像属性

要指定列表项标记的图像，使用列表样式图像属性：

<style>
ul
{
list-style-image:url('/statics/images/w3c/sqpurple.gif');
}
</style>

兼容问题：

<style>
ul
{
   list-style-type:none; /*设置列表样式类型为没有列表项标记*/

padding:0px; /*设置填充*/
   margin:0px; /*设置边距*/
}
ul li
{
   background-image:url("/statics/images/w3c/sqpurple.gif");

/*设置图像的 URL ，并设置它只显示一次（无重复）*/

   background-repeat:no-repeat;
   background-position:0px 5px; /*定位图像位置（左 0px 和上下 5px ）*/
   padding-left:14px; /*用 padding-left 属性把文本置于列表中*/

}
</style>

简写属性

列表简写属性：

<style>
ul
{
list-style:square url("/statics/images/w3c/sqpurple.gif");
}
</style>

ps：缩写属性值的顺序

list-style-type
list-style-position
list-style-image

`border` 属性

指定 CSS 表格边框:

<style>
table,th,td
{
border:1px solid black;
}
</style>

`border-collapse` 属性

设置表格的边框是否被折叠成一个单一的边框或隔开：

<style>
table {
border-collapse: collapse; /*单一边框*/
}
table, td, th {
border: 1px solid black;
}
</style>

`width` &`height` 属性

定义表格的宽度和高度：

<style>
table,td,th
{
   border:1px solid black;
}
table
{
   width:100%;
}
th
{
   height:50px;
}
</style>

text-align 属性&垂直对齐属性

text-align 属性设置水平对齐方式，像左，右，或中心；垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

<style>
table, td, th {
border: 1px solid black;
}

td {
text-align: right;
height: 50px;
vertical-align: bottom;
}
</style>

td 和 th 元素

在表的内容中控制空格之间的边框，应使用 td 和 th 元素的填充属性：

<style>
table, td, th
{
border:1px solid black;
}
td
{
padding:15px;
}
</style>

边框&th元素

指定边框的颜色，和 th 元素的文本和背景颜色：

<style>
table, td, th
{
   border:1px solid green;
}
th
{
   background-color:green;
   color:white;
}
</style>

表格标题

设置表格标题的位置：

<style>
caption {caption-side:bottom;}
</style>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>css整理</title>
</head>
<body>
    <style>
        ul.a {
            list-style-type: circle;
        }

        ul.b {
            list-style-type: square;
        }

        ol.c {
            list-style-type: upper-roman;
        }

        ol.d {
            list-style-type: lower-alpha;
        }
    </style><!--列表标记-->

    <style>
        ul  {
            list-style-image: url('/statics/images/w3c/sqpurple.gif');
        }
    </style><!--列表样式图像-->

    <style>
        ul {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }

            ul li {
                background-image: url("/statics/images/w3c/sqpurple.gif");
                background-repeat: no-repeat;
                background-position: 0px 5px;
                padding-left: 14px;
            }
    </style><!--兼容问题-->

    <style>
        ul  {
            list-style: square url("/statics/images/w3c/sqpurple.gif");
        }
    </style><!--简写-->

    <style>
        table, th, td {
            border: 1px solid black;
        }
    </style><!--边框-->

    <style>
        table {
            border-collapse: collapse;
        }

        table, td, th {
            border: 1px solid black;
        }
    </style><!--单一边框-->

    <style>
        table, td, th {
            border: 1px solid black;
        }

        table {
            width: 100%;
        }

        th {
            height: 50px;
        }
    </style><!--表格宽度和高度-->

    <style>
        table, td, th {
            border: 1px solid black;
        }

        td {
            text-align: right;
            height: 50px;
            vertical-align: bottom;
        }
    </style><!--文本水平、垂直对齐-->

    <style>
        table, td, th {
            border: 1px solid black;
        }

        td {
            padding: 15px;
        }
    </style><!--控制空格之间的边框-->

    <style>
        table, td, th {
            border: 1px solid green;
        }

        th {
            background-color: green;
            color: white;
        }
    </style><!--指定边框的颜色，和 th 元素的文本和背景颜色-->

    <style>
        caption {
            caption-side: bottom;
        }
    </style><!--标题-->

</body>
</html>