重拾前端基础知识：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>

如图所示

相关推荐
F-2H1 小时前
C语言：指针4（常量指针和指针常量及动态内存分配）
java·linux·c语言·开发语言·前端·c++
WebDeveloper20011 小时前
如何使用美国域名中心US Domain Center和WordPress创建商业网站
运维·服务器·css·网络·html
gqkmiss1 小时前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247553 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255024 小时前
前端常用算法集合
前端·算法
真的很上进4 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境？
java·前端·javascript·css·react.js·vue·html
web130933203984 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2345 小时前
Echarts连接数据库，实时绘制图表详解
前端·数据库·echarts
如若1235 小时前
对文件内的文件名生成目录，方便查阅
java·前端·python
滚雪球~6 小时前
npm error code ETIMEDOUT
前端·npm·node.js
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）