HTML及CSS学习笔记 15 - 常见样式属性拾遗

最新推荐文章于 2023-09-12 22:46:11 发布

chodenke

最新推荐文章于 2023-09-12 22:46:11 发布

阅读量395

点赞数

分类专栏： HTML及CSS学习笔记文章标签： HTML CSS 表格属性列表属性

本文链接：https://blog.csdn.net/cgl125167016/article/details/90407068

版权

HTML及CSS学习笔记专栏收录该内容

16 篇文章 5 订阅

订阅专栏

本文是HTML及CSS课程的第十五课。主要介绍CSS中经常用到的一些零散的样式属性，比如有关表格的样式属性、有关列表的样式属性，行标签垂直位置、鼠标光标形状等等

一、常见表格属性

1、折叠边框

CSS种可以使用样式属性border-collapse设置是否将表格边框折叠为单一边框。
下面是一个是示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 折叠边框 </title>
    <style type="text/css">
      table, td {border:1px solid gray; margin-top: 20px;}
      .table1 {border-collapse: separate;}
      .table2 {border-collapse: collapse;}
    </style>
  </head>
  <body>
    <table class="table1">
      <tr>
        <td>我在第一行第一个单远格</td>
        <td>我在第一行第二个单远格</td>
      </tr>
      <tr>
        <td>我在第二行第一个单远格</td>
        <td>我在第二行第二个单远格</td>
      </tr>
    </table>
    <table class="table2">
      <tr>
        <td>我在第一行第一个单远格</td>
        <td>我在第一行第二个单远格</td>
      </tr>
      <tr>
        <td>我在第二行第一个单远格</td>
        <td>我在第二行第二个单远格</td>
      </tr>
    </table>
  </body>
</html>

页面浏览效果：
折叠边框
说明：

默认情况下表格具有双线条边框。这是由于table、th以及td元素都有独立的边框。
样式属性及值border-collapse: collapse;可以设置将表格边框折叠为单一边框。

2、单元格间距

CSS中样式属性border-spacing设置表格中相邻单元格边框间的距离。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 单元格间距 </title>
    <style type="text/css">
      table, td {border:1px solid gray; margin-top: 20px;}
      .table1 {border-collapse: separate; border-spacing: 5px;}
      .table2 {border-collapse: separate; border-spacing: 20px 5px;}
    </style>
  </head>
  <body>
    <table class="table1">
      <tr>
        <td>我在第一行第一个单远格</td>
        <td>我在第一行第二个单远格</td>
      </tr>
      <tr>
        <td>我在第二行第一个单远格</td>
        <td>我在第二行第二个单远格</td>
      </tr>
    </table>
    <table class="table2">
      <tr>
        <td>我在第一行第一个单远格</td>
        <td>我在第一行第二个单远格</td>
      </tr>
      <tr>
        <td>我在第二行第一个单远格</td>
        <td>我在第二行第二个单远格</td>
      </tr>
    </table>
  </body>
</html>

页面浏览效果：
单元格间距
说明：

当元素设置了样式属性及值border-collapse: collapse;时，border-spacing属性不起作用。
该属性可以指定一个或两个长度值，如果指定一个长度值，表示水平间隔和垂直间隔同为一个值，如果指定两个长度值，第一个是水平间隔，第二个是垂直间隔。

3、表格案例

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 表格样式属性示例 </title>
    <style type="text/css">
      table, th, td {border: 1px solid gray;}
      table {width: 400px; border-collapse: collapse;}
      thead {background-color: #CCCCCC;}
      tbody {text-align: center;}
      tfoot {background-color: #FFFF99;}
    </style>
  </head>
  <body>
    <table>
      <caption>销售报表</caption>
      <thead>
      <tr>
        <th>序号</th>
        <th>部门</th>
        <th>金额</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>1</td>
        <td>销售1部</td>
        <td>1000.00</td>
      </tr>
      <tr>
        <td>2</td>
        <td>销售2部</td>
        <td>1100.00</td>
      </tr>
      <tr>
        <td>3</td>
        <td>门市1部</td>
        <td>1200.00</td>
      </tr>
      <tr>
        <td>4</td>
        <td>门市2部</td>
        <td>1100.00</td>
      </tr>
      </tbody>
      <tfoot>
      <tr>
        <th rowspan="2">统计</th>
        <th>销售部</th>
        <th>2100.00</th>
      </tr>
      <tr>
        <th>门市部</th>
        <th>2300.00</th>
      </tr>
      </tfoot>
    </table>
  </body>
</html>

页面浏览效果：
表格样式属性示例

二、常见列表属性

1、列表项标志

CSS中使用样式属性list-style-type来设置列表项的标志。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 列表项标志 </title>
    <style type="text/css">
      .list-style-disc {list-style-type: disc;}
      .list-style-circle {list-style-type: circle;}
      .list-style-square {list-style-type: square;}
      .list-style-decimal {list-style-type: decimal;}
      .list-style-lower-roman {list-style-type: lower-roman;}
      .list-style-lower-alpha {list-style-type: lower-alpha;}
    </style>
  </head>
  <body>
    <h3>注册步骤：</h3>
    <ol>
      <li class="list-style-disc">填写信息</li>
      <li class="list-style-circle">收电子邮件</li>
      <li class="list-style-square">注册成功</li>
    </ol>
    <h3>新人上路指南</h3>
    <ul>
      <li class="list-style-decimal">如何成为优秀的员工</li>
      <li class="list-style-lower-roman">如何做好每天的工作</li>
      <li class="list-style-lower-alpha">如何成就职业生涯</li>
    </ul>
  </body>
</html>

页面浏览效果：
列表项标志
说明：

属性list-style-type常见的值及说明如下：

属性值	说明
`none`	无标记
`disc`	实心圆
`circle`	空心圆
`square`	实心方块
`decimal`	数字
`lower-roman`	小写罗马数字（i、ii,、iii、iv、v等）
`upper-roman`	大写罗马数字（I、II、III、IV、V等)）
`lower-alpha`	小写英文字母（a、b、c、d、e等）
`upper-alpha`	大写英文字母（A、B、C、D、E等）

2、列表项标志位置

CSS中样式属性list-style-position可以规定列表中列表项标志的位置。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 列表项标志位置 </title>
    <style type="text/css">
      ul, ol {width: 200px;}
      li {background-color: lightgray;}
      .position-inside>li {list-style-position: inside;}
      .position-outside>li {list-style-position: outside;}
    </style>
  </head>
  <body>
    <h3>人物简介</h3>
    <ul class="position-inside">
      <li>李白，字太白，号青莲居士，又号“谪仙人”</li>
      <li>是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”</li>
      <li>李白深受黄老列庄思想影响，有《李太白集》传世</li>
    </ul>
    <h3>主要作品</h3>
    <ol class="position-outside">
      <li>728年：《黄鹤楼送孟浩然之广陵》</li>
      <li>732年：《行路难三首》</li>
      <li>749年：《送萧三十一之鲁中兼问稚子伯禽》</li>
    </ol>
  </body>
</html>

页面浏览效果：
列表项标志位置
说明：

样式属性list-style-position可以设置两个值，分别为inside和outside，当属性值为inside时，列表项标志放置在文本以内，且环绕文本根据标记对齐，当属性值为outside时，列表项目标志放置在文本以外的左侧，且环绕文本不根据标记对齐，outside也是list-style-position属性的默认值。

3、列表项图片

CSS中样式属性list-style-image可以把图像设置为列表中的项目标志。
下面是一个示例：
需要使用的图片（尺寸 25像素 x 18像素）：

HTML源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 列表项图片 </title>
    <style type="text/css">
      .list-image-arrow>li {
        list-style-image: url("images/arrow.png");
        list-style-type: disc;
      }
    </style>
  </head>
  <body>
    <h3>主要作品</h3>
    <ul class="list-image-arrow">
      <li>728年：《黄鹤楼送孟浩然之广陵》</li>
      <li>732年：《行路难三首》</li>
      <li>749年：《送萧三十一之鲁中兼问稚子伯禽》</li>
    </ul>
  </body>
</html>

页面浏览效果：
列表项图片
说明：

样式属性list-style-image的值要指定一个图片路径，图片路径写在url("")中，可以使用相对路径或绝对路径。

4、简写形式

常见列表属性可以统一简写在list-style样式属性中。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 列表属性简写形式 </title>
    <style type="text/css">
      .list-style>li {
        list-style: decimal inside url("images/arrow.png");
      }
    </style>
  </head>
  <body>
    <h3>主要作品</h3>
    <ul class="list-style">
      <li>728年：《黄鹤楼送孟浩然之广陵》</li>
      <li>732年：《行路难三首》</li>
      <li>749年：《送萧三十一之鲁中兼问稚子伯禽》</li>
    </ul>
  </body>
</html>

页面浏览效果：
列表属性简写形式

三、垂直对齐方式

在CSS中，在有些情况下需要用样式属性vertical-align来设置元素的垂直对齐方式。

1、单元格内容的垂直对齐方式

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 单元格内容垂直对齐 </title>
    <style type="text/css">
      table, td {border: 1px solid gray;}
      table {width: 400px; height: 100px; border-collapse: collapse;}
      .valign-top {vertical-align: top;}
      .valign-middle {vertical-align: middle;}
      .valign-bottom {vertical-align: bottom;}
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td class="valign-top">我在第一个单远格</td>
        <td class="valign-middle">我在第二个单远格</td>
        <td class="valign-bottom">我在第三个单远格</td>
      </tr>
    </table>
  </body>
</html>

页面浏览效果：
单元格内容垂直对齐
说明：

vertical-align属性可以设置单元格框中的单元格内容的垂直对齐方式，常用的值如top（上）、middle（中）、bottom（下）等。

2、行内元素垂直对其方式

样式属性vertical-align也可以定义行内元素相对于该元素所在行的垂直对齐方式。
下面是一个示例：
需要使用的图片（尺寸 80像素 x 97像素）：
emoji
HTML源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 行内元素垂直对齐方式 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      p {height: 75px; line-height: 75px; width:350px; border: 1px solid gray; margin: 10px;}
      .valign-baseline {vertical-align: baseline;}
      .valign-top {vertical-align: top;}
      .valign-middle {vertical-align: middle;}
      .valign-bottom {vertical-align: bottom;}
    </style>
  </head>
  <body>
    <p><span>这是一幅位于段落中的图像。</span><img class="valign-baseline" src="images/emoji.jpg"/></p>
    <p><span>这是一幅位于段落中的图像。</span><img class="valign-top" src="images/emoji.jpg"/></p>
    <p><span>这是一幅位于段落中的图像。</span><img class="valign-middle" src="images/emoji.jpg"/></p>
    <p><span>这是一幅位于段落中的图像。</span><img class="valign-bottom" src="images/emoji.jpg"/></p>
  </body>
</html>

页面浏览效果：
行内元素垂直对齐方式
说明：

样式属性vertical-align可以设置行内元素在所在行中的垂直对齐方式，常见的属性值及说明如下：
属性值说明
baseline 默认。元素放置在父元素的基线上
top 元素放置在所在行顶部
middle 元素放置在所在行中部
bottom 元素放置在所在行底部

属性值	说明
`baseline`	默认。元素放置在父元素的基线上
`top`	元素放置在所在行顶部
`middle`	元素放置在所在行中部
`bottom`	元素放置在所在行底部

四、光标形状

CSS中使用样式属性cursor可以设置要显示的光标的类型（形状）。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 光标形状 </title>
    <style type="text/css">
      a {color: #333333; text-decoration: none;}
      a:hover {color: #666666;}
      .cursor-crosshair:hover {cursor: crosshair;}
      .cursor-pointer:hover {cursor: pointer;}
      .cursor-help:hover {cursor: help;}
      .cursor-wait:hover {cursor: wait;}
      .cursor-auto:hover {cursor: auto;}
    </style>
  </head>
  <body>
    <ul>
      <li><a class="cursor-crosshair">十字线</a></li>
      <li><a class="cursor-pointer">一只手</a></li>
      <li><a class="cursor-help">问号</a></li>
      <li><a class="cursor-wait">沙漏</a></li>
      <li><a class="cursor-auto">默认</a></li>
    </ul>
  </body>
</html>

页面浏览效果：
光标形状
说明：

样式属性cursor常见的值及说明如下：

属性值	说明
`crosshair`	光标呈现为十字线
`pointer`	光标呈现为指示链接的指针（一只手）
`help`	光标指示可用的帮助（通常是一个问号或一个气球）
`wait`	光标指示程序正忙（通常是一只表或沙漏）
`auto`	默认。浏览器默认设置的光标形状

五、最值尺寸

CSS中可以为元素设置最大宽度、最大高度、最小宽度和最小高度这些零界值尺寸。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 最值尺寸 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d-parent {width: 150px; height: 150px; border: 5px dashed lightsalmon; margin: 10px; float: left; overflow: hidden; resize: both;}
      .d-parent>div {width: 50%; height: 50%;}
      .d-min-size {background-color: lightgreen; min-width: 75px; min-height: 75px;}
      .d-max-size {background-color: lightskyblue; max-width: 75px; max-height: 75px;}
    </style>
  </head>
  <body>
    <div class="d-parent">
      <div class="d-min-size"></div>
    </div>
    <div class="d-parent">
      <div class="d-max-size"></div>
    </div>
  </body>
</html>

页面浏览效果：
最值尺寸
说明：

min-width属性对元素的宽度设置一个最小限制，min-height属性对元素的高度设置一个最低限制，max-width属性对元素的宽度设置一个最大限制， max-height属性对元素的高度设置一个最高限制。这些属性可以使用数值赋值，也可以使用百分比赋值，不允许指定负值。
样式属性resize可以设置元素是否允许用户通过拖曳鼠标改变大小，必须设置属性overflow属性为visible以外的其他值时，resize属性才会生效。

六、元素可见性

CSS中使用visibility属性规定元素是否可见。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 元素可见性 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d-parent {width: 150px; height: 150px; margin: 10px; float: left; background-color: lightsalmon;}
      .d-parent>div {height: 75px;}
      .d-child1 {visibility: hidden;}
      .d-child2 {display: none;}
    </style>
  </head>
  <body>
    <div class="d-parent">
      <p>这是上面的一段文字</p>
      <div class="d-child1"></div>
      <p>这是下面的一段文字</p>
    </div>
    <div class="d-parent">
      <p>这是上面的一段文字</p>
      <div class="d-child2"></div>
      <p>这是下面的一段文字</p>
    </div>
  </body>
</html>