CSS基础(列表相关属性、边框相关属性、表格独有属性、背景相关属性、鼠标相关属性、常用长度单位、元素的显示模式)


视频教程: 108_CSS_列表相关属性

1. 列表相关属性

在 CSS 中,可以用来设计列表样式的属性有很多,以下是一些常用的列表相关属性:

1.1 列表类型(list-style-type)

这个属性定义了列表项标记的类型。常见的值包括:

  • disc:实心圆点(默认值)
  • circle:空心圆点
  • square:实心方块
  • decimal:数字
  • none:无标记

1.2 列表项位置(list-style-position)

这个属性定义了列表项标记的位置,常见的值有:

  • inside:标记放置在文本以内
  • outside:标记放置在文本以外(默认值)

1.3 列表项图像(list-style-image)

列表项图像属性允许使用自定义的图片作为列表项的标记

1.4 复合属性(list-style)

复合属性属性是列表类型、列表项位置、列表项图像三个属性的简写形式,可以一次性设置列表的类型、图像和位置。例如:

ul {
  list-style: square inside url('bullet.png');
}

1.5 示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>列表相关属性</title>
  <style>
      body {
          font-family: 'Microsoft YaHei', sans-serif;
          line-height: 1.6;
      }

      .movie-list {
          width: 80%;
          margin: 20px auto;
          padding: 0;
      }

      .movie-list h2 {
          color: #333;
          border-bottom: 2px solid #333;
          padding-bottom: 5px;
      }

      .movie-list ul {
          list-style: inside url('./img.png'); /* 实心方块,标记在文本内,自定义图像 */
      }

      .movie-list li {
          margin-bottom: 10px;
          padding-left: 20px;
          font-size: 28px;
      }

      .movie-list ol {
          list-style: decimal outside; /* 数字,标记在文本外 */
      }
  </style>
</head>
<body>

<div class="movie-list">
  <h2>本周热门电影排行榜</h2>
  <ul>
    <li>《长津湖》:以抗美援朝战争为背景的历史战争片</li>
    <li>《沙丘》:科幻巨制,改编自弗兰克·赫伯特的同名小说</li>
    <li>《007:无暇赴死》:詹姆斯·邦德系列的最新作品</li>
    <li>《失控玩家》:一位游戏NPC的觉醒之旅</li>
  </ul>

  <h2>即将上映电影</h2>
  <ol>
    <li>《蜘蛛侠:英雄无归》:蜘蛛侠系列的最新续集</li>
    <li>《黑客帝国:矩阵重启》:经典科幻电影系列的回归</li>
    <li>《反贪风暴5》:廉政公署的调查故事</li>
  </ol>
</div>

</body>
</html>

2. 边框相关属性

在CSS中,与边框相关的属性允许你设置元素边框的样式、宽度和颜色。以下是一些常用的边框相关属性:

2.1 边框样式(border-style)

这个属性定义了边框的样式。常见值包括:

  • none:无边框
  • hidden:隐藏边框
  • dotted:点状边框
  • dashed:虚线边框
  • solid:实线边框
  • double:双线边框
  • groove:3D凹槽边框
  • ridge:3D垄状边框
  • inset:3D内嵌边框
  • outset:3D外嵌边框

2.2 边框宽度(border-width)

这个属性定义了边框的宽度。常见值包括:

  • thin
  • medium(默认值)
  • thick
  • <length>(如:1px, 2em等)

2.3 边框颜色(border-color)

这个属性定义了边框的颜色。可以是颜色名称、十六进制、RGB、RGBA、HSL、HSLA等。

2.4 边框复合属性(border)

边框符合属性属性是边框样式、边框宽度、边框颜色三个属性的简写形式,可以一次性设置边框的样式、宽度和颜色。例如:

border: 1px solid #000000;

2.5 示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>边框相关属性</title>
  <style>
      .product-card {
          border: 2px solid #007BFF; /* 设置边框样式、宽度和颜色 */
          border-radius: 10px; /* 设置圆角边框 */
          padding: 20px;
          width: 300px;
          margin: 20px auto;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加边框阴影 */
      }

      .product-card h2 {
          margin-top: 0;
          color: #333333;
      }

      .product-card p {
          color: #666666;
      }

      .product-card img {
          width: 100%;
          border-radius: 5px; /* 图片也设置圆角边框 */
      }

      .product-price {
          color: #FF5722;
          font-weight: bold;
      }
  </style>
</head>
<body>

<div class="product-card">
  <img src="./smart-watch.png" alt="智能手表">
  <h2>智能手表</h2>
  <p>这款智能手表具有心率监测、GPS定位、多种运动模式等功能,适合日常生活和运动使用。</p>
  <p class="product-price">¥ 1999</p>
</div>

</body>
</html>

3. 表格独有属性

CSS 中有一些属性是专门用于表格的,这些属性可以更好地控制表格的布局和样式。以下是一些表格独有的属性:

3.1 表格布局属性(table-layout)

这个属性定义了用于布局表格单元格、行和列的算法。它有两个常用的值:

  • auto(默认值):列宽度由单元格内容设定
  • fixed:列宽由表格宽度和列宽度设定

3.2 边框合并属性(border-collapse)

这个属性用于设置表格的边框是否合并为一个单一的边框,或者分开显示。它有两个常用的值:

  • separate(默认值):边框分开显示
  • collapse:如果可能,边框会合并为一个单一的边框

3.3 空单元格显示属性(empty-cells)

这个属性指定了是否显示表格中的空单元格的边框和背景。它有两个常用的值:

  • show(默认值):显示空单元格的边框和背景
  • hide:不显示空单元格的边框和背景

3.4 表格标题位置属性(caption-side)

这个属性指定了表格标题的位置。它有两个常用的值:

  • top(默认值):标题在表格上方
  • bottom:标题在表格下方

3.5 示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格独有属性</title>
  <style>
      /* 表格基本样式 */
      table {
          width: 100%; /* 表格宽度 */
          border-collapse: collapse; /* 边框合并 */
          table-layout: fixed; /* 固定表格布局 */
          background-color: #ffffff; /* 表格背景颜色 */
      }

      /* 表格边框和填充 */
      th, td {
          border: 2px solid #4CAF50; /* 单元格边框 */
          padding: 12px 15px; /* 单元格内边距 */
          text-align: left; /* 文本对齐 */
      }

      /* 表格标题样式 */
      caption {
          caption-side: top; /* 标题位置 */
          padding: 15px; /* 标题内边距 */
          font-size: 28px; /* 标题字体大小 */
          font-weight: bold; /* 标题字体加粗 */
          color: #333333; /* 标题颜色 */
          text-align: center; /* 标题文本居中对齐 */
      }

      /* 表头样式 */
      thead {
          background-color: #4CAF50; /* 表头背景颜色 */
          color: #ffffff; /* 表头文字颜色 */
      }

      /* 奇数行背景颜色 */
      tbody tr:nth-child(odd) {
          background-color: #f2f2f2; /* 奇数行背景颜色 */
      }

      /* 偶数行背景颜色 */
      tbody tr:nth-child(even) {
          background-color: #e7e7e7; /* 偶数行背景颜色 */
      }

      /* 空单元格不显示边框和背景 */
      .no-empty-cell td:empty {
          border: none; /* 空单元格无边框 */
          background-color: transparent; /* 空单元格背景透明 */
      }
  </style>
</head>
<body>

<table class="no-empty-cell">
  <caption>产品销售数据</caption>
  <thead>
  <tr>
    <th>产品名称</th>
    <th>销售数量</th>
    <th>销售额</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>智能手表</td>
    <td>150</td>
    <td>$45,000</td>
  </tr>
  <tr>
    <td>无线耳机</td>
    <td></td> <!-- 这是一个空单元格 -->
    <td>$22,000</td>
  </tr>
  <tr>
    <td>智能手环</td>
    <td>200</td>
    <td></td> <!-- 这是另一个空单元格 -->
  </tr>
  </tbody>
</table>

</body>
</html>

4. 背景相关属性

CSS中与背景相关的属性可以用来设置元素的颜色、图像、位置、尺寸、重复方式等。以下是一些常用的背景属性:

  1. background-color: 设置元素的背景颜色
    • 例如:background-color: #ff0000;(红色背景)
  2. background-image: 设置元素的背景图像
    • 例如:background-image: url('image.jpg');
  3. background-repeat: 设置背景图像是否及如何重复
    • 可选值包括:repeat(默认,在水平和垂直方向重复)、repeat-x(只在水平方向重复)、repeat-y(只在垂直方向重复)、no-repeat(不重复)
  4. background-position: 设置背景图像的位置
    • 例如:background-position: center center;(图像在元素的中心)
    • 也可以使用像素值或百分比,如:background-position: 10px 20px;
  5. background-size: 设置背景图像的尺寸
    • 例如:background-size: cover;(覆盖整个元素,图像可能被裁剪)
    • background-size: contain;(图像完整显示在元素内,可能不会覆盖整个元素)
    • 也可以使用像素值或百分比,如:background-size: 100px 200px;
  6. background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动
    • 可选值包括:scroll(默认,背景图像随页面滚动)、fixed(背景图像固定,不随页面滚动)、local(背景图像随元素内容滚动)
  7. background: 简写属性,可以在一个声明中设置所有的背景属性
    • 例如:background: #ffffff url('image.jpg') no-repeat right top;

5. 鼠标相关属性(cursor)

在CSS中,与鼠标相关的属性主要用于改变鼠标指针的样式,这些属性属于cursor属性的不同值。以下是一些常用的与鼠标指针相关的CSS属性值:

  • default:标准光标,通常是一个箭头
  • pointer:通常用于链接上,看起来像一只手,表示点击可用
  • text:I形光标,用于文本可编辑区域,如输入框或可选文本
  • wait:通常是沙漏或旋转的圆圈,表示程序忙碌中,请等待
  • help:通常是一个问号或者箭头加问号,表示可以获取帮助
  • move:十字箭头,表示对象可以被移动
  • not-allowedno-drop:禁止标记,表示当前操作不允许
  • zoom-inzoom-out:放大镜图标,表示可以通过点击进行缩放

示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>鼠标相关属性</title>
  <style>
      body {
          font-family: Arial, sans-serif;
          line-height: 1.6;
          margin: 0;
          padding: 20px;
          background-color: #f4f4f4;
      }

      .container {
          width: 80%;
          margin: auto;
          overflow: hidden;
      }

      header {
          background: #50b3a2;
          color: #ffffff;
          padding-top: 30px;
          min-height: 70px;
          border-bottom: #e8491d 3px solid;
      }

      header h1 {
          text-align: center;
          text-transform: uppercase;
          margin: 0;
          font-size: 24px;
      }

      .product {
          background: white;
          padding: 20px;
          margin-top: 20px;
          cursor: pointer;
      }

      .product:hover {
          background-color: #f4f4f4;
      }

      .add-to-cart {
          display: inline-block;
          padding: 10px 20px;
          background-color: #e8491d;
          color: white;
          text-decoration: none;
          cursor: pointer;
      }

      .add-to-cart:hover {
          background-color: #d63e19;
      }

      .help-icon {
          cursor: help;
      }

      .move-area {
          width: 100px;
          height: 100px;
          background-color: lightblue;
          margin-top: 20px;
          cursor: move;
      }

      .not-allowed-area {
          width: 100px;
          height: 100px;
          background-color: lightcoral;
          margin-top: 20px;
          cursor: not-allowed;
      }

      .zoom-in-area {
          width: 100px;
          height: 100px;
          background-color: lightgreen;
          margin-top: 20px;
          cursor: zoom-in;
      }

      .zoom-out-area {
          width: 100px;
          height: 100px;
          background-color: lightpink;
          margin-top: 20px;
          cursor: zoom-out;
      }
  </style>
</head>
<body>

<div class="container">
  <header>
    <h1>欢迎来到我们的在线书店</h1>
  </header>
  <div class="product">
    <h2>《活着为了什么》</h2>
    <p>这本书探讨了人生的意义和价值。</p>
    <a href="#" class="add-to-cart">加入购物车</a>
  </div>
  <div class="product">
    <h2>《编程的艺术》</h2>
    <p>一本关于编程技巧和艺术的经典书籍。</p>
    <a href="#" class="add-to-cart">加入购物车</a>
  </div>
  <div class="help-icon" title="点击这里获取帮助!">
    帮助
  </div>
  <div class="move-area">
    拖动我
  </div>
  <div class="not-allowed-area">
    禁止区域
  </div>
  <div class="zoom-in-area">
    放大
  </div>
  <div class="zoom-out-area">
    缩小
  </div>
</div>

</body>
</html>

6. 常用长度单位

在CSS中,长度单位用于指定元素的大小、间距、边框宽度等。以下是一些常用的长度单位:

  1. 像素 (px): 基于屏幕分辨率的固定单位,通常用于网页设计
  2. 百分比 (%): 相对于父元素的百分比,常用于响应式设计
  3. em: 相对于当前元素的字体大小。如果当前元素的字体大小是16px,那么1em等于16px
  4. rem: 相对于根元素(html元素)的字体大小。与em类似,但始终基于根元素的字体大小

示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用长度单位</title>
  <style>
      body {
          font-size: 16px; /* 根元素字体大小设置为16px */
          line-height: 1.6;
          margin: 0;
          padding: 0;
          font-family: 'Microsoft YaHei', Arial, sans-serif;
      }

      .container {
          width: 80%; /* 宽度为父元素宽度的80% */
          margin: 0 auto; /* 水平居中 */
          max-width: 800px; /* 最大宽度限制 */
      }

      header {
          background-color: #f3f3f3;
          padding: 20px 0; /* 使用像素单位设置顶部和底部内边距 */
      }

      h1 {
          font-size: 2.5rem; /* 标题字体大小相对于根元素字体大小 */
          text-align: center;
          margin-bottom: 0.5em; /* 使用em单位设置与后面元素的间距 */
      }

      h2 {
          font-size: 1.8rem; /* 子标题字体大小相对于根元素字体大小 */
          color: #333333;
          text-align: center;
          margin-top: 0; /* 重置默认的顶部外边距 */
      }

      p {
          font-size: 1em; /* 段落字体大小相对于当前元素字体大小,这里与根元素相同 */
          margin-bottom: 1em; /* 使用em单位设置段落之间的间距 */
      }

      .footer {
          text-align: center;
          padding: 10px 0; /* 使用像素单位设置顶部和底部内边距 */
          background-color: #eaeaea;
          margin-top: 40px; /* 使用像素单位设置顶部外边距 */
      }
  </style>
</head>
<body>
<div class="container">
  <header>
    <h1>CSS长度单位详解</h1>
    <h2>如何在设计中使用px、%、em和rem</h2>
  </header>

  <article>
    <p>
      在网页设计领域,掌握CSS长度单位的使用对于创建响应式和易于访问的布局至关重要。
      像素(px)是一种基于显示器分辨率的固定度量单位,通常用于网页设计。
      百分比(%)是相对于父元素大小的相对单位,适用于流体布局设计。
    </p>
    <p>
      em单位相对于应用它的元素的字体大小,而rem单位相对于根元素的字体大小。
      rem单位在排版方面更为一致,因为它避免了嵌套em单位可能出现的复合效应。
    </p>
  </article>

  <footer class="footer">
    <p>&copy; 2023 CSS长度单位博客</p>
  </footer>
</div>
</body>
</html>

7. 元素的显示模式

在CSS中,元素的显示模式(display type)决定了元素如何生成盒模型,以及它们在文档流中的行为。以下是一些常见的显示模式:

7.1 块级元素(Block-level elements)

  • 默认宽度为父元素的100%
  • 在垂直方向上,一个接一个地排列
  • 可以设置宽度、高度、内边距和外边距
  • 例如:<div>, <h1>-<h6>, <p>, <form>, <header>, <footer>, <section>, <article>, <nav>, <aside>

7.2 行内元素(Inline elements)

  • 宽度和高度通常由内容决定,不能直接设置
  • 在水平方向上,与相邻的行内元素或内容一起排列
  • 内边距、外边距和边框可以影响行高,但不会影响行布局
  • 例如:<span>, <a>, <strong>, <em>

7.3 行内块元素(Inline-block elements)

  • 结合了块级元素和行内元素的特性
  • 可以设置宽度、高度、内边距和外边距
  • 在水平方向上,与相邻的行内元素或内容一起排列
  • 例如:<input>, <button>, <img>

7.4 隐藏元素

  • 使用display: none;的元素不会显示,并且不会占据文档流中的空间
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

聂 可 以

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值