第05章-CSS3排版属性

2022-05-18 23:32 更新

第05章-前端核心技术-CSS3排版属性

项目经理(作者):张明星

学习目标

  1. 掌握无序列表的应用
  2. 掌握有序列表
  3. 熟悉嵌套列表的使用方法
  4. 了解自定义列表的标记
  5. 掌握表格样式的使用
  6. 掌握CSS边框、边线、边距等属性 重点
  7. 掌握边框的扩展运用 重点 难点
  8. 掌握内边距和边框的合并方法 重点 难点
  9. 掌握CSS盒子模型原理
  10. 掌握外边距合并的方法 重点 难点

CSS 列表

CSS有序列表和无序列表属性

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。(url('sqpurple.gif'))
list-style-position 设置列表中列表项标志的位置。(inside| outside)
list-style-type 设置列表项标志的类型。如下表

列表属性可以简写,按照如下顺序

  1. list-style-type
  2. list-style-position
  3. list-style-image

如果上述值丢失一个,其余仍在指定的顺序,就没关系。如:

ul {
    list-style: square inside url("sqpurple.gif"); 
}

案例01

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul{
                list-style-type: none;
            }
            a{
                text-decoration: none;
            }
            ul li{
                line-height: 50px;
                width: 200px;
                letter-spacing: 5px;
                text-indent: 8px;
                font-size: 18px;
                color: blue;
                font-weight: bold;
                background-color: bisque;
            }
            ul li:hover{
                background-color: darkcyan;
                color: white;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="">系统管理</a></li>
            <li><a href="">会员管理</a></li>
            <li><a href="">商品管理</a></li>
            <li><a href="">订单管理</a></li>
        </ul>
    </body>
</html>

效果展示

list-style-type 属性设置列表项标记的类型参考

描述
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)

CSS 隐藏

显示控制常用的属性有displayvisibilityopacity

隐藏元素

属性 显示 隐藏 特征
display 除了none之外的其他值 none 隐藏的元素不会占用任何空间,消失
visibility visible hidden 隐藏的元素仍需占用与未隐藏之前一样的空间,仅不可见
opacity 1 0 隐藏的元素只是变透明,仅不可见

下拉菜单

前面我们知道超链接a标签具有hover和active状态属性,其实这两个属性并不是超链接a标签专属,任何一个标签都具有这两个属性,因此,可以利用这两个属性来制作下拉菜单。

案例02

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul{
                list-style-type: none;
                padding: 0;/*清除内边距*/
            }
            li{
                width: 200px;
            }
            a{
                text-decoration: none;
            }
            #menu1 li a{
                display: block;
                line-height: 50px;
                width: 200px;
                letter-spacing: 5px;
                text-indent: 8px;
                font-size: 18px;
                color: blue;
                font-weight: bold;
                background-color: bisque;
            }
            #menu1 li a:hover{
                background-color: darkcyan;
                color: white;
            }
            #menu1 li:hover #menu2{
                display: block;
            }

            
            #menu2 {
                display: none;
            }
            #menu2 li a{
                display: block;
                height: 50px;
                line-height: 50px;
                width: 200px;
                letter-spacing: 5px;
                text-indent: 8px;
                font-size: 18px;
                color: blueviolet;
                font-weight: bold;
                background-color: darkgrey;
            }
            #menu2 li a:hover{
                background-color: crimson;
                color: white;
            }
        </style>
    </head>
    <body>
        <ul id="menu1">
            <li>
                <a href="">系统管理</a>
                <ul id="menu2">
                    <li><a href="">系统参数</a></li>
                    <li><a href="">系统设置</a></li>
                    <li><a href="">系统版本</a></li>
                    <li><a href="">系统更新</a></li>
                </ul>
            </li>
            <li><a href="">会员管理</a></li>
            <li><a href="">商品管理</a></li>
            <li><a href="">订单管理</a></li>
        </ul>
    </body>
</html>

效果图

CSS 显示属性

display主要用的CSS样式有以下三个:

属性 描述
display:block 显示为块级元素
display:inline 显示为内联元素
display:inline-block 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性

常将<li>元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。

块级元素(block)特性

  1. 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;

  1. 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性

  1. 和相邻的内联元素在同一行;

  1. 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;

/* display: inline-block; */
/* 1.同行显示,并且可以设置宽高 */
/* 2.默认会产生间距,去间距:上级【font-size: 0px;】,所有下级【font-size: XXpx;】*
/* 3.文字基准线导致错开,解决方案:所有下级【vertical-align: top;】 */

案例03

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul{
                list-style-type: none;
            }
            a{
                text-decoration: none;
            }
            ul li{
                display: inline-block;
                line-height: 50px;
                width: 200px;
                letter-spacing: 5px;
                text-indent: 8px;
                font-size: 18px;
                color: blue;
                font-weight: bold;
                background-color: bisque;
            }
            ul li:hover{
                background-color: darkcyan;
                color: white;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="">系统管理</a></li>
            <li><a href="">会员管理</a></li>
            <li><a href="">商品管理</a></li>
            <li><a href="">订单管理</a></li>
        </ul>
    </body>
</html>

效果图

CSS 表格

caption-side属性。

注意:IE8只有指定!DOCTYPE才支持caption-side属性。

描述
top 默认值。把表格标题定位在表格之上。
bottom 把表格标题定位在表格之下。

表格边框属性

描述
border 表格边框:border: 1px solid black;

指定CSS表格边框,使用border属性。

下面的例子指定了一个表格的thtd元素的黑色边框:

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

但是表格有双边框。这是因为表和th/ td元素有独立的边界。

为了显示一个表的单个边框,使用 border-collapse属性。

border-collapse属性折叠边框

描述
border-collapse 表格边框合并:border-collapse: collapse;

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开:

table {
    /*合并表格与单元格之间的间距*/   
    border-collapse: collapse;
}
table,th,td {
    border: 1px solid black;
}

案例04

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #table1,
            th,
            td {
                border: 1px solid black;
            }
            #table2,
            #table2 th,
            #table2 td {
                border-collapse:collapse;
                border: 1px solid black;
                width:50%;
                height:30px;
                text-align:right;
                vertical-align:bottom;
                padding:15px;
                background-color:green;
                color:white;
            }
        </style>
    </head>
    <body>
        <table id="table1">
            <caption>表格一</caption>
            <tr>
                <th>表头</th>
                <th>表头</th>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>
        <table id="table2">
            <caption>表格二</caption>
            <tr>
                <th>表头</th>
                <th>表头</th>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>
    </body>
</html>

效果图

表格宽度和高度

描述
width 表格宽度:表格、单元格
height 表格高度:表格、行、单元格

下面的例子是设置100%的宽度,50像素的th元素的高度的表格:

table {
    width:100%;
}
th{
    height:50px;
}

表格内文字对齐

描述
text-align 单元格内容水平对其:
vertical-align 单元格内容垂直对其:

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式,像左,右,或中心:

td{
    text-align:right;
}

vertical-align垂直对齐属性设置垂直对齐,比如顶部,底部或中间:

td{
    height:50px;
    vertical-align:bottom;
}

表格隔行色

实现表格隔行色的方法有很多,如

描述
:nth-of-type(odd) 基数
:nth-of-type(even) 偶数
:nth-child (odd) 基数
:nth-child (even) 偶数
:nth-child (2n+1) 基数
:nth-child (2n) 偶数

如:

td:nth-of-type(odd){ background:#00ccff;}奇数行 
td:nth-of-type(even){ background:#ffcc00;}偶数行 


td:nth-child (odd){ background:#00ccff;}奇数行 
td:nth-child (even){ background:#ffcc00;}偶数行


td:nth-child (2n+1){ background:#00ccff;}奇数行 
td:nth-child (2n){ background:#ffcc00;}偶数行

案例05

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            table{
                width: 80%;
                text-align: center;
                border-collapse: collapse;
            }
            th,td{
                height: 35px;
                color: white;
            }
            tr:nth-of-type(odd){
                background-color: #5F9EA0;
            }
            tr:nth-of-type(even){
                background-color: darkolivegreen;
            }
            td:nth-child(3n+3){
                background-color: #A52A2A;
            }
        </style>
    </head>
    <body>
        <table border="0" align="center">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>身高</th>
                <th>体重</th>
                <th>签名</th>
            </tr>
            <tr>
                <td>1</td>
                <td>刘亦菲</td>
                <td>女</td>
                <td>32</td>
                <td>168CM</td>
                <td>50kg</td>
                <td>那时觉得看哈数据库的</td>
            </tr>
            <tr>
                <td>2</td>
                <td>刘亦菲</td>
                <td>女</td>
                <td>32</td>
                <td>168CM</td>
                <td>50kg</td>
                <td>那时觉得看哈数据库的</td>
            </tr>
            <tr>
                <td>3</td>
                <td>刘亦菲</td>
                <td>女</td>
                <td>32</td>
                <td>168CM</td>
                <td>50kg</td>
                <td>那时觉得看哈数据库的</td>
            </tr>
            <tr>
                <td>4</td>
                <td>刘亦菲</td>
                <td>女</td>
                <td>32</td>
                <td>168CM</td>
                <td>50kg</td>
                <td>那时觉得看哈数据库的</td>
            </tr>
            <tr>
                <td>5</td>
                <td>刘亦菲</td>
                <td>女</td>
                <td>32</td>
                <td>168CM</td>
                <td>50kg</td>
                <td>那时觉得看哈数据库的</td>
            </tr>
        </table>
    </body>
</html>

效果图

CSS 盒子模型

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

下面的图片说明了盒子模型(Box Model):

不同部分的说明:

  • outline(轮廓) - 是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
  • margin(外边距) - 清除边框外的区域,外边距是透明的。
  • border(边框) - 围绕在内边距和内容外的边框。
  • padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • content(内容) - 盒子的内容,显示文本和图像。

padding(填充)

padding(填充)属性定义元素边框与元素内容之间的空间

属性 说明
padding 使用缩写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充

填充- 单边内边距属性

CSS中,它可以指定不同的侧面不同的填充:

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

填充 - 简写属性

padding:25px;

  • 所有的填充都是25px

padding:25px 50px;

  • 上下填充为25px
  • 左右填充为50px

padding:25px 50px 75px;

  • 上填充为25px
  • 左右填充为50px
  • 下填充为75px

 padding:25px 50px 75px 100px;

  • 上填充为25px
  • 右填充为50px
  • 下填充为75px
  • 左填充为100px

案例06

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .content{
                padding: 80px 10% 100px;
                background-color: rgba(0,0,0,0.1);
            }
        </style>
    </head>
    <body>
        <div class="content">
            <h1>欢迎您</h1>
            <p>这是一个神奇的网站</p>
        </div>
    </body>
</html>

效果展示

border(边框)

CSS 边框属性

属性 描述
border 简写属性,用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

border-style属性值

描述
none 默认。无轮廓。
dotted 点状的轮廓。
dashed 虚线轮廓。
solid 实线轮廓。
double 双线轮廓。双线的宽度等同于 outline-width 的值。
groove 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。

类型和轮廓是一样的

border-radius 属性

语法

border-radius: 左上角 右上角 右下角 左下角;

注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。

描述
length 定义弯道的形状。
% 使用%定义角落的形状。

box-sizing属性

语法:

box-sizing: content-box|border-box|inherit:
说明
content-box 指定元素的宽度和高度不包含元素的paddingborder
border-box 指定元素的宽度和高度包含元素的paddingborder

案例07

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>边框</title>
        <style>
            .none {
                border-style: none;
            }
            .dotted {
                border-style: dotted;
            }
            .dashed {
                border-style: dashed;
            }
            .solid {
                border-style: solid;
            }
            .double {
                border-style: double;
            }
            .groove {
                border-style: groove;
            }
            .ridge {
                border-style: ridge;
            }
            .inset {
                border-style: inset;
            }
            .outset {
                border-style: outset;
            }
            .hidden {
                border-style: hidden;
            }
        </style>
    </head>
    <body>
        <p class="none">无边框。</p>
        <p class="dotted">虚线边框。</p>
        <p class="dashed">虚线边框。</p>
        <p class="solid">实线边框。</p>
        <p class="double">双边框。</p>
        <p class="groove"> 凹槽边框。</p>
        <p class="ridge">垄状边框。</p>
        <p class="inset">嵌入边框。</p>
        <p class="outset">外凸边框。</p>
        <p class="hidden">隐藏边框。</p>
    </body>
</html>

效果展示

outline(轮廓)

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

属性 说明
outline 在一个声明中设置所有的轮廓属性
outline-color 设置轮廓的颜色
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度

outline-style属性值

描述
none 默认。无轮廓。
dotted 点状的轮廓。
dashed 虚线轮廓。
solid 实线轮廓。
double 双线轮廓。双线的宽度等同于 outline-width 的值。
groove 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。

案例08

<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8">
        <title>边框</title>
        <style>
            p {
                border: 1px solid red;
            }
            .dotted {
                outline-style: dotted;
            }
            .dashed {
                outline-style: dashed;
            }
            .solid {
                outline-style: solid;
            }
            .double {
                outline-style: double;
            }
            .groove {
                outline-style: groove;
            }
            .ridge {
                outline-style: ridge;
            }
            .inset {
                outline-style: inset;
            }
            .outset {
                outline-style: outset;
            }
        </style>
    </head>
    <body>
        <p class="dotted">点线轮廓</p>
        <p class="dashed">虚线轮廓</p>
        <p class="solid">实线轮廓</p>
        <p class="double">双线轮廓</p>
        <p class="groove">凹槽轮廓</p>
        <p class="ridge">垄状轮廓</p>
        <p class="inset">嵌入轮廓</p>
        <p class="outset">外凸轮廓</p>
    </body>
</html>

效果图

margin(外边距)

margin(外边距)属性定义元素周围的空间。

属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

margin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的

margin可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。

说明
auto 设置浏览器边距。 这样做的结果会依赖于浏览器
length 定义一个固定的margin(使用像素,pt,em等)
% 定义一个使用百分比的边距

Margin - 单边外边距属性

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Margin - 简写属性

为了缩短代码,有可能使用一个属性中margin指定的所有边距属性。这就是所谓的缩写属性。

margin:25px;

  • 所有的4个边距都是25px

margin:25px 50px;

  • 上下边距为25px
  • 左右边距为50px

margin:25px 50px 75px;

  • 上边距为25px
  • 左右边距为50px
  • 下边距为75px

margin:25px 50px 75px 100px;

  • 上边距为25px
  • 右边距为50px
  • 下边距为75px
  • 左边距为100px

外边距合并

  1. 当子元素的顶部和父元素的顶部仅仅贴在一起(既:中间没有相隔的内容)时,子元素的顶部外边距会和父元素的外边距合并,最终变成父元素的外边距。
    1. 解决方法一:在父元素和子元素之间插入一个br标签
    2. 解决方法二:给父元素加padding:0.1px;
    3. 解决方法三:把子元素的margin-toppadding-top来代替

  1. 同级的相邻兄弟元素,上一个兄弟元素的底部外边距和下一个元素的顶部外边距会合并,最终两元素之间的外边距不是相加,而是变成两个元素中外边距的最大值

案例09

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS 盒子模型</title>
    </head>
    <style type="text/css">
        #box{
            text-align: center;
            background-color: gray;
            color: wheat;
            margin: 30px;
            outline: 30px solid #FF0000;
            border: 30px solid #8A2BE2;
            padding: 30px;
            width: 80px;
            height: 80px;
            font-size: 30px;
        }
        #content{
            border: 1px solid black;
        }
    </style>
    <body>
        <div id="box">
            <div id="content">
                盒子模型
            </div>
        </div>
    </body>
</html>

效果图

CSS3 box-shadow阴影

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注意:box-shadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

说明
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影

案例11

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                margin: 30px;
                background-color: #E9E9E9;
            }
            .polaroid {
                width: 394px;
                padding: 10px 10px 20px 10px;
                border: 1px solid #BFBFBF;
                background-color: white;
                /* Add box-shadow */
                box-shadow: 2px 2px 3px #aaaaaa;
            }
        </style>
    </head>
    <body>
        <div class="polaroid">
            <p class="caption">上海鲜花港的郁金香,花名:Ballade Dream。</p>
        </div>
    </body>
</html>

效果图

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号