CSS基础知识（二）

最新推荐文章于 2021-07-13 19:07:13 发布

WindFromFarEast

最新推荐文章于 2021-07-13 19:07:13 发布

阅读量278

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xwx617/article/details/79084238

版权

前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

CSS为我们提供了很多的样式属性，例如背景的background、边框的border、文本的font等等等等，这些属性为我们美化html界面提供了良好的接口和适用性。

一、背景样式
这里写图片描述
在下面这段代码，将p1的背景颜色设置为了lightcoral；p2的高和宽设置为200px，背景为图片；p3
的背景也为图片，但是通过background-position设置了图片显示的起始位置，64px 80px表示将默认为左上角的起始位置向右移动64px向下移动80px后的新位置为图片显示的起始位置；由于p标签是块级元素，会默认占据一整行，因此如果为p元素设置了背景图片，那么图片会不断重复以占据整个行，因此background-repeat可以设置图片是否重复以及重复的方式；之后为body设置了一个背景图片并禁止重复；并让div中的背景图片显示在最右边。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景</title>
    <style type="text/css">
        #p1
        {
            background-color: lightcoral;
        }
        #p2
        {
            background-image: url("imgs/citypoint.png");
            width: 200px;
            height: 200px;
        }
        #p3
        {
            background-image: url("imgs/ui-icons.png");
            width: 256px;
            height: 240px;
            background-position: -64px -80px;
        }
        body
        {
            background-image: url("imgs/background.jpeg");
            background-repeat: no-repeat;
        }
        div
        {
            width: 100%;
            height: 700px;
            background-image: url("imgs/background.jpeg");
            background-position: right;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <p id="p1">这是一个段落内容</p>
    <p id="p2"></p>
    <p id="p3"></p>
    <div></div>
</body>
</html>

二、文本样式
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文本样式</title>
    <style type="text/css">
        #p1
        {
            color: lightcoral;
        }
        #p2
        {
            text-align: left;/*文本水平向左对齐*/
        }
        #p3
        {
            text-align: center;/*文本水平居中对齐*/
        }
        #p4
        {
            text-align: right;/*文本水平向右对齐*/
        }
        a
        {
            text-decoration: none;/*取消下划线*/
        }
        #p5
        {
            text-indent: 50px;/*首行缩进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>
    <img src="">
</body>
</html>

具体效果如下
这里写图片描述

三、字体样式
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>字体样式</title>
    <style type="text/css">
        /*设置自定义字体系列*/
        @font-face
        {
            font-family: "Source Han Sans";/*为自定义字体命名*/
            src: url(font/KaiGenGothicCN-Light.eot);
            src: url(font/KaiGenGothicCN-Light.eot?) format("embedded-opentype");
            font-weight: 400;
            font-style: normal;
        }
        #p1
        {
            font-family: "Times New Roman";/*设置字体类型*/
        }
        #p2
        {
            font-family: "Source Han Sans";/*设置字体类型*/
        }
        #p3
        {
            font-size: larger;/*设置字体大小*/
            font-style: italic;/*设置字体风格为斜体*/
            font-weight: bolder;/*设置字体粗细为加粗*/
        }
    </style>
</head>
<body>
    <p id="p1">This is text</p>
    <p id="p2">这是又一个段落内容</p>
    <p id="p3">这是一个段落内容</p>
</body>
</html>

具体效果如下
这里写图片描述

四、列表样式
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>列表样式属性</title>
    <style type="text/css">
        #u1
        {
            list-style-type: decimal;/*将列表标志设置为数字*/
        }
        #u2
        {
            list-style-image: url("imgs/mac.png");/*将列表标志设置为图片*/
        }
    </style>
</head>
<body>
    <ul id="u1">
        <li>苹果</li>
        <li>西瓜</li>
        <li>香蕉</li>
    </ul>
    <ul id="u2">
        <li>苹果</li>
        <li>西瓜</li>
        <li>香蕉</li>
    </ul>
</body>
</html>

具体效果如下
这里写图片描述

五、表格样式
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格样式</title>
    <style type="text/css">
        table,th,td /*组合选择器，以逗号分隔*/
        {
            border: 1px lightgray solid;/*边框1px，淡灰色，实线*/
            border-collapse: collapse;/*合并边框，将双边框效果改成单边框*/
        }
        table
        {
            width: 80%;/*表格的宽占整个页面的80%*/
            margin: 0px auto;/*外边距，上下边距0，左右边距自动，最终效果为水平居中*/
        }
        th,td
        {
            padding: 10px;/*内边距10px*/
        }
        th /*改变表头样式*/
        {
            background-color: lightcoral;/*表头单元格背景色为lightcoral*/
            color: white;/*表头字体颜色为白色*/
        }
        .info
        {
            background-color: lightgreen;/*第二行和第四行背景色为淡绿色*/
        }
    </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>
</html>

具体效果如下
这里写图片描述

六、CSS布局
常用的CSS布局有两行三列式布局和三行两列式布局，首先来看两行三列式布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>两行三列布局</title>
    <style type="text/css">
        html,body
        {
            margin: 0px;
        }
        header
        {
            background-color: lightblue;
            height: 150px;
        }
        #container
        {
            background-color: lightgray;
            height: 450px;
        }
        /*由于nav、aside、article三个元素都是块级元素，所以若直接填充颜色后看效果会发现三个元素每个都占了一行，显示出来的并非在一行中出现三列的效果，因此需要使用浮动float*/
        nav
        {
            background-color: lightgreen;
            height: 100%;/*撑满父类的高*/
            width: 150px;
            float: left;
        }
        aside
        {
            background-color: lightcoral;
            height: 100%;
            width: 100px;
            float: right;
        }
        article
        {
            background-color: lightyellow;
            height: 100%;
        }
    </style>
</head>
<body>
    <!--两行三列式布局
    header为一行，div为一行。div中的nav、aside、artical为第二行的三列
    -->
    <header></header>
    <div id="container">
        <nav></nav>
        <aside></aside>
        <article></article>
    </div>
</body>
</html>

具体效果如下
这里写图片描述
接着是三行两列式布局，其做法实质上和两行三列基本一样。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三行两列布局</title>
    <style type="text/css">
        html,body
        {
            margin: 0px;
        }
        header
        {
            background-color: lightyellow;
            height: 100px;
        }
        #container
        {
            background-color: lightgreen;
            height: 300px;
        }
        footer
        {
            background-color: lightcoral;
            height: 50px;
        }
        nav
        {
            background-color: lightblue;
            height: 100%;/*撑满父元素*/
            width: 150px;
            float: left;/*同样是浮动来显示两列的效果*/
        }
        article
        {
            background-color: lightslategray;
            height: 100%;
            margin-left: 150px;
        }
    </style>
</head>
<body>
    <!--三行分别是header、div、footer，两列分别是nav、article-->
    <header></header>
    <div id="container">
        <nav></nav>
        <article></article>
    </div>
    <footer></footer>
</body>
</html>

具体效果如下
这里写图片描述

七、CSS的盒子模型
所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
这里写图片描述
通过代码来实现一遍盒子模型，下面这个代码我们将div元素封装成了一个盒子，唯一不同的就是在内容区中没有添加内容，但这并无大碍。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子模型</title>
    <style type="text/css">
        div
        {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
            /*完成盒子模型*/
            border: 10px black solid;/*盒子模型的边框*/
            padding: 10px;/*盒子模型的内边距*/
            margin: 10px;/*盒子模型的外边距*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

具体效果如下
这里写图片描述
盒子模型在CSS中也有相应的样式属性，分别是外边距、边框、内边距。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子模型的边框</title>
    <style type="text/css">
        div
        {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
            /*设置盒子模型的边框样式，实际上可以写在一个声明border中，中间用空格分开即可*/
            border-width: 10px;/*边框粗细为10px*/
            border-color: lightcoral;/*边框颜色为淡红色*/
            border-style: solid;/*边框线为实线，若想单独为上、下、左、右的某一边边框单独设置线型可以对border-right-style这样的属性进行声明*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子模型的内边距</title>
    <style type="text/css">
        #d1
        {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
            /*设置父div的内边距*/
            /**
            padding-top: 30px;
            padding-right: 20px;
            padding-bottom: 10px;
            padding-left: 5px;
            **/
            padding: 10px 20px 30px 40px;/*上、右、下、左*/
        }
        #d2
        {
            width: 200px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div id="d2"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子模型的外边距</title>
    <style type="text/css">
        #d1
        {
            width: 200px;
            height: 100px;
            background-color: lightgreen;

            margin: 50px;/*外边距50px*/
        }
        #d2
        {
            width: 200px;
            height: 100px;
            background-color: lightcoral;
        }
        body
        {
            margin: 0px;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>
</html>