diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt index 75f924c5cd3c48..19ca0a32accc20 100644 --- a/files/zh-tw/_redirects.txt +++ b/files/zh-tw/_redirects.txt @@ -75,7 +75,7 @@ /zh-TW/docs/DOM/XMLHttpRequest /zh-TW/docs/Web/API/XMLHttpRequest /zh-TW/docs/DOM/XMLHttpRequest/FormData /zh-TW/docs/Web/API/FormData /zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest /zh-TW/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest -/zh-TW/docs/DOM_中的空白字元 /zh-TW/docs/Web/CSS/CSS_text/Whitespace +/zh-TW/docs/DOM_中的空白字元 /zh-TW/docs/Web/CSS/Guides/Text/Whitespace /zh-TW/docs/DragDrop /zh-TW/docs/Web/API/HTML_Drag_and_Drop_API /zh-TW/docs/DragDrop/Drag_and_Drop /zh-TW/docs/Web/API/HTML_Drag_and_Drop_API /zh-TW/docs/Drawing_text_using_a_canvas /zh-TW/docs/Web/API/Canvas_API/Tutorial/Drawing_text @@ -512,8 +512,8 @@ /zh-TW/docs/Web/API/Coordinates/speed /zh-TW/docs/Web/API/GeolocationCoordinates/speed /zh-TW/docs/Web/API/Document/registerElement /zh-TW/docs/Web/API/CustomElementRegistry/define /zh-TW/docs/Web/API/Document_Object_Model/Examples /zh-TW/docs/Web/API/Document_Object_Model -/zh-TW/docs/Web/API/Document_Object_Model/Whitespace /zh-TW/docs/Web/CSS/CSS_text/Whitespace -/zh-TW/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM /zh-TW/docs/Web/CSS/CSS_text/Whitespace +/zh-TW/docs/Web/API/Document_Object_Model/Whitespace /zh-TW/docs/Web/CSS/Guides/Text/Whitespace +/zh-TW/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM /zh-TW/docs/Web/CSS/Guides/Text/Whitespace /zh-TW/docs/Web/API/Document_Object_Model/事件 /zh-TW/docs/Web/API/Event /zh-TW/docs/Web/API/ElementCSSInlineStyle/style /en-US/docs/Web/API/HTMLElement/style /zh-TW/docs/Web/API/EventListener /zh-TW/docs/Web/API/EventTarget/addEventListener @@ -562,20 +562,41 @@ /zh-TW/docs/Web/CSS/@namespace /zh-TW/docs/Web/CSS/Reference/At-rules/@namespace /zh-TW/docs/Web/CSS/@viewport /zh-TW/docs/Web/CSS /zh-TW/docs/Web/CSS/@viewport/height /zh-TW/docs/Web/CSS -/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes /zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox -/zh-TW/docs/Web/CSS/CSS_colors/Color_picker /zh-TW/docs/Web/CSS/CSS_colors/Color_format_converter -/zh-TW/docs/Web/CSS/CSS_colors/Color_picker_tool /zh-TW/docs/Web/CSS/CSS_colors/Color_format_converter -/zh-TW/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1 /zh-TW/docs/Web/CSS/CSS_positioned_layout/Stacking_context/Stacking_context_example_1 +/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes /zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts +/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations /zh-TW/docs/Web/CSS/Guides/Animations/Using +/zh-TW/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds /zh-TW/docs/Web/CSS/Guides/Backgrounds_and_borders/Using_multiple_backgrounds +/zh-TW/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing /zh-TW/docs/Web/CSS/Guides/Box_model/Margin_collapsing +/zh-TW/docs/Web/CSS/CSS_cascade/Inheritance /zh-TW/docs/Web/CSS/Guides/Cascade/Inheritance +/zh-TW/docs/Web/CSS/CSS_cascade/Shorthand_properties /zh-TW/docs/Web/CSS/Guides/Cascade/Shorthand_properties +/zh-TW/docs/Web/CSS/CSS_colors/Color_format_converter /zh-TW/docs/Web/CSS/Guides/Colors/Color_format_converter +/zh-TW/docs/Web/CSS/CSS_colors/Color_picker /zh-TW/docs/Web/CSS/Guides/Colors/Color_format_converter +/zh-TW/docs/Web/CSS/CSS_colors/Color_picker_tool /zh-TW/docs/Web/CSS/Guides/Colors/Color_format_converter +/zh-TW/docs/Web/CSS/CSS_flexible_box_layout /zh-TW/docs/Web/CSS/Guides/Flexible_box_layout +/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox /zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts +/zh-TW/docs/Web/CSS/CSS_fonts /zh-TW/docs/Web/CSS/Guides/Fonts +/zh-TW/docs/Web/CSS/CSS_fonts/WOFF /zh-TW/docs/Web/CSS/Guides/Fonts/WOFF +/zh-TW/docs/Web/CSS/CSS_grid_layout /zh-TW/docs/Web/CSS/Guides/Grid_layout +/zh-TW/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout /zh-TW/docs/Web/CSS/Guides/Grid_layout/Basic_concepts +/zh-TW/docs/Web/CSS/CSS_images/Replaced_element_properties /zh-TW/docs/Web/CSS/Guides/Images/Replaced_element_properties +/zh-TW/docs/Web/CSS/CSS_inline_layout /zh-TW/docs/Web/CSS/Guides/Inline_layout +/zh-TW/docs/Web/CSS/CSS_lists/Consistent_list_indentation /zh-TW/docs/Web/CSS/Guides/Lists/Indenting +/zh-TW/docs/Web/CSS/CSS_media_queries/Testing_media_queries /zh-TW/docs/Web/CSS/Guides/Media_queries/Testing +/zh-TW/docs/Web/CSS/CSS_positioned_layout/Stacking_context/Stacking_context_example_1 /zh-TW/docs/Web/CSS/Guides/Positioned_layout/Stacking_context/Example_1 +/zh-TW/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1 /zh-TW/docs/Web/CSS/Guides/Positioned_layout/Stacking_context/Example_1 +/zh-TW/docs/Web/CSS/CSS_selectors /zh-TW/docs/Web/CSS/Guides/Selectors +/zh-TW/docs/Web/CSS/CSS_syntax/Syntax /zh-TW/docs/Web/CSS/Guides/Syntax/Introduction +/zh-TW/docs/Web/CSS/CSS_text/Whitespace /zh-TW/docs/Web/CSS/Guides/Text/Whitespace +/zh-TW/docs/Web/CSS/CSS_transitions/Using_CSS_transitions /zh-TW/docs/Web/CSS/Guides/Transitions/Using /zh-TW/docs/Web/CSS/CSS_一般問題 /zh-TW/docs/Learn_web_development/Howto/Solve_CSS_problems/CSS_FAQ -/zh-TW/docs/Web/CSS/CSS_網格_布局 /zh-TW/docs/Web/CSS/CSS_grid_layout +/zh-TW/docs/Web/CSS/CSS_網格_布局 /zh-TW/docs/Web/CSS/Guides/Grid_layout /zh-TW/docs/Web/CSS/Common_CSS_Questions /zh-TW/docs/Learn_web_development/Howto/Solve_CSS_problems/CSS_FAQ /zh-TW/docs/Web/CSS/Descendant_combinator /zh-TW/docs/Web/CSS/Reference/Selectors/Descendant_combinator /zh-TW/docs/Web/CSS/Descendant_selectors /zh-TW/docs/Web/CSS/Reference/Selectors/Descendant_combinator -/zh-TW/docs/Web/CSS/Inheritance /zh-TW/docs/Web/CSS/CSS_cascade/Inheritance +/zh-TW/docs/Web/CSS/Inheritance /zh-TW/docs/Web/CSS/Guides/Cascade/Inheritance /zh-TW/docs/Web/CSS/Pseudo-classes /zh-TW/docs/Web/CSS/Reference/Selectors/Pseudo-classes -/zh-TW/docs/Web/CSS/Replaced_element /zh-TW/docs/Web/CSS/CSS_images/Replaced_element_properties -/zh-TW/docs/Web/CSS/Shorthand_properties /zh-TW/docs/Web/CSS/CSS_cascade/Shorthand_properties -/zh-TW/docs/Web/CSS/Syntax /zh-TW/docs/Web/CSS/CSS_syntax/Syntax +/zh-TW/docs/Web/CSS/Replaced_element /zh-TW/docs/Web/CSS/Guides/Images/Replaced_element_properties +/zh-TW/docs/Web/CSS/Shorthand_properties /zh-TW/docs/Web/CSS/Guides/Cascade/Shorthand_properties +/zh-TW/docs/Web/CSS/Syntax /zh-TW/docs/Web/CSS/Guides/Syntax/Introduction /zh-TW/docs/Web/CSS/Type_selectors /zh-TW/docs/Web/CSS/Reference/Selectors/Type_selectors /zh-TW/docs/Web/CSS/animation-fill-mode /zh-TW/docs/Web/CSS/Reference/Properties/animation-fill-mode /zh-TW/docs/Web/CSS/background-attachment /zh-TW/docs/Web/CSS/Reference/Properties/background-attachment @@ -594,6 +615,7 @@ /zh-TW/docs/Web/CSS/height /zh-TW/docs/Web/CSS/Reference/Properties/height /zh-TW/docs/Web/CSS/ruby-position /zh-TW/docs/Web/CSS/Reference/Properties/ruby-position /zh-TW/docs/Web/CSS/transform /zh-TW/docs/Web/CSS/Reference/Properties/transform +/zh-TW/docs/Web/CSS/transform-function/translate3d /zh-TW/docs/Web/CSS/Reference/Values/transform-function/translate3d /zh-TW/docs/Web/CSS/transform-origin /zh-TW/docs/Web/CSS/Reference/Properties/transform-origin /zh-TW/docs/Web/CSS/transition /zh-TW/docs/Web/CSS/Reference/Properties/transition /zh-TW/docs/Web/CSS/transition-duration /zh-TW/docs/Web/CSS/Reference/Properties/transition-duration @@ -601,8 +623,8 @@ /zh-TW/docs/Web/CSS/white-space /zh-TW/docs/Web/CSS/Reference/Properties/white-space /zh-TW/docs/Web/CSS/width /zh-TW/docs/Web/CSS/Reference/Properties/width /zh-TW/docs/Web/CSS/彈頭 /zh-TW/docs/Web/CSS/Reference/Properties/box-sizing -/zh-TW/docs/Web/CSS/繼承 /zh-TW/docs/Web/CSS/CSS_cascade/Inheritance -/zh-TW/docs/Web/CSS/語法 /zh-TW/docs/Web/CSS/CSS_syntax/Syntax +/zh-TW/docs/Web/CSS/繼承 /zh-TW/docs/Web/CSS/Guides/Cascade/Inheritance +/zh-TW/docs/Web/CSS/語法 /zh-TW/docs/Web/CSS/Guides/Syntax/Introduction /zh-TW/docs/Web/Events /zh-TW/docs/Web/API/Document_Object_Model/Events /zh-TW/docs/Web/Events/Creating_and_triggering_events /zh-TW/docs/Web/API/Document_Object_Model/Events /zh-TW/docs/Web/Events/Event_handlers /zh-TW/docs/Web/API/Document_Object_Model/Events @@ -641,7 +663,7 @@ /zh-TW/docs/Web/Guide/HTML/HTML5 /zh-TW/docs/Glossary/HTML5 /zh-TW/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /zh-TW/docs/Learn_web_development/Core/Structuring_content /zh-TW/docs/Web/Guide/Introduction_to_Web_development /zh-TW/docs/Learn_web_development -/zh-TW/docs/Web/Guide/WOFF /zh-TW/docs/Web/CSS/CSS_fonts/WOFF +/zh-TW/docs/Web/Guide/WOFF /zh-TW/docs/Web/CSS/Guides/Fonts/WOFF /zh-TW/docs/Web/Guide/Writing_forward-compatible_websites /zh-TW/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript /zh-TW/docs/Web/Guide/圖像 /zh-TW/docs/Learn_web_development/Core/Structuring_content/HTML_images /zh-TW/docs/Web/HTML/Attributes /zh-TW/docs/Web/HTML/Reference/Attributes diff --git a/files/zh-tw/_wikihistory.json b/files/zh-tw/_wikihistory.json index 9e73d65797d2cb..d7fed3ce9d3bd0 100644 --- a/files/zh-tw/_wikihistory.json +++ b/files/zh-tw/_wikihistory.json @@ -3677,7 +3677,7 @@ "BobChao" ] }, - "Web/CSS/CSS_animations/Using_CSS_animations": { + "Web/CSS/Guides/Animations/Using": { "modified": "2019-03-24T00:13:58.706Z", "contributors": [ "SphinxKnight", @@ -3686,7 +3686,7 @@ "sailplaneTW" ] }, - "Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds": { + "Web/CSS/Guides/Backgrounds_and_borders/Using_multiple_backgrounds": { "modified": "2019-03-23T22:48:53.708Z", "contributors": [ "sss63232", @@ -3695,7 +3695,7 @@ "alk03073135" ] }, - "Web/CSS/CSS_box_model/Mastering_margin_collapsing": { + "Web/CSS/Guides/Box_model/Margin_collapsing": { "modified": "2020-08-17T06:43:18.638Z", "contributors": [ "osk2", @@ -3704,14 +3704,14 @@ "MOSapeizer" ] }, - "Web/CSS/CSS_cascade/Inheritance": { + "Web/CSS/Guides/Cascade/Inheritance": { "modified": "2019-03-23T22:48:52.230Z", "contributors": [ "jackblackevo", "alk03073135" ] }, - "Web/CSS/CSS_cascade/Shorthand_properties": { + "Web/CSS/Guides/Cascade/Shorthand_properties": { "modified": "2019-03-23T23:05:17.353Z", "contributors": [ "fscholz", @@ -3719,14 +3719,14 @@ "wildsky" ] }, - "Web/CSS/CSS_colors/Color_format_converter": { + "Web/CSS/Guides/Colors/Color_format_converter": { "modified": "2019-03-23T22:44:42.147Z", "contributors": [ "Shiyou", "alk03073135" ] }, - "Web/CSS/CSS_flexible_box_layout": { + "Web/CSS/Guides/Flexible_box_layout": { "modified": "2020-07-30T05:18:51.473Z", "contributors": [ "klareh", @@ -3735,7 +3735,7 @@ "WynnChen" ] }, - "Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox": { + "Web/CSS/Guides/Flexible_box_layout/Basic_concepts": { "modified": "2020-05-11T23:59:37.780Z", "contributors": [ "wildsky", @@ -3743,14 +3743,14 @@ "1986slayer" ] }, - "Web/CSS/CSS_fonts/WOFF": { + "Web/CSS/Guides/Fonts/WOFF": { "modified": "2019-03-23T23:28:22.570Z", "contributors": [ "fscholz", "carl_tw" ] }, - "Web/CSS/CSS_grid_layout": { + "Web/CSS/Guides/Grid_layout": { "modified": "2020-02-01T05:41:13.615Z", "contributors": [ "SvampK", @@ -3759,7 +3759,7 @@ "jackblackevo" ] }, - "Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout": { + "Web/CSS/Guides/Grid_layout/Basic_concepts": { "modified": "2019-10-24T13:10:33.813Z", "contributors": [ "akccakcctw", @@ -3767,13 +3767,13 @@ "1986slayer" ] }, - "Web/CSS/CSS_images/Replaced_element_properties": { + "Web/CSS/Guides/Images/Replaced_element_properties": { "modified": "2019-03-23T22:59:51.482Z", "contributors": [ "MashKao" ] }, - "Web/CSS/CSS_lists/Consistent_list_indentation": { + "Web/CSS/Guides/Lists/Indenting": { "modified": "2019-03-24T00:14:02.326Z", "contributors": [ "jackblackevo", @@ -3781,21 +3781,21 @@ "sailplaneTW" ] }, - "Web/CSS/CSS_media_queries/Testing_media_queries": { + "Web/CSS/Guides/Media_queries/Testing": { "modified": "2019-03-23T22:55:57.771Z", "contributors": [ "jackblackevo", "foxbrush" ] }, - "Web/CSS/CSS_positioned_layout/Stacking_context/Stacking_context_example_1": { + "Web/CSS/Guides/Positioned_layout/Stacking_context/Example_1": { "modified": "2019-03-23T22:55:03.379Z", "contributors": [ "jackblackevo", "h140100" ] }, - "Web/CSS/CSS_selectors": { + "Web/CSS/Guides/Selectors": { "modified": "2020-10-24T16:00:38.628Z", "contributors": [ "NekoChan-2851", @@ -3806,7 +3806,7 @@ "jackblackevo" ] }, - "Web/CSS/CSS_syntax/Syntax": { + "Web/CSS/Guides/Syntax/Introduction": { "modified": "2020-06-01T00:28:11.978Z", "contributors": [ "bensontobeicsc", @@ -3814,7 +3814,7 @@ "xuan0123" ] }, - "Web/CSS/CSS_text/Whitespace": { + "Web/CSS/Guides/Text/Whitespace": { "modified": "2020-01-30T13:21:14.453Z", "contributors": [ "chrisdavidmills", @@ -4014,7 +4014,7 @@ "YvonneYu" ] }, - "Web/CSS/transform-function/translate3d": { + "Web/CSS/Reference/Values/transform-function/translate3d": { "modified": "2020-11-30T13:00:00.920Z", "contributors": [ "chrisdavidmills", diff --git a/files/zh-tw/glossary/block-level_content/index.md b/files/zh-tw/glossary/block-level_content/index.md index fd89e1d2f14e10..5066358f02f55c 100644 --- a/files/zh-tw/glossary/block-level_content/index.md +++ b/files/zh-tw/glossary/block-level_content/index.md @@ -110,6 +110,6 @@ The following is a complete list of all HTML block level elements (although "blo ### 參閱 - [行內級元素](/zh-TW/docs/Glossary/Inline-level_content) -- [Block formatting context](/zh-TW/docs/Web/CSS/CSS_display/Block_formatting_context) +- [區塊格式化上下文](/zh-TW/docs/Web/CSS/Guides/Display/Block_formatting_context) - {{cssxref("display")}} - [`writing-mode`](/zh-TW/docs/Web/CSS/Reference/Properties/writing-mode) diff --git a/files/zh-tw/glossary/block/css/index.md b/files/zh-tw/glossary/block/css/index.md index fea6c47b86424d..a7d78e57ba2cee 100644 --- a/files/zh-tw/glossary/block/css/index.md +++ b/files/zh-tw/glossary/block/css/index.md @@ -1,14 +1,12 @@ --- -title: 區塊 (CSS) +title: 區塊（CSS） slug: Glossary/Block/CSS --- -在網頁上一個**區塊**是一個{{glossary("HTML")}}元素({{glossary("element")}})它會出現一個新的行，例：在前面的元素之下和後面的元素之前(通常稱爲塊級元素)。擧個例子, {{htmlelement("p")}} 標簽就是一個默認的塊級元素，而 {{htmlelement("a")}} 標簽則是一個内聯元素— 你可以在 HTML 源代碼放一些相鄰的鏈接，他們將會并列渲染在相同的行。 +在網頁上一個**區塊**是一個 {{glossary("HTML")}} {{glossary("element", "元素")}}它會出現一個新的行，例：在前面的元素之下和後面的元素之前（通常稱爲*塊級元素*）。擧個例子，{{htmlelement("p")}} 標簽就是一個默認的塊級元素，而 {{htmlelement("a")}} 標簽則是一個*内聯元素*——你可以在 HTML 源代碼放一些相鄰的鏈接，他們將會并列渲染在相同的行。 -使用 {{cssxref("display")}} 屬性你可以隨意改變大多數元素的顯示方式，不論是内聯還是區塊(其中還有很多其他的選項); **blocks** 也同樣會受到定位方案和{{cssxref("position")}}屬性的影響。 +使用 {{cssxref("display")}} 屬性你可以隨意改變大多數元素的顯示方式，不論是内聯還是區塊（其中還有很多其他的選項）；**blocks** 也同樣會受到定位方案和 {{cssxref("position")}} 屬性的影響。 -## 了解更多 +## 參見 -### 基礎知識 - -- [視覺格式模型](/zh-TW/docs/Web/CSS/Visual_formatting_model) +- [視覺格式模型](/zh-TW/docs/Web/CSS/Guides/Display/Visual_formatting_model) diff --git a/files/zh-tw/glossary/grid/index.md b/files/zh-tw/glossary/grid/index.md index bc08c35bb40e1b..3fe94520b34b8b 100644 --- a/files/zh-tw/glossary/grid/index.md +++ b/files/zh-tw/glossary/grid/index.md @@ -67,4 +67,4 @@ _CSS 格線_(CSS grid) 使用 `display: grid;` 值，你可以透過 {{cssxref(" ### 參閱 -- CSS 格線布局教學：_[格線布局的基本概念](/zh-TW/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_ +- CSS 格線布局教學：_[格線布局的基本概念](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Basic_concepts)_ diff --git a/files/zh-tw/learn_web_development/core/css_layout/index.md b/files/zh-tw/learn_web_development/core/css_layout/index.md index f1c935d46a0419..0aabac3fa5fd9e 100644 --- a/files/zh-tw/learn_web_development/core/css_layout/index.md +++ b/files/zh-tw/learn_web_development/core/css_layout/index.md @@ -25,7 +25,7 @@ slug: Learn_web_development/Core/CSS_layout - [常規流](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Introduction) - : 在我們做任何事之前，網頁上的元素會根據常規流自行排列。這篇文章解釋常規流的基礎知識，用來學習如何改變它。 - [彈性盒子](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Flexbox) - - : [彈性盒子](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox)是一維空間的排版方式，用來讓項目以行或列的方式排列。項目會延展或限縮來符合較大或較小的空間。這篇文章會解釋基礎原理。 + - : [彈性盒子](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Use_cases)是一維空間的排版方式，用來讓項目以行或列的方式排列。項目會延展或限縮來符合較大或較小的空間。這篇文章會解釋基礎原理。 - [網格](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Grids) - : CSS 網格排版是一個二維空間的網頁排版系統。它讓你將內容排入行與列中，且它有許多功能讓你在建立複雜的排版時變得簡單明瞭。這篇文章會告訴你全部。 - [浮動](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Floats) diff --git a/files/zh-tw/learn_web_development/core/structuring_content/basic_html_syntax/index.md b/files/zh-tw/learn_web_development/core/structuring_content/basic_html_syntax/index.md index 86b257c71e5d8a..84fb3dc4152993 100644 --- a/files/zh-tw/learn_web_development/core/structuring_content/basic_html_syntax/index.md +++ b/files/zh-tw/learn_web_development/core/structuring_content/basic_html_syntax/index.md @@ -616,6 +616,6 @@ HTML 就像大部分的程式語言，提供了一種能讓我們可以在原始 ## 參見 -- [用 CSS 為 HTML 元素修改顏色](/zh-TW/docs/Web/CSS/CSS_colors/Applying_color) +- [用 CSS 為 HTML 元素修改顏色](/zh-TW/docs/Web/CSS/Guides/Colors/Applying_color) {{NextMenu("Learn_web_development/Core/Structuring_content/Webpage_metadata", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/zh-tw/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md b/files/zh-tw/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md index 9028f09f4e7746..e527e186aa00b8 100644 --- a/files/zh-tw/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md +++ b/files/zh-tw/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md @@ -41,7 +41,7 @@ slug: Learn_web_development/Getting_started/Your_first_website/What_will_your_we ### 主題色彩 -可透過[選色工具](/zh-TW/docs/Web/CSS/CSS_colors/Color_format_converter)找到你喜歡的顏色。當你點擊其中一種顏色，就會看到如下圖「`#660066`」的 6 位數字，此即代表該顏色的十六進位 (Hexadecimal) 色碼。請另外找個地方記錄此色碼。 +可透過[選色工具](/zh-TW/docs/Web/CSS/Guides/Colors/Color_format_converter)找到你喜歡的顏色。當你點擊其中一種顏色，就會看到如下圖「`#660066`」的 6 位數字，此即代表該顏色的十六進位 (Hexadecimal) 色碼。請另外找個地方記錄此色碼。 ![](color-picker.png) diff --git a/files/zh-tw/learn_web_development/howto/solve_css_problems/index.md b/files/zh-tw/learn_web_development/howto/solve_css_problems/index.md index 55954c4ef41357..ca62efc3e079bf 100644 --- a/files/zh-tw/learn_web_development/howto/solve_css_problems/index.md +++ b/files/zh-tw/learn_web_development/howto/solve_css_problems/index.md @@ -46,9 +46,9 @@ slug: Learn_web_development/Howto/Solve_CSS_problems ### 布局指南 -- [使用 CSS 彈性盒子](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) -- [使用 CSS 多行布局](/zh-TW/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts) -- [使用 CSS 格線布局](/zh-TW/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) +- [使用 CSS 彈性盒子](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) +- [使用 CSS 多行布局](/zh-TW/docs/Web/CSS/Guides/Multicol_layout/Using) +- [使用 CSS 格線布局](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Basic_concepts) - [使用 CSS 生成內容](/zh-TW/docs/Learn_web_development/Howto/Solve_CSS_problems/Generated_content) > [!NOTE] diff --git a/files/zh-tw/mdn/tutorials/index.md b/files/zh-tw/mdn/tutorials/index.md index 46e813c8f30835..7227564a671f00 100644 --- a/files/zh-tw/mdn/tutorials/index.md +++ b/files/zh-tw/mdn/tutorials/index.md @@ -67,9 +67,9 @@ slug: MDN/Tutorials ### 高級 -- **[Using CSS transforms](/zh-TW/docs/Web/CSS/CSS_transforms/Using_CSS_transforms)** +- **[Using CSS transforms](/zh-TW/docs/Web/CSS/Guides/Transforms/Using)** - : Apply rotation, skewing, scaling, and translation using CSS. -- **[CSS transitions](/zh-TW/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)** +- **[CSS transitions](/zh-TW/docs/Web/CSS/Guides/Transitions/Using)** - : CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly. - **[Quick Guide to Implement Web Fonts with @font-face](https://www.html5rocks.com/tutorials/webfonts/quick/) (HTML5 Rocks)** - : The @font-face feature from CSS3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way. diff --git a/files/zh-tw/web/api/animationevent/index.md b/files/zh-tw/web/api/animationevent/index.md index 544cd28a86d71e..f5ef36c308a9be 100644 --- a/files/zh-tw/web/api/animationevent/index.md +++ b/files/zh-tw/web/api/animationevent/index.md @@ -7,7 +7,7 @@ l10n: {{APIRef("Web Animations")}} -**`AnimationEvent`** 介面表示提供與[動畫](/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations)相關訊息的事件。 +**`AnimationEvent`** 介面表示提供與[動畫](/zh-TW/docs/Web/CSS/Guides/Animations/Using)相關訊息的事件。 {{InheritanceDiagram}} @@ -41,5 +41,5 @@ _繼承自其父 {{domxref("Event")}} 的方法_。 ## 參見 -- [使用 CSS 動畫](/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations) +- [使用 CSS 動畫](/zh-TW/docs/Web/CSS/Guides/Animations/Using) - 與動畫相關的 CSS 屬性與 at-規則：{{cssxref("animation")}}、{{cssxref("animation-composition")}}、{{cssxref("animation-delay")}}、{{cssxref("animation-direction")}}、{{cssxref("animation-duration")}}、{{cssxref("animation-fill-mode")}}、{{cssxref("animation-iteration-count")}}、{{cssxref("animation-name")}}、{{cssxref("animation-play-state")}}、{{cssxref("animation-timing-function")}}、{{cssxref("@keyframes")}}。 diff --git a/files/zh-tw/web/api/cssstylesheet/insertrule/index.md b/files/zh-tw/web/api/cssstylesheet/insertrule/index.md index 8bef9df23e996a..39b564504f3a1b 100644 --- a/files/zh-tw/web/api/cssstylesheet/insertrule/index.md +++ b/files/zh-tw/web/api/cssstylesheet/insertrule/index.md @@ -23,8 +23,8 @@ insertRule(rule, index) - `rule` - : 包含要插入規則的字串。插入規則的內容需視其類型而定： - - **針對[規則集](/zh-TW/docs/Web/CSS/CSS_syntax/Syntax#css_語句)**，需包含[選擇器](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Basic_selectors)及樣式宣告。 - - **針對 [at-規則](/zh-TW/docs/Web/CSS/CSS_syntax/At-rule)**，需包含 at-識別符與規則內容。 + - **針對[規則集](/zh-TW/docs/Web/CSS/Guides/Syntax/Introduction#css_語句)**，需包含[選擇器](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Basic_selectors)及樣式宣告。 + - **針對 [at-規則](/zh-TW/docs/Web/CSS/Guides/Syntax/At-rules)**，需包含 at-識別符與規則內容。 - `index` {{optional_inline}} - : 一個小於等於 `stylesheet.cssRules.length` 的正整數，表示新插入規則在 `{{domxref("CSSStyleSheet", "", "", "1")}}.cssRules` 中的位置。預設值為 `0`。（在舊版實作中此參數為必要。參見[瀏覽器相容性](#瀏覽器相容性)。） diff --git a/files/zh-tw/web/api/document/queryselector/index.md b/files/zh-tw/web/api/document/queryselector/index.md index 50a4df3a291733..481201c9b6b2f8 100644 --- a/files/zh-tw/web/api/document/queryselector/index.md +++ b/files/zh-tw/web/api/document/queryselector/index.md @@ -7,7 +7,7 @@ l10n: {{ApiRef("DOM")}} -{{domxref("Document")}} 的 **`querySelector()`** 方法回傳文件中第一個符合指定 [CSS 選擇器](/zh-TW/docs/Web/CSS/CSS_selectors)或一組 CSS 選擇器的 {{domxref("Element")}}。如果沒有找到匹配項，則回傳 `null`。 +{{domxref("Document")}} 的 **`querySelector()`** 方法回傳文件中第一個符合指定 [CSS 選擇器](/zh-TW/docs/Web/CSS/Guides/Selectors)或一組 CSS 選擇器的 {{domxref("Element")}}。如果沒有找到匹配項，則回傳 `null`。 匹配是使用深度優先前序遍歷來進行的，從文件標記中的第一個元素開始，依據子節點的數量順序，依序遍歷文件中的節點。 @@ -26,11 +26,11 @@ querySelector(selectors) - `selectors` - : 包含一個或多個選擇器的字串。此字串必須是有效的 CSS 選擇器字串；如果不是，則會拋出 `SyntaxError` 例外。 - 注意 HTML 規範並不要求屬性值是有效的 CSS 識別符。如果 [`class`](/zh-TW/docs/Web/HTML/Reference/Global_attributes/class) 或 [`id`](/zh-TW/docs/Web/HTML/Reference/Global_attributes/id) 屬性值不是有效的 CSS 識別符，那麼在選擇器中使用它之前，你必須對其進行轉義，可以通過呼叫 {{domxref("CSS.escape_static", "CSS.escape()")}} 或使用[轉義字元](/zh-TW/docs/Web/CSS/ident#轉義字元)中描述的技術之一進行轉義。參見[轉義屬性值](#轉義屬性值)範例。 + 注意 HTML 規範並不要求屬性值是有效的 CSS 識別符。如果 [`class`](/zh-TW/docs/Web/HTML/Reference/Global_attributes/class) 或 [`id`](/zh-TW/docs/Web/HTML/Reference/Global_attributes/id) 屬性值不是有效的 CSS 識別符，那麼在選擇器中使用它之前，你必須對其進行轉義，可以通過呼叫 {{domxref("CSS.escape_static", "CSS.escape()")}} 或使用[轉義字元](/zh-TW/docs/Web/CSS/Reference/Values/ident#轉義字元)中描述的技術之一進行轉義。參見[轉義屬性值](#轉義屬性值)範例。 ### 回傳值 -一個 {{domxref("Element")}} 物件，表示文件中第一個符合指定 [CSS 選擇器](/zh-TW/docs/Web/CSS/CSS_selectors)的元素；如果沒有匹配項，則回傳 `null`。 +一個 {{domxref("Element")}} 物件，表示文件中第一個符合指定 [CSS 選擇器](/zh-TW/docs/Web/CSS/Guides/Selectors)的元素；如果沒有匹配項，則回傳 `null`。 如果你需要符合指定選擇器的所有元素的清單，應該使用 {{domxref("Document.querySelectorAll", "querySelectorAll()")}}。 @@ -71,7 +71,7 @@ const el = document.querySelector( ### 轉義屬性值 -此範例顯示，如果 HTML 文件包含一個不是有效的 [CSS 識別符](/zh-TW/docs/Web/CSS/ident)的 [`id`](/zh-TW/docs/Web/HTML/Reference/Global_attributes/id)，那麼在 `querySelector()` 中使用它之前，我們必須對屬性值進行轉義。 +此範例顯示，如果 HTML 文件包含一個不是有效的 [CSS 識別符](/zh-TW/docs/Web/CSS/Reference/Values/ident)的 [`id`](/zh-TW/docs/Web/HTML/Reference/Global_attributes/id)，那麼在 `querySelector()` 中使用它之前，我們必須對屬性值進行轉義。 #### HTML diff --git a/files/zh-tw/web/api/document_object_model/events/index.md b/files/zh-tw/web/api/document_object_model/events/index.md index ef029b6223970f..cac133f317fefa 100644 --- a/files/zh-tw/web/api/document_object_model/events/index.md +++ b/files/zh-tw/web/api/document_object_model/events/index.md @@ -107,7 +107,7 @@ This article offers a list of events that can be sent; some are standard events

Events related to - CSS Transitions. + CSS Transitions.

Provides notification events when CSS transitions start, stop, are diff --git a/files/zh-tw/web/api/mediaquerylist/index.md b/files/zh-tw/web/api/mediaquerylist/index.md index cce7e40ab51bb1..0273ee5a561590 100644 --- a/files/zh-tw/web/api/mediaquerylist/index.md +++ b/files/zh-tw/web/api/mediaquerylist/index.md @@ -7,7 +7,7 @@ l10n: {{APIRef("CSSOM")}} -**`MediaQueryList`** 物件儲存了套用至文件的[媒體查詢](/zh-TW/docs/Web/CSS/CSS_media_queries)資訊，並支援針對文件狀態進行立即和事件驅動的匹配。 +**`MediaQueryList`** 物件儲存了套用至文件的[媒體查詢](/zh-TW/docs/Web/CSS/Guides/Media_queries)資訊，並支援針對文件狀態進行立即和事件驅動的匹配。 你可以透過在 {{DOMxRef("window")}} 物件上呼叫 {{DOMxRef("Window.matchMedia", "matchMedia()")}} 來建立一個 `MediaQueryList`。產生的物件會處理在媒體查詢狀態改變時（也就是當媒體查詢測試開始或停止評估為 `true` 時）向監聽器發送通知。 @@ -78,8 +78,8 @@ mql.addEventListener("change", screenTest); ## 參見 -- [媒體查詢](/zh-TW/docs/Web/CSS/CSS_media_queries/Using_media_queries) -- [從程式碼使用媒體查詢](/zh-TW/docs/Web/CSS/CSS_media_queries/Testing_media_queries) +- [媒體查詢](/zh-TW/docs/Web/CSS/Guides/Media_queries/Using) +- [從程式碼使用媒體查詢](/zh-TW/docs/Web/CSS/Guides/Media_queries/Testing) - {{DOMxRef("window.matchMedia()")}} - {{DOMxRef("MediaQueryListEvent")}} - {{DOMxRef("Window.devicePixelRatio")}} 文章中也有一個有用的範例 diff --git a/files/zh-tw/web/api/window/print/index.md b/files/zh-tw/web/api/window/print/index.md index 8fc172f9a3f2a1..670a30c6b19f06 100644 --- a/files/zh-tw/web/api/window/print/index.md +++ b/files/zh-tw/web/api/window/print/index.md @@ -38,6 +38,6 @@ print() ## 參見 -- [列印](/zh-TW/docs/Web/CSS/CSS_media_queries/Printing) +- [列印](/zh-TW/docs/Web/CSS/Guides/Media_queries/Printing) - {{ domxref("window.beforeprint_event", "beforeprint") }} 事件 - {{ domxref("window.afterprint_event", "afterprint") }} 事件 diff --git a/files/zh-tw/web/css/css_animations/using_css_animations/index.md b/files/zh-tw/web/css/guides/animations/using/index.md similarity index 98% rename from files/zh-tw/web/css/css_animations/using_css_animations/index.md rename to files/zh-tw/web/css/guides/animations/using/index.md index b2141fea7723a5..4903dca5d556b8 100644 --- a/files/zh-tw/web/css/css_animations/using_css_animations/index.md +++ b/files/zh-tw/web/css/guides/animations/using/index.md @@ -1,7 +1,7 @@ --- title: 使用 CSS 動畫 short-title: 使用動畫 -slug: Web/CSS/CSS_animations/Using_CSS_animations +slug: Web/CSS/Guides/Animations/Using l10n: sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2 --- @@ -392,7 +392,7 @@ function listener(event) { 這個範例展示了 [`display`](/zh-TW/docs/Web/CSS/Reference/Properties/display) 和 [`content-visibility`](/zh-TW/docs/Web/CSS/Reference/Properties/content-visibility) 如何加上動畫。這種行為對於建立進入／離開動畫很有用，例如你想要用 `display: none` 從 DOM 中移除一個容器，但希望它能用 [`opacity`](/zh-TW/docs/Web/CSS/Reference/Properties/opacity) 平滑地淡出，而不是立即消失。 -支援的瀏覽器會使用[離散動畫類型](/zh-TW/docs/Web/CSS/CSS_animated_properties#離散)的變體來為 `display` 和 `content-visibility` 加上動畫。這通常意味著屬性將在兩個值之間動畫的中途（50%）翻轉。 +支援的瀏覽器會使用[離散動畫類型](/zh-TW/docs/Web/CSS/Guides/Animations/Animatable_properties#離散)的變體來為 `display` 和 `content-visibility` 加上動畫。這通常意味著屬性將在兩個值之間動畫的中途（50%）翻轉。 然而，有一個例外，那就是當從 `display: none` 或 `content-visibility: hidden` 動畫到一個可見值時。在這種情況下，瀏覽器將在兩個值之間翻轉，以便被加上動畫的內容在整個動畫持續時間內都是可見的。 @@ -512,5 +512,5 @@ function showHide() { ## 參見 - {{domxref("AnimationEvent", "AnimationEvent")}} -- [使用 CSS 轉場](/zh-TW/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) +- [使用 CSS 轉場](/zh-TW/docs/Web/CSS/Guides/Transitions/Using) - [使用 Web 動畫 API](/zh-TW/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) diff --git a/files/zh-tw/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/zh-tw/web/css/guides/backgrounds_and_borders/using_multiple_backgrounds/index.md similarity index 87% rename from files/zh-tw/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md rename to files/zh-tw/web/css/guides/backgrounds_and_borders/using_multiple_backgrounds/index.md index 975cd404ab224e..8eb9f757e1e4c0 100644 --- a/files/zh-tw/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md +++ b/files/zh-tw/web/css/guides/backgrounds_and_borders/using_multiple_backgrounds/index.md @@ -1,6 +1,6 @@ --- title: 使用多重背景 -slug: Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds +slug: Web/CSS/Guides/Backgrounds_and_borders/Using_multiple_backgrounds l10n: sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2 --- @@ -11,7 +11,7 @@ l10n: ## 範例 -在這個範例中，堆疊了三個背景：Firefox logo、一個泡泡的圖片，以及一個[線性漸層](/zh-TW/docs/Web/CSS/gradient/linear-gradient)： +在這個範例中，堆疊了三個背景：Firefox logo、一個泡泡的圖片，以及一個[線性漸層](/zh-TW/docs/Web/CSS/Reference/Values/gradient/linear-gradient)： ### HTML @@ -44,5 +44,5 @@ l10n: ## 參見 -- [使用 CSS 漸層](/zh-TW/docs/Web/CSS/CSS_images/Using_CSS_gradients) -- [CSS 背景與邊框](/zh-TW/docs/Web/CSS/CSS_backgrounds_and_borders)模組 +- [使用 CSS 漸層](/zh-TW/docs/Web/CSS/Guides/Images/Using_gradients) +- [CSS 背景與邊框](/zh-TW/docs/Web/CSS/Guides/Backgrounds_and_borders)模組 diff --git a/files/zh-tw/web/css/css_box_model/mastering_margin_collapsing/index.md b/files/zh-tw/web/css/guides/box_model/margin_collapsing/index.md similarity index 77% rename from files/zh-tw/web/css/css_box_model/mastering_margin_collapsing/index.md rename to files/zh-tw/web/css/guides/box_model/margin_collapsing/index.md index 12e60479c7dd46..2c70c8a8167401 100644 --- a/files/zh-tw/web/css/css_box_model/mastering_margin_collapsing/index.md +++ b/files/zh-tw/web/css/guides/box_model/margin_collapsing/index.md @@ -1,6 +1,6 @@ --- title: 精通外距摺疊 -slug: Web/CSS/CSS_box_model/Mastering_margin_collapsing +slug: Web/CSS/Guides/Box_model/Margin_collapsing l10n: sourceCommit: c9fc9aa7a65c5109e64c0f7b6d9e732dd812973f --- @@ -14,7 +14,7 @@ l10n: - 沒有內容分隔父元素和後代元素 - : 父區塊與其後代元素之間的垂直外距可以摺疊。當它們之間沒有任何內容分隔時，就會發生這種情況。具體來說，這發生在兩種主要情況下： - 父元素的 {{cssxref("margin-top")}} 會與其第一個在流中的後代元素的 {{cssxref("margin-top")}} 摺疊，除非父元素有 {{cssxref("border-top")}}、{{cssxref("padding-top")}}、包含任何行內內容（例如文字），或已套用 [_clearance_](/zh-TW/docs/Web/CSS/Reference/Properties/clear)。 - - 父元素的 {{cssxref("margin-bottom")}} 會與其最後一個在流中的後代元素的 {{cssxref("margin-bottom")}} 摺疊，除非父元素有已定義的 {{cssxref("height")}} 或 {{cssxref("min-height")}}、{{cssxref("border-bottom")}} 或 {{cssxref("padding-bottom")}}。在這兩種情況下，在父元素上建立一個新的[區塊格式化上下文](/zh-TW/docs/Web/CSS/CSS_display/Block_formatting_context)也會防止其外距與其子元素的外距摺疊。 + - 父元素的 {{cssxref("margin-bottom")}} 會與其最後一個在流中的後代元素的 {{cssxref("margin-bottom")}} 摺疊，除非父元素有已定義的 {{cssxref("height")}} 或 {{cssxref("min-height")}}、{{cssxref("border-bottom")}} 或 {{cssxref("padding-bottom")}}。在這兩種情況下，在父元素上建立一個新的[區塊格式化上下文](/zh-TW/docs/Web/CSS/Guides/Display/Block_formatting_context)也會防止其外距與其子元素的外距摺疊。 - 空區塊 - : 如果沒有邊框、內距、行內內容、{{cssxref("height")}} 或 {{cssxref("min-height")}} 來分隔一個區塊的 {{cssxref("margin-top")}} 和其 {{cssxref("margin-bottom")}}，那麼它的上外距和下外距就會摺疊。 @@ -65,19 +65,19 @@ p { ## 參見 - CSS 關鍵概念： - - [CSS 語法](/zh-TW/docs/Web/CSS/CSS_syntax/Syntax) - - [At 規則](/zh-TW/docs/Web/CSS/CSS_syntax/At-rule) - - [註解](/zh-TW/docs/Web/CSS/CSS_syntax/Comments) - - [權重](/zh-TW/docs/Web/CSS/CSS_cascade/Specificity) - - [繼承](/zh-TW/docs/Web/CSS/CSS_cascade/Inheritance) - - [盒模型](/zh-TW/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) + - [CSS 語法](/zh-TW/docs/Web/CSS/Guides/Syntax/Introduction) + - [At 規則](/zh-TW/docs/Web/CSS/Guides/Syntax/At-rules) + - [註解](/zh-TW/docs/Web/CSS/Guides/Syntax/Comments) + - [權重](/zh-TW/docs/Web/CSS/Guides/Cascade/Specificity) + - [繼承](/zh-TW/docs/Web/CSS/Guides/Cascade/Inheritance) + - [盒模型](/zh-TW/docs/Web/CSS/Guides/Box_model/Introduction) - [排版模式](/zh-TW/docs/Glossary/Layout_mode) - - [視覺化格式模型](/zh-TW/docs/Web/CSS/CSS_display/Visual_formatting_model) + - [視覺化格式模型](/zh-TW/docs/Web/CSS/Guides/Display/Visual_formatting_model) - 值 - - [初始值](/zh-TW/docs/Web/CSS/CSS_cascade/Value_processing#初始值) - - [計算值](/zh-TW/docs/Web/CSS/CSS_cascade/Value_processing#計算值) - - [應用值](/zh-TW/docs/Web/CSS/CSS_cascade/Value_processing#應用值) - - [實際值](/zh-TW/docs/Web/CSS/CSS_cascade/Value_processing#實際值) + - [初始值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#初始值) + - [計算值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#計算值) + - [應用值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#應用值) + - [實際值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#實際值) - [值定義語法](/zh-TW/docs/Web/CSS/CSS_Values_and_Units/Value_definition_syntax) - - [簡寫屬性](/zh-TW/docs/Web/CSS/CSS_cascade/Shorthand_properties) + - [簡寫屬性](/zh-TW/docs/Web/CSS/Guides/Cascade/Shorthand_properties) - {{glossary("Replaced elements", "替換元素")}} diff --git a/files/zh-tw/web/css/css_cascade/inheritance/index.md b/files/zh-tw/web/css/guides/cascade/inheritance/index.md similarity index 63% rename from files/zh-tw/web/css/css_cascade/inheritance/index.md rename to files/zh-tw/web/css/guides/cascade/inheritance/index.md index dd1aa24b454d83..fb4e4b715b70ed 100644 --- a/files/zh-tw/web/css/css_cascade/inheritance/index.md +++ b/files/zh-tw/web/css/guides/cascade/inheritance/index.md @@ -1,6 +1,6 @@ --- title: 繼承 -slug: Web/CSS/CSS_cascade/Inheritance +slug: Web/CSS/Guides/Cascade/Inheritance l10n: sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2 --- @@ -9,14 +9,14 @@ l10n: CSS 屬性可以分為兩種類型： -- **繼承屬性**，預設會設定為其父元素的[計算值](/zh-TW/docs/Web/CSS/CSS_cascade/Value_processing#計算值)。 -- **非繼承屬性**，預設會設定為該屬性的[初始值](/zh-TW/docs/Web/CSS/CSS_cascade/Value_processing#初始值)。 +- **繼承屬性**，預設會設定為其父元素的[計算值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#計算值)。 +- **非繼承屬性**，預設會設定為該屬性的[初始值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#初始值)。 請參閱[任何 CSS 屬性](/zh-TW/docs/Web/CSS/Reference#索引)的定義，以查看特定屬性預設是否繼承（「Inherited: yes」）或不繼承（「Inherited: no」）。 ## 繼承屬性 -當元素上未指定**繼承屬性**的值時，該元素會取得其父元素上該屬性的[計算值](/zh-TW/docs/Web/CSS/CSS_cascade/Value_processing#計算值)。只有文件的根元素會取得屬性摘要中給定的[初始值](/zh-TW/docs/Web/CSS/CSS_cascade/Value_processing#初始值)。 +當元素上未指定**繼承屬性**的值時，該元素會取得其父元素上該屬性的[計算值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#計算值)。只有文件的根元素會取得屬性摘要中給定的[初始值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#初始值)。 繼承屬性的一個典型範例是 [`color`](/zh-TW/docs/Web/CSS/Reference/Properties/color) 屬性。請看以下樣式規則和標記： @@ -36,7 +36,7 @@ p { ## 非繼承屬性 -當元素上未指定**非繼承屬性**的值時，該元素會取得該屬性的[初始值](/zh-TW/docs/Web/CSS/CSS_cascade/Value_processing#初始值)（如屬性摘要中所指定）。 +當元素上未指定**非繼承屬性**的值時，該元素會取得該屬性的[初始值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#初始值)（如屬性摘要中所指定）。 非繼承屬性的一個典型範例是 {{ Cssxref("border") }} 屬性。請看以下樣式規則和標記： @@ -56,7 +56,7 @@ p { ## 備註 -[`inherit`](/zh-TW/docs/Web/CSS/inherit) 關鍵字允許作者明確指定繼承。它對繼承和非繼承屬性都有效。 +[`inherit`](/zh-TW/docs/Web/CSS/Reference/Values/inherit) 關鍵字允許作者明確指定繼承。它對繼承和非繼承屬性都有效。 你可以使用 [`all`](/zh-TW/docs/Web/CSS/Reference/Properties/all) 簡寫屬性一次控制所有屬性的繼承，它會將其值應用於所有屬性。例如： @@ -98,15 +98,15 @@ em { ## 參見 -- 用於控制繼承的 CSS 值：[`inherit`](/zh-TW/docs/Web/CSS/inherit)、[`initial`](/zh-TW/docs/Web/CSS/initial)、[`revert`](/zh-TW/docs/Web/CSS/revert)、[`revert-layer`](/zh-TW/docs/Web/CSS/revert-layer) 和 [`unset`](/zh-TW/docs/Web/CSS/unset) -- [CSS 錯誤處理](/zh-TW/docs/Web/CSS/CSS_syntax/Error_handling) -- [CSS 層疊介紹](/zh-TW/docs/Web/CSS/CSS_cascade/Cascade) +- 用於控制繼承的 CSS 值：[`inherit`](/zh-TW/docs/Web/CSS/Reference/Values/inherit)、[`initial`](/zh-TW/docs/Web/CSS/Reference/Values/initial)、[`revert`](/zh-TW/docs/Web/CSS/Reference/Values/revert)、[`revert-layer`](/zh-TW/docs/Web/CSS/Reference/Values/revert-layer) 和 [`unset`](/zh-TW/docs/Web/CSS/Reference/Values/unset) +- [CSS 錯誤處理](/zh-TW/docs/Web/CSS/Guides/Syntax/Error_handling) +- [CSS 層疊介紹](/zh-TW/docs/Web/CSS/Guides/Cascade/Introduction) - [學習：處理衝突](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - [學習：層疊層](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) -- [CSS 層疊與繼承](/zh-TW/docs/Web/CSS/CSS_cascade)模組 -- [CSS 語法](/zh-TW/docs/Web/CSS/CSS_syntax/Syntax)指南 -- [CSS 語法](/zh-TW/docs/Web/CSS/CSS_syntax)模組 -- [At 規則](/zh-TW/docs/Web/CSS/CSS_syntax/At-rule) -- [初始](/zh-TW/docs/Web/CSS/CSS_cascade/Value_processing#初始值)、[計算](/zh-TW/docs/Web/CSS/CSS_cascade/Value_processing#計算值)、[應用](/zh-TW/docs/Web/CSS/CSS_cascade/Value_processing#應用值)和[實際](/zh-TW/docs/Web/CSS/CSS_cascade/Value_processing#實際值)值 +- [CSS 層疊與繼承](/zh-TW/docs/Web/CSS/Guides/Cascade)模組 +- [CSS 語法](/zh-TW/docs/Web/CSS/Guides/Syntax/Introduction)指南 +- [CSS 語法](/zh-TW/docs/Web/CSS/Guides/Syntax)模組 +- [At 規則](/zh-TW/docs/Web/CSS/Guides/Syntax/At-rules) +- [初始](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#初始值)、[計算](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#計算值)、[應用](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#應用值)和[實際](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#實際值)值 - [值定義語法](/zh-TW/docs/Web/CSS/CSS_Values_and_Units/Value_definition_syntax) -- [CSS 巢狀模組](/zh-TW/docs/Web/CSS/CSS_nesting) +- [CSS 巢狀模組](/zh-TW/docs/Web/CSS/Guides/Nesting) diff --git a/files/zh-tw/web/css/css_cascade/shorthand_properties/index.md b/files/zh-tw/web/css/guides/cascade/shorthand_properties/index.md similarity index 98% rename from files/zh-tw/web/css/css_cascade/shorthand_properties/index.md rename to files/zh-tw/web/css/guides/cascade/shorthand_properties/index.md index e4087233668df7..be19353abe0cbd 100644 --- a/files/zh-tw/web/css/css_cascade/shorthand_properties/index.md +++ b/files/zh-tw/web/css/guides/cascade/shorthand_properties/index.md @@ -1,6 +1,6 @@ --- title: 簡寫屬性 -slug: Web/CSS/CSS_cascade/Shorthand_properties +slug: Web/CSS/Guides/Cascade/Shorthand_properties --- **_簡寫屬性_**是一種可以同時設定許多其他 CSS 屬性值的 CSS 屬性。使用簡寫屬性，Web 開發者可以寫出更簡潔、且通常更具可讀性的樣式表，省時又省力。 @@ -217,4 +217,4 @@ margin: 10px 5px 10px 5px; ## 參見 -- [CSS 語法](/zh-TW/docs/Web/CSS/CSS_syntax/Syntax) +- [CSS 語法](/zh-TW/docs/Web/CSS/Guides/Syntax/Introduction) diff --git a/files/zh-tw/web/css/css_colors/color_format_converter/index.md b/files/zh-tw/web/css/guides/colors/color_format_converter/index.md similarity index 78% rename from files/zh-tw/web/css/css_colors/color_format_converter/index.md rename to files/zh-tw/web/css/guides/colors/color_format_converter/index.md index 8c5f53b8097acf..c920f402556134 100644 --- a/files/zh-tw/web/css/css_colors/color_format_converter/index.md +++ b/files/zh-tw/web/css/guides/colors/color_format_converter/index.md @@ -1,11 +1,11 @@ --- title: 顏色選擇器 -slug: Web/CSS/CSS_colors/Color_format_converter +slug: Web/CSS/Guides/Colors/Color_format_converter l10n: sourceCommit: c148812e0874220770cab62c16f33f48ceb98e99 --- -這個工具讓你可以在 sRGB {{glossary("color space", "色彩空間")}}中選擇一個顏色，並在各種 CSS [顏色格式](/zh-TW/docs/Web/CSS/color_value)之間進行轉換，幫助你了解以下 sRGB 顏色標記法的語法： +這個工具讓你可以在 sRGB {{glossary("color space", "色彩空間")}}中選擇一個顏色，並在各種 CSS [顏色格式](/zh-TW/docs/Web/CSS/Reference/Values/color_value)之間進行轉換，幫助你了解以下 sRGB 顏色標記法的語法： - {{cssxref("hex-color")}}，一種 [sRGB](/zh-TW/docs/Glossary/RGB) 顏色的*十六進位顏色表示法*，使用其主要顏色元件（紅、綠、藍）以及其透明度，以十六進位數字書寫。 - {{CSSxRef("color_value/rgb", "rgb()")}}，根據其紅、綠、藍和 alpha（透明度）元件來定義一個給定的顏色。 @@ -21,10 +21,10 @@ l10n: ## 參見 -- [使用 CSS 屬性應用顏色](/zh-TW/docs/Web/CSS/CSS_colors/Applying_color) -- [CSS 顏色值](/zh-TW/docs/Web/CSS/CSS_colors/Color_values) -- [明智地使用顏色](/zh-TW/docs/Web/CSS/CSS_colors/Using_color_wisely) -- [使用相對顏色](/zh-TW/docs/Web/CSS/CSS_colors/Relative_colors) +- [使用 CSS 屬性應用顏色](/zh-TW/docs/Web/CSS/Guides/Colors/Applying_color) +- [CSS 顏色值](/zh-TW/docs/Web/CSS/Guides/Colors/Color_values) +- [明智地使用顏色](/zh-TW/docs/Web/CSS/Guides/Colors/Using_color_wisely) +- [使用相對顏色](/zh-TW/docs/Web/CSS/Guides/Colors/Using_relative_colors) - [了解顏色與亮度](/zh-TW/docs/Web/Accessibility/Guides/Colors_and_Luminance) - [WCAG 1.4.1：顏色對比](/zh-TW/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast) - [學習：使用 CSS 設定背景與邊框樣式](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders) diff --git a/files/zh-tw/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/zh-tw/web/css/guides/flexible_box_layout/basic_concepts/index.md similarity index 91% rename from files/zh-tw/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md rename to files/zh-tw/web/css/guides/flexible_box_layout/basic_concepts/index.md index c49769abb96cb9..841ff7fb855b10 100644 --- a/files/zh-tw/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md +++ b/files/zh-tw/web/css/guides/flexible_box_layout/basic_concepts/index.md @@ -1,14 +1,14 @@ --- title: Flexbox 的基本概念 short-title: 基本概念 -slug: Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox +slug: Web/CSS/Guides/Flexible_box_layout/Basic_concepts l10n: sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2 --- -[彈性盒子版面配置](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout)模組（通常稱為 flexbox）是一種一維的版面配置模型，用於在項目之間分配空間，並包含多種對齊功能。本文概述了 flexbox 的主要特性，我們將在後續的指南中更詳細地探討這些特性。 +[彈性盒子版面配置](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout)模組（通常稱為 flexbox）是一種一維的版面配置模型，用於在項目之間分配空間，並包含多種對齊功能。本文概述了 flexbox 的主要特性，我們將在後續的指南中更詳細地探討這些特性。 -當我們說 flexbox 是一維的，我們描述的是 flexbox 一次只處理一個維度的版面配置——要麼是列，要麼是欄。這與 [CSS 網格版面配置](/zh-TW/docs/Web/CSS/CSS_grid_layout)的二維模型形成對比，後者可以同時控制欄和列。 +當我們說 flexbox 是一維的，我們描述的是 flexbox 一次只處理一個維度的版面配置——要麼是列，要麼是欄。這與 [CSS 網格版面配置](/zh-TW/docs/Web/CSS/Guides/Grid_layout)的二維模型形成對比，後者可以同時控制欄和列。 ## flexbox 的兩個軸線 @@ -43,9 +43,9 @@ l10n: ## 起始線與終點線 -另一個需要理解的重點是，flexbox 對文件的書寫模式沒有任何假設。Flexbox 不會只假設所有文字行都從文件的左上角開始，向右側延伸，新行則出現在下方。相反地，它支援所有書寫模式，就像其他的[邏輯屬性與值](/zh-TW/docs/Web/CSS/CSS_logical_properties_and_values)一樣。 +另一個需要理解的重點是，flexbox 對文件的書寫模式沒有任何假設。Flexbox 不會只假設所有文字行都從文件的左上角開始，向右側延伸，新行則出現在下方。相反地，它支援所有書寫模式，就像其他的[邏輯屬性與值](/zh-TW/docs/Web/CSS/Guides/Logical_properties_and_values)一樣。 -你可以在後續的文章中[閱讀更多關於 flexbox 與書寫模式之間的關係](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods#書寫模式)；然而，以下的描述應該有助於解釋為什麼我們在描述 flex 項目流動方向時，不使用左、右、上、下這些詞。 +你可以在後續的文章中[閱讀更多關於 flexbox 與書寫模式之間的關係](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Relationship_with_other_layout_methods#書寫模式)；然而，以下的描述應該有助於解釋為什麼我們在描述 flex 項目流動方向時，不使用左、右、上、下這些詞。 如果 `flex-direction` 是 `row`，且我正在使用英文，那麼主軸的起始邊將在左側，終點邊在右側。 @@ -165,7 +165,7 @@ l10n: {{EmbedLiveSample("flex-wrap")}} -在[精通 flex 項目的換行](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)指南中了解更多關於 flex 項目換行的資訊。 +在[精通 flex 項目的換行](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Wrapping_items)指南中了解更多關於 flex 項目換行的資訊。 ## flex-flow 簡寫屬性 @@ -207,7 +207,7 @@ l10n: - {{cssxref("flex-shrink")}} - {{cssxref("flex-basis")}} -我們將在下面簡要介紹這些屬性，但如果你想要更全面的資訊，請參閱[控制主軸上 flex 項目的比例](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)指南。 +我們將在下面簡要介紹這些屬性，但如果你想要更全面的資訊，請參閱[控制主軸上 flex 項目的比例](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Controlling_flex_item_ratios)指南。 在我們能夠理解這些屬性之前，我們需要考慮**可用空間**的概念。當我們改變這些 flex 屬性的值時，我們正在改變可用空間在我們的項目之間分配的方式。這個可用空間的概念在我們討論對齊項目時也很重要。 @@ -233,7 +233,7 @@ l10n: `flex-grow` 屬性處理在主軸上增加空間，而 `flex-shrink` 屬性則控制如何減少空間。如果我們在容器中沒有足夠的空間來排版我們的項目，並且 `flex-shrink` 設定為正整數，那麼項目可以變得比 `flex-basis` 更小。與 `flex-grow` 一樣，可以分配不同的值以使一個項目比其他項目收縮得更快——`flex-shrink` 值設定較高的項目將比其同層級值較低的項目收縮得更快。 -一個項目可以縮小到其 {{cssxref("min-content")}} 尺寸。在計算將發生的實際收縮量時，會考慮到這個最小尺寸，這意味著 `flex-shrink` 的行為可能看起來不如 `flex-grow` 一致。因此，我們將在[控制主軸上項目比例](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)一文中更詳細地探討這個演算法的運作方式。 +一個項目可以縮小到其 {{cssxref("min-content")}} 尺寸。在計算將發生的實際收縮量時，會考慮到這個最小尺寸，這意味著 `flex-shrink` 的行為可能看起來不如 `flex-grow` 一致。因此，我們將在[控制主軸上項目比例](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Controlling_flex_item_ratios)一文中更詳細地探討這個演算法的運作方式。 > [!NOTE] > `flex-grow` 和 `flex-shrink` 的這些值是比例。通常，如果我們將所有項目都設定為 `flex: 1 1 200px`，然後希望一個項目以兩倍的速度增長，我們會將該項目設定為 `flex: 2 1 200px`。但是，如果你願意，也可以使用 `flex: 10 1 200px` 和 `flex: 20 1 200px`。 @@ -425,7 +425,7 @@ flexbox 的一個關鍵特性是能夠在主軸和交錯軸上對齊和兩端對 {{EmbedLiveSample("justify-content")}} -[在 flex 容器中對齊項目](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)一文更深入地探討了這些屬性，以便更好地理解它們的運作方式。然而，這些基本範例在大多數使用情境中都很有用。 +[在 flex 容器中對齊項目](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Aligning_items)一文更深入地探討了這些屬性，以便更好地理解它們的運作方式。然而，這些基本範例在大多數使用情境中都很有用。 ### justify-items @@ -435,8 +435,8 @@ flexbox 的一個關鍵特性是能夠在主軸和交錯軸上對齊和兩端對 [`place-items`](/zh-TW/docs/Web/CSS/Reference/Properties/place-items) 屬性是 `align-items` 和 `justify-items` 的簡寫屬性。如果設定在 flex 容器上，它會設定對齊方式，但不會設定兩端對齊，因為 `justify-items` 在 flexbox 中會被忽略。 -還有另一個簡寫屬性，[`place-content`](/zh-TW/docs/Web/CSS/Reference/Properties/place-content)，它定義了 {{cssxref("align-content")}} 和 `justify-content` 屬性。`align-content` 屬性只影響會換行的 flex 容器，其詳細說明請參閱 [flex 容器中的項目對齊](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)。 +還有另一個簡寫屬性，[`place-content`](/zh-TW/docs/Web/CSS/Reference/Properties/place-content)，它定義了 {{cssxref("align-content")}} 和 `justify-content` 屬性。`align-content` 屬性只影響會換行的 flex 容器，其詳細說明請參閱 [flex 容器中的項目對齊](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Aligning_items)。 ## 後續步驟 -閱讀本文後，你應該對 flexbox 的基本特性有了了解。在下一篇文章中，我們將探討[此規範如何與 CSS 的其他部分相關](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods)。 +閱讀本文後，你應該對 flexbox 的基本特性有了了解。在下一篇文章中，我們將探討[此規範如何與 CSS 的其他部分相關](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Relationship_with_other_layout_methods)。 diff --git a/files/zh-tw/web/css/css_flexible_box_layout/index.md b/files/zh-tw/web/css/guides/flexible_box_layout/index.md similarity index 72% rename from files/zh-tw/web/css/css_flexible_box_layout/index.md rename to files/zh-tw/web/css/guides/flexible_box_layout/index.md index 97a3293e0c31f4..a30cca20ee767f 100644 --- a/files/zh-tw/web/css/css_flexible_box_layout/index.md +++ b/files/zh-tw/web/css/guides/flexible_box_layout/index.md @@ -1,6 +1,6 @@ --- title: CSS 彈性盒佈局 -slug: Web/CSS/CSS_flexible_box_layout +slug: Web/CSS/Guides/Flexible_box_layout l10n: sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2 --- @@ -67,33 +67,33 @@ body { ## 指南 -- [彈性盒的基本概念](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [彈性盒的基本概念](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) - : 彈性盒功能概覽。 -- [彈性盒與其他佈局方法的關係](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods) +- [彈性盒與其他佈局方法的關係](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Relationship_with_other_layout_methods) - : 彈性盒如何與其他佈局方法及其他 CSS 規範相關聯。 -- [在彈性容器中對齊項目](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) +- [在彈性容器中對齊項目](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Aligning_items) - : 盒對齊屬性如何與 Flexbox 一同運作。 -- [排序彈性項目](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) +- [排序彈性項目](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Ordering_items) - : 解釋改變項目順序和方向的不同方法，並涵蓋這樣做可能產生的問題。 -- [控制彈性項目沿主軸的比例](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) +- [控制彈性項目沿主軸的比例](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Controlling_flex_item_ratios) - : 解釋 flex-grow、flex-shrink 和 flex-basis 屬性。 -- [精通彈性項目的換行](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) +- [精通彈性項目的換行](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Wrapping_items) - : 如何建立具有多行的彈性容器，並控制這些行中項目的顯示方式。 -- [彈性盒的典型用例](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) +- [彈性盒的典型用例](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout/Use_cases) - : 彈性盒典型的常見設計模式。 - [CSS 佈局：彈性盒](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Flexbox) - : 學習如何使用彈性盒佈局來建立 Web 佈局。 -- [彈性盒中的盒對齊](/zh-TW/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) - - : 詳細介紹 [CSS 盒對齊](/zh-TW/docs/Web/CSS/CSS_box_alignment)中專屬於彈性盒的功能。 +- [彈性盒中的盒對齊](/zh-TW/docs/Web/CSS/Guides/Box_alignment/In_flexbox) + - : 詳細介紹 [CSS 盒對齊](/zh-TW/docs/Web/CSS/Guides/Box_alignment)中專屬於彈性盒的功能。 ## 相關概念 -[CSS display 模組](/zh-TW/docs/Web/CSS/CSS_display) +[CSS display 模組](/zh-TW/docs/Web/CSS/Guides/Display) - {{cssxref("display")}} - {{cssxref("order")}} -[CSS 盒對齊](/zh-TW/docs/Web/CSS/CSS_box_alignment)模組 +[CSS 盒對齊](/zh-TW/docs/Web/CSS/Guides/Box_alignment)模組 - {{cssxref("align-content")}} - {{cssxref("align-items")}} @@ -105,7 +105,7 @@ body { - {{cssxref("place-items")}} - {{cssxref("row-gap")}} -[CSS 盒尺寸](/zh-TW/docs/Web/CSS/CSS_box_sizing)模組 +[CSS 盒尺寸](/zh-TW/docs/Web/CSS/Guides/Box_sizing)模組 - {{cssxref("aspect-ratio")}} - {{cssxref("max-content")}} 值 @@ -119,6 +119,6 @@ body { ## 參見 -- [CSS 網格佈局](/zh-TW/docs/Web/CSS/CSS_grid_layout)模組 -- [CSS 書寫模式](/zh-TW/docs/Web/CSS/CSS_writing_modes)模組 -- [在 CSS display 中使用多關鍵字語法](/zh-TW/docs/Web/CSS/CSS_display/multi-keyword_syntax_of_display) +- [CSS 網格佈局](/zh-TW/docs/Web/CSS/Guides/Grid_layout)模組 +- [CSS 書寫模式](/zh-TW/docs/Web/CSS/Guides/Writing_modes)模組 +- [在 CSS display 中使用多關鍵字語法](/zh-TW/docs/Web/CSS/Guides/Display/Multi-keyword_syntax) diff --git a/files/zh-tw/web/css/css_fonts/index.md b/files/zh-tw/web/css/guides/fonts/index.md similarity index 95% rename from files/zh-tw/web/css/css_fonts/index.md rename to files/zh-tw/web/css/guides/fonts/index.md index 339d62369acf68..a62e0ca7c6eeb1 100644 --- a/files/zh-tw/web/css/css_fonts/index.md +++ b/files/zh-tw/web/css/guides/fonts/index.md @@ -1,6 +1,6 @@ --- title: CSS 字型 -slug: Web/CSS/CSS_fonts +slug: Web/CSS/Guides/Fonts --- **CSS 字型**模組定義了與字型相關的屬性以及字體資源的載入方式。它允許你定義字型的樣式，例如其字族、大小和粗細，以及當多個字形可用於單一字元時要使用的字形變體。 @@ -137,10 +137,10 @@ CSS 字型模組還支持可變字型。與常規字型不同的是，每種樣 - [Web 字型](/zh-TW/docs/Learn_web_development/Core/Text_styling/Web_fonts) - : 在這篇給初學者的文章中，我們詳細介紹如何在網頁上使用自訂字型以實現更多樣化的自訂文字樣式。 -- [OpenType 字型特性指南](/zh-TW/docs/Web/CSS/CSS_fonts/OpenType_fonts_guide) +- [OpenType 字型特性指南](/zh-TW/docs/Web/CSS/Guides/Fonts/OpenType_fonts) - : 字型功能或變體是指 OpenType 字型中包含的不同字形或字元樣式，其中包括連字（組合「fi」或「ffl」等字元的特殊字形）、字距調整（調整特定字母形式對之間的間距）、分數、數字樣式以及許多其他內容。 這些都稱為 OpenType 功能，並且可以透過特定屬性和低階控制屬性 {{cssxref("font-feature-settings")}} 在 Web 上使用。本文提供了有關在 CSS 中使用 OpenType 字型功能所需的所有資訊。 -- [可變字型指南](/zh-TW/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) +- [可變字型指南](/zh-TW/docs/Web/CSS/Guides/Fonts/Variable_fonts) - : 本文將協助你開始使用可變字型。 - [提升字型效能](/zh-TW/docs/Learn_web_development/Extensions/Performance/CSS#improving_font_performance) @@ -158,7 +158,7 @@ CSS 字型模組還支持可變字型。與常規字型不同的是，每種樣 ## 參見 -- [CSS 字型載入](/zh-TW/docs/Web/CSS/CSS_font_loading)模組 +- [CSS 字型載入](/zh-TW/docs/Web/CSS/Guides/Font_loading)模組 - [CSS 字型載入 API](/zh-TW/docs/Web/API/CSS_Font_Loading_API) -- [CSS 文本](/zh-TW/docs/Web/CSS/CSS_text)模組 -- [CSS 書寫模式](/zh-TW/docs/Web/CSS/CSS_writing_modes)模組 +- [CSS 文本](/zh-TW/docs/Web/CSS/Guides/Text)模組 +- [CSS 書寫模式](/zh-TW/docs/Web/CSS/Guides/Writing_modes)模組 diff --git a/files/zh-tw/web/css/css_fonts/woff/index.md b/files/zh-tw/web/css/guides/fonts/woff/index.md similarity index 98% rename from files/zh-tw/web/css/css_fonts/woff/index.md rename to files/zh-tw/web/css/guides/fonts/woff/index.md index 0bfe21e044c8a9..ba9d49e739bf63 100644 --- a/files/zh-tw/web/css/css_fonts/woff/index.md +++ b/files/zh-tw/web/css/guides/fonts/woff/index.md @@ -1,6 +1,6 @@ --- title: Web 開放字型格式（WOFF） -slug: Web/CSS/CSS_fonts/WOFF +slug: Web/CSS/Guides/Fonts/WOFF l10n: sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2 --- diff --git a/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/zh-tw/web/css/guides/grid_layout/basic_concepts/index.md similarity index 96% rename from files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md rename to files/zh-tw/web/css/guides/grid_layout/basic_concepts/index.md index 8cbc794a0d1640..7d677237be8fe8 100644 --- a/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/files/zh-tw/web/css/guides/grid_layout/basic_concepts/index.md @@ -1,9 +1,9 @@ --- title: 格線佈局的基本概念 -slug: Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout +slug: Web/CSS/Guides/Grid_layout/Basic_concepts --- -[CSS 格線佈局](/zh-TW/docs/Web/CSS/CSS_grid_layout)介紹了二維的 CSS 格線系統。格線可以用來佈置頁面的主要區域、或小型用戶介面。本文介紹 CSS 格線 Level 1 規範的其中一部份。這份概觀顯示的某些功能，將在教學的其他部份詳細解釋。 +[CSS 格線佈局](/zh-TW/docs/Web/CSS/Guides/Grid_layout)介紹了二維的 CSS 格線系統。格線可以用來佈置頁面的主要區域、或小型用戶介面。本文介紹 CSS 格線 Level 1 規範的其中一部份。這份概觀顯示的某些功能，將在教學的其他部份詳細解釋。 ## 什麽是格線？ @@ -29,7 +29,7 @@ slug: Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout 數個單位也能被放進 grid cell、或是區域的一部分相互重疊。我們可以透過 {{cssxref("z-index")}} 控制該分層。 -格線是個強大的規範、它在與諸如[彈性盒子](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout)之類的 CSS 結合時，也有助於用 CSS 建立前所尚未有的排版。一切都建立要從建立**格線容器**（grid container）開始。 +格線是個強大的規範、它在與諸如[彈性盒子](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout)之類的 CSS 結合時，也有助於用 CSS 建立前所尚未有的排版。一切都建立要從建立**格線容器**（grid container）開始。 ## 格線容器 @@ -683,4 +683,4 @@ We can control the order in which items stack up by using the `z-index` property ## 下一步 -In this article we have had a very quick look through the Grid Layout Specification. Have a play with the code examples, and then move onto [the next part of this guide where we will really start to dig into the detail of CSS Grid Layout](/zh-TW/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods). +In this article we have had a very quick look through the Grid Layout Specification. Have a play with the code examples, and then move onto [the next part of this guide where we will really start to dig into the detail of CSS Grid Layout](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Relationship_with_other_layout_methods). diff --git a/files/zh-tw/web/css/css_grid_layout/index.md b/files/zh-tw/web/css/guides/grid_layout/index.md similarity index 71% rename from files/zh-tw/web/css/css_grid_layout/index.md rename to files/zh-tw/web/css/guides/grid_layout/index.md index e53f161756c1ff..384e48b87fbc99 100644 --- a/files/zh-tw/web/css/css_grid_layout/index.md +++ b/files/zh-tw/web/css/guides/grid_layout/index.md @@ -1,6 +1,6 @@ --- title: CSS格線布局 -slug: Web/CSS/CSS_grid_layout +slug: Web/CSS/Guides/Grid_layout --- **CSS 格線佈局**長於把頁面的主要區域分離、或是在 HTML 原生語法構建的區域間，定義大小、位置、層次等方面的關聯。 @@ -126,18 +126,18 @@ slug: Web/CSS/CSS_grid_layout ## 指引 -- [格線布局的基本概念](/zh-TW/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) -- [格線布局與其它布局的關係](/zh-TW/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods) -- [使用指定的格線命名排版](/zh-TW/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines) -- [格線模板區域](/zh-TW/docs/Web/CSS/CSS_grid_layout/Grid_template_areas) -- [Layout using named grid lines](/zh-TW/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines) -- [使用指定的網格線排版](/zh-TW/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines) -- [在 CSS 自動放置格線布局](/zh-TW/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout) -- [用 Box 對齊 CSS 格線布局](/zh-TW/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) -- [CSS 格線、邏輯值和寫作模式](/zh-TW/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes) -- [CSS 格線布局與無障礙](/zh-TW/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility) -- [CSS 格線與漸進增強](/zh-TW/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) -- [用 CSS 格線實做常見排版](/zh-TW/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids) +- [格線布局的基本概念](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Basic_concepts) +- [格線布局與其它布局的關係](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Relationship_with_other_layout_methods) +- [使用指定的格線命名排版](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Named_grid_lines) +- [格線模板區域](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Grid_template_areas) +- [Layout using named grid lines](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Named_grid_lines) +- [使用指定的網格線排版](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Named_grid_lines) +- [在 CSS 自動放置格線布局](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Auto-placement) +- [用 Box 對齊 CSS 格線布局](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Box_alignment) +- [CSS 格線、邏輯值和寫作模式](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Logical_values_and_writing_modes) +- [CSS 格線布局與無障礙](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Accessibility) +- [CSS 格線與漸進增強](/zh-TW/docs/Web/CSS/Guides/Grid_layout) +- [用 CSS 格線實做常見排版](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Common_grid_layouts) ## 外部資源 diff --git a/files/zh-tw/web/css/css_images/replaced_element_properties/index.md b/files/zh-tw/web/css/guides/images/replaced_element_properties/index.md similarity index 92% rename from files/zh-tw/web/css/css_images/replaced_element_properties/index.md rename to files/zh-tw/web/css/guides/images/replaced_element_properties/index.md index 754f7cf25cd8fa..f0593ce500338f 100644 --- a/files/zh-tw/web/css/css_images/replaced_element_properties/index.md +++ b/files/zh-tw/web/css/guides/images/replaced_element_properties/index.md @@ -1,6 +1,6 @@ --- title: 為替換元素設定樣式 -slug: Web/CSS/CSS_images/Replaced_element_properties +slug: Web/CSS/Guides/Images/Replaced_element_properties l10n: sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2 --- @@ -13,7 +13,7 @@ l10n: 在某些情況下，CSS 會特別處理替換元素，例如在計算外距和一些 `auto` 值時。只有替換元素才能擁有{{glossary("intrinsic size", "固有尺寸")}}。一些（但非全部）替換元素具有固有尺寸或已定義的基線，某些 CSS 屬性（例如 {{cssxref("vertical-align")}}）會使用這些特性。 -雖然文件樣式可以設定替換元素的大小和位置，但文件樣式不會影響替換元素的內容，但有一些例外：[CSS 圖片模組](/zh-TW/docs/Web/CSS/CSS_images)包含了一些屬性，支援控制元素內容在其盒子內的定位。 +雖然文件樣式可以設定替換元素的大小和位置，但文件樣式不會影響替換元素的內容，但有一些例外：[CSS 圖片模組](/zh-TW/docs/Web/CSS/Guides/Images)包含了一些屬性，支援控制元素內容在其盒子內的定位。 ## 控制內容框內的物件位置 @@ -142,7 +142,7 @@ img { ## 參見 -- [理解長寬比](/zh-TW/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio) -- [CSS 圖片](/zh-TW/docs/Web/CSS/CSS_images)模組 -- [CSS display](/zh-TW/docs/Web/CSS/CSS_display) 模組 -- [CSS 背景與邊框](/zh-TW/docs/Web/CSS/CSS_backgrounds_and_borders) 模組 +- [理解長寬比](/zh-TW/docs/Web/CSS/Guides/Box_sizing/Aspect_ratios) +- [CSS 圖片](/zh-TW/docs/Web/CSS/Guides/Images)模組 +- [CSS display](/zh-TW/docs/Web/CSS/Guides/Display) 模組 +- [CSS 背景與邊框](/zh-TW/docs/Web/CSS/Guides/Backgrounds_and_borders) 模組 diff --git a/files/zh-tw/web/css/css_inline_layout/index.md b/files/zh-tw/web/css/guides/inline_layout/index.md similarity index 81% rename from files/zh-tw/web/css/css_inline_layout/index.md rename to files/zh-tw/web/css/guides/inline_layout/index.md index 92f48a58265d81..5c32843d2f395a 100644 --- a/files/zh-tw/web/css/css_inline_layout/index.md +++ b/files/zh-tw/web/css/guides/inline_layout/index.md @@ -1,6 +1,6 @@ --- title: CSS 行內布局 -slug: Web/CSS/CSS_inline_layout +slug: Web/CSS/Guides/Inline_layout l10n: sourceCommit: 113279ab09692d869866519106e25cba8a20abb8 --- @@ -33,7 +33,7 @@ l10n: ## 指南 -- [行內格式化上下文](/zh-TW/docs/Web/CSS/CSS_inline_layout/Inline_formatting_context) +- [行內格式化上下文](/zh-TW/docs/Web/CSS/Guides/Inline_layout/Inline_formatting_context) - : 說明格式化上下文。 ## 相關概念 @@ -51,6 +51,6 @@ l10n: ## 參見 -- [CSS 文本](/zh-TW/docs/Web/CSS/CSS_text)模組 -- [CSS 字體](/zh-TW/docs/Web/CSS/CSS_fonts)模組 -- [CSS 書寫模式](/zh-TW/docs/Web/CSS/CSS_writing_modes)模組 +- [CSS 文本](/zh-TW/docs/Web/CSS/Guides/Text)模組 +- [CSS 字體](/zh-TW/docs/Web/CSS/Guides/Fonts)模組 +- [CSS 書寫模式](/zh-TW/docs/Web/CSS/Guides/Writing_modes)模組 diff --git a/files/zh-tw/web/css/css_lists/consistent_list_indentation/index.md b/files/zh-tw/web/css/guides/lists/indenting/index.md similarity index 99% rename from files/zh-tw/web/css/css_lists/consistent_list_indentation/index.md rename to files/zh-tw/web/css/guides/lists/indenting/index.md index dd596541839590..77c049723c823c 100644 --- a/files/zh-tw/web/css/css_lists/consistent_list_indentation/index.md +++ b/files/zh-tw/web/css/guides/lists/indenting/index.md @@ -1,7 +1,7 @@ --- title: 一致的清單縮排 short-title: 縮排清單 -slug: Web/CSS/CSS_lists/Consistent_list_indentation +slug: Web/CSS/Guides/Lists/Indenting l10n: sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2 --- diff --git a/files/zh-tw/web/css/css_media_queries/testing_media_queries/index.md b/files/zh-tw/web/css/guides/media_queries/testing/index.md similarity index 94% rename from files/zh-tw/web/css/css_media_queries/testing_media_queries/index.md rename to files/zh-tw/web/css/guides/media_queries/testing/index.md index b7e083cbe81d84..7f5e5b4d38609f 100644 --- a/files/zh-tw/web/css/css_media_queries/testing_media_queries/index.md +++ b/files/zh-tw/web/css/guides/media_queries/testing/index.md @@ -1,6 +1,6 @@ --- title: 測試媒體查詢 -slug: Web/CSS/CSS_media_queries/Testing_media_queries +slug: Web/CSS/Guides/Media_queries/Testing --- {{SeeCompatTable}} @@ -65,9 +65,9 @@ mql.removeListener(handleOrientationChange); {{Compat}} -## 延伸閱讀 +## 參見 -- [Media queries](/zh-TW/docs/Web/CSS/CSS_media_queries/Using_media_queries) +- [媒體查詢](/zh-TW/docs/Web/CSS/Guides/Media_queries/Using) - {{domxref("window.matchMedia()") }} - {{domxref("MediaQueryList") }} - {{domxref("MediaQueryListListener") }} diff --git a/files/zh-tw/web/css/css_positioned_layout/stacking_context/stacking_context_example_1/index.md b/files/zh-tw/web/css/guides/positioned_layout/stacking_context/example_1/index.md similarity index 86% rename from files/zh-tw/web/css/css_positioned_layout/stacking_context/stacking_context_example_1/index.md rename to files/zh-tw/web/css/guides/positioned_layout/stacking_context/example_1/index.md index e616856617a637..580b01682dd010 100644 --- a/files/zh-tw/web/css/css_positioned_layout/stacking_context/stacking_context_example_1/index.md +++ b/files/zh-tw/web/css/guides/positioned_layout/stacking_context/example_1/index.md @@ -1,6 +1,6 @@ --- title: Stacking context example 1 -slug: Web/CSS/CSS_positioned_layout/Stacking_context/Stacking_context_example_1 +slug: Web/CSS/Guides/Positioned_layout/Stacking_context/Example_1 --- ### 堆疊環境範例 1 @@ -106,9 +106,9 @@ slug: Web/CSS/CSS_positioned_layout/Stacking_context/Stacking_context_example_1 ### 參見 -- [無堆疊的 z-index](/zh-TW/docs/Web/CSS/CSS_positioned_layout/Stacking_without_z-index)：默認規則疊加 +- [無堆疊的 z-index](/zh-TW/docs/Web/CSS/Guides/Positioned_layout/Stacking_without_z-index)：默認規則疊加 - [堆疊和浮動](/zh-TW/docs/CSS/Understanding_z-index/Stacking_floating_elements)：如何浮動元素的處理方式 - [添加 z-index](/zh-TW/docs/CSS/Understanding_z-index/Using_z-index)：使用的 z-index 來改變默認的堆疊 - [堆疊背景](/zh-TW/docs/CSS/Understanding_z-index/Stacking_context)：在堆疊環境票據 -- [堆疊環境例子 2](/zh-TW/docs/Web/CSS/CSS_positioned_layout/Stacking_context/Stacking_context_example_2)：在所有層面上 2 級 HTML 層次，Z 指數 -- [堆疊上下文例 3](/zh-TW/docs/Web/CSS/CSS_positioned_layout/Stacking_context/Stacking_context_example_3)：3 級的 HTML 等級，在第二級上的 z 索引 +- [堆疊環境例子 2](/zh-TW/docs/Web/CSS/Guides/Positioned_layout/Stacking_context/Example_2)：在所有層面上 2 級 HTML 層次，Z 指數 +- [堆疊上下文例 3](/zh-TW/docs/Web/CSS/Guides/Positioned_layout/Stacking_context/Example_3)：3 級的 HTML 等級，在第二級上的 z 索引 diff --git a/files/zh-tw/web/css/css_selectors/index.md b/files/zh-tw/web/css/guides/selectors/index.md similarity index 98% rename from files/zh-tw/web/css/css_selectors/index.md rename to files/zh-tw/web/css/guides/selectors/index.md index d85ac724beb35f..037685f154c0ea 100644 --- a/files/zh-tw/web/css/css_selectors/index.md +++ b/files/zh-tw/web/css/guides/selectors/index.md @@ -1,6 +1,6 @@ --- title: CSS Selectors -slug: Web/CSS/CSS_selectors +slug: Web/CSS/Guides/Selectors --- **選擇器**可以定義某組 CSS 樣式要套用到哪些元素上。 @@ -74,4 +74,4 @@ See the [pseudo-class](/zh-TW/docs/Web/CSS/Reference/Selectors/Pseudo-classes#sp ## 參見 -- [CSS Specificity](/zh-TW/docs/Web/CSS/Specificity) +- [CSS Specificity](/zh-TW/docs/Web/CSS/Guides/Cascade/Specificity) diff --git a/files/zh-tw/web/css/css_syntax/syntax/index.md b/files/zh-tw/web/css/guides/syntax/introduction/index.md similarity index 79% rename from files/zh-tw/web/css/css_syntax/syntax/index.md rename to files/zh-tw/web/css/guides/syntax/introduction/index.md index b2335fb22e8b01..fc39411df5bddd 100644 --- a/files/zh-tw/web/css/css_syntax/syntax/index.md +++ b/files/zh-tw/web/css/guides/syntax/introduction/index.md @@ -1,6 +1,6 @@ --- title: 語法 -slug: Web/CSS/CSS_syntax/Syntax +slug: Web/CSS/Guides/Syntax/Introduction --- 串接式樣式表 ([CSS](/zh-TW/docs/Web/CSS)) 語言的基礎目標是是讓瀏覽器引擎用特定的功能將元素寫在頁面上，像是顏色、位置與裝飾。CSS 語法反映出了目的，而它的基本組成為： @@ -57,7 +57,7 @@ A **statement** is a building block that begins with any non-space characters an There are two kinds of statements: - **Rulesets** (or _rules_) that, as seen, associate a collection of CSS declarations to a condition described by a selector. -- **At-rules** that start with an at sign, '`@`' (`U+0040 COMMERCIAL AT`), followed by an identifier and then continuing up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of [at-rules](/zh-TW/docs/Web/CSS/At-rule), defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like {{ cssxref("@charset") }} or {{ cssxref("@import") }}), conditional information (like {{ cssxref("@media") }} or {{ cssxref("@document") }}), or descriptive information (like {{ cssxref("@font-face") }}). +- **At-rules** that start with an at sign, '`@`' (`U+0040 COMMERCIAL AT`), followed by an identifier and then continuing up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of [at-rules](/zh-TW/docs/Web/CSS/Guides/Syntax/At-rules), defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like {{ cssxref("@charset") }} or {{ cssxref("@import") }}), conditional information (like {{ cssxref("@media") }} or {{ cssxref("@document") }}), or descriptive information (like {{ cssxref("@font-face") }}). Any statement which isn't a ruleset or an at-rule is invalid and ignored. @@ -66,23 +66,23 @@ There is another group of statements - the **nested statements**. These are stat ## See also - CSS 重要概念： - - [CSS 語法](/zh-TW/docs/Web/CSS/CSS_syntax/Syntax) - - [@ 規則](/zh-TW/docs/Web/CSS/At-rule) - - [註釋](/zh-TW/docs/Web/CSS/Comments) - - [優先級](/zh-TW/docs/Web/CSS/Specificity) - - [繼承](/zh-TW/docs/Web/CSS/CSS_cascade/Inheritance) - - [盒模型](/zh-TW/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) + - [CSS 語法](/zh-TW/docs/Web/CSS/Guides/Syntax/Introduction) + - [@ 規則](/zh-TW/docs/Web/CSS/Guides/Syntax/At-rules) + - [註釋](/zh-TW/docs/Web/CSS/Guides/Syntax/Comments) + - [優先級](/zh-TW/docs/Web/CSS/Guides/Cascade/Specificity) + - [繼承](/zh-TW/docs/Web/CSS/Guides/Cascade/Inheritance) + - [盒模型](/zh-TW/docs/Web/CSS/Guides/Box_model/Introduction) - [佈局模式](/zh-TW/docs/Web/CSS/Layout_mode) - - [視覺格式化模型](/zh-TW/docs/Web/CSS/Visual_formatting_model) - - [外邊距合併](/zh-TW/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) + - [視覺格式化模型](/zh-TW/docs/Web/CSS/Guides/Display/Visual_formatting_model) + - [外邊距合併](/zh-TW/docs/Web/CSS/Guides/Box_model/Margin_collapsing) - 值 - - [初始值](/zh-TW/docs/Web/CSS/CSS_cascade/initial_value) - - [計算值](/zh-TW/docs/Web/CSS/CSS_cascade/computed_value) - - [解析值](/zh-TW/docs/Web/CSS/resolved_value) - - [指定值](/zh-TW/docs/Web/CSS/CSS_cascade/specified_value) - - [應用值](/zh-TW/docs/Web/CSS/CSS_cascade/used_value) - - [實際值](/zh-TW/docs/Web/CSS/CSS_cascade/actual_value) + - [初始值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#初始值) + - [計算值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#計算值) + - [解析值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#解析值) + - [指定值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#指定值) + - [應用值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#應用值) + - [實際值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#實際值) - [特性值定義語法](/zh-TW/docs/Web/CSS/CSS_Values_and_Units/Value_definition_syntax) - - [簡寫屬性](/zh-TW/docs/Web/CSS/CSS_cascade/Shorthand_properties) + - [簡寫屬性](/zh-TW/docs/Web/CSS/Guides/Cascade/Shorthand_properties) - {{glossary("replaced elements", "可置換元素")}} diff --git a/files/zh-tw/web/css/css_text/whitespace/index.md b/files/zh-tw/web/css/guides/text/whitespace/index.md similarity index 99% rename from files/zh-tw/web/css/css_text/whitespace/index.md rename to files/zh-tw/web/css/guides/text/whitespace/index.md index 3515b63fe37c0a..00c1d15b35246d 100644 --- a/files/zh-tw/web/css/css_text/whitespace/index.md +++ b/files/zh-tw/web/css/guides/text/whitespace/index.md @@ -1,6 +1,6 @@ --- title: 處理空白 -slug: Web/CSS/CSS_text/Whitespace +slug: Web/CSS/Guides/Text/Whitespace --- #### 問題說明 diff --git a/files/zh-tw/web/css/css_transitions/using_css_transitions/index.md b/files/zh-tw/web/css/guides/transitions/using/index.md similarity index 99% rename from files/zh-tw/web/css/css_transitions/using_css_transitions/index.md rename to files/zh-tw/web/css/guides/transitions/using/index.md index 5dd4aaa5f21328..8892c4c0d3d16b 100644 --- a/files/zh-tw/web/css/css_transitions/using_css_transitions/index.md +++ b/files/zh-tw/web/css/guides/transitions/using/index.md @@ -1,6 +1,6 @@ --- title: CSS 轉場 -slug: Web/CSS/CSS_transitions/Using_CSS_transitions +slug: Web/CSS/Guides/Transitions/Using --- CSS transitions 是 CSS3 specification 草案的一部分，他可以用來調整 CSS animation 變動的速度。舉例來說，倘若你設計了一個 element 會由白轉紅，你可以透過 CSS transitions 來控制轉變的時間及變化曲線。 diff --git a/files/zh-tw/web/css/index.md b/files/zh-tw/web/css/index.md index 4d66deef7573ee..69b3aa8c497526 100644 --- a/files/zh-tw/web/css/index.md +++ b/files/zh-tw/web/css/index.md @@ -36,15 +36,15 @@ slug: Web/CSS - [CSS 參考](/zh-TW/docs/Web/CSS/Reference)：一個詳細的參考資料，為資深網頁開發人員設計，包含 CSS 各種屬性和觀念。 - CSS 關鍵概念： - - [語法](/zh-TW/docs/Web/CSS/CSS_syntax/Syntax) - - [權重](/zh-TW/docs/Web/CSS/Specificity)和[繼承](/zh-TW/docs/Web/CSS/CSS_cascade/Inheritance) - - [盒子模型](/zh-TW/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)和[邊框的崩潰](/zh-TW/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - - [堆疊](/zh-TW/docs/CSS/Understanding_z-index/Stacking_context)和[格式化區塊](/zh-TW/docs/Web/CSS/CSS_display/Block_formatting_context) - - [初始值](/zh-TW/docs/Web/CSS/CSS_cascade/initial_value) 、[計算值（computed）](/zh-TW/docs/Web/CSS/CSS_cascade/computed_value)、 [使用值（used）](/zh-TW/docs/Web/CSS/CSS_cascade/used_value)和[運作值](/zh-TW/docs/Web/CSS/CSS_cascade/actual_value) - - [CSS 簡寫屬性](/zh-TW/docs/Web/CSS/CSS_cascade/Shorthand_properties) - - [CSS 彈性盒子排版](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout) - - [CSS 格線排版](/zh-TW/docs/Web/CSS/CSS_grid_layout) - - [媒體查詢](/zh-TW/docs/Web/CSS/CSS_media_queries) + - [語法](/zh-TW/docs/Web/CSS/Guides/Syntax/Introduction) + - [權重](/zh-TW/docs/Web/CSS/Guides/Cascade/Specificity)和[繼承](/zh-TW/docs/Web/CSS/Guides/Cascade/Inheritance) + - [盒子模型](/zh-TW/docs/Web/CSS/Guides/Box_model/Introduction)和[邊框的崩潰](/zh-TW/docs/Web/CSS/Guides/Box_model/Margin_collapsing) + - [堆疊](/zh-TW/docs/CSS/Understanding_z-index/Stacking_context)和[格式化區塊](/zh-TW/docs/Web/CSS/Guides/Display/Block_formatting_context) + - [初始值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#初始值)、[計算值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#計算值)、[應用值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#應用值)和[實際值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#實際值) + - [CSS 簡寫屬性](/zh-TW/docs/Web/CSS/Guides/Cascade/Shorthand_properties) + - [CSS 彈性盒子排版](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout) + - [CSS 格線排版](/zh-TW/docs/Web/CSS/Guides/Grid_layout) + - [媒體查詢](/zh-TW/docs/Web/CSS/Guides/Media_queries) ## CSS 開發工具 diff --git a/files/zh-tw/web/css/reference/at-rules/@font-face/index.md b/files/zh-tw/web/css/reference/at-rules/@font-face/index.md index b75c008dff8d88..82da224b3f77c7 100644 --- a/files/zh-tw/web/css/reference/at-rules/@font-face/index.md +++ b/files/zh-tw/web/css/reference/at-rules/@font-face/index.md @@ -5,7 +5,7 @@ l10n: sourceCommit: 4d929bb0a021c7130d5a71a4bf505bcb8070378d --- -**`@font-face`** [CSS](/zh-TW/docs/Web/CSS) [@ 規則](/zh-TW/docs/Web/CSS/CSS_syntax/At-rule)用來指定一個自定義的字型，用於顯示文本；該字型可以從遠端伺服器加載，或者使用者本地安裝的字型。 +**`@font-face`** [CSS](/zh-TW/docs/Web/CSS) [@ 規則](/zh-TW/docs/Web/CSS/Guides/Syntax/At-rules)用來指定一個自定義的字型，用於顯示文本；該字型可以從遠端伺服器加載，或者使用者本地安裝的字型。 ## 語法 @@ -62,7 +62,7 @@ l10n: > [!NOTE] > 有關為舊版瀏覽器加載字型的回退策略，請參考 [`src` 描述符頁面](/zh-TW/docs/Web/CSS/Reference/At-rules/@font-face/src#指定舊版瀏覽器的後備方案)。 -`@font-face` 規則不僅可用於 CSS 的頂層，也可以用於任何 [CSS 條件群組 @ 規則](/zh-TW/docs/Web/CSS/CSS_conditional_rules#at_規則)中。 +`@font-face` 規則不僅可用於 CSS 的頂層，也可以用於任何 [CSS 條件群組 @ 規則](/zh-TW/docs/Web/CSS/Guides/Conditional_rules#at_規則)中。 ### 字型 MIME 類型 @@ -143,7 +143,7 @@ body { ## 參見 -- [關於 WOFF](/zh-TW/docs/Web/CSS/CSS_fonts/WOFF) +- [關於 WOFF](/zh-TW/docs/Web/CSS/Guides/Fonts/WOFF) - [FontSquirrel @font-face 生成器](https://www.fontsquirrel.com/tools/webfont-generator) - [使用 @font-face 的漂亮字型](https://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/) - [Font Library](https://fontlibrary.org/) diff --git a/files/zh-tw/web/css/reference/at-rules/@media/height/index.md b/files/zh-tw/web/css/reference/at-rules/@media/height/index.md index c02aeca13a1811..3eb929a44411e0 100644 --- a/files/zh-tw/web/css/reference/at-rules/@media/height/index.md +++ b/files/zh-tw/web/css/reference/at-rules/@media/height/index.md @@ -5,7 +5,7 @@ l10n: sourceCommit: 421deed53984505909884b3b290002b228d29e7b --- -**`height`** [CSS](/zh-TW/docs/Web/CSS) [媒體特性](/zh-TW/docs/Web/CSS/Reference/At-rules/@media#媒體特性)可用於根據{{glossary("viewport", "視區")}}的高度（或[分頁媒體](/zh-TW/docs/Web/CSS/CSS_paged_media)的頁框）套用樣式。 +**`height`** [CSS](/zh-TW/docs/Web/CSS) [媒體特性](/zh-TW/docs/Web/CSS/Reference/At-rules/@media#媒體特性)可用於根據{{glossary("viewport", "視區")}}的高度（或[分頁媒體](/zh-TW/docs/Web/CSS/Guides/Paged_media)的頁框）套用樣式。 ## 語法 @@ -58,5 +58,5 @@ l10n: ## 參見 -- [使用媒體查詢](/zh-TW/docs/Web/CSS/CSS_media_queries/Using_media_queries) +- [使用媒體查詢](/zh-TW/docs/Web/CSS/Guides/Media_queries/Using) - [@media](/zh-TW/docs/Web/CSS/Reference/At-rules/@media) diff --git a/files/zh-tw/web/css/reference/at-rules/@namespace/index.md b/files/zh-tw/web/css/reference/at-rules/@namespace/index.md index a618df3156f0ba..26ac45a20709ec 100644 --- a/files/zh-tw/web/css/reference/at-rules/@namespace/index.md +++ b/files/zh-tw/web/css/reference/at-rules/@namespace/index.md @@ -5,7 +5,7 @@ l10n: sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2 --- -**`@namespace`** 是一個用於定義要在 [CSS](/zh-TW/docs/Glossary/CSS) [樣式表](/zh-TW/docs/Web/API/StyleSheet)中使用的 XML [命名空間](/zh-TW/docs/Glossary/Namespace)的 [at 規則](/zh-TW/docs/Web/CSS/CSS_syntax/At-rule)。 +**`@namespace`** 是一個用於定義要在 [CSS](/zh-TW/docs/Glossary/CSS) [樣式表](/zh-TW/docs/Web/API/StyleSheet)中使用的 XML [命名空間](/zh-TW/docs/Glossary/Namespace)的 [at 規則](/zh-TW/docs/Web/CSS/Guides/Syntax/At-rules)。 {{InteractiveExample("CSS Demo: @namespace", "tabbed-shorter")}} diff --git a/files/zh-tw/web/css/reference/properties/--_star_/index.md b/files/zh-tw/web/css/reference/properties/--_star_/index.md index bcd4169e7a97ff..323694a950eb15 100644 --- a/files/zh-tw/web/css/reference/properties/--_star_/index.md +++ b/files/zh-tw/web/css/reference/properties/--_star_/index.md @@ -81,5 +81,5 @@ l10n: - {{cssxref("var", "var()")}} 函數 - {{cssxref("@property")}} @ 規則 -- [使用 CSS 自訂屬性（變數）](/zh-TW/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties)指南 -- [CSS 自訂屬性用於層疊變數](/zh-TW/docs/Web/CSS/CSS_cascading_variables)模組 +- [使用 CSS 自訂屬性（變數）](/zh-TW/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties)指南 +- [CSS 自訂屬性用於層疊變數](/zh-TW/docs/Web/CSS/Guides/Cascading_variables)模組 diff --git a/files/zh-tw/web/css/reference/properties/animation-fill-mode/index.md b/files/zh-tw/web/css/reference/properties/animation-fill-mode/index.md index ec8bacb8350dfd..62e57f95074816 100644 --- a/files/zh-tw/web/css/reference/properties/animation-fill-mode/index.md +++ b/files/zh-tw/web/css/reference/properties/animation-fill-mode/index.md @@ -166,10 +166,10 @@ animation-fill-mode: unset; - : 動畫將同時遵循 `forwards` 和 `backwards` 的規則，從而將動畫屬性在兩個方向上延伸。 > [!NOTE] -> 當你在一個 `animation-*` 屬性上指定多個以逗號分隔的值時，它們會按照 {{cssxref("animation-name")}} 出現的順序應用於動畫。關於動畫數量與 `animation-*` 屬性值數量不匹配的情況，請參見[設定多個動畫屬性值](/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations#設定多個動畫屬性值)。 +> 當你在一個 `animation-*` 屬性上指定多個以逗號分隔的值時，它們會按照 {{cssxref("animation-name")}} 出現的順序應用於動畫。關於動畫數量與 `animation-*` 屬性值數量不匹配的情況，請參見[設定多個動畫屬性值](/zh-TW/docs/Web/CSS/Guides/Animations/Using#設定多個動畫屬性值)。 > [!NOTE] -> 在建立 [CSS 滾動驅動動畫](/zh-TW/docs/Web/CSS/CSS_scroll-driven_animations)時，`animation-fill-mode` 的效果與常規的基於時間的動畫相同。 +> 在建立 [CSS 滾動驅動動畫](/zh-TW/docs/Web/CSS/Guides/Scroll-driven_animations)時，`animation-fill-mode` 的效果與常規的基於時間的動畫相同。 ## 形式定義 @@ -228,7 +228,7 @@ animation-fill-mode: unset; {{EmbedLiveSample('設定填充模式',700,300)}} -更多範例請參見 [CSS 動畫](/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations)。 +更多範例請參見 [CSS 動畫](/zh-TW/docs/Web/CSS/Guides/Animations/Using)。 ## 規範 @@ -240,6 +240,6 @@ animation-fill-mode: unset; ## 參見 -- [使用 CSS 動畫](/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations) +- [使用 CSS 動畫](/zh-TW/docs/Web/CSS/Guides/Animations/Using) - JavaScript {{domxref("AnimationEvent")}} API - 其他相關的動畫屬性：{{cssxref("animation")}}、{{cssxref("animation-composition")}}、{{cssxref("animation-delay")}}、{{cssxref("animation-direction")}}、{{cssxref("animation-duration")}}、{{cssxref("animation-iteration-count")}}、{{cssxref("animation-name")}}、{{cssxref("animation-play-state")}}、{{cssxref("animation-timeline")}}、{{cssxref("animation-timing-function")}} diff --git a/files/zh-tw/web/css/reference/properties/background-attachment/index.md b/files/zh-tw/web/css/reference/properties/background-attachment/index.md index c6e70992e56b80..3b6da29e1ed739 100644 --- a/files/zh-tw/web/css/reference/properties/background-attachment/index.md +++ b/files/zh-tw/web/css/reference/properties/background-attachment/index.md @@ -165,4 +165,4 @@ p { ## 參見 -- [使用多重背景](/zh-TW/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds) +- [使用多重背景](/zh-TW/docs/Web/CSS/Guides/Backgrounds_and_borders/Using_multiple_backgrounds) diff --git a/files/zh-tw/web/css/reference/properties/background-color/index.md b/files/zh-tw/web/css/reference/properties/background-color/index.md index 9ab7b8936dcf74..4760e9aaecaab2 100644 --- a/files/zh-tw/web/css/reference/properties/background-color/index.md +++ b/files/zh-tw/web/css/reference/properties/background-color/index.md @@ -211,6 +211,6 @@ td { ## 參見 -- [多重背景](/zh-TW/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds) +- [多重背景](/zh-TW/docs/Web/CSS/Guides/Backgrounds_and_borders/Using_multiple_backgrounds) - {{cssxref("<color>")}} 資料型別 - 其他與顏色相關的屬性：{{cssxref("color")}}、{{cssxref("border-color")}}、{{cssxref("outline-color")}}、{{cssxref("text-decoration-color")}}、{{cssxref("text-emphasis-color")}}、{{cssxref("text-shadow")}}、{{cssxref("caret-color")}} 和 {{cssxref("column-rule-color")}} diff --git a/files/zh-tw/web/css/reference/properties/border-bottom-color/index.md b/files/zh-tw/web/css/reference/properties/border-bottom-color/index.md index 2afc06ca51323f..f23d0e9f644ade 100644 --- a/files/zh-tw/web/css/reference/properties/border-bottom-color/index.md +++ b/files/zh-tw/web/css/reference/properties/border-bottom-color/index.md @@ -129,4 +129,4 @@ border-bottom-color: unset; - 與邊框相關的 CSS 簡寫屬性：{{Cssxref("border")}}、{{Cssxref("border-bottom")}} 與 {{Cssxref("border-color")}}。 - 其他邊框的顏色相關 CSS 屬性：{{Cssxref("border-right-color")}}、{{Cssxref("border-top-color")}} 與 {{Cssxref("border-left-color")}}。 - 適用於相同邊框的其他邊框相關 CSS 屬性：{{cssxref("border-bottom-style")}} 與 {{cssxref("border-bottom-width")}}。 -- 預設的 [`currentcolor`](/zh-TW/docs/Web/CSS/color_value#currentcolor_關鍵字) 顏色值。 +- 預設的 [`currentcolor`](/zh-TW/docs/Web/CSS/Reference/Values/color_value#currentcolor_關鍵字) 顏色值。 diff --git a/files/zh-tw/web/css/reference/properties/border-color/index.md b/files/zh-tw/web/css/reference/properties/border-color/index.md index 72070528ea477c..618e850cc22199 100644 --- a/files/zh-tw/web/css/reference/properties/border-color/index.md +++ b/files/zh-tw/web/css/reference/properties/border-color/index.md @@ -5,7 +5,7 @@ l10n: sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2 --- -**`border-color`** [CSS](/zh-TW/docs/Web/CSS) [簡寫](/zh-TW/docs/Web/CSS/CSS_cascade/Shorthand_properties)屬性可以設定元素邊框的顏色。 +**`border-color`** [CSS](/zh-TW/docs/Web/CSS) [簡寫](/zh-TW/docs/Web/CSS/Guides/Cascade/Shorthand_properties)屬性可以設定元素邊框的顏色。 {{InteractiveExample("CSS Demo: border-color")}} @@ -50,7 +50,7 @@ border-color: red yellow green transparent; 每個邊都可以使用 {{CSSxRef("border-top-color")}}、{{CSSxRef("border-right-color")}}、{{CSSxRef("border-bottom-color")}} 和 {{CSSxRef("border-left-color")}} 單獨設定；或使用感知書寫模式的 {{CSSxRef("border-block-start-color")}}、{{CSSxRef("border-block-end-color")}}、{{CSSxRef("border-inline-start-color")}} 和 {{CSSxRef("border-inline-end-color")}}。 -你可以在[使用 CSS 為 HTML 元素上色](/zh-TW/docs/Web/CSS/CSS_colors/Applying_color#邊框)中找到更多關於邊框顏色的資訊。 +你可以在[使用 CSS 為 HTML 元素上色](/zh-TW/docs/Web/CSS/Guides/Colors/Applying_color#邊框)中找到更多關於邊框顏色的資訊。 ## 組成屬性 @@ -200,4 +200,4 @@ ul { - 其他邊框相關的 CSS 屬性：{{CSSxRef("border-width")}}、{{CSSxRef("border-style")}} - {{CSSxRef("<color>")}} 資料型別 - 其他顏色相關的屬性：{{CSSxRef("color")}}、{{CSSxRef("background-color")}}、{{CSSxRef("outline-color")}}、{{CSSxRef("text-decoration-color")}}、{{CSSxRef("text-emphasis-color")}}、{{CSSxRef("text-shadow")}}、{{CSSxRef("caret-color")}} 和 {{CSSxRef("column-rule-color")}} -- [使用 CSS 為 HTML 元素上色](/zh-TW/docs/Web/CSS/CSS_colors/Applying_color) +- [使用 CSS 為 HTML 元素上色](/zh-TW/docs/Web/CSS/Guides/Colors/Applying_color) diff --git a/files/zh-tw/web/css/reference/properties/border-image/index.md b/files/zh-tw/web/css/reference/properties/border-image/index.md index a05e733e1a5064..88e2437c8bb8ef 100644 --- a/files/zh-tw/web/css/reference/properties/border-image/index.md +++ b/files/zh-tw/web/css/reference/properties/border-image/index.md @@ -94,7 +94,7 @@ border-image: unset; `border-image` 屬性可以用下面列出的一到五個值來指定。 > [!NOTE] -> 如果 {{cssxref("border-image-source")}} 的[計算值](/zh-TW/docs/Web/CSS/CSS_cascade/Value_processing#計算值)是 `none`，或者圖片無法顯示，則會改為顯示 {{cssxref("border-style")}}。 +> 如果 {{cssxref("border-image-source")}} 的[計算值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#計算值)是 `none`，或者圖片無法顯示，則會改為顯示 {{cssxref("border-style")}}。 ### 值 diff --git a/files/zh-tw/web/css/reference/properties/border-left-color/index.md b/files/zh-tw/web/css/reference/properties/border-left-color/index.md index b11ba3de246e59..92a888833902d0 100644 --- a/files/zh-tw/web/css/reference/properties/border-left-color/index.md +++ b/files/zh-tw/web/css/reference/properties/border-left-color/index.md @@ -129,4 +129,4 @@ border-left-color: unset; - 與邊框相關的 CSS 簡寫屬性：{{Cssxref("border")}}、{{Cssxref("border-left")}} 和 {{Cssxref("border-color")}}。 - 其他邊框的顏色相關 CSS 屬性：{{Cssxref("border-right-color")}}、{{Cssxref("border-bottom-color")}} 和 {{Cssxref("border-top-color")}}。 - 適用於相同邊框的其他邊框相關 CSS 屬性：{{cssxref("border-left-style")}} 和 {{cssxref("border-left-width")}}。 -- 預設的 [`currentcolor`](/zh-TW/docs/Web/CSS/color_value#currentcolor_關鍵字) 顏色值。 +- 預設的 [`currentcolor`](/zh-TW/docs/Web/CSS/Reference/Values/color_value#currentcolor_關鍵字) 顏色值。 diff --git a/files/zh-tw/web/css/reference/properties/border-right-color/index.md b/files/zh-tw/web/css/reference/properties/border-right-color/index.md index 342f894c1367c8..e6a1b2953fb238 100644 --- a/files/zh-tw/web/css/reference/properties/border-right-color/index.md +++ b/files/zh-tw/web/css/reference/properties/border-right-color/index.md @@ -129,4 +129,4 @@ border-right-color: unset; - 與邊框相關的 CSS 簡寫屬性：{{cssxref("border")}}、{{cssxref("border-right")}} 和 {{cssxref("border-color")}}。 - 其他邊框的顏色相關 CSS 屬性：{{cssxref("border-left-color")}}、{{cssxref("border-bottom-color")}} 和 {{cssxref("border-top-color")}}。 - 適用於相同邊框的其他邊框相關 CSS 屬性：{{cssxref("border-right-style")}} 和 {{cssxref("border-right-width")}}。 -- 預設的 [`currentcolor`](/zh-TW/docs/Web/CSS/color_value#currentcolor_關鍵字) 顏色值。 +- 預設的 [`currentcolor`](/zh-TW/docs/Web/CSS/Reference/Values/color_value#currentcolor_關鍵字) 顏色值。 diff --git a/files/zh-tw/web/css/reference/properties/border-top-color/index.md b/files/zh-tw/web/css/reference/properties/border-top-color/index.md index ac49ab85347757..6d3b57fb50f010 100644 --- a/files/zh-tw/web/css/reference/properties/border-top-color/index.md +++ b/files/zh-tw/web/css/reference/properties/border-top-color/index.md @@ -129,4 +129,4 @@ border-top-color: unset; - 邊框相關的 CSS 簡寫屬性：{{cssxref("border")}}、{{cssxref("border-top")}} 和 {{cssxref("border-color")}}。 - 其他邊框的顏色相關 CSS 屬性：{{cssxref("border-right-color")}}、{{cssxref("border-bottom-color")}} 和 {{cssxref("border-left-color")}}。 - 應用於相同邊框的其他邊框相關 CSS 屬性：{{cssxref("border-top-style")}} 和 {{cssxref("border-top-width")}}。 -- 預設的 [`currentcolor`](/zh-TW/docs/Web/CSS/color_value#currentcolor_關鍵字) 顏色值。 +- 預設的 [`currentcolor`](/zh-TW/docs/Web/CSS/Reference/Values/color_value#currentcolor_關鍵字) 顏色值。 diff --git a/files/zh-tw/web/css/reference/properties/box-shadow/index.md b/files/zh-tw/web/css/reference/properties/box-shadow/index.md index 9317489e2162c2..4bcfb47dc9d419 100644 --- a/files/zh-tw/web/css/reference/properties/box-shadow/index.md +++ b/files/zh-tw/web/css/reference/properties/box-shadow/index.md @@ -51,7 +51,7 @@ box-shadow: `box-shadow` 屬性讓你能為幾乎任何元素的框架投下陰影。如果在帶有盒狀陰影的元素上指定了 {{cssxref("border-radius")}}，盒狀陰影會呈現相同的圓角。多個盒狀陰影的 Z 軸順序與多個[文字陰影](/zh-TW/docs/Web/CSS/Reference/Properties/text-shadow)相同（第一個指定的陰影在最上面）。 -[盒狀陰影產生器](/zh-TW/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator)是一個互動式工具，讓你可以產生 `box-shadow`。 +[盒狀陰影產生器](/zh-TW/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)是一個互動式工具，讓你可以產生 `box-shadow`。 ## 語法 @@ -119,7 +119,7 @@ box-shadow: unset; ### 插值 -在為陰影製作動畫時，例如當方塊上的多個陰影值在懸停時過渡到新值時，這些值會被插值。{{Glossary("Interpolation", "插值")}}決定了屬性的中間值，例如模糊半徑、擴散半徑和顏色，因為陰影在過渡。對於陰影列表中的每個陰影，顏色、x、y、模糊和擴散都會過渡；顏色作為 [``](/zh-TW/docs/Web/CSS/color_value)，其他值作為 {{cssxref("length")}}。 +在為陰影製作動畫時，例如當方塊上的多個陰影值在懸停時過渡到新值時，這些值會被插值。{{Glossary("Interpolation", "插值")}}決定了屬性的中間值，例如模糊半徑、擴散半徑和顏色，因為陰影在過渡。對於陰影列表中的每個陰影，顏色、x、y、模糊和擴散都會過渡；顏色作為 [``](/zh-TW/docs/Web/CSS/Reference/Values/color_value)，其他值作為 {{cssxref("length")}}。 在兩個以逗號分隔的多個盒狀陰影列表之間進行多個陰影的插值時，陰影會按順序配對，並在配對的陰影之間進行插值。如果陰影列表的長度不同，則較短的列表會在末尾用顏色為 `transparent`、X、Y 和模糊為 `0` 的陰影進行填充，並設定 `inset` 或缺少 `inset` 以匹配。如果在任何一對陰影中，一個設定了 `inset` 而另一個沒有，則整個陰影列表不會進行插值；陰影將變為新值而沒有動畫效果。 @@ -171,7 +171,7 @@ blockquote { 當 `x-offset`、`y-offset` 和 `blur` 都為零時，盒狀陰影將是一個在所有側面大小相等的純色輪廓。陰影是從後到前繪製的，所以第一個陰影位於後續陰影之上。當 `border-radius` 設定為 0（預設值）時，陰影的角將是直角。如果我們設定了任何其他值的 `border-radius`，角將會是圓形的。 -我們添加了一個與最寬的盒狀陰影大小相同的邊界，以確保陰影不會與相鄰元素重疊或超出包含框的邊界。盒狀陰影不會影響[盒模型](/zh-TW/docs/Web/CSS/CSS_box_model)的尺寸。 +我們添加了一個與最寬的盒狀陰影大小相同的邊界，以確保陰影不會與相鄰元素重疊或超出包含框的邊界。盒狀陰影不會影響[盒模型](/zh-TW/docs/Web/CSS/Guides/Box_model)的尺寸。 #### HTML @@ -210,4 +210,4 @@ p { - {{cssxref("<color>")}} 資料類型（用於指定陰影顏色） - {{cssxref("text-shadow")}} - {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} -- [使用 CSS 為 HTML 元素套用顏色](/zh-TW/docs/Web/CSS/CSS_colors/Applying_color) +- [使用 CSS 為 HTML 元素套用顏色](/zh-TW/docs/Web/CSS/Guides/Colors/Applying_color) diff --git a/files/zh-tw/web/css/reference/properties/box-sizing/index.md b/files/zh-tw/web/css/reference/properties/box-sizing/index.md index 63ddec51ee2c6a..164bca16d821e5 100644 --- a/files/zh-tw/web/css/reference/properties/box-sizing/index.md +++ b/files/zh-tw/web/css/reference/properties/box-sizing/index.md @@ -58,7 +58,7 @@ padding: 5px; } ``` -在 [CSS 盒模型](/zh-TW/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)中，預設情況下，你為元素指定的 `width` 和 `height` 只應用於元素的內容區域。如果元素有邊框或內邊距，這些會加到 `width` 和 `height` 上，從而得出畫面上呈現的盒子大小。這意味著當你設定 `width` 和 `height` 時，必須調整你給的值以考慮邊框或內邊距。例如，如果你有四個設為 `width: 25%;` 的盒子，若其中任何一個有左右內邊距或左右邊框，預設情況下它們將無法在父容器的限制內排成一行。 +在 [CSS 盒模型](/zh-TW/docs/Web/CSS/Guides/Box_model/Introduction)中，預設情況下，你為元素指定的 `width` 和 `height` 只應用於元素的內容區域。如果元素有邊框或內邊距，這些會加到 `width` 和 `height` 上，從而得出畫面上呈現的盒子大小。這意味著當你設定 `width` 和 `height` 時，必須調整你給的值以考慮邊框或內邊距。例如，如果你有四個設為 `width: 25%;` 的盒子，若其中任何一個有左右內邊距或左右邊框，預設情況下它們將無法在父容器的限制內排成一行。 `box-sizing` 屬性可用來調整此行為： @@ -162,4 +162,4 @@ div { ## 參見 -- [CSS 盒模型](/zh-TW/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) +- [CSS 盒模型](/zh-TW/docs/Web/CSS/Guides/Box_model/Introduction) diff --git a/files/zh-tw/web/css/reference/properties/grid-template/index.md b/files/zh-tw/web/css/reference/properties/grid-template/index.md index 0daf4ae4799dd8..c4a32822eed514 100644 --- a/files/zh-tw/web/css/reference/properties/grid-template/index.md +++ b/files/zh-tw/web/css/reference/properties/grid-template/index.md @@ -3,7 +3,7 @@ title: grid-template slug: Web/CSS/Reference/Properties/grid-template --- -CSS 的 **`grid-template`** 屬性是一個用於定義{{glossary("grid column","網格欄")}}、{{glossary("grid rows","列")}}和{{glossary("grid areas","區域")}}的[簡寫屬性](/zh-TW/docs/Web/CSS/CSS_cascade/Shorthand_properties)。 +CSS 的 **`grid-template`** 屬性是一個用於定義{{glossary("grid column","網格欄")}}、{{glossary("grid rows","列")}}和{{glossary("grid areas","區域")}}的[簡寫屬性](/zh-TW/docs/Web/CSS/Guides/Cascade/Shorthand_properties)。 {{InteractiveExample("CSS Demo: grid-template")}} @@ -115,7 +115,7 @@ grid-template: unset; {{csssyntax}} -## Examples +## 範例 ### CSS @@ -163,23 +163,23 @@ footer { ``` -### Result +### 結果 -{{EmbedLiveSample("Examples", "100%", "200px")}} +{{EmbedLiveSample("範例", "100%", "200px")}} -## Specifications +## 規範 {{Specifications}} {{cssinfo}} -## Browser compatibility +## 瀏覽器相容性 {{Compat}} -## See also +## 參見 - Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}} -- Grid Layout Guide: _[Line-based placement with CSS Grid](/zh-TW/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ -- Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/zh-TW/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#Grid_definition_shorthands)_ +- Grid Layout Guide: _[Line-based placement with CSS Grid](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Line-based_placement)_ +- Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/zh-TW/docs/Web/CSS/Guides/Grid_layout/Grid_template_areas#Grid_definition_shorthands)_ - Video tutorial: [Grid Template shorthand](https://gridbyexample.com/video/grid-template-shorthand/) diff --git a/files/zh-tw/web/css/reference/properties/height/index.md b/files/zh-tw/web/css/reference/properties/height/index.md index cdd4ea1ecc0411..562b3a98660cc2 100644 --- a/files/zh-tw/web/css/reference/properties/height/index.md +++ b/files/zh-tw/web/css/reference/properties/height/index.md @@ -3,9 +3,7 @@ title: height slug: Web/CSS/Reference/Properties/height --- -## 概要 - -**`高度(height)`** 的 CSS 屬性指定了元素內容區域的高度。[content area](/zh-TW/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#content) 在元素的留白(padding)、邊框(border) 與 邊界(margin) 內。 +**`height`** 的 CSS 屬性指定了元素內容區域的高度。[content area](/zh-TW/docs/Web/CSS/Guides/Box_model/Introduction#content) 在元素的留白(padding)、邊框(border) 與 邊界(margin) 內。 {{cssxref("min-height")}} 與 {{cssxref("max-height")}} 的特性比 {{Cssxref("height")}} 更重要。 @@ -106,7 +104,7 @@ div { {{EmbedLiveSample('範例')}} -## 規格 +## 規範 {{Specifications}} @@ -114,6 +112,6 @@ div { {{Compat}} -## See also +## 參見 -- [box model](/zh-TW/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model), {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}} +- [box model](/zh-TW/docs/Web/CSS/Guides/Box_model/Introduction), {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}} diff --git a/files/zh-tw/web/css/reference/properties/transform-origin/index.md b/files/zh-tw/web/css/reference/properties/transform-origin/index.md index 9d1e54bff9dd0c..a89e14298a387d 100644 --- a/files/zh-tw/web/css/reference/properties/transform-origin/index.md +++ b/files/zh-tw/web/css/reference/properties/transform-origin/index.md @@ -143,7 +143,7 @@ window.addEventListener("load", () => { }); ``` -變化原點指的是應用變化的點。舉例來說， [`rotate()`](/zh-TW/docs/Web/CSS/transform-function/rotate)函數的原點為旋轉中心。 (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.) +變化原點指的是應用變化的點。舉例來說， [`rotate()`](/zh-TW/docs/Web/CSS/Reference/Values/transform-function/rotate)函數的原點為旋轉中心。 (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.) ## 語法 @@ -182,7 +182,7 @@ transform-origin: initial; transform-origin: unset; ``` -`transform-origin` 屬性可以使用多次，每一次都代表著一個偏移量。若未設定偏移量，則重置為其對應的[初始值](/zh-TW/docs/Web/CSS/CSS_cascade/initial_value)。 +`transform-origin` 屬性可以使用多次，每一次都代表著一個偏移量。若未設定偏移量，則重置為其對應的[初始值](/zh-TW/docs/Web/CSS/Guides/Cascade/Property_value_processing#初始值)。 If two or more values are defined and either no value is a keyword, or the only used keyword is `center`, then the first value represents the horizontal offset and the second represents the vertical offset. @@ -226,7 +226,7 @@ The keywords are convenience shorthands and match the following {{cssxref("<p {{csssyntax}} -## Examples +## 範例 ```html hidden

@@ -413,18 +413,18 @@ transform-origin: 100% -30%; } ``` -{{EmbedLiveSample('Examples', '', 1350) }} +{{EmbedLiveSample('範例', '', 1350) }} -## Specifications +## 規範 {{Specifications}} {{Cssinfo}} -## Browser compatibility +## 瀏覽器相容性 {{Compat}} -## See also +## 參見 -- [Using CSS transforms](/zh-TW/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) +- [Using CSS transforms](/zh-TW/docs/Web/CSS/Guides/Transforms/Using) diff --git a/files/zh-tw/web/css/reference/properties/transform/index.md b/files/zh-tw/web/css/reference/properties/transform/index.md index 8ad156ee9c6d35..1be2d6e1180c1d 100644 --- a/files/zh-tw/web/css/reference/properties/transform/index.md +++ b/files/zh-tw/web/css/reference/properties/transform/index.md @@ -41,10 +41,10 @@ transform: scale(0.5) translate(-100%, -100%); ``` -如果這個屬性的值不是 `none`，將會建立一個 [stacking context](/zh-TW/docs/Web/CSS/CSS_positioned_layout/Stacking_context)。在這個情況下，此元素將被其所包含的 `position: fixed` 元素當成一個 containing block。 +如果這個屬性的值不是 `none`，將會建立一個 [stacking context](/zh-TW/docs/Web/CSS/Guides/Positioned_layout/Stacking_context)。在這個情況下，此元素將被其所包含的 `position: fixed` 元素當成一個 containing block。 > [!WARNING] -> 只有可以變形的元素可以被變形，這包括所有被 CSS box model 掌管輸出的元素，除了[視覺格式化模型](/zh-TW/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes), [table-column box](/zh-TW/docs/Web/HTML/Reference/Elements/col) 和 [table-colunm-group box](/zh-TW/docs/Web/HTML/Reference/Elements/colgroup)。 +> 只有可以變形的元素可以被變形，這包括所有被 CSS box model 掌管輸出的元素，除了[視覺格式化模型](/zh-TW/docs/Web/CSS/Guides/Display/Visual_formatting_model#Inline-level_elements_and_inline_boxes), [table-column box](/zh-TW/docs/Web/HTML/Reference/Elements/col) 和 [table-colunm-group box](/zh-TW/docs/Web/HTML/Reference/Elements/colgroup)。 ## 語法 @@ -92,7 +92,7 @@ transform: unset; ### 值 - {{cssxref("<transform-function>")}} - - : 可使用一個或多個 [CSS transform 函數](/zh-TW/docs/Web/CSS/transform-function)。複合的 transform 會由左至右的順序來套用。 + - : 可使用一個或多個 [CSS transform 函數](/zh-TW/docs/Web/CSS/Reference/Values/transform-function)。複合的 transform 會由左至右的順序來套用。 - `none` - : 設定為沒有套用任何 transform。 @@ -100,7 +100,7 @@ transform: unset; 改變尺寸和伸縮的動畫會影響網頁普遍的可使用性，因為它們可能促發一些頭痛的問題。如果你想要在網頁中提供這樣的功能，最好在網頁中放上給使用者關閉這些功能的控制開關。 -另外也可考慮使用 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} 這個媒體功能來寫一個在系統設定端的[媒體查詢](/zh-TW/docs/Web/CSS/CSS_media_queries)，讓使用者在減少了動畫偏好之後可以關閉該使用者網頁的動畫功能。 +另外也可考慮使用 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} 這個媒體功能來寫一個在系統設定端的[媒體查詢](/zh-TW/docs/Web/CSS/Guides/Media_queries)，讓使用者在減少了動畫偏好之後可以關閉該使用者網頁的動畫功能。 瞭解更多: @@ -142,7 +142,7 @@ div { ### 更多範例 -請參考[使用 CSS transform](/zh-TW/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) 以及 {{cssxref("<transform-function>")}} 的更多範例。 +請參考[使用 CSS transform](/zh-TW/docs/Web/CSS/Guides/Transforms/Using) 以及 {{cssxref("<transform-function>")}} 的更多範例。 ## 規範 @@ -154,6 +154,6 @@ div { ## 參見 -- [使用 CSS transform](/zh-TW/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) +- [使用 CSS transform](/zh-TW/docs/Web/CSS/Guides/Transforms/Using) - {{cssxref("<transform-function>")}} data type - A cross-browser 2D [transform plugin for jQuery](https://louisremi.github.io/jquery.transform.js/) diff --git a/files/zh-tw/web/css/reference/properties/transition-duration/index.md b/files/zh-tw/web/css/reference/properties/transition-duration/index.md index c7e6c2c717b7b2..7d3cb367ead413 100644 --- a/files/zh-tw/web/css/reference/properties/transition-duration/index.md +++ b/files/zh-tw/web/css/reference/properties/transition-duration/index.md @@ -369,11 +369,11 @@ var intervalID = window.setInterval(updateTransition, 7000); {{cssinfo}} -## 瀏覽器支援情形 +## 瀏覽器相容性 {{Compat}} -## 更多資訊 +## 參見 -- [CSS 轉場](/zh-TW/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) +- [CSS 轉場](/zh-TW/docs/Web/CSS/Guides/Transitions/Using) - {{ domxref("TransitionEvent") }} diff --git a/files/zh-tw/web/css/reference/properties/transition-timing-function/index.md b/files/zh-tw/web/css/reference/properties/transition-timing-function/index.md index 8b8b568e15c796..d678c07c06c0c4 100644 --- a/files/zh-tw/web/css/reference/properties/transition-timing-function/index.md +++ b/files/zh-tw/web/css/reference/properties/transition-timing-function/index.md @@ -3,7 +3,7 @@ title: transition-timing-function slug: Web/CSS/Reference/Properties/transition-timing-function --- -**`transition-timing-function`** CSS 屬性用於表示各個被[動畫特效](/zh-TW/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)影響的屬性的區間值計算方式。 +**`transition-timing-function`** CSS 屬性用於表示各個被[動畫特效](/zh-TW/docs/Web/CSS/Guides/Transitions/Using)影響的屬性的區間值計算方式。 {{InteractiveExample("CSS Demo: transition-timing-function")}} @@ -630,17 +630,17 @@ var intervalID = window.setInterval(updateTransition, 7000); {{EmbedLiveSample("transition-timing-function: steps(4, end)",275,150)}} -## 規格 +## 規範 {{Specifications}} {{cssinfo}} -## 相容性 +## 瀏覽器相容性 {{Compat}} -## 看更多 +## 參見 -- [使用 CSS transitions](/zh-TW/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) +- [使用 CSS transitions](/zh-TW/docs/Web/CSS/Guides/Transitions/Using) - {{ domxref("TransitionEvent") }} diff --git a/files/zh-tw/web/css/reference/properties/transition/index.md b/files/zh-tw/web/css/reference/properties/transition/index.md index 7eb20cd2091e86..3d46fe0e34a893 100644 --- a/files/zh-tw/web/css/reference/properties/transition/index.md +++ b/files/zh-tw/web/css/reference/properties/transition/index.md @@ -3,7 +3,7 @@ title: transition slug: Web/CSS/Reference/Properties/transition --- -**`transition`** [CSS](/zh-TW/docs/Web/CSS) 屬性是 {{ cssxref("transition-property") }}、{{ cssxref("transition-duration") }}、{{ cssxref("transition-timing-function") }} 和 {{ cssxref("transition-delay") }} 的[簡寫屬性](/zh-TW/docs/Web/CSS/CSS_cascade/Shorthand_properties)。 +**`transition`** [CSS](/zh-TW/docs/Web/CSS) 屬性是 {{ cssxref("transition-property") }}、{{ cssxref("transition-duration") }}、{{ cssxref("transition-timing-function") }} 和 {{ cssxref("transition-delay") }} 的[簡寫屬性](/zh-TW/docs/Web/CSS/Guides/Cascade/Shorthand_properties)。 {{InteractiveExample("CSS Demo: transition")}} @@ -101,7 +101,7 @@ transition: unset; - 無或一個 {{cssxref("<single-transition-timing-function>")}} 表示所使用的漸變函式。 - 無、一個或兩個 {{cssxref("<time>")}} 值。第一個值會被指派給 {{cssxref("transition-duration")}}，而第二個則被指派給 {{cssxref("transition-delay")}}。 -當每個轉場設定不等長時，請參見 [當 property values list 之間不等長時...](/zh-TW/docs/Web/CSS/CSS_transitions/Using_CSS_transitions#當_property_value_list_之間並不等長時_...) 。簡而言之，多餘的描述(超過實際被執行的數量)會直接被忽略。 +當每個轉場設定不等長時，請參見 [當 property values list 之間不等長時...](/zh-TW/docs/Web/CSS/Guides/Transitions/Using#當_property_value_list_之間並不等長時_...) 。簡而言之，多餘的描述(超過實際被執行的數量)會直接被忽略。 ### 標準語法 @@ -109,7 +109,7 @@ transition: unset; ## 範例 -[CSS 轉場](/zh-TW/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) 有更多範例。 +[CSS 轉場](/zh-TW/docs/Web/CSS/Guides/Transitions/Using) 有更多範例。 ## 規範 @@ -117,11 +117,11 @@ transition: unset; {{cssinfo}} -## 瀏覽器支援情況 +## 瀏覽器相容性 {{Compat}} -## 更多資訊 +## 參見 -- [CSS 轉場](/zh-TW/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) +- [CSS 轉場](/zh-TW/docs/Web/CSS/Guides/Transitions/Using) - {{ domxref("TransitionEvent") }} diff --git a/files/zh-tw/web/css/reference/properties/width/index.md b/files/zh-tw/web/css/reference/properties/width/index.md index 48bda1212bd613..dc99b9efbc17d1 100644 --- a/files/zh-tw/web/css/reference/properties/width/index.md +++ b/files/zh-tw/web/css/reference/properties/width/index.md @@ -3,7 +3,7 @@ title: width slug: Web/CSS/Reference/Properties/width --- -The **`width`** CSS property specifies the width of an element. By default, the property defines the width of the [content area](/zh-TW/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#content-area). If {{cssxref("box-sizing")}} is set to `border-box`, however, it instead determines the width of the [border area](/zh-TW/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#border-area). +The **`width`** CSS property specifies the width of an element. By default, the property defines the width of the [content area](/zh-TW/docs/Web/CSS/Guides/Box_model/Introduction#content-area). If {{cssxref("box-sizing")}} is set to `border-box`, however, it instead determines the width of the [border area](/zh-TW/docs/Web/CSS/Guides/Box_model/Introduction#border-area). ```css /* values */ @@ -316,6 +316,6 @@ p.minblue { {{Compat}} -## 參考 +## 參見 -- [box model](/zh-TW/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model), {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}} +- [box model](/zh-TW/docs/Web/CSS/Guides/Box_model/Introduction), {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}} diff --git a/files/zh-tw/web/css/reference/selectors/_colon_target/index.md b/files/zh-tw/web/css/reference/selectors/_colon_target/index.md index 7a8315b1694ad0..68b4783e037eba 100644 --- a/files/zh-tw/web/css/reference/selectors/_colon_target/index.md +++ b/files/zh-tw/web/css/reference/selectors/_colon_target/index.md @@ -105,4 +105,4 @@ p:target i { ## 參見 -- [在選擇器中使用 :target 偽類](/zh-TW/docs/Web/CSS/CSS_selectors/Using_the_:target_pseudo-class_in_selectors) +- [在選擇器中使用 :target 偽類](/zh-TW/docs/Web/CSS/Guides/Selectors/Using_:target) diff --git a/files/zh-tw/web/css/reference/selectors/_doublecolon_first-letter/index.md b/files/zh-tw/web/css/reference/selectors/_doublecolon_first-letter/index.md index fdb0174efc7cb9..2d59f94321d5c9 100644 --- a/files/zh-tw/web/css/reference/selectors/_doublecolon_first-letter/index.md +++ b/files/zh-tw/web/css/reference/selectors/_doublecolon_first-letter/index.md @@ -5,7 +5,7 @@ l10n: sourceCommit: 6d55eec58e38583da60aa635d41393ad051d1c6d --- -**`::first-letter`** [CSS](/zh-TW/docs/Web/CSS) [偽元素](/zh-TW/docs/Web/CSS/Reference/Selectors/Pseudo-elements)用來對[區塊容器](/zh-TW/docs/Web/CSS/CSS_display/Visual_formatting_model#區塊容器)中第一行的第一個字母進行樣式設定，但僅限於前面沒有其他內容（如圖片或內嵌表格）時。 +**`::first-letter`** [CSS](/zh-TW/docs/Web/CSS) [偽元素](/zh-TW/docs/Web/CSS/Reference/Selectors/Pseudo-elements)用來對[區塊容器](/zh-TW/docs/Web/CSS/Guides/Display/Visual_formatting_model#區塊容器)中第一行的第一個字母進行樣式設定，但僅限於前面沒有其他內容（如圖片或內嵌表格）時。 {{InteractiveExample("CSS Demo: ::first-letter", "tabbed-shorter")}} diff --git a/files/zh-tw/web/css/transform-function/translate3d/index.md b/files/zh-tw/web/css/reference/values/transform-function/translate3d/index.md similarity index 96% rename from files/zh-tw/web/css/transform-function/translate3d/index.md rename to files/zh-tw/web/css/reference/values/transform-function/translate3d/index.md index 6f6fa1edc1ad61..d335b3db8806c2 100644 --- a/files/zh-tw/web/css/transform-function/translate3d/index.md +++ b/files/zh-tw/web/css/reference/values/transform-function/translate3d/index.md @@ -1,6 +1,6 @@ --- title: translate3d() -slug: Web/CSS/transform-function/translate3d +slug: Web/CSS/Reference/Values/transform-function/translate3d --- **`translate3d()`** [CSS](/zh-TW/docs/Web/CSS) 函式以 3D 場境的方式定位元素。其結果為 {{cssxref("<transform-function>")}} 資料型別。 @@ -218,7 +218,7 @@ div { ## 瀏覽器相容性 -請參見 [``](/zh-TW/docs/Web/CSS/transform-function#Browser_compatibility)。 +{{Compat}} ## 參見 diff --git a/files/zh-tw/web/html/index.md b/files/zh-tw/web/html/index.md index e509636d6ad465..d0b078d0197b0c 100644 --- a/files/zh-tw/web/html/index.md +++ b/files/zh-tw/web/html/index.md @@ -60,5 +60,5 @@ HTML 元素通過「標籤」與文件中的其他文本區分開來，標籤由 ## 相關主題 -- [使用 CSS 為 HTML 元素應用顏色](/zh-TW/docs/Web/CSS/CSS_colors/Applying_color) +- [使用 CSS 為 HTML 元素應用顏色](/zh-TW/docs/Web/CSS/Guides/Colors/Applying_color) - : 這篇文章涵蓋了使用 CSS 為 HTML 內容添加顏色的的大部分方法，列出了 HTML 文件的哪些部分可以著色以及在進行著色時應使用哪些 CSS 屬性。 diff --git a/files/zh-tw/web/html/reference/elements/col/index.md b/files/zh-tw/web/html/reference/elements/col/index.md index 17f120487c2942..965ff525e4e780 100644 --- a/files/zh-tw/web/html/reference/elements/col/index.md +++ b/files/zh-tw/web/html/reference/elements/col/index.md @@ -89,7 +89,7 @@ td { > 如果表格使用了 [`colspan`](/zh-TW/docs/Web/HTML/Reference/Elements/td#colspan) 屬性，則可以通過組合適當的 CSS 屬性選擇器，如 `[colspan=n]` 來達到效果，雖然這不是一個簡單的過程。 - `bgcolor` {{deprecated_inline}} - - : 定義每個欄單元格的背景顏色。該值是一個 HTML 顏色，可以是一個以『`#`』為前綴的 [6 位十六進制 RGB 代碼](/zh-TW/docs/Web/CSS/hex-color)，或者是一個 [顏色關鍵字](/zh-TW/docs/Web/CSS/named-color)。不支持其他 CSS {{cssxref("color_value", "<color>")}} 值。請改用 {{cssxref("background-color")}} CSS 屬性，因為此屬性已棄用。 + - : 定義每個欄單元格的背景顏色。該值是一個 HTML 顏色，可以是一個以『`#`』為前綴的 [6 位十六進制 RGB 代碼](/zh-TW/docs/Web/CSS/Reference/Values/hex-color)，或者是一個 [顏色關鍵字](/zh-TW/docs/Web/CSS/Reference/Values/named-color)。不支持其他 CSS {{cssxref("color_value", "<color>")}} 值。請改用 {{cssxref("background-color")}} CSS 屬性，因為此屬性已棄用。 - `char` {{deprecated_inline}} - : 指定每個欄單元格的內容對齊到一個字符的方式。當將 [`align`](#align) 未設置為 `char` 時，此屬性將被忽略，但仍將覆蓋其 {{HTMLElement("colgroup")}} 父元素的指定 [`char`](/zh-TW/docs/Web/HTML/Reference/Elements/colgroup#char)。 - `charoff` {{deprecated_inline}} diff --git a/files/zh-tw/web/html/reference/elements/colgroup/index.md b/files/zh-tw/web/html/reference/elements/colgroup/index.md index 0677da6c4a8256..275619fb39de75 100644 --- a/files/zh-tw/web/html/reference/elements/colgroup/index.md +++ b/files/zh-tw/web/html/reference/elements/colgroup/index.md @@ -92,7 +92,7 @@ td { > 如果表格使用了 [`colspan`](/zh-TW/docs/Web/HTML/Reference/Elements/td#colspan) 屬性，可以通過組合適當的 CSS 屬性選擇器來達到效果，例如像 `[colspan=n]`，儘管這並不簡單。 - `bgcolor` {{deprecated_inline}} - - : 定義每個欄群組儲存格的背景顏色。該值是一個 HTML 顏色；可以是 [6 位十六進制 RGB 碼](/zh-TW/docs/Web/CSS/hex-color)，前綴為「`#`」，或者是一個[顏色關鍵字](/zh-TW/docs/Web/CSS/named-color)。不支援其他 CSS {{cssxref("color_value", "<color>")}} 值。請改用 {{cssxref("background-color")}} CSS 屬性，因為此屬性已棄用。 + - : 定義每個欄群組儲存格的背景顏色。該值是一個 HTML 顏色；可以是 [6 位十六進制 RGB 碼](/zh-TW/docs/Web/CSS/Reference/Values/hex-color)，前綴為「`#`」，或者是一個[顏色關鍵字](/zh-TW/docs/Web/CSS/Reference/Values/named-color)。不支援其他 CSS {{cssxref("color_value", "<color>")}} 值。請改用 {{cssxref("background-color")}} CSS 屬性，因為此屬性已棄用。 - `char` {{deprecated_inline}} - : 指定每個欄群組儲存格內容與字符的對齊方式。這個屬性的典型值包括當試圖對齊數字或貨幣值時使用的句點（`.`）。如果 [`align`](#align) 未設置為 `char`，則忽略此屬性，但它仍將作為屬於此欄群組的 {{HTMLElement("col")}} 元素的 [`align`](/zh-TW/docs/Web/HTML/Reference/Elements/col#align) 的默認值使用。 diff --git a/files/zh-tw/web/html/reference/elements/dir/index.md b/files/zh-tw/web/html/reference/elements/dir/index.md index 2bfa2200dfaef5..2cae502c7a23c3 100644 --- a/files/zh-tw/web/html/reference/elements/dir/index.md +++ b/files/zh-tw/web/html/reference/elements/dir/index.md @@ -34,6 +34,6 @@ slug: Web/HTML/Reference/Elements/dir - 其他與列表相關的 HTML 元素：{{HTMLElement("ol")}}、{{HTMLElement("ul")}}、{{HTMLElement("li")}} 和 {{HTMLElement("menu")}}； - 可能特別有用於樣式化 `` 元素的 CSS 屬性： - {{cssxref('list-style')}} 屬性，用於選擇序數的顯示方式。 - - [CSS 計數器](/zh-TW/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)，用於處理複雜的巢狀列表。 + - [CSS 計數器](/zh-TW/docs/Web/CSS/Guides/Counter_styles/Using_counters)，用於處理複雜的巢狀列表。 - {{Cssxref('line-height')}} 屬性，用於模擬已棄用的 [`compact`](#compact) 屬性。 - {{cssxref('margin')}} 屬性，用於控制列表的縮排。 diff --git a/files/zh-tw/web/html/reference/elements/div/index.md b/files/zh-tw/web/html/reference/elements/div/index.md index 83911607278570..b57748ab07d651 100644 --- a/files/zh-tw/web/html/reference/elements/div/index.md +++ b/files/zh-tw/web/html/reference/elements/div/index.md @@ -3,7 +3,7 @@ title:
：內容分區元素 slug: Web/HTML/Reference/Elements/div --- -**`
`** [HTML](/zh-TW/docs/Web/HTML) 元素是流內容的通用容器。除非以某種方式使用 {{glossary("CSS")}} 進行樣式化（例如直接應用樣式或應用某種佈局模型，如 [Flexbox](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout) 到其父元素上），否則它對內容或佈局沒有影響。 +**`
`** [HTML](/zh-TW/docs/Web/HTML) 元素是流內容的通用容器。除非以某種方式使用 {{glossary("CSS")}} 進行樣式化（例如直接應用樣式或應用某種佈局模型，如 [Flexbox](/zh-TW/docs/Web/CSS/Guides/Flexible_box_layout) 到其父元素上），否則它對內容或佈局沒有影響。 {{InteractiveExample("HTML Demo: <div>", "tabbed-standard")}} @@ -42,7 +42,7 @@ slug: Web/HTML/Reference/Elements/div 此元素包括[全域屬性](/zh-TW/docs/Web/HTML/Reference/Global_attributes)。 > [!NOTE] -> `align` 屬性已廢棄；請不要再使用。取而代之應該使用 CSS 屬性或技術，例如 [CSS Grid](/zh-TW/docs/Web/CSS/CSS_grid_layout) 或 [CSS Flexbox](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Flexbox) 來對頁面上的 `
` 元素進行對齊和定位。 +> `align` 屬性已廢棄；請不要再使用。取而代之應該使用 CSS 屬性或技術，例如 [CSS Grid](/zh-TW/docs/Web/CSS/Guides/Grid_layout) 或 [CSS Flexbox](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Flexbox) 來對頁面上的 `
` 元素進行對齊和定位。 ## 使用注意事項 diff --git a/files/zh-tw/web/html/reference/elements/fieldset/index.md b/files/zh-tw/web/html/reference/elements/fieldset/index.md index 5bb3118d739212..f33abccd32f302 100644 --- a/files/zh-tw/web/html/reference/elements/fieldset/index.md +++ b/files/zh-tw/web/html/reference/elements/fieldset/index.md @@ -56,7 +56,7 @@ input { 對於 `
`，有一些特殊的樣式考慮因素。 -它的 {{cssxref("display")}} 默認值為 `block`，並建立了一個[塊格式化上下文](/zh-TW/docs/Web/CSS/CSS_display/Block_formatting_context)。如果 `
` 以內聯級別的 `display` 值進行樣式設置，則其行為將像 `inline-block` 一樣，否則將像 `block` 一樣。默認情況下，周圍有一個 `2px` 的 `groove` 邊框圍繞內容，並有一小部分默認填充。元素默認具有 {{cssxref("min-inline-size", "min-inline-size: min-content")}}。 +它的 {{cssxref("display")}} 默認值為 `block`，並建立了一個[塊格式化上下文](/zh-TW/docs/Web/CSS/Guides/Display/Block_formatting_context)。如果 `
` 以內聯級別的 `display` 值進行樣式設置，則其行為將像 `inline-block` 一樣，否則將像 `block` 一樣。默認情況下，周圍有一個 `2px` 的 `groove` 邊框圍繞內容，並有一小部分默認填充。元素默認具有 {{cssxref("min-inline-size", "min-inline-size: min-content")}}。 如果存在 {{htmlelement("legend")}}，則其位於 `block-start` 邊框之上。`` 將會縮小包裹，並且也會建立一個格式化上下文。`display` 值被轉換為塊級別。（例如，`display: inline` 行為與 `block` 一樣。） diff --git a/files/zh-tw/web/html/reference/elements/font/index.md b/files/zh-tw/web/html/reference/elements/font/index.md index 345987302c4ece..6bcca6eff16edc 100644 --- a/files/zh-tw/web/html/reference/elements/font/index.md +++ b/files/zh-tw/web/html/reference/elements/font/index.md @@ -8,7 +8,7 @@ slug: Web/HTML/Reference/Elements/font **``** [HTML](/zh-TW/docs/Web/HTML) 元素用於定義其內容的字型大小、顏色和字型。 > [!WARNING] -> 請勿使用此元素。請使用 CSS 的 [Font](/zh-TW/docs/Web/CSS/CSS_fonts) 為文本添加樣式。 +> 請勿使用此元素。請使用 CSS 的 [Font](/zh-TW/docs/Web/CSS/Guides/Fonts) 為文本添加樣式。 ## 屬性 diff --git a/files/zh-tw/web/html/reference/elements/table/index.md b/files/zh-tw/web/html/reference/elements/table/index.md index ecf404a2602db7..c951457d1aad78 100644 --- a/files/zh-tw/web/html/reference/elements/table/index.md +++ b/files/zh-tw/web/html/reference/elements/table/index.md @@ -155,7 +155,7 @@ tfoot td { - right：意思是表格應該顯示在文件的右方。在 CSS 要得出類似效果，應該設定 {{cssxref("margin-left")}} 與 {{cssxref("margin-right")}}；如果要置中，則要把 {{cssxref("margin")}} 屬性設定為 `0 auto`。 - `bgcolor` {{Deprecated_inline}} - - : 定義表格的背景與內容顏色。它使用[六位十六進制 RGB code](/zh-TW/docs/Web/CSS/color_value#RGB_colors)，前缀需要加上 '`#`' 。也可以用[預先定義的顏色字串](/zh-TW/docs/Web/CSS/color_value#Color_keywords)可用。在 CSS 要得出類似效果，應該使用 {{cssxref("background-color")}} 屬性。 + - : 定義表格的背景與內容顏色。它使用[六位十六進制 RGB code](/zh-TW/docs/Web/CSS/Reference/Values/color_value#RGB_colors)，前缀需要加上 '`#`' 。也可以用[預先定義的顏色字串](/zh-TW/docs/Web/CSS/Reference/Values/color_value#Color_keywords)可用。在 CSS 要得出類似效果，應該使用 {{cssxref("background-color")}} 屬性。 - `border` {{Deprecated_inline}} - : 這個屬性以像素為單位，定義了圍繞於表格框架的大小。如果設為 0，代表 [`frame`](#frame) 屬性為空。在 CSS 要得出類似效果，應該使用 {{cssxref("border")}} 屬性。 - `cellpadding` {{Deprecated_inline}} diff --git a/files/zh-tw/web/html/reference/elements/ul/index.md b/files/zh-tw/web/html/reference/elements/ul/index.md index 2365d57f322bb4..36f82bec3752ca 100644 --- a/files/zh-tw/web/html/reference/elements/ul/index.md +++ b/files/zh-tw/web/html/reference/elements/ul/index.md @@ -206,6 +206,6 @@ li li { - 其他與清單相關的HTML元素：{{HTMLElement("ol")}}、{{HTMLElement("li")}}、{{HTMLElement("menu")}} - 可能對樣式化 `
    ` 元素特別有用的 CSS 屬性： - {{CSSxRef("list-style")}} 屬性，選擇序數的顯示方式。 - - [CSS 計數器](/zh-TW/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)，處理複雜的巢狀清單。 + - [CSS 計數器](/zh-TW/docs/Web/CSS/Guides/Counter_styles/Using_counters)，處理複雜的巢狀清單。 - {{CSSxRef("line-height")}} 屬性，模擬已棄用的 [`compact`](#compact) 屬性。 - {{CSSxRef("margin")}} 屬性，控制清單的縮進。 diff --git a/files/zh-tw/web/html/reference/global_attributes/class/index.md b/files/zh-tw/web/html/reference/global_attributes/class/index.md index ecfc390ea59dd9..551042b4b265e4 100644 --- a/files/zh-tw/web/html/reference/global_attributes/class/index.md +++ b/files/zh-tw/web/html/reference/global_attributes/class/index.md @@ -39,7 +39,7 @@ l10n: `class` 屬性是一個以 [ASCII 空白字元](/zh-TW/docs/Glossary/Whitespace#在_html_中)分隔的類別值列表。 -每個類別值可以包含任何 Unicode 字元（當然，除了 ASCII 空白字元）。但是，當在 CSS 選擇器中使用時，無論是從 JavaScript 使用 {{domxref("Document.querySelector()")}} 等 API 或是在 CSS 樣式表中使用，類別屬性值都必須是有效的 [CSS 標識符](/zh-TW/docs/Web/CSS/ident)。這表示如果類別屬性值不是有效的 CSS 標識符（例如，`my?class` 或 `1234`），則在選擇器中使用它之前必須對其進行跳脫，可以使用 {{domxref("CSS.escape_static", "CSS.escape()")}} 方法或[手動](/zh-TW/docs/Web/CSS/ident#跳脫字元)轉換。 +每個類別值可以包含任何 Unicode 字元（當然，除了 ASCII 空白字元）。但是，當在 CSS 選擇器中使用時，無論是從 JavaScript 使用 {{domxref("Document.querySelector()")}} 等 API 或是在 CSS 樣式表中使用，類別屬性值都必須是有效的 [CSS 標識符](/zh-TW/docs/Web/CSS/Reference/Values/ident)。這表示如果類別屬性值不是有效的 CSS 標識符（例如，`my?class` 或 `1234`），則在選擇器中使用它之前必須對其進行跳脫，可以使用 {{domxref("CSS.escape_static", "CSS.escape()")}} 方法或[手動](/zh-TW/docs/Web/CSS/Reference/Values/ident#跳脫字元)轉換。 因此，建議開發人員為 class 屬性選擇不需要跳脫的有效 CSS 標識符作為值。 diff --git a/files/zh-tw/web/http/guides/cors/index.md b/files/zh-tw/web/http/guides/cors/index.md index 5ab4c9f66677f0..8fc3ed042e5a6f 100644 --- a/files/zh-tw/web/http/guides/cors/index.md +++ b/files/zh-tw/web/http/guides/cors/index.md @@ -23,7 +23,7 @@ CORS 機制支持瀏覽器和伺服器之間的安全跨來源請求和數據傳 - Web 字體（在 CSS 中使用 `@font-face` 進行跨域字體使用），[以便伺服器可以部署僅允許跨來源加載並由被允許的網站使用的 TrueType 字體。](https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements) - [WebGL 紋理](/zh-TW/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL)。 - 使用 {{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}} 繪製到畫布上的圖像/影片幀。 -- [從圖像生成的 CSS 形狀。](/zh-TW/docs/Web/CSS/CSS_shapes/Shapes_from_images) +- [從圖像生成的 CSS 形狀。](/zh-TW/docs/Web/CSS/Guides/Shapes/From_images) 這是一篇關於跨來源資源共享的通用文章，包含對必要 HTTP 標頭的討論。