CSS 样式小结

网页元素样式指南

最新推荐文章于 2024-02-11 13:06:15 发布

原创最新推荐文章于 2024-02-11 13:06:15 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

17 篇文章

订阅专栏

1.背景

<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        /* 设置背景为图片，并设置大小、是否重复 */
        body {
            background-image: url("imgs/background.jpeg");
            background-repeat: no-repeat;
            background-size: 250px 142px;
        }
        /* 设置背景为纯色 */
        #p1 {
            background-color: lightblue;
        }
        /* 设置背景为图片 */
        #p2 {
            width: 20px;
            height: 20px;
            background-image: url("imgs/citypoint.png");
        }
        /* 设置背景为图片的一部分 */
        #p3 {
            width: 16px;
            height: 16px;
            background-image: url("imgs/ui-icons.png");
            background-position: -64px -80px;
        }
    </style>
</head>
<body>
<p id="p1">这是一个段落内容.</p>
<p id="p2"></p>
<p id="p3"></p>
</body>

2.文本

示例

<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style>
        /* 设置文本颜色 */
        #p1 {
            color: lightcoral;
        }
        /* 设置文本左对齐 */
        #p2 {
            text-align: left;
        }
        /* 设置文本居中对齐 */
        #p3 {
            text-align: center;
        }
        /* 设置文本右对齐 */
        #p4 {
            text-align: right;
        }
        /* 设置链接样式去掉下划线 */
        a {
            text-decoration: none;
        }
        /* 设置文本的缩进 */
        #p5 {
            text-indent: 50px;
        }
    </style>
</head>
<body>
<p id="p1">这是一个段落内容.</p>
<p id="p2">这又是一个段落内容.</p>
<p id="p3">这又是一个段落内容.</p>
<p id="p4">这又是一个段落内容.</p>
<a href="#">这是一个链接</a>
<p id="p5">这还是一个段落内容.</p>
</body>

3.列表

<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <style>
        /* 设置列表项的预定义样式 */
        #u1 {
            list-style-type: decimal;
        }
        /* 设置列表项的图片样式 */
        #u2 {
            list-style-image: url("imgs/mac.png");
        }
        /* 设置列表项水平方向排列 */
        #u3 {
            list-style-type: none;
        }
        #u3>li {
            float: left;
            display: inline-block;
            background-color: lightgreen;
            padding: 5px;
        }
    </style>
</head>
<body>
<ul id="u1">
    <li>苹果</li>
    <li>西瓜</li>
    <li>香蕉</li>
</ul>
<ul id="u2">
    <li>苹果</li>
    <li>西瓜</li>
    <li>香蕉</li>
</ul>
<ul id="u3">
    <li>苹果</li>
    <li>西瓜</li>
    <li>香蕉</li>
</ul>
</body>

4.表格

   <style>
        table, th, td {
            border: 1px solid lightslategray;
            border-collapse: collapse;
        }
        table {
            width: 80%;
            margin: 0px auto;
        }
        table th {
            background-color: lightcoral;
            color: white;
        }
        table th, table td {
            padding: 10px;
        }
        .info {
            background-color: lightgreen;
            color: white;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th>名称</th>
        <th>职位</th>
        <th>收入</th>
    </tr>
    <tr class="info">
        <td>张无忌</td>
        <td>老板</td>
        <td>100000</td>
    </tr>
    <tr>
        <td>小昭</td>
        <td>秘书</td>
        <td>10000</td>
    </tr>
    <tr class="info">
        <td>周芷若</td>
        <td>主管</td>
        <td>20000</td>
    </tr>
</table>
</body>