CSS

（1）介绍

在 HTML 中，标签（Tag）是用于定义文档结构和内容的元素，而 CSS（Cascading Style Sheets，层叠样式表）则用于控制网页的样式和布局。CSS 样式表中可以通过选择器（Selectors）来选择 HTML 中的标签，并为其应用样式。
在 HTML 中，标签（Tag）是用于定义文档结构和内容的元素，而 CSS（Cascading Style Sheets，层叠样式表）则用于控制网页的样式和布局。CSS 样式表中可以通过选择器（Selectors）来选择 HTML 中的标签，并为其应用样式。
以下是一些常见的 HTML 标签和它们在 CSS 中的应用方式：

标签： <div> 是 HTML 中最常用的容器标签之一，用于组织页面内容。在 CSS 中，可以通过类名或 ID 来选择 <div> 标签，并为其定义样式，例如：
```
<div class="container">内容</div>
```
```
.container {
    background-color: #f0f0f0;
    padding: 20px;
    border: 1px solid #ccc;
}
```
<p> 标签： <p> 用于定义段落。可以为 <p> 标签定义字体样式、边距、颜色等属性，例如：
```
<p>这是一个段落。</p>
```
```
p {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
}
```

<h1>-<h6> 标签： 用于定义标题。可以为不同级别的标题定义不同的样式，例如：

<h1>主标题</h1>
<h2>副标题</h2>

h1 {
    font-size: 24px;
    color: #000;
}

h2 {
    font-size: 20px;
    color: #333;
}

<a> 标签： <a> 用于创建超链接。可以为超链接定义文字颜色、鼠标悬停效果等样式，例如：

<a href="https://www.example.com">链接文字</a>

a {
    color: #00f;
    text-decoration: none; /* 取消下划线 */
}

a:hover {
    color: #f00; /* 鼠标悬停时改变颜色 */
}

以上是一些常见的 HTML 标签及其在 CSS 中的应用方式。通过选择器和样式规则，可以对 HTML 中的各种标签进行样式化，从而实现网页的美化和布局。

（2）组合选择器

组合选择器是 CSS 中一种强大的选择器，它允许你选择同时满足多个条件的元素，从而更精确地定位目标元素。常见的组合选择器有以下几种：

后代选择器（Descendant Selector）：

后代选择器使用空格分隔不同元素，表示选取某个元素的后代元素。例如：

div p {
  /* 选择 <div> 元素内部的所有 <p> 元素 */
  color: blue;
}

子代选择器（Child Selector）：

子代选择器使用 > 符号，表示选取某个元素的直接子元素。例如：

ul > li {
  /* 选择 <ul> 元素下直接的 <li> 元素 */
  list-style-type: square;
}

相邻兄弟选择器（Adjacent Sibling Selector）：

相邻兄弟选择器使用 + 符号，表示选取紧接在另一个元素后的同级元素。例如：

h2 + p {
  /* 选择紧接在 <h2> 元素后的同级 <p> 元素 */
  font-weight: bold;
}

通用兄弟选择器（General Sibling Selector）：

通用兄弟选择器使用 ~ 符号，表示选取与指定元素同级的所有元素。例如：

h2 ~ p {
  /* 选择 <h2> 元素后所有同级的 <p> 元素 */
  color: green;
}

这些组合选择器可以根据元素之间的关系、位置等条件来选择目标元素，使得 CSS 的选择更加灵活和精确。

（3）属性选择器

属性选择器是 CSS 中一种用于选择具有特定属性的元素的选择器。它允许你根据元素的属性值来选择目标元素，从而更精确地应用样式。常见的属性选择器有以下几种：

存在选择器（Existence Selector）：

存在选择器使用方括号（[]）表示，选择具有指定属性的元素。例如：

input[type] {
  /* 选择所有具有 type 属性的 <input> 元素 */
  border: 1px solid #ccc;
}

等值选择器（Equality Selector）：

等值选择器使用方括号和等号（[attr=value]）表示，选择具有指定属性值的元素。例如：

a[href="https://www.baidu.com"] {
  /* 选择 href 属性值为 https://www.baidu.com 的所有 <a> 元素 */
  color: blue;
}

包含选择器（Containment Selector）：

包含选择器使用方括号和星号（[attr*=value]）表示，选择属性值包含指定字符串的元素。例如：

img[alt*="logo"] {
  /* 选择 alt 属性值中包含 "logo" 的所有 <img> 元素 */
  width: 100px;
}

起始选择器（Beginning Selector）：

起始选择器使用方括号和插入符号（[attr^=value]）表示，选择属性值以指定字符串开头的元素。例如：

a[href^="https://"] {
  /* 选择 href 属性值以 "https://" 开头的所有 <a> 元素 */
  text-decoration: none;
}

结尾选择器（Ending Selector）：

结尾选择器使用方括号和美元符号（[attr$=value]）表示，选择属性值以指定字符串结尾的元素。例如：

a[href$=".pdf"] {
  /* 选择 href 属性值以 ".pdf" 结尾的所有 <a> 元素 */
  font-weight: bold;
}

精确值选择器（Exact Value Selector）：

精确值选择器使用方括号和等号（[attr=value]）表示，选择属性值与指定字符串完全相同的元素。例如：

input[type="checkbox"] {
  /* 选择 type 属性值为 "checkbox" 的所有 <input> 元素 */
  margin-right: 5px;
}

这些属性选择器可以根据元素的属性及其值来选择目标元素，使得 CSS 的选择更加灵活和精确。

（4）伪类选择器

（1）介绍

CSS 伪类选择器（pseudo-class selector）是用于选择元素的特定状态或位置的一种方式。伪类选择器以冒号 : 开头，放置在选择器的末尾，用于为满足特定条件的元素应用样式。
CSS 伪类选择器（pseudo-class selector）是用于选择元素的特定状态或位置的一种方式。伪类选择器以冒号 : 开头，放置在选择器的末尾，用于为满足特定条件的元素应用样式。

（2）常见的伪类选择器

:hover：选择鼠标悬停在元素上的状态。
```
a:hover {
    color: red;
}
```

:active：选择元素被点击的瞬间。

button:active {
    background-color: #ccc;
}

:focus：选择当前拥有焦点的元素，比如表单元素。
```
input:focus {
    border: 2px solid blue;
}
```
:first-child：选择元素是其父元素的第一个子元素。
```
li:first-child {
    font-weight: bold;
}
```
:last-child：选择元素是其父元素的最后一个子元素。
```
li:last-child {
    color: green;
}
```
:nth-child(n)：选择其父元素的第 n 个子元素。
```
p:nth-child(2) {
    background-color: #f0f0f0;
}
```
:nth-child(odd) 和 :nth-child(even)：选择其父元素的奇数或偶数个子元素。
```
tr:nth-child(odd) {
    background-color: #f0f0f0;
}
```
:not(selector)：选择不匹配给定选择器的元素。
```
input:not([type="text"]) {
    opacity: 0.7;
}
```
:nth-of-type(n)：选择同类型元素中的第 n 个。
```
p:nth-of-type(2) {
    color: blue;
}
```
:last-of-type：选择同类型元素中的最后一个。
```
div:last-of-type {
    border: 1px solid black;
}
```

（5）伪元素选择器

CSS 伪元素选择器（pseudo-element selector）用于选择元素的某些特定部分，而不是整个元素。伪元素选择器以双冒号 :: 开头，放置在选择器的末尾。

::before：用于在元素之前插入内容。
```
p::before {
    content: "前缀：";
}
```
::after：用于在元素之后插入内容。
```
p::after {
    content: "后缀。";
}
```
::first-line：选择元素的第一行文本。
```
p::first-line {
    font-weight: bold;
}
```
::first-letter：选择元素的第一个字母。
```
p::first-letter {
    font-size: 150%;
}
```

::selection：选择用户选择的文本。

::selection {
    background-color: yellow;
    color: black;
}

::placeholder：选择输入框中的占位符文本。
```
input::placeholder {
    color: gray;
}
```
::marker：选择列表项的标记。
```
li::marker {
    color: red;
}
```
::backdrop：选择背景层，用于全屏操作时覆盖元素。
```
::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}
```

::before 和 ::after 结合使用：用于创建元素的双倍内容。

p::before {
    content: "前缀：";
}
p::after {
    content: "后缀。";
}

（6）选择器优先级

在 CSS 中，如果多个规则选择同一个元素，并且应用了不同的样式，则会根据选择器的优先级来确定最终应用的样式。选择器的优先级是由选择器的特定性（specificity）来决定的。
CSS 选择器的优先级通常按照以下顺序排列，以决定样式的优先级：

内联样式（Inline Styles）：直接在 HTML 元素中使用 style 属性设置的样式，拥有最高的优先级。例如：
```
<p style="color: red;">这是内联样式的文本</p>
```
ID 选择器（ID Selectors）：使用 # 符号指定的 ID 选择器。例如：
```
#unique-element {
    color: blue;
}
```

类选择器、属性选择器和伪类选择器 ：使用 .class、[attribute] 或者 :pseudo-class 格式指定的选择器。例如：

.highlight {
    background-color: yellow;
}

[type="text"] {
    border: 1px solid gray;
}

a:hover {
    text-decoration: underline;
}

元素选择器和伪元素选择器 ：使用元素名或者 ::pseudo-element 格式指定的选择器。例如：
```
p {
    font-size: 16px;
}

p::first-line {
    font-weight: bold;
}
```

当多个规则应用于同一个元素时，浏览器会比较这些规则的优先级，并选择具有最高优先级的样式应用到元素上。如果优先级相同，则后定义的样式将覆盖先前的样式。
优先级可以用一个简单的公式来表示：[ a, b, c, d ]
- a 表示内联样式的数目。
- b 表示 ID 选择器的数目。
- c 表示类选择器、属性选择器和伪类选择器的数目。
- d 表示元素选择器和伪元素选择器的数目。
因此，选择器的特定性可以用一个四位数的数组来表示。例如，特定性为 [0, 1, 2, 3] 的选择器优先级将高于特定性为 [0, 1, 1, 3] 的选择器。

（7）css属性相关

CSS 属性是用于描述元素样式和行为的一组键值对。通过 CSS 属性，我们可以控制元素的外观、布局、动画和交互效果等。以下是一些常见的 CSS 属性类别和示例：

（1）字体和文本样式属性

font-family：指定文本字体。
font-size：指定文本字号。
font-weight：指定文本粗细。
font-style：指定文本样式（normal、italic、oblique）。
color：指定文本颜色。
text-align：指定文本对齐方式。
text-decoration：指定文本装饰效果（underline、overline、line-through）。

（2）盒模型属性

width：指定元素宽度。
height：指定元素高度。
margin：指定外边距。
padding：指定内边距。
border：指定边框。
display：指定元素的显示方式（block、inline、inline-block、flex）。

（3）背景和边框属性

background-color：指定背景颜色。
background-image：指定背景图像。
border-color：指定边框颜色。
border-radius：指定边框圆角半径。
box-shadow：指定盒子阴影效果。

（4）定位和布局属性

position：指定元素定位方式（static、relative、absolute、fixed）。
top、right、bottom、left：指定定位元素的偏移量。
float：指定元素浮动方式（left、right、none）。
clear：指定元素在浮动元素旁边的哪一侧不允许浮动。
display：指定元素的显示方式（none、block、inline）。

（5）动画和过渡属性

animation：指定元素动画效果。
transition：指定元素过渡效果。
transform：指定元素变形效果（旋转、缩放、平移）。

（6）其他常见属性

opacity：指定元素不透明度。
cursor：指定鼠标悬停在元素上时的光标样式。
z-index：指定元素的堆叠顺序。
overflow：指定元素溢出内容的处理方式（hidden、scroll、auto）。

（8）z-index模态框

在 CSS 中，z-index 属性用于控制元素在堆叠顺序（stacking order）中的位置。当多个元素重叠时，z-index 属性可以确定哪个元素位于其他元素的前面或后面。
要创建一个具有模态框效果的元素，可以使用 position: fixed 来使其固定在页面上，并通过设置适当的 z-index 值确保其显示在其他内容的前面。
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 按钮触发模态框 -->
<button id="openModalBtn">打开模态框</button>
<!-- 模态框 -->
<div id="modal" class="modal">
    <div class="modal-content">
        <!-- 关闭按钮 -->
        <span class="close">&times;</span>
        <!-- 模态框内容 -->
        <p>这是一个模态框！</p>
    </div>
</div>
<!-- 模态框背景遮罩 -->
<div id="overlay" class="overlay"></div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css)

/* 模态框容器 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000; /* 确保模态框位于其他内容的前面 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.1); /* 半透明黑色背景 */
}

/* 模态框内容 */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* 关闭按钮 */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* 背景遮罩 */
.overlay {
  display: none;
  position: fixed;
  z-index: 999; /* 确保背景遮罩位于其他内容的前面，但低于模态框 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */
}

JavaScript (script.js)

// 获取模态框和背景遮罩元素
var modal = document.getElementById('modal');
var overlay = document.getElementById('overlay');

// 获取打开模态框的按钮
var btn = document.getElementById("openModalBtn");

// 获取关闭模态框的 <span> 元素
var span = document.getElementsByClassName("close")[0];

// 点击按钮打开模态框
btn.onclick = function() {
  modal.style.display = "block";
  overlay.style.display = "block";
}

// 点击 <span> (x) 关闭模态框
span.onclick = function() {
  modal.style.display = "none";
  overlay.style.display = "none";
}

// 点击模态框外的任意位置关闭模态框
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    overlay.style.display = "none";
  }
}

在这个示例中，模态框元素 modal 使用了 position: fixed 来固定在页面上，并且设置了较高的 z-index 值以确保其显示在其他内容的前面。另外，overlay 也是一个固定定位的元素，用来实现模态框弹出时的背景遮罩效果。

posted @ 2024-02-22 20:27 ssrheart 阅读(3) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

heart

无限进步

CSS

CSS

（1）介绍

（2）组合选择器

（3）属性选择器

（4）伪类选择器

（1）介绍

（2）常见的伪类选择器

（5）伪元素选择器

（6）选择器优先级

（7）css属性相关

（1）字体和文本样式属性

（2）盒模型属性

（3）背景和边框属性

（4）定位和布局属性

（5）动画和过渡属性

（6）其他常见属性

（8）z-index模态框

公告