fix: slugs and titles in CSS module landing pages (m - v plus misc)

ref: mdn/content#26974

files/zh-cn/glossary/grid_lines/index.md

@@ -48,7 +48,7 @@ slug: Glossary/Grid_Lines
 
 {{ EmbedLiveSample('示例', '500', '250') }}
 
-网格线可以用它们的编号来寻址。在从左到右的语言比如英语中，列线 1 将位于网格的左侧，行线 1 将位于其顶部。线编号遵循文档的[写入模式](/zh-CN/docs/Web/CSS/CSS_Writing_Modes)，因此在从右到左的语言中，列线 1 行将位于网格的右侧。下面的图片展示了该网格的线编号，假设语言是从左到右的。
+网格线可以用它们的编号来寻址。在从左到右的语言比如英语中，列线 1 将位于网格的左侧，行线 1 将位于其顶部。线编号遵循文档的[写入模式](/zh-CN/docs/Web/CSS/CSS_writing_modes)，因此在从右到左的语言中，列线 1 行将位于网格的右侧。下面的图片展示了该网格的线编号，假设语言是从左到右的。
 
 ![Diagram showing the grid with lines numbered.](1_diagram_numbered_grid_lines.png)
 

files/zh-cn/learn/accessibility/mobile/index.md

@@ -215,7 +215,7 @@ panel.ontouchend = stopMove;
 
 特别是，移动端设备需要解决的最常见的问题是：
 
-- 移动端设备布局的适用性。例如，在窄屏上多列布局不能很好的工作，需要增加文字大小以提高可读性。这些问题可以通过[媒体查询](/zh-CN/docs/Web/CSS/Media_Queries)、[viewport](/zh-CN/docs/Web/HTML/Viewport_meta_tag)、[弹性布局](/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox)来解决。
+- 移动端设备布局的适用性。例如，在窄屏上多列布局不能很好的工作，需要增加文字大小以提高可读性。这些问题可以通过[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries)、[viewport](/zh-CN/docs/Web/HTML/Viewport_meta_tag)、[弹性布局](/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox)来解决。
 - 节省下载的图片大小。一般来说，小屏幕设备不需要与桌面设备一样大的图像，而且它们将更可能在慢速网络连接上。因此，适当地缩小屏幕设备以缩小图像是明智的。您可以使用[响应式图像技术](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)处理此问题。
 - 考虑高分辨率。许多移动设备具有高分辨率屏幕，因此需要更高分辨率的图像，使得显示器可以继续看起来清晰和锐利。再次，您可以使用响应式图像技术来适当地提供图像。此外，使用 SVG 矢量图像格式可以满足许多图像要求，这些格式在目前的浏览器中得到了很好的支持。SVG 有一个小文件大小，并将保持清晰的大小显示在（请参阅[向网络添加矢量图形](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)一些更多的细节）。
 

files/zh-cn/learn/css/css_layout/introduction/index.md

@@ -78,7 +78,7 @@ CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们
 - **浮动**——应用 **{{cssxref("float")}}** 值，诸如 `left` 能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。
 - **{{cssxref("position")}}** 属性 — 允许你精准设置盒子中的盒子的位置，正常布局流中，默认为 `static` ，使用其他值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。
 - **表格布局**— 表格的布局方式可以用在非表格内容上，可以使用`display: table`和相关属性在非表元素上使用。
-- **多列布局**— 这个 [Multi-column layout](/zh-CN/docs/Web/CSS/CSS_Columns) 属性 可以让块按列布局，比如报纸的内容就是一列一列排布的。
+- **多列布局**— 这个 [Multi-column layout](/zh-CN/docs/Web/CSS/CSS_multicol_layout) 属性可以让块按列布局，比如报纸的内容就是一列一列排布的。
 
 ## display 属性
 

files/zh-cn/learn/css/css_layout/media_queries/index.md

@@ -104,7 +104,7 @@ slug: Learn/CSS/CSS_layout/Media_queries
 
 实践中，使用最小值和最大值对响应式设计有很多的用处，所以你会很少见到`width`或`height` 单独使用的情况。
 
-还有许多其他媒体特征可以供你测试，尽管于 4 级和 5 级媒体查询规范中引入了一些新特征，它们受浏览器支持仍然有限。在 MDN 上，每个特征都已经同浏览器支持信息一同记载下来，你可以在[使用媒体查询：媒体特征](/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features)中找到一张完整的列表。
+还有许多其他媒体特征可以供你测试，尽管于 4 级和 5 级媒体查询规范中引入了一些新特征，它们受浏览器支持仍然有限。在 MDN 上，每个特征都已经同浏览器支持信息一同记载下来，你可以在[使用媒体查询：媒体特征](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries#Media_features)中找到一张完整的列表。
 
 #### 朝向
 

files/zh-cn/learn/css/css_layout/multiple-column_layout/index.md

@@ -362,6 +362,6 @@ body {
 ## 参考
 
 - [CSS Fragmentation](/zh-CN/docs/Web/CSS/CSS_fragmentation)
-- [Using multi-column layouts](/zh-CN/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts)
+- [Using multi-column layouts](/zh-CN/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts)
 
 {{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}

files/zh-cn/learn/css/css_layout/responsive_design/index.md

@@ -66,7 +66,7 @@ Zoe Mickley Gillenwater 深刻影响了[她的著作](http://zomigi.com/blog/voi
 
 1. 第一个是液态网格，这早先已由 Gillenwater 进行探讨，可以在 Marcotte 的文章《[Fluid Grids](https://alistapart.com/article/fluidgrids/)》（出版于 2009 年的《A List Apart》上）中读到。
 2. 第二个是[液态图像](http://unstoppablerobotninja.com/entry/fluid-images)的理念。通过使用相当简单的将设置`max-width`属性设置为`100%`的技术，图像可以在包含它们的列变得比图像原始尺寸窄的时候，缩放得更小，但总不会变得更大。这使得图像可以被缩放，以被放到一个灵活尺寸的列，而不是溢出出去，同时也不会在列宽于图像的时候，使图像变得太大以至于画质变得粗糙。
-3. 第三个关键的组件是[媒体查询](/zh-CN/docs/Web/CSS/Media_Queries)。媒体查询使以往 Cameron Adams 探讨过的、由 JavaScript 实现的布局类型切换，可以只使用 CSS 实现。和所有尺寸的屏幕都使用一种布局不同的是，布局是可以改变的：侧栏可以在小屏幕上重新布局，而替代用的导航栏也可以显示出来。
+3. 第三个关键的组件是[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries)。媒体查询使以往 Cameron Adams 探讨过的、由 JavaScript 实现的布局类型切换，可以只使用 CSS 实现。和所有尺寸的屏幕都使用一种布局不同的是，布局是可以改变的：侧栏可以在小屏幕上重新布局，而替代用的导航栏也可以显示出来。
 
 需要你理解的很重要的一点是**响应式 Web 设计不是单独的技术**，它是描述 Web 设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以**响应**查看内容的设备的样式的一个词。在 Marcotte's 原来的探索中，这意味着灵活网格（使用 float）和媒体查询，但是在这篇文章写就的几乎十年以后，Web 的响应式工作已经成为了默认做法。现代的 CSS 布局方式基本上就是响应式的，而且我们在 Web 平台上内置了新的东西，使得设计响应式站点变得容易。
 
@@ -90,7 +90,7 @@ Zoe Mickley Gillenwater 深刻影响了[她的著作](http://zomigi.com/blog/voi
 
 使用媒体查询时的一种通用方式是，为窄屏设备（例如移动设备）创建一个简单的单栏布局，然后检查是否是大些的屏幕，在你知道你有足够容纳的屏幕宽度的时候，开始采用一种多栏的布局。这经常被描述为**移动优先**设计。
 
-在 MDN 文档中的[媒体查询](/zh-CN/docs/Web/CSS/Media_Queries)中了解更多
+在 MDN 文档中的[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries)中了解更多
 
 ## 灵活网格
 

files/zh-cn/learn/css/first_steps/how_css_is_structured/index.md

@@ -326,7 +326,7 @@ color: white;
 @import 'styles2.css';
 ```
 
-您将遇到的最常见的 @rule 之一是 `@media`，它允许您使用[媒体查询](/zh-CN/docs/Web/CSS/Media_Queries)来应用 CSS，仅当某些条件成立 (例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)。
+您将遇到的最常见的 @rule 之一是 `@media`，它允许您使用[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries)来应用 CSS，仅当某些条件成立 (例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)。
 
 在下面的 CSS 中，我们将给 `<body>` 元素一个粉红色的背景色。但是，我们随后使用 @media 创建样式表的一个部分，该部分仅适用于视口大于 30em 的浏览器。如果浏览器的宽度大于 30em，则背景色将为蓝色。
 

files/zh-cn/learn/css/howto/index.md

@@ -59,5 +59,5 @@ CSS 允许一些高级的设计技巧。这些文章可以帮助您解决一些
 ### 布局
 
 - [使用 CSS flex 布局](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
-- [使用 CSS 多列布局](/zh-CN/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts)
+- [使用 CSS 多列布局](/zh-CN/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts)
 - [使用 CSS 生成内容](/zh-CN/docs/Learn/CSS/Howto/Generated_content)

files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md

@@ -85,7 +85,7 @@ if ("geolocation" in navigator) {
 
 #### @supports
 
-CSS 有一个原生的特性检测机制：{{cssxref("@supports")}} at-规则。这与[媒体查询](/zh-CN/docs/Web/CSS/Media_Queries)的工作方式类似，只是它不是根据分辨率、屏幕宽度或长宽比等媒体特性选择性地应用 CSS，而是根据是否支持某个 CSS 特性来选择性地应用 CSS，类似于 `CSS.supports()`。
+CSS 有一个原生的特性检测机制：{{cssxref("@supports")}} at-规则。这与[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries)的工作方式类似，只是它不是根据分辨率、屏幕宽度或长宽比等媒体特性选择性地应用 CSS，而是根据是否支持某个 CSS 特性来选择性地应用 CSS，类似于 `CSS.supports()`。
 
 例如，我们可以使用 `@supports` 重写我们之前的例子：
 

files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md

@@ -214,7 +214,7 @@ button:active {
 
 为了解决这个问题，我们添加了第二个 background-color 声明，它只是指定了一个十六进制颜色 - 这在旧版本的浏览器中得到了支持，并且在现代闪亮功能无法使用的情况下作为后备。访问此页面的浏览器首先应用第一个 background-color 值，当它到达第二个 background-color 声明时，如果它支持 RGBA 颜色，它将用这个值覆盖初始值。如果不是的话，它会忽略整个声明，继续前进。
 
-> **备注：** 这同样适用于其他 CSS 功能，如真正的[媒体查询](/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries)，[@font-face](/zh-CN/docs/Web/CSS/@font-face) 以及 [@supports](/zh-CN/docs/Web/CSS/@supports) 块 - 如果不支持他们，浏览器只是忽略它们。
+> **备注：** 这同样适用于其他 CSS 功能，如真正的[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)，[@font-face](/zh-CN/docs/Web/CSS/@font-face) 以及 [@supports](/zh-CN/docs/Web/CSS/@supports) 块 - 如果不支持他们，浏览器只是忽略它们。
 
 #### IE 条件注释
 
@@ -407,7 +407,7 @@ body {
 
 #### 响应式设计问题
 
-响应式设计是创建网页布局以适应不同设备形式因素（例如不同的屏幕宽度，方向（纵向或横向）或分辨率）的做法。例如桌面布局在移动设备上看起来会很糟糕，所以您需要使用[媒体查询](/zh-CN/docs/Web/CSS/Media_Queries)来提供合适的移动布局，并确保使用[视口](/zh-CN/docs/Mozilla/Mobile/Viewport_meta_tag)正确应用它。您可以在[响应式设计的构建模块中](/zh-CN/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks)找到这些实践的详细说明。
+响应式设计是创建网页布局以适应不同设备形式因素（例如不同的屏幕宽度，方向（纵向或横向）或分辨率）的做法。例如桌面布局在移动设备上看起来会很糟糕，所以您需要使用[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries)来提供合适的移动布局，并确保使用[视口](/zh-CN/docs/Mozilla/Mobile/Viewport_meta_tag)正确应用它。您可以在[响应式设计的构建模块中](/zh-CN/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks)找到这些实践的详细说明。
 
 解决方案也是一个大问题 - 例如，移动设备不太可能需要比台式电脑大的图像，并且更可能具有较慢的互联网连接，并且甚至可能使昂贵的数据计划浪费带宽成为更多的问题。另外，不同的设备可以具有一系列不同的分辨率，这意味着较小的图像可以出现像素化。有许多技术可以让您解决这些问题，从简单的[移动第一媒体查询](/zh-CN/Apps/Progressive/Responsive/Mobile_first)到更复杂的[响应式图像技术](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes)。
 

files/zh-cn/web/api/document/index.md

@@ -413,13 +413,13 @@ HTML 文档的 `Document` 接口继承自 {{DOMxRef("HTMLDocument")}} 接口，
 ### 过渡事件
 
 - {{DOMxRef("Document/transitioncancel_event", "transitioncancel")}}
-  - : 在 [CSS 过渡](/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)取消时触发。
+  - : 在 [CSS 过渡](/zh-CN/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)取消时触发。
 - {{DOMxRef("Document/transitionend_event", "transitionend")}}
-  - : 在 [CSS 过渡](/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)完成时触发。
+  - : 在 [CSS 过渡](/zh-CN/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)完成时触发。
 - {{DOMxRef("Document/transitionrun_event", "transitionrun")}}
-  - : 在 [CSS 过渡](/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)第一次创建时触发。
+  - : 在 [CSS 过渡](/zh-CN/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)第一次创建时触发。
 - {{DOMxRef("Document/transitionstart_event", "transitionstart")}}
-  - : 在 [CSS 过渡](/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)实际开始时触发。
+  - : 在 [CSS 过渡](/zh-CN/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)实际开始时触发。
 
 ## 规范
 

files/zh-cn/web/api/element/transitioncancel_event/index.md

@@ -5,7 +5,7 @@ slug: Web/API/Element/transitioncancel_event
 
 {{APIRef("CSS3 Transitions")}}
 
-**`transitioncancel`** 事件在 [CSS 转换](/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)被取消时触发。
+**`transitioncancel`** 事件在 [CSS 转换](/zh-CN/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)被取消时触发。
 
 当以下情况时，过渡被取消：
 

files/zh-cn/web/api/element/transitionend_event/index.md

@@ -7,7 +7,7 @@ slug: Web/API/Element/transitionend_event
 
 {{domxref("GlobalEventHandlers")}} 混入对象的 **`ontransitionend`** 属性是一个处理 [`transitionend`](/zh-CN/docs/Web/API/Element/transitionend_event) 事件的 [事件处理函数](/zh-CN/docs/Web/Events/Event_handlers)。
 
-`transitionend` 事件的事件处理函数，在某个 [CSS transition](/zh-CN/docs/Web/CSS/CSS_Transitions) 完成时触发。
+`transitionend` 事件的事件处理函数，在某个 [CSS transition](/zh-CN/docs/Web/CSS/CSS_transitions) 完成时触发。
 
 > **备注：** 如果在 transition 完成前，该 transition 已从目标节点上移除，那么 [`transitionend`](/zh-CN/docs/Web/API/Element/transitionend_event) 将不会被触发。一种可能的情况是修改了目标节点的 {{cssxref("transition-property")}} 属性，另一种可能的情况是 {{cssxref("display")}} 属性被设为 `"none"`。
 

files/zh-cn/web/api/element/transitionstart_event/index.md

@@ -5,7 +5,7 @@ slug: Web/API/Element/transitionstart_event
 
 {{APIRef}}{{SeeCompatTable}}
 
-**`transitionstart`** 事件会在 [CSS transition](/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) 实际开始的时候触发，或者说在某个 {{cssxref("transition-delay")}} 已经结束之后触发。
+**`transitionstart`** 事件会在 [CSS transition](/zh-CN/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) 实际开始的时候触发，或者说在某个 {{cssxref("transition-delay")}} 已经结束之后触发。
 
 <table class="properties">
   <tbody>

files/zh-cn/web/api/htmlimageelement/index.md

@@ -26,7 +26,7 @@ _从它的父元素 {{domxref("HTMLElement")}} 继承的属性。_
   - : 一个 {{domxref("DOMString")}} 表示这个 img 元素的 CORS 设置。参考 [CORS settings attributes](/zh-CN/docs/HTML/CORS_settings_attributes)。This may be `null` if CORS is not used.
 - {{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}
   - : 返回一个 {{domxref("DOMString")}} 表示加载当前显示的图像的 URL。
-    这可能会改变，因为图像是调整，由于不断变化的条件，由任何 [media queries](/zh-CN/docs/Web/CSS/Media_Queries) 的地方。
+    这可能会改变，因为图像是调整，由于不断变化的条件，由任何 [media queries](/zh-CN/docs/Web/CSS/CSS_media_queries) 的地方。
 - {{domxref("HTMLImageElement.decoding")}}
   - : An optional {{domxref("DOMString")}} representing a hint given to the browser on how it should decode the image. If this value is provided, it must be one of the possible permitted values: `sync` to decode the image synchronously, `async` to decode it asynchronously, or `auto` to indicate no preference (which is the default). Read the {{domxref("HTMLImageElement.decoding", "decoding")}} page for details on the implications of this property's values.
 - {{domxref("HTMLImageElement.height")}}

files/zh-cn/web/api/intersection_observer_api/index.md

@@ -340,7 +340,7 @@ The HTML for this example is very short, with a primary element which is the box
 
 ### CSS
 
-The CSS isn't terribly important for the purposes of this example; it lays out the element and establishes that the {{cssxref("background-color")}} and {{cssxref("border")}} attributes can participate in [CSS transitions](/zh-CN/docs/Web/CSS/CSS_Transitions), which we'll use to affect the changes to the element as it becomes more or less obscured.
+The CSS isn't terribly important for the purposes of this example; it lays out the element and establishes that the {{cssxref("background-color")}} and {{cssxref("border")}} attributes can participate in [CSS transitions](/zh-CN/docs/Web/CSS/CSS_transitions), which we'll use to affect the changes to the element as it becomes more or less obscured.
 
 ```css
 #box {

files/zh-cn/web/api/mediaquerylist/change_event/index.md

@@ -59,8 +59,8 @@ mql.onchange = (e) => {
 
 ## 参见
 
-- [媒体查询](/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries)
-- [在代码中使用媒体查询](/zh-CN/docs/Web/CSS/Media_Queries/Testing_media_queries)
+- [媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+- [在代码中使用媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
 - {{DOMxRef("window.matchMedia()")}}
 - {{DOMxRef("MediaQueryList")}}
 - {{DOMxRef("MediaQueryListEvent")}}

files/zh-cn/web/api/mediaquerylist/matches/index.md

@@ -47,8 +47,8 @@ addMQListener(window.matchMedia("(orientation:landscape)"),
 
 ## 参见
 
-- [媒体查询](/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries)
-- [在代码中使用媒体查询](/zh-CN/docs/Web/CSS/Media_Queries/Testing_media_queries)
+- [媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+- [在代码中使用媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
 - {{DOMxRef("window.matchMedia()")}}
 - {{DOMxRef("MediaQueryList")}}
 - {{DOMxRef("MediaQueryListEvent")}}

files/zh-cn/web/api/mediaquerylistevent/index.md

@@ -58,7 +58,7 @@ mql.addListener(screenTest);
 
 ## 参见
 
-- [媒体查询](/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries)
-- [在代码中使用媒体查询](/zh-CN/docs/Web/CSS/Media_Queries/Testing_media_queries)
+- [媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+- [在代码中使用媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
 - {{DOMxRef("window.matchMedia()")}}
 - {{DOMxRef("MediaQueryList")}}