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