重拾前端基础知识：CSS

成为大佬先秃头2024-03-02 18:56

重拾前端基础知识：CSS

前言

CSS （层叠样式表）是一种用于描述网页内容外观和布局的样式表语言。它与 HTML 结合使用，可以控制网页中元素的样式、排版、颜色、大小等方面，从而实现页面的美化和布局控制。

CSS 的语法由选择器和声明块组成：

CSS 注释以 /* 开始, 以 */ 结束, 实例如下：

css 复制代码 
/*这是个注释*/
p{
    /*这是另一个注释*/
    color:black;
}

示例代码如下：

html 复制代码 
<!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 文档中所有特定类型的元素，并对它们应用样式。

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。

html 复制代码 
<!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。

html 复制代码 
<!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 的元素，可以使用以下代码：

html 复制代码 
<!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>
  • 通用选择器

用星号(*)表示，通用选择器匹配文档中的任何元素。

css 复制代码 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

属性选择器

属性选择器是 CSS 中一种用于根据元素的属性值选择元素并为其应用样式的选择器。属性选择器允许您根据元素的属性及其对应的属性值来选择元素，从而实现更具灵活性的样式控制。

  1. 选择具有特定属性的元素：
css 复制代码 
[attribute] {
  /* 样式 */
}

示例：选中所有具有 target 属性的链接元素。

css 复制代码 
a[target] {
  color: red;
}
  1. 选择具有特定属性及属性值的元素：
css 复制代码 
[attribute=value] {
  /* 样式 */
}

示例：选中所有 type 属性值为 text 的输入框元素。

css 复制代码 
input[type="text"] {
  border: 1px solid #ccc;
}
  1. 选择具有包含特定属性值的元素（属性值包含指定值）：
css 复制代码 
[attribute*=value] {
  /* 样式 */
}

示例：选中所有 class 属性值中包含 btn 的按钮元素。

css 复制代码 
button[class*="btn"] {
  background-color: yellow;
}
  1. 选择具有以特定属性值开头的元素：
css 复制代码 
[attribute^=value] {
  /* 样式 */
}

示例：选中所有 src 属性值以 https 开头的图像元素。

css 复制代码 
img[src^="https"] {
  border: 2px solid green;
}
  1. 选择具有以特定属性值结尾的元素：
css 复制代码 
[attribute$=value] {
  /* 样式 */
}

示例：选中所有 href 属性值以 .pdf 结尾的链接元素。

css 复制代码 
a[href$=".pdf"] {
  color: blue;
}

组合选择器

CSS 组合选择器是一种将多个选择器组合起来，以选择满足特定条件的元素的方法。组合选择器允许您根据元素之间的关系来选择元素，例如它们的父子关系、兄弟关系等。

  • 后代选择器（空格选择器）

使用空格来选择作为某个元素后代的元素。

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>

如图所示

  • 子选择器（直接子元素选择器）

使用大于号（>）选择作为某个元素直接子元素的元素。

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>

如图所示

  • 相邻兄弟选择器

使用加号（+）选择与某个元素相邻的下一个元素。

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>

如图所示

  • 一般兄弟选择器

使用波浪号（~）选择与某个元素具有相同父元素且在它之后的所有元素。

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 属性来定义样式。这种方法适用于只需要修改单个元素的样式，但不推荐在整个页面中使用。

html 复制代码 
<p style="color: red; font-size: 16px;">这是一段红色、字体大小为 16 像素的文本。</p>

内部样式（Internal Style）

在 HTML 文件的 <head> 标签中使用 <style> 标签来定义样式。这种方法适用于修改整个页面或整个网站的样式。

html 复制代码 
<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>这是一段红色、字体大小为 16 像素的文本。</p>
</body>

外部样式（External Style）

将样式定义在一个独立的 CSS 文件中，然后在 HTML 文件中使用 <link> 标签来引用该文件。这种方法适用于修改整个网站的样式，可以使样式与内容分离。

在css文件中定义样式：

css 复制代码 
p {
  color: red;
  font-size: 16px;
}

在 HTML 文件中引用该文件：

html 复制代码 
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是一段红色、字体大小为 16 像素的文本。</p>
</body>

一般情况下，优先级如下：

内联样式 > 内部样式 >外部样式 > 浏览器默认样式

层叠

当多个样式规则应用到同一个元素时，CSS 使用层叠规则来确定最终的样式。通常情况下，后面的规则会覆盖先前的规则，但可以通过特定的选择器权重和级别来进行调整。

html 复制代码 
<!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属性定义背景颜色。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    p{
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>css示例</p>
</body>
</html>

如图所示

文本颜色

使用color属性定义字体颜色。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    p{
      color: red;
    }
  </style>
</head>
<body>
  <p>css示例</p>
</body>
</html>

如图所示

RGB 颜色

在 CSS 中，RGB 颜色值表示一种使用红色、绿色和蓝色分量来混合生成颜色的方法。每个颜色分量的取值范围是 0 到 255。你可以使用 rgb() 函数来指定一个颜色，语法

css 复制代码 
color: rgb(red, green, blue);

不同的数值展示的颜色深度也不同，如下：

html 复制代码 
<!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。

html 复制代码 
<!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 表示蓝色。

html 复制代码 
<!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 表示蓝色。

html 复制代码 
<!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%

html 复制代码 
<!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)。

html 复制代码 
<!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 属性指定元素的背景色。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body style="background-color: blue;">
</body>
</html>

如图所示

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。

html 复制代码 
<!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 颜色值。

html 复制代码 
<!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 属性指定用作元素背景的图像（默认情况下，图像会重复，以覆盖整个元素）。

html 复制代码 
<body style="background-image: url(./1.webp);">

如图所示

默认情况下会在页面的水平或者垂直方向平铺。你可以使用background-repeat属性设置水平或垂直平铺。

html 复制代码 
<!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。

html 复制代码 
<!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）或者一个具体的长度值（像素、百分比等）），可以控制背景图片相对于元素内部的位置，从而实现不同的布局效果。

html 复制代码 
<!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>

如图所示

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

css 复制代码 
body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

简写后

css 复制代码 
body {
  background: #ffffff url("tree.png") no-repeat right top;
}

文本

CSS 提供了很多用于设置文本样式的属性，包括字体、颜色、大小、行高、字间距、文本阴影等。

前面颜色章节中介绍过文本颜色，使用color属性设置，下面介绍文本的其他用法。

文本对齐

text-align 属性用于设置文本的水平对齐方式，取值包括：left（将文本左对齐）、right：将文本右对齐、center：将文本居中对齐、justify：将文本两端对齐，通过调整单词间距来填充行的宽度。

html 复制代码 
<!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：将元素的底部与父元素的底部对齐。

html 复制代码 
<!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：同时绘制下划线和上划线。

html 复制代码 
<!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：将每个单词的首字母转换为大写。

html 复制代码 
<!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 属性，用于控制文本块的首行缩进。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
  </style>
</head>
<body>
  <div style="text-indent:2em">这是一个美好的一天，从今天开始好好学习，天天向上</div>
</body>
</html>

如图所示


letter-spacing 属性用于指定文本中字符之间的间距。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
  </style>
</head>
<body>
  <div style="letter-spacing: 3px">这是一个美好的一天，从今天开始好好学习，天天向上</div>
</body>
</html>

如图所示


line-height 属性用于指定行之间的间距。

html 复制代码 
<!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：阴影的颜色。

html 复制代码 
<!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 属性用于指定一个或多个字体名称，浏览器会根据这些名称来显示文本（应包含多个字体名称作为"后备"系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束。字体名称应以逗号分隔。）。

html 复制代码 
<!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：表示文本以倾斜的形式展示，类似于斜体。

html 复制代码 
<!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。

html 复制代码 
<!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 字体（小型大写字母）显示文本。

html 复制代码 
<!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 用于设置文本的字体大小。

html 复制代码 
<!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

html 复制代码 
<!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 属性来简写设置文本的字体样式。

css 复制代码 
selector {
  font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
}

以下是一个示例代码，展示了如何使用 font 属性来简写设置文本的字体样式：

html 复制代码 
<!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> 部分内添加这行

html 复制代码 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

完整代码如下：

html 复制代码 
<!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：正常的，未访问的链接。
css 复制代码 
a:link {
  color: red;
}
  • a:visited：用户访问过的链接
css 复制代码 
a:visited {
  color: black;
}
  • a:hover：用户将鼠标悬停在链接上时。
css 复制代码 
a:hover {
  color: pink;
}
  • a:active：链接被点击时。
css 复制代码 
a:active {
  color: blue;
}

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后，才是有效的。

列表

list-style-type: 设置列表项标记的类型，如 disc（实心圆）、circle（空心圆）、square（实心正方形）、decimal（数字）、lower-roman（小写罗马数字）等。

html 复制代码 
<!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 属性将图像指定为列表项标记：

html 复制代码 
<!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) 等。
html 复制代码 
<!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）、百分比值（相对于父元素宽度的百分比）。
html 复制代码 
<!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），可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
html 复制代码 
<!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>

如图所示

您还可以只为一个边指定所有单个边框属性：

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;。

html 复制代码 
<!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 （分开边框）。

html 复制代码 
<!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;。

html 复制代码 
<!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 属性定义。

html 复制代码 
<!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> 中内容的水平对齐方式（左、右或居中）。

html 复制代码 
<!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> 中内容的垂直对齐方式（上、下或居中）。

html 复制代码 
<!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 属性，以实现水平分隔线：

html 复制代码 
<!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 选择器，以突出显示鼠标悬停时的表格行：

html 复制代码 
<!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() 选择器。

html 复制代码 
<!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 - 从其父值继承高度/宽度。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    div {
      height: 200px;
      width: 50%;
      background-color: powderblue;
    }
  </style>
</head>
<body>
  <div>宽度和高度</div>
</body>
</html>

如图所示

盒模型

在 CSS 中，每个 HTML 元素被视为一个矩形的盒子，具有内容区、内边距、边框和外边距。开发者可以利用这些属性来控制元素的尺寸、间距和边框等。

  1. 外边距（margin）：围绕边框的空白区域，用于控制元素与其他元素之间的距离。
  2. 边框（border）：紧接着内边距的边界，用于定义内容区域的边界。
  3. 内边距（padding）：围绕内容区域的空白区域，可以用来扩展或收缩内容与边框之间的距离。
  4. 内容区域（content）：显示元素的实际内容，如文本、图片等。
html 复制代码 
<!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 属性用于在任何定义的边框之外，为元素周围创建空间。

html 复制代码 
<!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。为了缩减代码，可以在一个属性中指定所有外边距属性（上边距、右边距、下边距、左边距）。

html 复制代码 
<!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，以使元素在其容器中水平居中。

html 复制代码 
<!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 值，继承自父元素边距

html 复制代码 
<!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 属性用于在任何定义的边界内的元素内容周围生成空间。

html 复制代码 
<!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。为了缩减代码，可以在一个属性中指定所有外边距属性（上边距、右边距、下边距、左边距）。

html 复制代码 
<!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）属性可以设置以下几个方面：

  1. outline-width：设置轮廓的宽度。
  2. outline-style：设置轮廓的样式，如实线、虚线等。
  3. outline-color：设置轮廓的颜色。
  4. outline-offset：设置轮廓与边框之间的距离。
html 复制代码 
<!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 属性是用于设置以下各个轮廓属性的简写属性：

html 复制代码 
<!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 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

html 复制代码 
<!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中都可以用来为元素添加一种边界效果，但它们有一些区别：

  1. 影响布局：边框会占据元素的空间并影响布局，而轮廓不会。边框的大小和样式会改变元素的尺寸和位置，而轮廓不会改变元素的盒子模型。

  2. 绘制位置：边框绘制在元素的内边距和内容之外，而轮廓则绘制在边框之外。这意味着边框是紧贴着元素内部的，而轮廓是在边框外创建额外的边界线。

  3. 样式和属性：边框具有更多的样式和属性选项，可以设置边框的宽度、样式、颜色以及圆角等。轮廓的样式只能是实线、虚线或双线，且不能单独设置圆角。

  4. 交互行为：默认情况下，轮廓通常在用户焦点落在元素上时显示，例如通过键盘导航或鼠标点击。边框则始终可见，无论焦点在元素上与否。

在实际应用中，边框常用于为元素提供装饰效果和分隔元素之间的空间，而轮廓常用于突出显示焦点元素或指示元素的状态。

布局

CSS 提供了多种布局方法，包括浮动、定位、弹性布局、网格布局和 Flexbox 等，可以实现复杂的页面布局。

显示

display 属性用于定义元素的显示类型，决定了元素如何在页面中呈现。它可以控制元素是以块级元素、内联元素还是其他特殊类型显示。

常见的 display 属性值包括：

block：将元素显示为块级元素，独占一行，并且默认会占满其父容器的宽度。块级元素可以设置宽度、高度、边距等属性，例如 <div> 元素默认就是块级元素。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    span {
      display: block;
    }
  </style>
</head>
<body>
  <span>示例1</span><span>示例2</span>
</body>
</html>

如图所示

inline：将元素显示为内联元素，不会独占一行，而是与其他元素在同一行上排列。内联元素的宽度由内容决定，无法设置宽度、高度等属性，例如 <span> 元素默认就是内联元素。

html 复制代码 
<!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：将元素显示为内联块级元素，类似于内联元素，但可以设置宽度、高度、边距等属性。内联块级元素在同一行上排列，且可以在同一行上设置多个元素。

html 复制代码 
<!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：将元素隐藏，不会在页面中显示，也不会占据空间。隐藏的元素不会被渲染，对布局没有影响。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    div {
      display: none;
    }
  </style>
</head>
<body>
  <div>示例1</div><div>示例2</div>
</body>
</html>

定位

position 属性用于控制元素在文档中的位置。它有以下几个值可选：

  1. static（默认值）：元素按照其在文档流中的位置进行布局。它不会受到top、bottom、left和right属性的影响。
html 复制代码 
<!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>

如图所示

  1. relative：元素相对于其正常位置进行定位，即相对于其在文档流中的位置进行偏移。可以通过top、bottom、left和right属性来指定偏移的距离。
html 复制代码 
<!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>

如图所示

相对定位元素经常被用来作为绝对定位元素的容器块。

  1. absolute：元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于浏览器窗口进行定位。可以通过top、bottom、left和right属性来指定偏移的距离。
html 复制代码 
<!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>

如图所示

  1. fixed：元素相对于浏览器窗口进行定位，即使页面滚动也会保持在固定的位置。也可以使用top、bottom、left和right属性来指定偏移的距离。
html 复制代码 
<!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>

如图所示

  1. sticky：根据用户的滚动位置进行定位。元素根据滚动位置在相对（relative ）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止。
html 复制代码 
<!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属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。

html 复制代码 
<!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属性有以下几个常用的取值：

  1. visible：默认值。内容会溢出到元素框之外，可能会覆盖其他元素。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    div{
      width: 200px;
      height: 100px;
      overflow: visible;
    }
  </style>
</head>
<body>
    <div>test文本>test文本>...
    </div>
</body>
</html>

如图所示

  1. hidden：溢出的内容会被隐藏，不会显示在元素框之外。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    div{
      width: 200px;
      height: 100px;
      overflow: hidden;
    }
  </style>
</head>
<body>
    <div>test文本>test文本>...
    </div>
</body>
</html>

如图所示

  1. scroll/auto：如果内容溢出，则在需要时显示滚动条。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    div{
      width: 200px;
      height: 100px;
      overflow: scroll;
    }
  </style>
</head>
<body>
    <div>test文本>test文本>...
    </div>
</body>
</html>

如图所示

  1. overlay：在内容溢出时，内容会在元素框之上继续显示，但会截断。
html 复制代码 
<!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 属性可以设置以下值之一：

  1. left - 元素浮动到其容器的左侧
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    img{
      float: left;
    }
  </style>
</head>
<body>
    <div><img src="./123456.jpg" alt="title"> 这是一个文本内容</div>
</body>
</html>

如图所示

  1. right - 元素浮动在其容器的右侧
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    img{
      float: right;
    }
  </style>
</head>
<body>
    <div><img src="./123456.jpg" alt="title"> 这是一个文本内容</div>
</body>
</html>

如图所示

  1. none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    img{
      float: none;
    }
  </style>
</head>
<body>
    <div><img src="./123456.jpg" alt="title"> 这是一个文本内容</div>
</body>
</html>

如图所示

  1. inherit - 元素继承其父级的 float 值。
html 复制代码 
<!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 值

html 复制代码 
<!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：用于选择鼠标悬停在元素上的状态，通常用于创建交互效果。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    div:hover{
      background-color: green;
    }
  </style>
</head>
<body>
  <div>伪类示例</div>
</body>
</html>

如图所示

  • :active：用于选择被激活的元素，例如当用户点击鼠标按钮但尚未释放时。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    div:active{
      background-color: green;
    }
  </style>
</head>
<body>
  <div>伪类示例</div>
</body>
</html>
  • :focus：用于选择当前拥有键盘输入焦点的元素，通常用于增强表单元素的可访问性。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    input:focus {
      border: 11px solid yellow;
    }
  </style>
</head>
<body>
  <input type="text">
</body>
</html>

如图所示

  • :first-child：选择作为其父元素的第一个子元素的元素。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    div:first-child{
        color: red;
    }
  </style>
</head>
<body>
  <div>伪类示例</div>
  <div>伪类示例</div>
</body>
</html>

如图所示

  • :last-child：选择作为其父元素的最后一个子元素的元素。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    div:last-child{
        color: red;
    }
  </style>
</head>
<body>
  <div>伪类示例</div>
  <div>伪类示例</div>
</body>
</html>

如图所示

  • :not()：选择除了指定元素之外的所有元素。
html 复制代码 
<!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：选择被禁用的表单元素。
html 复制代码 
<!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：在元素内容的前面插入内容。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    p::before {
      content: "前置内容";
      color: red;
    }
  </style>
</head>
<body>
  <p>伪元素</p>
</body>
</html>

如图所示

  • ::after：在元素内容的后面插入内容。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    p::after {
      content: "后置内容";
      color: red;
    }
  </style>
</head>
<body>
  <p>伪元素</p>
</body>
</html>

如图所示

  • ::first-letter：选择元素内容的第一个字母。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
  <style>
    p::first-letter {
      font-size: 2em;
      color: blue;
    }
  </style>
</head>
<body>
  <p>伪元素</p>
</body>
</html>

如图所示

  • ::first-line：选择元素内容的第一行。
html 复制代码 
<!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。值越低，越透明）。

html 复制代码 
<!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>

如图所示

案例解析

垂直导航栏

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>

如图所示

水平导航栏

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>

如图所示

  • 下拉菜单
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>

如图所示

相关推荐
hxjhnct1 分钟前
响应式布局有哪些？
前端·html·css3
LYFlied3 分钟前
【每日算法】LeetCode215. 数组中的第K个最大元素
前端·算法
怎么就重名了3 分钟前
Kivy的KV语言总结
前端·javascript·html
jqq6663 分钟前
解析ElementPlus打包源码（四、打包主题）
前端·javascript·vue.js
代码猎人5 分钟前
类数组对象是什么，如何转化为数组
前端
duanyuehuan5 分钟前
js 解构赋值
开发语言·前端·javascript
进击的野人5 分钟前
Vue3 响应式系统深度解析：从原理到实践
前端·vue.js·前端框架
计算机程序设计小李同学6 分钟前
汽车4S店管理系统设计与实现
前端·spring boot·学习
SoraYama6 分钟前
🚀 TypeScript 5.9：import defer 来袭
前端·typescript
YaeZed7 分钟前
Vue3-Teleport
前端·vue.js
热门推荐
01GitHub 镜像站点02安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）03手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！04Linux下V2Ray安装配置指南05Labelme从安装到标注：零基础完整指南06jdk21下载、安装（Windows、Linux、macOS）07UV安装并设置国内源08【踩坑笔记】50系显卡适配的 PyTorch 安装09GitLab 零基础入门指南：从安装到项目管理全流程102025-04-03 Latex学习1——本地配置Latex + VScode环境