重拾前端基础知识：CSS
- 前言
- 选择器
- 简单选择器
- 属性选择器
- 组合选择器
- 插入CSS
- 内嵌样式（Inline Style）
- 内部样式（Internal Style）
- 外部样式（External Style）
- 层叠
- 颜色
- 背景颜色
- 文本颜色
- RGB 颜色
- HEX 颜色
- HSL 颜色
- 背景
- 背景颜色
- 背景图像
- 文本
- 文本对齐
- 垂直对齐
- 文本装饰
- 文本转换
- 文字间距
- 文本阴影
- 字体
- 字体样式
- 字体大小
- 图标
- 链接
- 列表
- 边框
- 表格
- 合并
- 边框
- 宽度和高度
- 水平对齐
- 垂直对齐
- 水平分隔线
- 可悬停表格
- 条状表格
- 高度和宽度
- 盒模型
- 外边距
- 内边距
- 轮廓
- 布局
- 显示
- 定位
- 溢出
- 浮动
- 伪类
- 伪元素
- 透明度
- 案例解析
- 垂直导航栏
- 水平导航栏
前言
CSS（层叠样式表）是一种用于描述网页内容外观和布局的样式表语言。它与 HTML 结合使用，可以控制网页中元素的样式、排版、颜色、大小等方面，从而实现页面的美化和布局控制。
CSS的语法由选择器和声明块组成：
CSS注释以 /* 开始, 以 */ 结束, 实例如下：
/*这是个注释*/
p{
/*这是另一个注释*/
color:black;
}
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>css示例</p>
</body>
</html>
我们可以通过样式修改字体的颜色，如图所示：
选择器
CSS 使用选择器来选中 HTML 文档中的元素，并对其应用样式。
简单选择器
常见的选择器包括标签选择器（如 p、h1）、类选择器（如 .myclass）、ID 选择器（如 #myid）和属性选择器等。
- 标签选择器
标签选择器是 CSS 中最常见和最基础的选择器之一，它可以选择 HTML 文档中所有特定类型的元素，并对它们应用样式。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
h1 {
color:orange;
}
p {
color: red;
}
</style>
</head>
<body>
<p>css示例</p>
<h1>css示例2</h1>
</body>
</html>
如图所示
- 类选择器
类选择器的语法使用一个点 (.) 后跟类名称来定义，例如 .classname。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
.myclass{
color: red;
}
</style>
</head>
<body>
<div class="myclass">css示例</div>
</body>
</html>
注意：类名不能以数字开头！
- ID选择器
每个 HTML 元素都可以具有唯一的 ID 属性，因此 ID 选择器可用于选择唯一的元素并为其应用样式。ID 选择器的语法使用一个井号 (#) 后跟 ID 名称来定义，例如 #myid。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
#myid{
color: red;
}
</style>
</head>
<body>
<div id="myid">css示例</div>
</body>
</html>
注意：id 名称不能以数字开头。
- 分组选择器
如果多个标签、class或id具有相同属性，你可以用逗号(,)分隔。例如，如果要选择同时具有 class1 和 class2 的元素，可以使用以下代码：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
.myclass,.myclass2{
color: red;
}
</style>
</head>
<body>
<div class="myclass">css示例</div>
<div class="myclass2">css示例</div>
</body>
</html>
- 通用选择器
用星号(*)表示，通用选择器匹配文档中的任何元素。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
属性选择器
属性选择器是 CSS 中一种用于根据元素的属性值选择元素并为其应用样式的选择器。属性选择器允许您根据元素的属性及其对应的属性值来选择元素，从而实现更具灵活性的样式控制。
- 选择具有特定属性的元素：
[attribute] {
/* 样式 */
}
示例：选中所有具有 target 属性的链接元素。
a[target] {
color: red;
}
- 选择具有特定属性及属性值的元素：
[attribute=value] {
/* 样式 */
}
示例：选中所有 type 属性值为 text 的输入框元素。
input[type="text"] {
border: 1px solid #ccc;
}
- 选择具有包含特定属性值的元素（属性值包含指定值）：
[attribute*=value] {
/* 样式 */
}
示例：选中所有 class 属性值中包含 btn 的按钮元素。
button[class*="btn"] {
background-color: yellow;
}
- 选择具有以特定属性值开头的元素：
[attribute^=value] {
/* 样式 */
}
示例：选中所有 src 属性值以 https 开头的图像元素。
img[src^="https"] {
border: 2px solid green;
}
- 选择具有以特定属性值结尾的元素：
[attribute$=value] {
/* 样式 */
}
示例：选中所有 href 属性值以 .pdf 结尾的链接元素。
a[href$=".pdf"] {
color: blue;
}
组合选择器
CSS 组合选择器是一种将多个选择器组合起来，以选择满足特定条件的元素的方法。组合选择器允许您根据元素之间的关系来选择元素，例如它们的父子关系、兄弟关系等。
- 后代选择器（空格选择器）
使用空格来选择作为某个元素后代的元素。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div p{
color: red;
}
</style>
</head>
<body>
<div>
<p>段落一</p>
<p>段落二</p>
</div>
<div>css示例</div>
</body>
</html>
如图所示
- 子选择器（直接子元素选择器）
使用大于号（>）选择作为某个元素直接子元素的元素。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div>p{
color: red;
}
</style>
</head>
<body>
<div>
<p>段落一</p>
<p>段落二</p>
</div>
<div>css示例</div>
</body>
</html>
如图所示
- 相邻兄弟选择器
使用加号（+）选择与某个元素相邻的下一个元素。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div+p{
color: red;
}
</style>
</head>
<body>
<div>
<p>段落一</p>
</div>
<p>css示例</p>
<p>css示例2</p>
</body>
</html>
如图所示
- 一般兄弟选择器
使用波浪号（~）选择与某个元素具有相同父元素且在它之后的所有元素。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div~p{
color: red;
}
</style>
</head>
<body>
<div>
<p>段落一</p>
</div>
<p>css示例</p>
<p>css示例2</p>
</body>
</html>
如图所示
插入CSS
在 HTML 中插入样式表的方法有三种：内嵌样式、内部样式和外部样式。
内嵌样式（Inline Style）
在 HTML 元素中使用 style 属性来定义样式。这种方法适用于只需要修改单个元素的样式，但不推荐在整个页面中使用。
<p style="color: red; font-size: 16px;">这是一段红色、字体大小为 16 像素的文本。</p>
内部样式（Internal Style）
在 HTML 文件的 <head> 标签中使用 <style> 标签来定义样式。这种方法适用于修改整个页面或整个网站的样式。
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一段红色、字体大小为 16 像素的文本。</p>
</body>
外部样式（External Style）
将样式定义在一个独立的 CSS 文件中，然后在 HTML 文件中使用 <link> 标签来引用该文件。这种方法适用于修改整个网站的样式，可以使样式与内容分离。
在css文件中定义样式：
p {
color: red;
font-size: 16px;
}
在 HTML 文件中引用该文件：
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一段红色、字体大小为 16 像素的文本。</p>
</body>
一般情况下，优先级如下：
内联样式 > 内部样式 >外部样式 > 浏览器默认样式
层叠
当多个样式规则应用到同一个元素时，CSS 使用层叠规则来确定最终的样式。通常情况下，后面的规则会覆盖先前的规则，但可以通过特定的选择器权重和级别来进行调整。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
color: blue;
font-size: 18px;
}
.special {
color: red;
}
</style>
</head>
<body>
<p class="special" style="font-size: 20px;">这是一个段落文本。</p>
</body>
</html>
这个段落的样式为文本颜色为红色、字体大小为 20px。
如果两个规则具有相同的重要性和特殊性，则后出现的规则将覆盖前面的规则。
颜色
你可以使用CSS来修改颜色，比如：背景颜色、字体颜色、等。
背景颜色
可以使用background-color属性定义背景颜色。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
p{
background-color: yellow;
}
</style>
</head>
<body>
<p>css示例</p>
</body>
</html>
如图所示
文本颜色
使用color属性定义字体颜色。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>css示例</p>
</body>
</html>
如图所示
RGB 颜色
在 CSS 中，RGB 颜色值表示一种使用红色、绿色和蓝色分量来混合生成颜色的方法。每个颜色分量的取值范围是 0 到 255。你可以使用 rgb() 函数来指定一个颜色，语法
color: rgb(red, green, blue);
不同的数值展示的颜色深度也不同，如下：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 255, 0);">rgb(0, 255, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
</body>
</html>
如图所示
RGBA与 RGB 类似，但多了一个透明度（Alpha）分量，用来控制颜色的透明程度。RGBA 中透明度分量的取值范围是 0.0 到 1.0。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1 style="background-color:rgba(120, 120, 0, 1);">rgba(120, 120, 0, 1)</h1>
<h1 style="background-color:rgba(120, 120, 0, 0.5);">rgba(120, 120, 0, 0.5)</h1>
<h1 style="background-color:rgba(120, 120, 0, 0);">rgba(120, 120, 0, 0)</h1>
</body>
</html>
如图所示
HEX 颜色
在 CSS 中，可以使用以下格式的十六进制值来指定颜色：
三位十六进制值：使用三位十六进制数来表示颜色，其中每个分量由一个十六进制数字表示。每个分量的取值范围是 0 到 F，其中 A 到 F 表示 10 到 15。
例如，使用三位十六进制值 #F00 表示红色，#0F0 表示绿色，#00F 表示蓝色。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1 style="background-color:#F00;">#F00</h1>
<h1 style="background-color:#0F0;">#0F0</h1>
<h1 style="background-color:#00F;">#00F</h1>
</body>
</html>
六位十六进制值：使用六位十六进制数来表示颜色，其中每个分量由两个十六进制数字表示。每个分量的取值范围是 00 到 FF。
例如，使用六位十六进制值 #FF0000 表示红色，#00FF00 表示绿色，#0000FF 表示蓝色。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1 style="background-color:#FF0000;">#FF0000</h1>
<h1 style="background-color:#00FF00;">#00FF00</h1>
<h1 style="background-color:#0000FF;">#0000FF</h1>
</body>
</html>
对于六位十六进制值，如果每个分量的两个十六进制数字相同，可以缩写为三位形式。例如，#FF0000 可以缩写为 #F00，#00FF00 可以缩写为 #0F0，#0000FF 可以缩写为 #00F。
HSL 颜色
HSL（Hue、Saturation、Lightness）是一种基于颜色的色彩模型，它将颜色表示为色相、饱和度和亮度三个分量。在 HSL 模型中，色相是一个角度值，表示颜色在色轮上的位置；饱和度表示颜色的强度或纯度；亮度表示颜色的亮度或黑暗程度。
在 CSS 中，我们可以使用 hsl() 函数来表示 HSL 颜色。其中，第一个参数表示色相，取值范围为 0 到 360；第二个参数表示饱和度，取值范围为 0% 到 100%；第三个参数表示亮度，也是取值范围为 0% 到 100%。例如，红色可以表示为 hsl(0, 100%, 50%)，其中色相为 0，饱和度为 100%，亮度为 50%
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1 style="background-color:hsl(0, 100%, 50%)">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(120, 100%, 50%)">hsl(120, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
</body>
</html>
除了 hsl() 函数外，还有 hsla() 函数可用于设置带有透明度的 HSL 颜色，它的第四个参数表示透明度，取值范围为 0 到 1。例如，带有半透明效果的红色可以表示为 hsla(0, 100%, 50%, 0.5)。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1 style="background-color:hsla(0, 100%, 50%, 0)">hsla(0, 100%, 50%, 0)</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.5)">hsla(120, 100%, 50%, 0.5)</h1>
<h1 style="background-color:hsla(240, 100%, 50%, 1);">hsla(240, 100%, 50%, 1)</h1>
</body>
</html>
背景
CSS 背景属性用于定义元素的背景效果。
背景颜色
使用background-color 属性指定元素的背景色。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body style="background-color: blue;">
</body>
</html>
如图所示
opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<div style="background-color: blue;opacity: 0.1;">
<h1>css示例</h1>
</div>
<div style="background-color: blue;opacity: 0.5;">
<h1>css示例</h1>
</div>
</body>
</html>
如图所示
如果您不希望对子元素应用不透明度，例如上面的例子，请使用 RGBA 颜色值。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<div style="background-color: rgba(38, 2, 243, 0.1);">
<h1>css示例</h1>
</div>
<div style="background-color: rgba(38, 2, 243, 0.5);">
<h1>css示例</h1>
</div>
</body>
</html>
如图所示
背景图像
使用background-image 属性指定用作元素背景的图像（默认情况下，图像会重复，以覆盖整个元素）。
<body style="background-image: url(./1.webp);">
如图所示
默认情况下会在页面的水平或者垂直方向平铺。你可以使用background-repeat属性设置水平或垂直平铺。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
body{
background-image: url(./1.webp);
background-repeat:repeat-x;//repeat-x水平平铺、repeat-y垂直平铺
}
</style>
</head>
<body>
</body>
</html>
如图所示
如果你不想让图像平铺可以设置为no-repeat。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
body{
background-image: url(./1.webp);
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>
如图所示
使用background-position属性（ 可以接受一个关键字值（如 top、bottom、left、right、center）或者一个具体的长度值（像素、百分比等）），可以控制背景图片相对于元素内部的位置，从而实现不同的布局效果。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
body{
background-image: url(./1.webp);
background-repeat:no-repeat;
background-position:right top;//背景图片位于元素的右上角。
}
</style>
</head>
<body>
</body>
</html>
如图所示
如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。
body {
background-color: #ffffff;
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
简写后
body {
background: #ffffff url("tree.png") no-repeat right top;
}
文本
CSS 提供了很多用于设置文本样式的属性，包括字体、颜色、大小、行高、字间距、文本阴影等。
前面颜色章节中介绍过文本颜色，使用color属性设置，下面介绍文本的其他用法。
文本对齐
text-align 属性用于设置文本的水平对齐方式，取值包括：left（将文本左对齐）、right：将文本右对齐、center：将文本居中对齐、justify：将文本两端对齐，通过调整单词间距来填充行的宽度。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<h1 style="text-align: left;">文本left对齐</h1>
<h1 style="text-align: right;">文本right对齐</h1>
<h1 style="text-align: center;">文本center对齐</h1>
<h1 style="text-align: justify;">文本justify对齐</h1>
</body>
</html>
如图所示
垂直对齐
vertical-align 属性用于设置元素内联元素的垂直对齐方式的 CSS 属性。
取值包括：
（1）baseline：默认值，元素的基线与父元素的基线对齐。
（2）top：元素的顶部与父元素的顶部对齐。
（3）middle：元素在父元素中垂直居中对齐。
（4）bottom：将元素的底部与父元素的底部对齐。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<div class="box" ><textarea name="" id="" cols="30" rows="10" style="vertical-align: top;"></textarea>top</div>
<div class="box" ><textarea name="" id="" cols="30" rows="10" style="vertical-align: middle;"></textarea>middle</div>
<div class="box" ><textarea name="" id="" cols="30" rows="10" style="vertical-align: bottom;"></textarea>bottom</div>
</body>
</html>
如图所示
文本装饰
text-decoration 是 CSS 属性，用于控制文本的装饰效果，比如下划线、删除线、上划线等。常见的属性值包括：
（1）none：默认值，表示没有任何装饰效果。
（2）underline：在文本下方绘制一条下划线。
（3）overline：在文本上方绘制一条上划线。
（4）line-through：在文本中绘制一条删除线。
（5）underline overline：同时绘制下划线和上划线。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<div style="text-decoration:underline">underline text</div>
<div style="text-decoration:overline">overline text</div>
<div style="text-decoration:line-through">line-through text</div>
<div style="text-decoration:underline overline">underline overline text</div>
</body>
</html>
如图所示
文本转换
通过text-transform属性，我们可以将文本转换为大写、小写或首字母大写形式。常见的属性值包括：
（1）uppercase：将所有字符转换为大写形式。
（2）lowercase：将所有字符转换为小写形式。
（3）capitalize：将每个单词的首字母转换为大写。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<div style="text-transform:lowercase">lowercase text</div>
<div style="text-transform:uppercase">uppercase text</div>
<div style="text-transform:capitalize">capitalize text</div>
</body>
</html>
如图所示
文字间距
text-indent 是 CSS 属性，用于控制文本块的首行缩进。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<div style="text-indent:2em">这是一个美好的一天，从今天开始好好学习，天天向上</div>
</body>
</html>
如图所示
letter-spacing 属性用于指定文本中字符之间的间距。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<div style="letter-spacing: 3px">这是一个美好的一天，从今天开始好好学习，天天向上</div>
</body>
</html>
如图所示
line-height 属性用于指定行之间的间距。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<div style="line-height: 10px">这是一个美好的一天，<br>从今天开始好好学习，天天向上</div>
</body>
</html>
如图所示
文本阴影
text-shadow 是 CSS 属性，用于为文本添加阴影效果。通过这个属性，我们可以为文本设置阴影的颜色、模糊半径和阴影的偏移距离。
（1）h-shadow：水平方向的阴影偏移距离，可以为正值（向右偏移）或负值（向左偏移）。
（2）v-shadow：垂直方向的阴影偏移距离，可以为正值（向下偏移）或负值（向上偏移）。
（3）blur-radius：阴影的模糊半径，值越大表示阴影越模糊。
（4）color：阴影的颜色。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<div style="text-shadow: 2px 2px 5px red;">这是一个美好的一天，从今天开始好好学习，天天向上</div>
</body>
</html>
如图所示
字体
在 CSS 中，你可以使用 font-family 属性来设置文本的字体样式。 font-family 属性用于指定一个或多个字体名称，浏览器会根据这些名称来显示文本（应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束。字体名称应以逗号分隔。）。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<div style="font-family: Serif;">css用例</div>
<div style="font-family: Sans-serif;">css用例</div>
<div style="font-family: Monospace;">css用例</div>
<div style="font-family: Cursive;">css用例</div>
<div style="font-family: Fantasy;">css用例</div>
<div style="font-family: Arial, Helvetica, sans-serif;">css用例</div>
</body>
</html>
如图所示
字体样式
font-style 是 CSS 属性之一，用于设置文本的字体风格，例如斜体或正常体。这个属性可以接受以下几个值：
（1）normal：默认值，表示文本以正常字体展示。
（2）italic：表示文本以斜体展示。
（3）oblique：表示文本以倾斜的形式展示，类似于斜体。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<div style="font-style: normal;">css用例</div>
<div style="font-style: italic;">css用例</div>
<div style="font-style: oblique;">css用例</div>
</body>
</html>
如图所示
font-weight 用于设置文本的字体粗细度。这个属性可以接受以下几个值：
（1）bold：表示文本以粗体展示。
（2）bolder：表示文本以更粗的字体展示。
（3）lighter：表示文本以更细的字体展示。
（4）数字值：表示文本以指定的粗细度展示，例如 font-weight: 500。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<div style="font-weight: bold;">css用例</div>
<div style="font-weight: bolder;">css用例</div>
<div style="font-weight: lighter;">css用例</div>
<div style="font-weight: 50px;">css用例</div>
</body>
</html>
如图所示
font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<div style="font-variant: small-caps;">this is a css demo</div>
</body>
</html>
如图所示
字体大小
font-size 用于设置文本的字体大小。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<div style="font-size: 10px;">css用例</div>
<div style="font-size: 50px;">css用例</div>
</body>
</html>
如图所示
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<div style="font-size: 1em;">css用例</div>
<div style="font-size: 2em;">css用例</div>
</body>
</html>
如图所示
为了缩短代码，你可以使用 font 属性来简写设置文本的字体样式。
selector {
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
}
以下是一个示例代码，展示了如何使用 font 属性来简写设置文本的字体样式：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<div style="font:italic small-caps bold 12px/30px Georgia, serif;">css用例</div>
</body>
</html>
如图所示
图标
向 HTML 页面添加图标的最简单方法是使用图标库，比如：Font Awesome、Bootstrap glyphicons等。
如需使用 Bootstrap glyphicons，请在 HTML 页面的 <head> 部分内添加这行
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
<i class="bi-alarm"></i>
<i class="bi bi-textarea-resize"></i>
<i class="bi bi-capsule-pill"></i>
</body>
</html>
如图所示
链接
可以根据链接处于什么状态来设置链接的不同样式。
a:link：正常的，未访问的链接。
a:link {
color: red;
}
a:visited：用户访问过的链接
a:visited {
color: black;
}
a:hover：用户将鼠标悬停在链接上时。
a:hover {
color: pink;
}
a:active：链接被点击时。
a:active {
color: blue;
}
注意： 在CSS定义中，
a:hover必须被置于a:link和a:visited之后，a:active必须被置于a:hover之后，才是有效的。
列表
list-style-type: 设置列表项标记的类型，如 disc（实心圆）、circle（空心圆）、square（实心正方形）、decimal（数字）、lower-roman（小写罗马数字）等。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>无序列表实例：</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>有序列表实例：</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
如图所示
list-style-image 属性将图像指定为列表项标记：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
ul.a {
list-style-image: url('./a1.svg');
}
</style>
</head>
<body>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
如图所示
边框
CSS 边框（border）属性用于定义元素的边框样式、宽度和颜色。通过设置不同的边框属性，可以为元素添加边框以及调整其样式。
border 属性是用于设置 HTML 元素的边框样式、宽度和颜色的 CSS 属性之一。它可以应用于几乎所有 HTML 元素，包括 <div>、<p>、<table> 等。
border 属性可以具有三个值：
border-style：设置边框的样式，常见的样式包括实线 (solid)、虚线 (dotted)、双实线 (double)、点划线 (dashed) 等。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<p style="border-style:dotted">点状边框。</p>
<p style="border-style:dashed;">虚线边框。</p>
<p style="border-style:solid;">实线边框。</p>
<p style="border-style:double;">双线边框。</p>
<p style="border-style:groove;">凹槽边框。</p>
<p style="border-style:ridge;">垄状边框。</p>
<p style="border-style:inset;">3D inset 边框。</p>
<p style="border-style:outset;">3D outset 边框。</p>
<p style="border-style:none;">无边框。</p>
<p style="border-style:hidden;">隐藏边框。</p>
</body>
</html>
如图所示
border-width：设置四个边框的宽度（上边框、右边框、下边框和左边框）。可以是像素值（如 1px）、百分比值（相对于父元素宽度的百分比）。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<p style="border-style: solid;border-width:1px">实线边框。</p>
<p style="border-style: solid;border-width:1px 2px">实线边框。</p>
<p style="border-style: solid;border-width:1px 2px 3px">实线边框。</p>
<p style="border-style: solid;border-width:1px 2px 3px 4px">实线边框。</p>
</body>
</html>
如图所示
border-color：设置边框的颜色，可以是具体的颜色值（如red、#00ff00），可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<p style="border-style: solid;border-color:red">实线边框。</p>
<p style="border-style: solid;border-color:red green blue yellow">实线边框。</p>
</body>
</html>
如图所示
您还可以只为一个边指定所有单个边框属性：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style></style>
</head>
<body>
<p style="border-top: 1px solid black;">top边框</p>
<p style="border-right: 1px solid black;;">right边框</p>
<p style="border-bottom: 1px solid black;;">bottom边框</p>
<p style="border-left: 1px solid black;;">left边框</p>
</body>
</html>
如图所示
你也可以简写，border: border-width border-style(必填) border-color;。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<p style="border: 1px solid red;">实线边框。</p>
</body>
</html>
如图所示
表格
在 CSS 中，你可以使用样式来美化和布局 HTML 表格。通过设置不同的 CSS 属性，可以调整表格的边框样式、背景颜色、字体样式等，从而定制表格的外观。
合并
border-collapse: 设置表格边框的合并方式，可以取值 collapse （合并边框）或 separate （分开边框）。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style></style>
</head>
<body>
<table border="1px" style="border-collapse: collapse">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steve</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>
如图所示
边框
border: 设置表格边框的样式、宽度和颜色，如 border: 1px solid black;。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style></style>
</head>
<body>
<table border='1px solid black;'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steve</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>
如图所示
宽度和高度
表格的宽度和高度由 width 和 height 属性定义。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
table {
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table border='1px solid black;'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steve</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>
如图所示
水平对齐
text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
table {
width: 100%;
}
th {
text-align: center;
}
td{
text-align: left;
}
</style>
</head>
<body>
<table border='1px solid black;'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steve</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>
如图所示
垂直对齐
vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
table {
width: 100%;
height: 180px;
}
th {
vertical-align: middle;
}
td{
vertical-align: bottom;
}
</style>
</head>
<body>
<table border='1px solid black;'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steve</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>
如图所示
水平分隔线
使用 border-bottom 属性，以实现水平分隔线：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
th,td {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steve</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>
如图所示
可悬停表格
在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
tr:hover {
background-color: pink;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steve</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>
如图所示
条状表格
实现斑马纹表格效果，请使用 nth-child() 选择器。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
/* tr:nth-child(odd)为奇数 */
tr:nth-child(even) {
background-color: gray;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steve</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>
如图所示
高度和宽度
height 和 width 属性用于设置元素的高度和宽度。
auto- 默认。浏览器计算高度和宽度。length- 以px、cm等定义高度/宽度。%- 以包含块的百分比定义高度/宽度。initial- 将高度/宽度设置为默认值。inherit- 从其父值继承高度/宽度。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<div>宽度和高度</div>
</body>
</html>
如图所示
盒模型
在 CSS 中，每个 HTML 元素被视为一个矩形的盒子，具有内容区、内边距、边框和外边距。开发者可以利用这些属性来控制元素的尺寸、间距和边框等。
- 外边距（margin）：围绕边框的空白区域，用于控制元素与其他元素之间的距离。
- 边框（border）：紧接着内边距的边界，用于定义内容区域的边界。
- 内边距（padding）：围绕内容区域的空白区域，可以用来扩展或收缩内容与边框之间的距离。
- 内容区域（content）：显示元素的实际内容，如文本、图片等。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div {
width: 200px;
height: 100px;
padding: 20px;
margin: 25px;
border: 2px solid black;
}
</style>
</head>
<body>
<div>这里是盒子内的实际内容。</div>
</body>
</html>
如图所示
外边距
margin 属性用于在任何定义的边框之外，为元素周围创建空间。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div {
width: 200px;
height: 100px;
margin: 25px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>这里是盒子内的实际内容。</div>
</body>
</html>
如图所示
CSS 拥有用于为元素的每一侧指定外边距的属性：margin-top、margin-right、margin-bottom、margin-left。为了缩减代码，可以在一个属性中指定所有外边距属性（上边距、右边距、下边距、左边距）。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div {
width: 200px;
height: 100px;
margin: 25px 50px 75px 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>这里是盒子内的实际内容。</div>
</body>
</html>
如图所示
您可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div {
width: 200px;
height: 100px;
margin: auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div>这里是盒子内的实际内容。</div>
</body>
</html>
如图所示
你可以说设置为inherit 值，继承自父元素边距
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div {
width: 200px;
height: 100px;
margin-left: 10px;
border: 1px solid black;
}
div p{
margin: inherit;
}
</style>
</head>
<body>
<div><p>这里是盒子内的实际内容。</p></div>
</body>
</html>
如图所示
内边距
padding 属性用于在任何定义的边界内的元素内容周围生成空间。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div {
width: 200px;
height: 100px;
padding: 25px;
border: 1px solid black;
}
</style>
</head>
<body>
<div><p>这里是盒子内的实际内容。</p></div>
</body>
</html>
如图所示
CSS 拥有用于为元素的每一侧指定外边距的属性：padding-top、padding-right、padding-bottom、padding-left。为了缩减代码，可以在一个属性中指定所有外边距属性（上边距、右边距、下边距、左边距）。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div {
width: 200px;
height: 100px;
padding: 25px 50px 75px 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div><p>这里是盒子内的实际内容。</p></div>
</body>
</html>
如图所示
轮廓
轮廓（outline）是一种绘制在元素周围的线条，类似于边框（border），但不影响布局。轮廓通常用于突出显示元素，而不会改变元素本身的大小或位置。
轮廓（outline）属性可以设置以下几个方面：
outline-width：设置轮廓的宽度。outline-style：设置轮廓的样式，如实线、虚线等。outline-color：设置轮廓的颜色。outline-offset：设置轮廓与边框之间的距离。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<p style="outline-style: dotted;">点状轮廓</p>
<p style="outline-style: dashed;">虚线轮廓</p>
<p style="outline-style: solid;">实线轮廓</p>
<p style="outline-style: double;">双线轮廓</p>
<p style="outline-style: groove;">凹槽轮廓。效果取决于 outline-color 值。</p>
<p style="outline-style: ridge;">凸脊轮廓。效果取决于 outline-color 值。</p>
<p style="outline-style: inset;">凹边轮廓。效果取决于 outline-color 值。</p>
<p style="outline-style: outset;">凸边轮廓。效果取决于 outline-color 值。</p>
</body>
</html>
如图所示
outline 属性是用于设置以下各个轮廓属性的简写属性：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
</style>
</head>
<body>
<p style="outline: 1px dotted red">点状轮廓</p>
<p style="outline: 1px dashed red;">虚线轮廓</p>
</body>
</html>
如图所示
outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>轮廓</div>
</body>
</html>
如图所示
轮廓（outline）和边框（border）在CSS中都可以用来为元素添加一种边界效果，但它们有一些区别：
-
影响布局：边框会占据元素的空间并影响布局，而轮廓不会。边框的大小和样式会改变元素的尺寸和位置，而轮廓不会改变元素的盒子模型。
-
绘制位置：边框绘制在元素的内边距和内容之外，而轮廓则绘制在边框之外。这意味着边框是紧贴着元素内部的，而轮廓是在边框外创建额外的边界线。
-
样式和属性：边框具有更多的样式和属性选项，可以设置边框的宽度、样式、颜色以及圆角等。轮廓的样式只能是实线、虚线或双线，且不能单独设置圆角。
-
交互行为：默认情况下，轮廓通常在用户焦点落在元素上时显示，例如通过键盘导航或鼠标点击。边框则始终可见，无论焦点在元素上与否。
在实际应用中，边框常用于为元素提供装饰效果和分隔元素之间的空间，而轮廓常用于突出显示焦点元素或指示元素的状态。
布局
CSS 提供了多种布局方法，包括浮动、定位、弹性布局、网格布局和 Flexbox 等，可以实现复杂的页面布局。
显示
display 属性用于定义元素的显示类型，决定了元素如何在页面中呈现。它可以控制元素是以块级元素、内联元素还是其他特殊类型显示。
常见的 display 属性值包括：
block：将元素显示为块级元素，独占一行，并且默认会占满其父容器的宽度。块级元素可以设置宽度、高度、边距等属性，例如 <div> 元素默认就是块级元素。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>示例1</span><span>示例2</span>
</body>
</html>
如图所示
inline：将元素显示为内联元素，不会独占一行，而是与其他元素在同一行上排列。内联元素的宽度由内容决定，无法设置宽度、高度等属性，例如 <span> 元素默认就是内联元素。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div {
display: inline;
width: 10px;
}
</style>
</head>
<body>
<div>示例1</div><div>示例2</div>
</body>
</html>
如图所示
inline-block：将元素显示为内联块级元素，类似于内联元素，但可以设置宽度、高度、边距等属性。内联块级元素在同一行上排列，且可以在同一行上设置多个元素。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div {
display: inline-block;
width: 10px;
}
</style>
</head>
<body>
<div>示例1</div><div>示例2</div>
</body>
</html>
如图所示
none：将元素隐藏，不会在页面中显示，也不会占据空间。隐藏的元素不会被渲染，对布局没有影响。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div {
display: none;
}
</style>
</head>
<body>
<div>示例1</div><div>示例2</div>
</body>
</html>
定位
position 属性用于控制元素在文档中的位置。它有以下几个值可选：
static（默认值）：元素按照其在文档流中的位置进行布局。它不会受到top、bottom、left和right属性的影响。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div {
width: 500px;
position: static;
top: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>示例1</div>
</body>
</html>
如图所示
relative：元素相对于其正常位置进行定位，即相对于其在文档流中的位置进行偏移。可以通过top、bottom、left和right属性来指定偏移的距离。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div {
width: 500px;
position: relative;
top: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>示例1</div>
</body>
</html>
如图所示
相对定位元素经常被用来作为绝对定位元素的容器块。
absolute：元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于浏览器窗口进行定位。可以通过top、bottom、left和right属性来指定偏移的距离。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
.a {
width: 400px;
height: 400px;
position: relative;
border: 1px solid red;
}
.b {
width: 100px;
position: absolute;
top: 20px;
left: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="a">
<div class="b">示例1</div>
</div>
</body>
</html>
如图所示
fixed：元素相对于浏览器窗口进行定位，即使页面滚动也会保持在固定的位置。也可以使用top、bottom、left和right属性来指定偏移的距离。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
.a {
width: 100px;
position: fixed;
right: 5px;
border: 1px solid red;
}
</style>
</head>
<body>
<p class="a">示例1</p>
<p>示例1</p>
<!-- 省略100个标签 -->
</body>
</html>
如图所示
sticky：根据用户的滚动位置进行定位。元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
.a {
width: 100px;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
border: 1px solid red;
}
</style>
</head>
<body>
<p class="a">sticky示例</p>
<p>示例1</p>
<!-- 省略100个标签 -->
</body>
</html>
如图所示
注：Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用
-webkit- prefix
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
img{
position: absolute;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<p>这是一个文字</p>
<img src="./123456.jpg" alt="title">
</body>
</html>
z-index属性接受任何整数值和关键字auto。通常使用整数值，较大的值会使元素显示在较小值的元素之上。
如图所示
溢出
当元素的内容超出其指定的尺寸或父容器的尺寸时，就会发生溢出（overflow）。可以使用overflow属性来控制溢出内容的表现方式。
overflow属性有以下几个常用的取值：
visible：默认值。内容会溢出到元素框之外，可能会覆盖其他元素。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div{
width: 200px;
height: 100px;
overflow: visible;
}
</style>
</head>
<body>
<div>test文本>test文本>...
</div>
</body>
</html>
如图所示
hidden：溢出的内容会被隐藏，不会显示在元素框之外。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div{
width: 200px;
height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<div>test文本>test文本>...
</div>
</body>
</html>
如图所示
scroll/auto：如果内容溢出，则在需要时显示滚动条。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div{
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<div>test文本>test文本>...
</div>
</body>
</html>
如图所示
overlay：在内容溢出时，内容会在元素框之上继续显示，但会截断。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div{
width: 200px;
height: 100px;
overflow: overlay;
}
</style>
</head>
<body>
<div>test文本>test文本>...
</div>
</body>
</html>
如图所示
浮动
浮动（float）是一种常用的布局技术，用于将元素沿着左侧或右侧浮动，并使其脱离正常文档流。浮动的元素会漂浮在其容器的左侧或右侧，并允许其他内容环绕在周围。
float 属性可以设置以下值之一：
left- 元素浮动到其容器的左侧
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
img{
float: left;
}
</style>
</head>
<body>
<div><img src="./123456.jpg" alt="title"> 这是一个文本内容</div>
</body>
</html>
如图所示
right- 元素浮动在其容器的右侧
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
img{
float: right;
}
</style>
</head>
<body>
<div><img src="./123456.jpg" alt="title"> 这是一个文本内容</div>
</body>
</html>
如图所示
none- 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
img{
float: none;
}
</style>
</head>
<body>
<div><img src="./123456.jpg" alt="title"> 这是一个文本内容</div>
</body>
</html>
如图所示
inherit- 元素继承其父级的float值。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div{
float: right;
}
img{
float: inherit;
}
</style>
</head>
<body>
<div><img src="./123456.jpg" alt="title"> 这是一个文本内容</div>
</body>
</html>
如图所示
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。可设置以下值之一：
（1）left - 左侧不允许浮动元素
（2）right- 右侧不允许浮动元素
（3）both - 左侧或右侧均不允许浮动元素
（4）inherit - 元素继承其父级的 clear 值
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
.a{
float: left;
width: 100px;
height: 50px;
border: 3px solid #73AD21;
}
.b{
border: 3px solid yellow;
width: 100px;
height: 50px;
clear: both;
}
</style>
</head>
<body>
<div class="a">这是一个文本内容</div>
<div class="b"></div>
</body>
</html>
如图所示
伪类
常见的伪类包括但不限于：
:hover：用于选择鼠标悬停在元素上的状态，通常用于创建交互效果。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div:hover{
background-color: green;
}
</style>
</head>
<body>
<div>伪类示例</div>
</body>
</html>
如图所示
:active：用于选择被激活的元素，例如当用户点击鼠标按钮但尚未释放时。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div:active{
background-color: green;
}
</style>
</head>
<body>
<div>伪类示例</div>
</body>
</html>
:focus：用于选择当前拥有键盘输入焦点的元素，通常用于增强表单元素的可访问性。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
input:focus {
border: 11px solid yellow;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
如图所示
:first-child：选择作为其父元素的第一个子元素的元素。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div:first-child{
color: red;
}
</style>
</head>
<body>
<div>伪类示例</div>
<div>伪类示例</div>
</body>
</html>
如图所示
:last-child：选择作为其父元素的最后一个子元素的元素。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div:last-child{
color: red;
}
</style>
</head>
<body>
<div>伪类示例</div>
<div>伪类示例</div>
</body>
</html>
如图所示
:not()：选择除了指定元素之外的所有元素。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div{
color: black;
}
:not(div){
color: red;
}
</style>
</head>
<body>
<div>伪类示例</div>
<p>伪类示例</p>
<div>伪类示例</div>
</body>
</html>
如图所示
:disabled：选择被禁用的表单元素。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
input[type="text"]:enabled{
color: red;
}
input[type="text"]:disabled{
background:#dddddd;
}
</style>
</head>
<body>
<input type="text">
<input type="text" disabled>
</body>
</html>
如图所示
除此之外，还有:empty、:only-child等等，有兴趣的可以自己了解。
伪元素
伪元素是用于在元素的特定位置插入内容的虚拟元素。它们使用双冒号 :: 来表示，用于向元素的特定位置添加样式或内容。
::before：在元素内容的前面插入内容。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
p::before {
content: "前置内容";
color: red;
}
</style>
</head>
<body>
<p>伪元素</p>
</body>
</html>
如图所示
::after：在元素内容的后面插入内容。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
p::after {
content: "后置内容";
color: red;
}
</style>
</head>
<body>
<p>伪元素</p>
</body>
</html>
如图所示
::first-letter：选择元素内容的第一个字母。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
p::first-letter {
font-size: 2em;
color: blue;
}
</style>
</head>
<body>
<p>伪元素</p>
</body>
</html>
如图所示
::first-line：选择元素内容的第一行。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
p::first-line {
color: red;
}
</style>
</head>
<body>
<p>伪元素<br>第二行</p>
</body>
</html>
如图所示
透明度
opacity 属性指定元素的不透明度/透明度（取值范围为 0.0-1.0。值越低，越透明）。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
div{
width: 150px;
height: 150px;
background-color: blue;
opacity: 0.1;
}
div:hover{
opacity: 1;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
如图所示
案例解析
垂直导航栏
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
ul{
list-style-type: none;
padding: 0px;
margin: px;
border: 1px solid black;
width: 200px;
text-align: center;
background-color: antiquewhite;
}
li:hover{
background-color: gray;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>
如图所示
水平导航栏
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
ul{
list-style-type: none;
border: 1px solid black;
overflow: hidden;
background-color: black;
}
li{
float: left;
}
li a {
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: white;
}
li:hover{
background-color: gray;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>
如图所示
- 下拉菜单
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
ul{
list-style-type: none;
border: 1px solid black;
overflow: hidden;
background-color: black;
}
li{
float: left;
}
li a {
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: white;
}
li:hover{
background-color: gray;
}
.dropdown-content {
/*默认不显示*/
display: none;
position: absolute;
background-color: gray;
}
.dropdown-content a {
display: inherit;
}
.dropdown-content a:hover {
/*鼠标悬浮后显示的背景色*/
background-color: #f1f1f1
}
/*悬浮后显示其他标签*/
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li class="dropdown">
<a href="#about">关于</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</body>
</html>
如图所示
