视频教程: 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中与背景相关的属性可以用来设置元素的颜色、图像、位置、尺寸、重复方式等。以下是一些常用的背景属性:
background-color
: 设置元素的背景颜色- 例如:
background-color: #ff0000;
(红色背景)
- 例如:
background-image
: 设置元素的背景图像- 例如:
background-image: url('image.jpg');
- 例如:
background-repeat
: 设置背景图像是否及如何重复- 可选值包括:
repeat
(默认,在水平和垂直方向重复)、repeat-x
(只在水平方向重复)、repeat-y
(只在垂直方向重复)、no-repeat
(不重复)
- 可选值包括:
background-position
: 设置背景图像的位置- 例如:
background-position: center center;
(图像在元素的中心) - 也可以使用像素值或百分比,如:
background-position: 10px 20px;
- 例如:
background-size
: 设置背景图像的尺寸- 例如:
background-size: cover;
(覆盖整个元素,图像可能被裁剪) background-size: contain;
(图像完整显示在元素内,可能不会覆盖整个元素)- 也可以使用像素值或百分比,如:
background-size: 100px 200px;
- 例如:
background-attachment
: 设置背景图像是否固定或者随着页面的其余部分滚动- 可选值包括:
scroll
(默认,背景图像随页面滚动)、fixed
(背景图像固定,不随页面滚动)、local
(背景图像随元素内容滚动)
- 可选值包括:
background
: 简写属性,可以在一个声明中设置所有的背景属性- 例如:
background: #ffffff url('image.jpg') no-repeat right top;
- 例如:
5. 鼠标相关属性(cursor)
在CSS中,与鼠标相关的属性主要用于改变鼠标指针的样式,这些属性属于cursor
属性的不同值。以下是一些常用的与鼠标指针相关的CSS属性值:
default
:标准光标,通常是一个箭头pointer
:通常用于链接上,看起来像一只手,表示点击可用text
:I形光标,用于文本可编辑区域,如输入框或可选文本wait
:通常是沙漏或旋转的圆圈,表示程序忙碌中,请等待help
:通常是一个问号或者箭头加问号,表示可以获取帮助move
:十字箭头,表示对象可以被移动not-allowed
或no-drop
:禁止标记,表示当前操作不允许zoom-in
和zoom-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中,长度单位用于指定元素的大小、间距、边框宽度等。以下是一些常用的长度单位:
- 像素 (px): 基于屏幕分辨率的固定单位,通常用于网页设计
- 百分比 (%): 相对于父元素的百分比,常用于响应式设计
- em: 相对于当前元素的字体大小。如果当前元素的字体大小是16px,那么1em等于16px
- 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>© 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;
的元素不会显示,并且不会占据文档流中的空间