From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/zh-tw/web/css/@font-face/index.html | 247 ++ files/zh-tw/web/css/@media/height/index.html | 77 + files/zh-tw/web/css/@media/index.html | 377 +++ files/zh-tw/web/css/@viewport/height/index.html | 120 + files/zh-tw/web/css/@viewport/index.html | 159 + files/zh-tw/web/css/_colon_first-child/index.html | 154 + .../zh-tw/web/css/_colon_first-of-type/index.html | 162 + files/zh-tw/web/css/_colon_lang/index.html | 98 + files/zh-tw/web/css/_colon_target/index.html | 275 ++ .../web/css/_doublecolon_first-letter/index.html | 206 ++ files/zh-tw/web/css/animation-fill-mode/index.html | 158 + files/zh-tw/web/css/attr()/index.html | 200 ++ .../zh-tw/web/css/background-attachment/index.html | 151 + files/zh-tw/web/css/background-color/index.html | 115 + .../web/css/border-image/border-image/index.html | 111 + files/zh-tw/web/css/border-image/index.html | 9 + files/zh-tw/web/css/border/index.html | 134 + files/zh-tw/web/css/box-shadow/index.html | 228 ++ files/zh-tw/web/css/box-sizing/index.html | 94 + files/zh-tw/web/css/clip/index.html | 174 ++ .../zh-tw/web/css/common_css_questions/index.html | 165 + files/zh-tw/web/css/css_animations/index.html | 136 + .../css_animations/using_css_animations/index.html | 334 ++ .../web/css/css_background_and_borders/index.html | 152 + .../using_css_multiple_backgrounds/index.html | 84 + files/zh-tw/web/css/css_box_model/index.html | 167 + .../mastering_margin_collapsing/index.html | 107 + .../css/css_colors/color_picker_tool/index.html | 3221 ++++++++++++++++++++ files/zh-tw/web/css/css_colors/index.html | 119 + .../web/css/css_flexible_box_layout/index.html | 118 + .../using_css_flexible_boxes/index.html | 382 +++ .../basic_concepts_of_grid_layout/index.html | 715 +++++ files/zh-tw/web/css/css_grid_layout/index.html | 252 ++ .../consistent_list_indentation/index.html | 67 + .../web/css/css_lists_and_counters/index.html | 127 + files/zh-tw/web/css/css_positioning/index.html | 108 + .../understanding_z_index/index.html | 40 + .../stacking_context_example_1/index.html | 139 + .../web/css/css_properties_reference/index.html | 317 ++ files/zh-tw/web/css/css_selectors/index.html | 123 + .../index.html | 62 + files/zh-tw/web/css/css_transitions/index.html | 110 + .../using_css_transitions/index.html | 384 +++ files/zh-tw/web/css/cursor/index.html | 306 ++ .../zh-tw/web/css/descendant_combinator/index.html | 121 + files/zh-tw/web/css/grid-row/index.html | 194 ++ .../zh-tw/web/css/grid-template-columns/index.html | 196 ++ files/zh-tw/web/css/grid-template/index.html | 197 ++ files/zh-tw/web/css/height/index.html | 234 ++ files/zh-tw/web/css/ime-mode/index.html | 56 + files/zh-tw/web/css/index.html | 100 + files/zh-tw/web/css/inheritance/index.html | 48 + files/zh-tw/web/css/line-break/index.html | 71 + files/zh-tw/web/css/media_queries/index.html | 112 + .../media_queries/testing_media_queries/index.html | 118 + files/zh-tw/web/css/object-fit/index.html | 217 ++ files/zh-tw/web/css/pseudo-classes/index.html | 129 + files/zh-tw/web/css/radial-gradient()/index.html | 183 ++ files/zh-tw/web/css/reference/index.html | 211 ++ files/zh-tw/web/css/replaced_element/index.html | 20 + files/zh-tw/web/css/ruby-position/index.html | 112 + .../zh-tw/web/css/shorthand_properties/index.html | 138 + files/zh-tw/web/css/syntax/index.html | 74 + files/zh-tw/web/css/transform-function/index.html | 894 ++++++ .../transform-function/translate3d()/index.html | 116 + files/zh-tw/web/css/transform-origin/index.html | 455 +++ files/zh-tw/web/css/transform/index.html | 159 + files/zh-tw/web/css/transition-duration/index.html | 342 +++ .../web/css/transition-timing-function/index.html | 605 ++++ files/zh-tw/web/css/transition/index.html | 106 + files/zh-tw/web/css/type_selectors/index.html | 79 + files/zh-tw/web/css/white-space/index.html | 425 +++ files/zh-tw/web/css/width/index.html | 294 ++ 73 files changed, 16990 insertions(+) create mode 100644 files/zh-tw/web/css/@font-face/index.html create mode 100644 files/zh-tw/web/css/@media/height/index.html create mode 100644 files/zh-tw/web/css/@media/index.html create mode 100644 files/zh-tw/web/css/@viewport/height/index.html create mode 100644 files/zh-tw/web/css/@viewport/index.html create mode 100644 files/zh-tw/web/css/_colon_first-child/index.html create mode 100644 files/zh-tw/web/css/_colon_first-of-type/index.html create mode 100644 files/zh-tw/web/css/_colon_lang/index.html create mode 100644 files/zh-tw/web/css/_colon_target/index.html create mode 100644 files/zh-tw/web/css/_doublecolon_first-letter/index.html create mode 100644 files/zh-tw/web/css/animation-fill-mode/index.html create mode 100644 files/zh-tw/web/css/attr()/index.html create mode 100644 files/zh-tw/web/css/background-attachment/index.html create mode 100644 files/zh-tw/web/css/background-color/index.html create mode 100644 files/zh-tw/web/css/border-image/border-image/index.html create mode 100644 files/zh-tw/web/css/border-image/index.html create mode 100644 files/zh-tw/web/css/border/index.html create mode 100644 files/zh-tw/web/css/box-shadow/index.html create mode 100644 files/zh-tw/web/css/box-sizing/index.html create mode 100644 files/zh-tw/web/css/clip/index.html create mode 100644 files/zh-tw/web/css/common_css_questions/index.html create mode 100644 files/zh-tw/web/css/css_animations/index.html create mode 100644 files/zh-tw/web/css/css_animations/using_css_animations/index.html create mode 100644 files/zh-tw/web/css/css_background_and_borders/index.html create mode 100644 files/zh-tw/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html create mode 100644 files/zh-tw/web/css/css_box_model/index.html create mode 100644 files/zh-tw/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/zh-tw/web/css/css_colors/color_picker_tool/index.html create mode 100644 files/zh-tw/web/css/css_colors/index.html create mode 100644 files/zh-tw/web/css/css_flexible_box_layout/index.html create mode 100644 files/zh-tw/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html create mode 100644 files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html create mode 100644 files/zh-tw/web/css/css_grid_layout/index.html create mode 100644 files/zh-tw/web/css/css_lists_and_counters/consistent_list_indentation/index.html create mode 100644 files/zh-tw/web/css/css_lists_and_counters/index.html create mode 100644 files/zh-tw/web/css/css_positioning/index.html create mode 100644 files/zh-tw/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/zh-tw/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/zh-tw/web/css/css_properties_reference/index.html create mode 100644 files/zh-tw/web/css/css_selectors/index.html create mode 100644 files/zh-tw/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html create mode 100644 files/zh-tw/web/css/css_transitions/index.html create mode 100644 files/zh-tw/web/css/css_transitions/using_css_transitions/index.html create mode 100644 files/zh-tw/web/css/cursor/index.html create mode 100644 files/zh-tw/web/css/descendant_combinator/index.html create mode 100644 files/zh-tw/web/css/grid-row/index.html create mode 100644 files/zh-tw/web/css/grid-template-columns/index.html create mode 100644 files/zh-tw/web/css/grid-template/index.html create mode 100644 files/zh-tw/web/css/height/index.html create mode 100644 files/zh-tw/web/css/ime-mode/index.html create mode 100644 files/zh-tw/web/css/index.html create mode 100644 files/zh-tw/web/css/inheritance/index.html create mode 100644 files/zh-tw/web/css/line-break/index.html create mode 100644 files/zh-tw/web/css/media_queries/index.html create mode 100644 files/zh-tw/web/css/media_queries/testing_media_queries/index.html create mode 100644 files/zh-tw/web/css/object-fit/index.html create mode 100644 files/zh-tw/web/css/pseudo-classes/index.html create mode 100644 files/zh-tw/web/css/radial-gradient()/index.html create mode 100644 files/zh-tw/web/css/reference/index.html create mode 100644 files/zh-tw/web/css/replaced_element/index.html create mode 100644 files/zh-tw/web/css/ruby-position/index.html create mode 100644 files/zh-tw/web/css/shorthand_properties/index.html create mode 100644 files/zh-tw/web/css/syntax/index.html create mode 100644 files/zh-tw/web/css/transform-function/index.html create mode 100644 files/zh-tw/web/css/transform-function/translate3d()/index.html create mode 100644 files/zh-tw/web/css/transform-origin/index.html create mode 100644 files/zh-tw/web/css/transform/index.html create mode 100644 files/zh-tw/web/css/transition-duration/index.html create mode 100644 files/zh-tw/web/css/transition-timing-function/index.html create mode 100644 files/zh-tw/web/css/transition/index.html create mode 100644 files/zh-tw/web/css/type_selectors/index.html create mode 100644 files/zh-tw/web/css/white-space/index.html create mode 100644 files/zh-tw/web/css/width/index.html (limited to 'files/zh-tw/web/css') diff --git a/files/zh-tw/web/css/@font-face/index.html b/files/zh-tw/web/css/@font-face/index.html new file mode 100644 index 0000000000..ca045e5dab --- /dev/null +++ b/files/zh-tw/web/css/@font-face/index.html @@ -0,0 +1,247 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +tags: + - CSS + - CSS Reference + - CSS 參考 + - Fonts + - WOFF + - 字型 +translation_of: Web/CSS/@font-face +--- +
{{CSSRef}}
+ +

摘要

+ +

The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.

+ +

{{seeCompatTable}}

+ +

語法

+ +
@font-face {
+  [font-family: <family-name>;]?
+  [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
+  [unicode-range: <urange>#;]?
+  [font-variant: <font-variant>;]?
+  [font-feature-settings: normal|<feature-tag-value>#;]?
+  [font-stretch: <font-stretch>;]?
+  [font-weight: <weight>];
+  [font-style: <style>];
+}
+
+ +

參數值

+ +
+
<family-name>
+
Specifies a font name that will be used as font face value for font properties.
+
<uri>
+
URL for the remote font file location, or the name of a font on the user's computer in the form local("Font Name").
+
<font-variant>
+
A {{cssxref("font-variant")}} value.
+
<font-stretch>
+
A {{cssxref("font-stretch")}} value.
+
<weight>
+
A font weight value.
+
<style>
+
A font style value.
+
+ +

You can specify a font on the user's local computer by name using the local() syntax. If that font isn't found, other sources will be tried until one is found.

+ +

範例

+ +

這個範例指定一個可供下載的字型，並套用至 document 的整個 body。

+ +

檢視線上範例

+ +
<html>
+<head>
+  <title>Web Font Sample</title>
+  <style type="text/css" media="screen, print">
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  </style>
+</head>
+<body>
+  This is Bitstream Vera Serif Bold.
+</body>
+</html>
+
+ +

這個範例會套用使用者本地的 "Helvetica Neue Bold" 字型，只有當使用者未安裝該字型（兩種名稱都試過了），才會下載 "MgOpenModernaBold.ttf" 字型：

+ +
@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+  local("HelveticaNeue-Bold"),
+  url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+
+ +

注意事項

+ + + +

規格文件

+ + + + + + + + + + + + + + + + + + + + + +
規格文件狀態註解
{{SpecName('WOFF1.0', '', 'WOFF font format')}}{{Spec2('WOFF1.0')}}字型格式規格文件
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}{{Spec2('CSS3 Fonts')}} 
+ +

瀏覽器相容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
功能特色Firefox (Gecko)ChromeInternet ExplorerOperaSafari
基本支援{{CompatGeckoDesktop("1.9.1")}}4.04.010.03.1
WOFF{{CompatGeckoDesktop("1.9.1")}}6.09.011.105.1
SVG 字型{{CompatNo}}
+ {{unimplemented_inline(119490)}}		有{{CompatNo}}有有
unicode-range +

yes ({{bug(443976)}})

+ 		有9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
功能特色AndroidFirefox 行動版 (Gecko)IE 行動版Opera MiniOpera 行動版Safari 行動版
基本支援{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatUnknown}}{{CompatNo}}10.0{{CompatVersionUnknown}}
WOFF{{CompatNo}}{{CompatGeckoMobile("5.0")}}{{CompatUnknown}}{{CompatNo}}11.0{{CompatNo}}
SVG 字型{{CompatNo}}{{CompatNo}}
+ {{unimplemented_inline(119490)}}		{{CompatUnknown}}{{CompatNo}}10.0{{CompatVersionUnknown}}
unicode-range     {{CompatVersionUnknown}}
+
+ +

注意事項

+ + + +

詳見

+ + diff --git a/files/zh-tw/web/css/@media/height/index.html b/files/zh-tw/web/css/@media/height/index.html new file mode 100644 index 0000000000..cb15e99e80 --- /dev/null +++ b/files/zh-tw/web/css/@media/height/index.html @@ -0,0 +1,77 @@ +--- +title: height +slug: Web/CSS/@media/height +translation_of: Web/CSS/@media/height +--- +

height 屬於 CSS 的媒體功能之一，其值為可視區域 (viewport) 的高度，像是 CSS 的 <length>。

+ +

規格

+ + + + + + + + + + + + + + + + +
規格狀態註釋
{{SpecName('CSS3 Media Queries', '#height', 'height')}}{{Spec2('CSS3 Media Queries')}}初始定義。
+ +

瀏覽器相容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/zh-tw/web/css/@media/index.html b/files/zh-tw/web/css/@media/index.html new file mode 100644 index 0000000000..11f39d07b6 --- /dev/null +++ b/files/zh-tw/web/css/@media/index.html @@ -0,0 +1,377 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - At-rule + - CSS + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/@media +--- +

{{CSSRef}}

+ +

概要

+ +

@media CSS at-rule 與一組被大括弧隔開、並由 media query 條件定義的 CSS 巢狀區塊有關。@media at-rule 不只能用在最頂層的 CSS 區塊，也能在任何 CSS conditional-group at-rule 使用。

+ +

@media at-rule 能透過 CSS object model 介面 {{domxref("CSSMediaRule")}} 通行。

+ +

語法

+ +
{{csssyntax}}
+ +

A <media-query> is composed of a optional media type and/or a number of media features.

+ +

Media types

+ +
+
all
+
Suitable for all devices.
+
print
+
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.
+
screen
+
Intended primarily for color computer screens.
+
speech
+
Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
+
+ +
Note: CSS2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, aural), but they were deprecated in Media Queries 4 and shouldn't be used.
+ +

Media Features

+ +

Each media feature tests for one specific feature of the browser or device.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameSummaryNotes
widthViewport width
heightViewport height
aspect-ratioWidth-to-height aspect ratio of the viewport
orientationOrientation of the viewport
resolutionPixel density of the output device
scanScanning process of the output device
gridIs the device a grid or bitmap?
update-frequencyHow quickly (if at all) can the output device modify the appearance of the contentAdded in Media Queries Level 4
overflow-blockHow does the output device handle content that overflows the viewport along the block axis?Added in Media Queries Level 4
overflow-inlineCan content that overflows the viewport along the inline axis be scrolled?Added in Media Queries Level 4
colorNumber of bits per color component of the output device, or zero if the device isn't color.
color-indexNumber of entries in the output device's color lookup table, or zero if the device does not use such a table.
display-modeThe display mode of the application, as specified in the web app manifest's display member.Defined in the Web App Manifest spec.
monochromeBits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome.
inverted-colorsIs the user agent or underlying OS inverting colors?Added in Media Queries Level 4
pointerIs the primary input mechanism a pointing device, and if so, how accurate is it?Added in Media Queries Level 4
hoverDoes the primary input mechanism allow the user to hover over elements?Added in Media Queries Level 4
any-pointerIs any available input mechanism a pointing device, and if so, how accurate is it?Added in Media Queries Level 4
any-hoverDoes any available input mechanism allow the user to hover over elements?Added in Media Queries Level 4
light-levelCurrent ambient light levelAdded in Media Queries Level 4
scriptingIs scripting (e.g. JavaScript) available?Added in Media Queries Level 4
device-width {{obsolete_inline}}Width of the rendering surface of the output deviceDeprecated in Media Queries Level 4
device-height {{obsolete_inline}}Height of the rendering surface of the output deviceDeprecated in Media Queries Level 4
device-aspect-ratio {{obsolete_inline}}Width-to-height aspect ratio of the output deviceDeprecated in Media Queries Level 4
-webkit-device-pixel-ratio {{non-standard_inline}}Number of physical device pixels per CSS pixelNonstandard; WebKit/Blink-specific. If possible, use the resolution media feature instead.
-webkit-transform-3d {{non-standard_inline}}Are CSS 3D {{cssxref("transform")}}s supported?Nonstandard; WebKit/Blink-specific
-webkit-transform-2d {{non-standard_inline}}Are CSS 2D {{cssxref("transform")}}s supported?Nonstandard; WebKit-specific
-webkit-transition {{non-standard_inline}}Are CSS {{cssxref("transition")}}s supported?Nonstandard; WebKit-specific
-webkit-animation {{non-standard_inline}}Are CSS {{cssxref("animation")}}s supported?Nonstandard; WebKit-specific
+ +

Examples

+ +
@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+@media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4 }
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}{{Spec2('Compat')}}Standardizes the -webkit-device-pixel-ratio and -webkit-transform-3d media features.
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}{{Spec2('CSS3 Conditional')}}Defines the basic syntax of the @media rule.
{{SpecName('CSS4 Media Queries', '#media', '@media')}}{{Spec2('CSS4 Media Queries')}} +

Added scripting, pointer, hover, light-level, update-frequency, overflow-block, and overflow-inline media features.
+ Deprecated all media types except for screen, print, speech, and all.
+ Made the syntax more flexible by adding, among other things, the or keyword.

+
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}{{Spec2('CSS3 Media Queries')}}No change.
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (all, print, screen)1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop(1.7) }}6.09.21.3
speech{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}9.2{{CompatNo}}
Media features1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop(1.7) }}9.09.21.3
display-mode media feature{{CompatUnknown}}{{CompatNo}}{{ CompatGeckoDesktop(47) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (all, print, screen)1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile(1.7) }}{{CompatVersionUnknown}}9.03.1
speech{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}9.0{{CompatNo}}
Media features1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile(1.7) }}{{CompatVersionUnknown}}9.03.1
display-mode media feature{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/zh-tw/web/css/@viewport/height/index.html b/files/zh-tw/web/css/@viewport/height/index.html new file mode 100644 index 0000000000..e883d44041 --- /dev/null +++ b/files/zh-tw/web/css/@viewport/height/index.html @@ -0,0 +1,120 @@ +--- +title: height +slug: Web/CSS/@viewport/height +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

概要

+ +

高度 的 CSS 描述符是用於設定兩者的簡易描述符 {{cssxref("@viewport/min-height", "min-height")}} 與 {{cssxref("@viewport/max-height", "max-height")}} 的可視區域(viewport)。提供一個可視區域的長度值，將設定兩者的最小高度與最大高度的值。

+ +

如果提供了兩個可視區域(viewport)，第一個值將設定為最小高度，而第二個值將設定為最大高度。

+ +

語法

+ +
/* One value */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Two values */
+height: 320px 200px;
+
+ +

值

+ +
+
auto
+
使用 CSS 描述符來進行值的計算。
+
<length>
+
非負絕對值或相對長度。
+
<percentage>
+
初始可視區域的相對寬度或相對高度百分比的縮放係數為 1.0，且必須是非負數。
+
+ +

正式語法

+ +
{{csssyntax}}
+
+ +

舉例

+ +
@viewport {
+  height: 500px;
+}
+ +

格式

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}Initial definition
+ +

瀏覽器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support29 (behind a flag){{CompatNo}}10 {{property_prefix("-ms")}}11.10
+ Removed in 15
+ Reintroduced behind a flag in 16		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.429{{CompatNo}}10{{property_prefix("-ms")}}11.10
+ Removed in 15
+ Reintroduced behind a flag in 16		{{CompatNo}}
+
diff --git a/files/zh-tw/web/css/@viewport/index.html b/files/zh-tw/web/css/@viewport/index.html new file mode 100644 index 0000000000..f03aaee77b --- /dev/null +++ b/files/zh-tw/web/css/@viewport/index.html @@ -0,0 +1,159 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +tags: + - Adaptation + - At-rule + - CSS + - Device + - NeedsContent + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/@viewport +--- +

{{CSSRef}}

+ +

Summary

+ +

The @viewport CSS at-rule contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.

+ +

Syntax

+ +

A zoom factor of 1.0 or 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.

+ +

Descriptors

+ +

Browsers are supposed to ignore unrecognized descriptors.

+ +
+
min-width
+
Used in the determination of the width of the viewport when the document is first displayed.
+
max-width
+
Used in the determination of the width of the viewport when the document is first displayed.
+
width
+
A shorthand descriptor for setting both min-width and max-width
+
min-height
+
Used in the determination of the height of the viewport when the document is first displayed.
+
max-height
+
Used in the determination of the height of the viewport when the document is first displayed.
+
height
+
A shorthand descriptor for setting both min-height and max-height
+
zoom
+
Sets the initial zoom factor.
+
min-zoom
+
Sets the minimum zoom factor.
+
max-zoom
+
Sets the maximum zoom factor.
+
user-zoom
+
Controls whether or not the user should be able to change the zoom factor.
+
orientation
+
Controls the document's orientation.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+@viewport {
+  orientation: landscape;
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support29 (behind a flag) [4]{{CompatNo()}} [2]10 {{property_prefix("-ms")}}11.10
+ Removed in 15
+ Reintroduced behind a flag in 16		{{CompatNo}} [3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.429{{CompatNo}} [2]10{{property_prefix("-ms")}}[1]11.10
+ Removed in 15
+ Reintroduced behind a flag in 16		{{CompatNo}} [3]
+
+ +

[1] There is a bug in IE Mobile 10 on older versions of Windows Phone 8, where device-width, when used within @-ms-viewport, evaluates to the screen width in physical pixels rather than normalized CSS pixels, which is wrong according to the specification. However, when used within a viewport {{HTMLElement("meta")}} tag, device-width evaluates correctly. According to Microsoft, this bug was fixed in Windows Phone 8 Update 3 (a.k.a. GDR3), although there are some reports that the Lumia Black GDR3 update did not fix the bug (at least on the Lumia 920). For more details and a workaround, see Tim Kadlec's blog post "Windows Phone 8 and Device-Width".

+ +

[2]: See {{bug(747754, 'summary')}}

+ +

[3]: See {{webkitbug(95959)}}

+

[4]: See Chromium issue #235457: Enable @viewport on all platforms

+

See also

+ + diff --git a/files/zh-tw/web/css/_colon_first-child/index.html b/files/zh-tw/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..195449ca3d --- /dev/null +++ b/files/zh-tw/web/css/_colon_first-child/index.html @@ -0,0 +1,154 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - CSS Pseudo-class + - Layout + - Reference + - Web +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

:first-child是CSS當中的一種偽類別（pseudo-class），代表任何身為長子的元素（親元素的第一個子元素）。

+ +

語法

+ +
{{csssyntax}}
+
+ +

範例

+ +

範例 1

+ +

HTML 內文

+ +
<div>
+  <span>This span is limed!</span>
+  <span>This span is not. :(</span>
+</div>
+
+ +

CSS 內文

+ +
span:first-child {
+    background-color: lime;
+}
+
+ +

呈現效果如下：

+ +

{{EmbedLiveSample('範例_1',300,50)}}

+ +

範例 2 - 使用 UL

+ +

HTML 內文

+ +
<ul>
+  <li>List 1</li>
+  <li>List 2</li>
+  <li>List 3</li>
+</ul>
+ +

CSS 內文

+ +
li{
+  color:red;
+}
+li:first-child{
+  color:green;
+}
+ +

呈現效果如下：

+ +

{{EmbedLiveSample('範例_2_-_使用_UL',300,100)}}

+ +

規格

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
規格狀態註解
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}無變更
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}無變更
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}初始定義
+ +

瀏覽器相容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
功能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基礎支援4.0{{CompatGeckoDesktop("1.9")}}7[1]9.54
+
+ +
+ + + + + + + + + + + + + + + + + + + +
功能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基礎支援1.0{{CompatGeckoMobile("1.9.1")}}7[1]10.03.1
+
+ +

[1] 在不重新載入網頁的情況下，Internet Explorer 7 的樣式表並不會套用在動態新增的元素上。在 Internet Explorer 8，若元素是以點擊連結而形成的，則 first-child 在該連結不被選取後才有作用。

+ +

參見

+ + diff --git a/files/zh-tw/web/css/_colon_first-of-type/index.html b/files/zh-tw/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..93a524c4b7 --- /dev/null +++ b/files/zh-tw/web/css/_colon_first-of-type/index.html @@ -0,0 +1,162 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - CSS 虛擬類別 + - 參考 + - 外觀 + - 網頁 +translation_of: 'Web/CSS/:first-of-type' +--- +
{{CSSRef}}
+ +

在 CSS 虛擬類別（pseudo-class）中，:first-of-type 代表本節點為兄弟節點中第一個此類型節點。

+ +
/* 選取第一個出現在父節點下的<p>，不考慮其在所有子節點中的位置。 */
+p:first-of-type {
+  color: red;
+}
+ +
+

附註: 在初始定義中，被選取的節點必須擁有父節點。從選取器層級4（Selectors Level 4）開始已經不再有這個限制了。

+
+ +

語法

+ +
{{csssyntax}}
+
+ +

範例

+ +

例一：選取第一段文章

+ +

來考慮以下 HTML:

+ +
<h2>Heading</h2>
+
+<p>Paragraph</p>
+
+<p>Paragraph</p>
+ +

及 CSS:

+ +
p:first-of-type {
+  color: red;
+}
+ +

會有這樣的效果 － 只有第一段文章變為紅色，因為它是 body 中第一個文章節點：

+ +

{{EmbedLiveSample('Example_1_Simple_first_paragraph')}}

+ +

例二：預定通用選擇器（Assumed universal selector）

+ +

這個範例展示了當沒有指定一般選擇器（simple selector）時，通用選擇器是如何被預判。

+ +

首先來看 HTML：

+ +
<div>
+  <span>This `span` is first!</span>
+  <span>But this `span` isn't.</span>
+  <span>This <em>nested `em` is</em>!</span>
+  <span>And so is this <span>nested `span`</span>!</span>
+  <b>This `b` qualifies!</b>
+  <span>This final `span` does not.</span>
+</div>
+
+ +

接著是 CSS：

+ +
div :first-of-type {
+  background-color: lime;
+}
+ +

會有這樣的效果:

+ +

{{EmbedLiveSample('Example_2_Assumed_universal_selector','100%', '120')}}

+ +

特定規格

+ + + + + + + + + + + + + + + + + + + + + +
規格狀態附註
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}配對節點不需要具有父節點。
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}初始定義。
+ +

瀏覽器相容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.010.03.2
+
+ +

參見

+ + diff --git a/files/zh-tw/web/css/_colon_lang/index.html b/files/zh-tw/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..f79d142f09 --- /dev/null +++ b/files/zh-tw/web/css/_colon_lang/index.html @@ -0,0 +1,98 @@ +--- +title: ':lang()' +slug: 'Web/CSS/:lang' +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

:lang() 是一種 CSS 偽類 ( pseudo-class )。它會根據括號中指定的語系，來選擇使用的元素。

+ +
/* 選取任何語言屬性為英文 (en) 的 <p> */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

注意： 在 HTML 中，語言是通過 {{htmlattrxref("lang")}} 屬性和 {{HTMLElement("meta")}} 元素的組合來決定的, 也可能是通過協議的信息來確定 (例如 HTTP 表頭). 對於其他文檔類型，也可能存在其他用於確定語言的方法。

+
+ +

語法 Syntax

+ +

語法格式 Formal syntax

+ +
{{csssyntax}}
+ +

參數 Parameter

+ +
+
<language-code>
+
{{cssxref("<string>")}} 代表你要指定的語言。可接受的值為 HTML 規範中指定的值。
+
+ +

範例 Example

+ +

在此例中，:lang() 偽類 會依據 “引用元素 quote” ({{htmlElement("q")}}) 的父層來選擇 子組合子 ( child combinators )。 請注意，此處演示的方法並不是唯一的，並且最好的方式，是依據文檔類型來確定。還要注意的是， {{glossary("Unicode")}} 的值，有明確指定到那些你要使用的字符。

+ +

HTML

+ +
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
+<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
+<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
+
+ +

CSS

+ +
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+
+ +

結果 Result

+ +

{{EmbedLiveSample('Example', 350)}}

+ +

技術規格 Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
規格 Specification狀態 Status註 Comment
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}Adds wildcard language matching and comma-separated list of languages.
+ 添加萬用字符語言匹配，且逗號分隔語言列表。
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}沒有重大變化。
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}初步定義。
+ +

瀏覽器兼容性 Browser compatibility

+ +
+ + +

{{Compat("css.selectors.lang")}}

+
+ +

其他參考 See also

+ + diff --git a/files/zh-tw/web/css/_colon_target/index.html b/files/zh-tw/web/css/_colon_target/index.html new file mode 100644 index 0000000000..74d1767fb9 --- /dev/null +++ b/files/zh-tw/web/css/_colon_target/index.html @@ -0,0 +1,275 @@ +--- +title: ':target' +slug: 'Web/CSS/:target' +translation_of: 'Web/CSS/:target' +--- +
{{CSSRef}}
+ +

The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document..

+ +

URIs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named section2:
+ http://example.com/folder/document.html#section2
+ The anchor can be any element with an id attribute, e.g. <h1 id="section2"> in our example. The target element h1 can be represented by the :target pseudo-class.

+ +
Note: The id attribute was new in HTML 4 (December 1997).  In old-style HTML <a> is a target element.  The :target pseudo-class applies to those targets as well.
+ +

範例

+ +
:target { outline: solid red }  /* draw a red, solid line around the target element */
+
+ +
/* example code for userContent.css or any web pages;
+   a red/yellow arrow indicates the target element */
+
+:target {
+ -webkit-box-shadow: 0.2em 0.2em 0.3em #888;
+    -moz-box-shadow: 0.2em 0.2em 0.3em #888;
+         box-shadow: 0.2em 0.2em 0.3em #888;
+}
+
+:target:before {
+  font:           70% Arial,"Nimbus Sans L",sans-serif !important;
+  content:        "\25ba";  /* ► */
+  color:          red;
+  background:     gold;
+  border:         solid thin;
+  padding-left:   1px;
+  display:        inline-block;
+  margin-right:   0.13em;
+  vertical-align: 20%;
+}
+
+ +

Working with display: none elements…

+ +

The :target pseudo-class also works fine with undisplayed elements:

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>:target pseudoclass example</title>
+<style>
+#newcomment {
+  display: none;
+}
+
+#newcomment:target {
+  display: block;
+}
+</style>
+
+</head>
+<body>
+ <p><a href="#newcomment">Add a comment</a></p>
+ <div id="newcomment">
+  <form>
+  <p>Write your comment:<br />
+  <textarea></textarea></p>
+  </form>
+ </div>
+</body>
+</html>
+
+ +

Creating a pure CSS "lightbox"

+ +

The :target pseudo-class is useful to switch on/off some invisible elements. In this way you can create a pure-CSS lightbox (live demo).

+ +
+
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>MDN Example &ndash; CSS Lightbox</title>
+<style type="text/css">
+div.lightbox {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+div.lightbox:target {
+  display: table;
+}
+
+div.lightbox figure {
+  display: table-cell;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+div.lightbox figure figcaption {
+  display: block;
+  margin: auto;
+  padding: 8px;
+  background-color: #ddbbff;
+  height: 250px;
+  position: relative;
+  overflow: auto;
+  border: 1px #000000 solid;
+  border-radius: 10px;
+  text-align: justify;
+  font-size: 14px;
+}
+
+div.lightbox figure .closemsg {
+  display: block;
+  margin: auto;
+  height: 0;
+  overflow: visible;
+  text-align: right;
+  z-index: 2;
+  cursor: default;
+}
+
+div.lightbox figure .closemsg, div.lightbox figure figcaption {
+  width: 300px;
+}
+
+.closemsg::after {
+  content: "\00D7";
+  display: inline-block;
+  position: relative;
+  right: -20px;
+  top: -10px;
+  z-index: 3;
+  color: #ffffff;
+  border: 1px #ffffff solid;
+  border-radius: 10px;
+  width: 20px;
+  height: 20px;
+  line-height: 18px;
+  text-align: center;
+  margin: 0;
+  background-color: #000000;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.closemsg::before {
+  content: "";
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+  opacity: 0.85;
+}
+</style>
+</head>
+
+<body>
+
+<h1>Pure CSS Lightbox</h1>
+
+<p>Some sample text&hellip;</p>
+
+<p>[ <a href="#example1">Open example #1</a> | <a href="#example2">Open example #2</a> ]</p>
+
+<p>Another sample text&hellip;</p>
+
+<div class="lightbox" id="example1">
+  <figure>
+    <a href="#" class="closemsg"></a>
+    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo enim venenatis pulvinar. Proin mattis lorem vitae diam scelerisque hendrerit. Fusce cursus imperdiet mauris, vitae hendrerit velit dignissim a. Suspendisse potenti. Aenean feugiat facilisis diam, in posuere sapien mattis vel. Proin molestie rutrum diam, pharetra feugiat ligula sollicitudin sed. Etiam cursus diam quis tellus aliquam gravida. Aliquam erat volutpat.<br />
+    Etiam varius adipiscing mi eget imperdiet. Nulla quis vestibulum leo. Integer molestie massa ut massa commodo in blandit purus aliquam. Mauris sit amet posuere massa. Ut a eleifend augue. Proin sodales mauris nec tellus pharetra dictum.</figcaption>
+  </figure>
+</div>
+
+<div class="lightbox" id="example2">
+  <figure>
+    <a href="#" class="closemsg"></a>
+    <figcaption>Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna. Etiam ullamcorper augue quis orci posuere et tincidunt augue semper. Maecenas varius augue eu orci auctor bibendum tristique ligula egestas. Morbi pharetra tortor iaculis erat porta id aliquam leo cursus. Ut nec elit vel mauris dapibus lacinia eget sed odio.</figcaption>
+  </figure>
+</div>
+
+</body>
+</html>
+
+ +

規範

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}{{Spec2("CSS4 Selectors")}}No changes
{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}{{Spec2("CSS3 Selectors")}}Initial definition
+ +

瀏覽器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.3")}}99.51.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatGeckoMobile("1.3")}}9.09.52.0
+
+ +

參見

+ + diff --git a/files/zh-tw/web/css/_doublecolon_first-letter/index.html b/files/zh-tw/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..b9d4c7a6f9 --- /dev/null +++ b/files/zh-tw/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,206 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +translation_of: 'Web/CSS/::first-letter' +--- +

{{ CSSRef() }}

+ +

概要

+ +

::first-letter CSS 虛擬元素選取了一個區塊第一行的第一個字母，如果那一行前面沒有其他內容（例如圖片或是行內表格）。

+ +

The first letter of an element is not necessarily trivial to identify:

+ + + +

A first line has meaning only in a block-container box, therefore the ::first-letter pseudo-element has an effect only on elements with a {{ cssxref("display") }} value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect.

+ +

Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the ::first-letter pseudo-element:

+ + + +

As this list will be extended in the future, it is recommended that you not use any other properties inside the declaration block, in order to keep the CSS future-proof.

+ +
+

In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.

+ +

As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.

+ +

If legacy browsers must be supported, :first-letter is the only viable choice; if not, ::first-letter is preferred.

+
+ +

Example

+ +

Make the first letter of every paragraph red and big.

+ +

HTML Content

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
+  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.</p>
+<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
+<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+  esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
+  iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
+  nulla facilisi.</p>
+<p>-The beginning of a special punctuation mark.</p>
+<p>_The beginning of a special punctuation mark.</p>
+<p>"The beginning of a special punctuation mark.</p>
+<p>'The beginning of a special punctuation mark.</p>
+<p>*The beginning of a special punctuation mark.</p>
+<p>#The beginning of a special punctuation mark.</p>
+<p>「特殊的汉字标点符号开头。</p>
+<p>《特殊的汉字标点符号开头。</p>
+<p>“特殊的汉字标点符号开头。</p>
+ +

CSS Content

+ +
p::first-letter { /* Use :first-letter if support for IE 8 or earlier is needed */
+  color: red;
+  font-size: 130%;
+}
+ +

Output

+ +

{{ EmbedLiveSample('Example', 679, 390) }}

+ +

規範

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
規範狀態註解
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}Generalized allowed properties to typesetting, text decoration and inline layout properties, {{ cssxref("opacity") }} and {{ cssxref("box-shadow") }}.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}Allowed the usage of {{cssxref("text-shadow")}} with ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}Defined edge-case behavior like in list items, or with language specific behavior (like the Dutch digraph IJ). The two-colon syntax for pseudo-elements has been introduced.
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}No significant change, though CSS Level 2 still used the one-colon syntax.
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}The initial definition used the one-colon syntax.
+ +

瀏覽器相容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}9.07.01.0 (85)
Old one-colon syntax (:first-letter)1.0{{ CompatGeckoDesktop("1") }}5.53.51.0 (85)
Support for the Dutch digraph IJ{{ CompatNo() }}{{ CompatNo() }} {{ bug("92176") }} {{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Old one-colon syntax (:first-letter){{ CompatUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Support for the Dutch digraph IJ{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

參見

+ + diff --git a/files/zh-tw/web/css/animation-fill-mode/index.html b/files/zh-tw/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..9ac0552304 --- /dev/null +++ b/files/zh-tw/web/css/animation-fill-mode/index.html @@ -0,0 +1,158 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +translation_of: Web/CSS/animation-fill-mode +--- +
 
+ +

animation-fill-mode  CSS 属性指定CSS动画应该如何在其执行前后的样式展示情况。

+ +
/* Single animation */
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Multiple animations */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+
+ +

使用提示 animation 来一次设置所有动画属性通常很方便。

+ +

语法

+ +

属性值

+ +
+
none
+
不执行动画时，动画不会应用任何样式。该元素会使用其keyframes关键动画帧规则来显示动画。这是默认值。
+
forwards
+
动画执行后停留到最后一个关键帧动画的计算值，简单来说执行结束动画会停留到结束时候的状态，不会是动画执行之前的效果。比如一个元素从左往右运动，添加当前属性值 forwards 元素会停留到动画执行结束后的右边而不是最初的左边。可以看以下图
+
+
当然最后动画停留显示的关键帧会取决于 "animation-direction" 和 "animation-iteration-count"这两个属性 运行方向和运行次数: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
animation-directionanimation-iteration-countlast keyframe encountered
normal偶数或奇数值100% 或 to
reverse偶数或奇数值0% 或 from
alternate偶数值0% 或 from
alternate奇数值100% 或 to
alternate-reverse偶数值100% 或 to
alternate-reverse奇数值0% 或 from
+
+
backwards
+
与上面 forwards 值效果相反，动画执行后停留到第一个关键帧动画，准确说是没有执行动画之前的初始状态。
+
【（the animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the "animation-delay" period.）原文大概意思是会停留第一个关键帧，并会保留 "animation-delay" 延迟属性的所设定周期。】
+
会在延迟之后才开始执行关键帧动画，而不是一开始使用第一帧进行停留，具体可以结合both的例子进行尝试。
+
+
第一个相关关键帧会取决于 "animation-direction" 方向属性: + + + + + + + + + + + + + + + + + +
animation-directionfirst relevant keyframe
normal 或 alternate0% 或 from
reverse 或 alternate-reverse100% 或 to
+
+
+ +
+
both
+
动画将遵循开始和结束后的帧动画进行停留，也就是说会从第一帧开始停留显示，动画执行之后会停留到动画结束时的状态。
+
+
与上面两个值的差别是，如果元素使用 forwards、backwards 两个值会在没有添加动画之前的展示状态进行停留，执行动画的时候才会开始执行关键帧，有这么一些细小的差别。
+
+ +
+

PS: 当您在一个animation-*属性上指定多个逗号分隔的值时，它们将被分配给 "animationname" 属性中指定的动画，这取决于有多少动画。有关更多信息，请参见设置多个动画属性值。

+
+ +

Example

+ +

You can see the effect of animation-fill-mode in the following example. It demonstrates how, for an animation that runs for an infinite time, you can cause it to remain in its final state rather than reverting to the original state (which is the default).

+ +

HTML

+ +
<p>Move your mouse over the gray box!</p>
+<div class="demo">
+ <div class="growsandstays">This grows and stays big.</div>
+  <div class="grows">This just grows.</div>
+</div>
+ +

CSS

+ +
.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+}
+
+@keyframes grow {
+  0% { font-size: 0; }
+  100% { font-size: 40px; }
+}
+
+.demo:hover .grows {
+  animation-name: grow;
+  animation-duration: 3s;
+}
+
+.demo:hover .growsandstays {
+  animation-name: grow;
+  animation-duration: 3s;
+  animation-fill-mode: forwards;
+}
+ +

 

+ +

查看 CSS animations 更多有關的例子

+ +

相關鏈接

+ + diff --git a/files/zh-tw/web/css/attr()/index.html b/files/zh-tw/web/css/attr()/index.html new file mode 100644 index 0000000000..7cce14ec01 --- /dev/null +++ b/files/zh-tw/web/css/attr()/index.html @@ -0,0 +1,200 @@ +--- +title: attr +slug: Web/CSS/attr() +translation_of: Web/CSS/attr() +--- +
{{CSSRef}}
+ +

概要

+ +

attr() CSS 函數使用於樣式取得被選取之元素中特定屬性的值。它也可以用在擬元素選取項(Pseudo-element)，在此情形下，其屬性值來自於擬元素選取項相依的原始元素。

+ +

attr() 函數可以被用在任何 CSS 屬性，但除了 content 以外的屬性皆屬於實驗階段。

+ +

語法

+ +
/* Simple usage */
+attr(data-count);
+attr(title);
+
+/* With type */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* With fallback */
+attr(data-count number, 0);
+attr(src url, '');
+attr(data-width px, inherit);
+attr(data-something, 'default');
+
+ +

值

+ +
+
attribute-name
+
在 CSS 中參考之 HTML 元素的屬性名稱。
+
<type-or-unit> {{experimental_inline}}
+
Is a keyword representing either the type of the attribute's value, or its unit, as in HTML some attributes have implicit units. If the use of <type-or-unit> as a value for the given attribute is invalid, the attr() expression will be invalid too. If omitted, it defaults to string. The list of valid values are: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeywordAssociated typeCommentDefault value
string{{cssxref("<string>")}}The attribute value is treated as a CSS {{cssxref("<string>")}}.  It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.An empty string
color {{experimental_inline}}{{cssxref("<color>")}}The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("<string>")}} value.
+ Leading and trailing spaces are stripped.		currentColor
url {{experimental_inline}}{{cssxref("<uri>")}}The attribute value is parsed as a string that is used inside a CSS url()function.
+ Relative URL are resolved relatively to the original document, not relatively to the style sheet.
+ Leading and trailing spaces are stripped.		The url about:invalid that points to a non-existent document with a generic error condition.
integer {{experimental_inline}}{{cssxref("<integer>")}}The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
number {{experimental_inline}}{{cssxref("<number>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
length {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
+ If the given unit is a relative length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ If the given unit is a relative length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
angle {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
deg, grad, rad {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
time {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
s, ms {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
frequency {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
Hz, kHz {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
% {{experimental_inline}}{{cssxref("<percentage>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ If the given value is used as a length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0%, or, if 0% is not a valid value for the property, the property's minimum value.
+
+
<fallback> {{experimental_inline}}
+
The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
+
+ +

形式語法

+ +
{{csssyntax}}
+ +

範例

+ +
p::before {
+  content: attr(data-foo) " ";
+}
+
+ +
<p data-foo="hello">world</p>
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", '100%', '80')}}

+ +

規範

+ + + + + + + + + + + + + + + + + + + + + +
規範狀態註解
{{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}{{Spec2('CSS3 Values')}}Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.
{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}{{Spec2('CSS2.1')}}Limited to the {{cssxref("content")}} property; always return a {{cssxref("<string>")}}.
+ +

瀏覽器相容性

+ +

{{Compat("css.types.attr")}}

diff --git a/files/zh-tw/web/css/background-attachment/index.html b/files/zh-tw/web/css/background-attachment/index.html new file mode 100644 index 0000000000..138623a543 --- /dev/null +++ b/files/zh-tw/web/css/background-attachment/index.html @@ -0,0 +1,151 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-attachment +--- +
{{CSSRef}}
+ +

background-attachment 這個 CSS 屬性能夠設定，背景圖片的位置是否要固定在 {{glossary("viewport")}}（視圖）上，還是背景圖片會隨著它的 containing block（外層容器）一起滾動。

+ +
{{EmbedInteractiveExample("pages/css/background-attachment.html")}}
+ + + +

語法

+ +
/* Keyword values */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* Global values */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+
+ +

background-attachment 屬性的值，可以是下方清單中的其中之一。

+ +

Values

+ +
+
fixed
+
讓背景相對於 viewport（視圖）的移動是固定的。即便元素中的內容是可滾動的，背景也不會在滾動元素內容時跟著移動。(這個屬性與 {{cssxref("background-clip", "background-clip: text", "#text")}} 不相容。)
+
local
+
讓背景相對於元素的內容是固定的，且背景在滾動元素的內容時會跟著移動。另外，背景的繪製與定位區域是相對於元素的可滾動區域，而不是包裹著它們的邊框。
+
scroll
+
讓背景相對於元素本身是固定的，使背景在滾動元素的內容時不會跟著移動。（It is effectively attached to the element's border.）
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

例子

+ +

Simple example

+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Simple_example")}}

+ +

Multiple background images

+ +

這個屬性支援多個背景圖片。你可以對每個背景設定不同的 <attachment>。每個背景圖片會依序對應在 <attachment> 設定的類型。

+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
+      url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

Result

+ +

{{EmbedLiveSample("Multiple_background_images")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}{{Spec2('CSS3 Backgrounds')}}The shorthand property has been extended to support multiple backgrounds and the local value.
{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}{{Spec2('CSS2.1')}}No significant change.
{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}{{Spec2('CSS1')}}No significant change.
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.background-attachment")}}

+ +

See also

+ + diff --git a/files/zh-tw/web/css/background-color/index.html b/files/zh-tw/web/css/background-color/index.html new file mode 100644 index 0000000000..3c5cea28b3 --- /dev/null +++ b/files/zh-tw/web/css/background-color/index.html @@ -0,0 +1,115 @@ +--- +title: background-color +slug: Web/CSS/background-color +translation_of: Web/CSS/background-color +--- +
{{CSSRef}}
+ +

background-color CSS property 是用來設定HTML元素的背景顏色，值可以是顏色亦可以是特定關鍵字－－ transparent.

+ +

語法

+ +
background-color: red;
+background-color: rgb(255, 255, 128);
+background-color: hsla(50, 33%, 25%, 0.75);
+background-color: currentColor;
+background-color: transparent;
+background-color: #bbff00;
+
+background-color: inherit;
+
+ +

參數

+ +
+
<color>
+
一個 CSS {{cssxref("<color>")}} 用來表示一致的背景顏色。即便設定了一個或多個 {{cssxref("background-image")}} ，背景渲染上依舊會渲染這顏色，若是圖片並非不透明圖，在透明區域就能看見。在 CSS 中， transparent 是一種顏色
+
+ +

正式語法

+ +
{{csssyntax}}
+ +

範例

+ +

HTML

+ +
<div class="exampleone">
+ Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("範例","200","150")}}

+ +

規格定義

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}技術上來說，移除了 transparent 關鍵字，但實際上並未發生任何改變，因為它被列入至正式的 {{cssxref("<color>")}}
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}無變動
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}原始定義。
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + + + +

{{Compat("css.properties.background-color")}}

+

延伸閱讀

+ + diff --git a/files/zh-tw/web/css/border-image/border-image/index.html b/files/zh-tw/web/css/border-image/border-image/index.html new file mode 100644 index 0000000000..210a2663eb --- /dev/null +++ b/files/zh-tw/web/css/border-image/border-image/index.html @@ -0,0 +1,111 @@ +--- +title: border-image +slug: Web/CSS/border-image/border-image +tags: + - CSS +--- +

摘要

+ +

CSS 屬性 border-image 可以讓你在元素的邊框上擺上圖片。這讓呈現看似很複雜的一個網頁的小單元簡單很多，它可以省最多九個元素。

+ +
緊告：官方的 CSS3 規範描述的 border-image 屬性在這個功能被凍結並出現在 Gecko 1.9.1 的釋出版之後改變很多。因此，這項功能的語法跟呈現方法很可能在未來 Gecko 的釋出版改變。特別是選擇性的 border-width 參數，它覆蓋既有 border-width 取值的這項特性已經從規範移除了，因此勢必也會在未來的 Gecko 被拿掉。
+ +

瀏覽器會顯示 border-image 指定的圖片而不是 {{ cssxref("border-style") }} 給的邊框樣式，但是若它的取值是 none 或是因某些理由無法顯示該圖片，瀏覽器就會顯示邊框樣式。border-image 會畫一個額外的背景圖片在原來 {{ cssxref("background-image") }} 指 定的背景圖片之上。

+ + + +

語法

+ +
none |
+  [ <圖片> [ <數字> | <百分比> ]{1,4} [/ <邊框寬度>{1,4}]? ] && [ stretch | repeat | round ]{0,2}
+ +

取值

+ +
+
none
+
不顯示圖片，使用邊框樣式。
+
<圖片> （必填）
+
圖片值是一個 {{cssxref("<uri>")}}，例： url(http://example.org/image.png) 。
+
<數> | <百分比> （必填）
+
一個、兩個、三個、四個分別代表從頂邊、右邊、底邊、左邊從圖片外圍到切圖線的距離，將圖片切為九塊：四個角、四個邊跟一個中間部份。
+
+ 一個值的話，該值用於圖片的全部四個邊。
+ 兩個值得話，值用於：一、頂邊與底邊 二、右邊與左邊。
+ 三個值的話，值用於：一、頂邊 二、右邊與左邊 三、底邊。
+ 四個值的情況，四個值分邊用在圖片的頂邊、右邊、底邊、左邊。
+
+ 在 Gecko 1.9.1 (Firefox 3.5) 圖片的中間那個部份會被當做元素的背景。這在未來的版本可能會改變。
+
+ 百分比 由圖片的長度/寬度計算。
+ 數 但表圖片的像素（若為點陣圖）或向量座標（若為 SVG）。
+
<邊框寬度> （選擇性）
+
如果斜線 / 出現在屬性值的話，一個、兩個、三個或是四個在它之後的取值會被當成是 {{ cssxref("border-width") }} 的取值使用。取值的順序如同 {{ cssxref("border-width") }} 。
+
stretch | round | repeat （選擇性）
+
一個或兩個關鍵字，指定邊上的圖片跟中間部份要如何縮放及鋪擺。
+ stretch （預設值）縮放該圖片，使其與配置大小相等。
+ round 鋪擺該圖片，但也縮放它使得被配置範圍鋪滿整數張該圖片。
+ repeat   直接鋪擺該圖片。
+ 第一個關鍵字的對象是頂邊，中間跟底邊的圖片，而第二個關鍵字的對象是左邊跟右邊的邊框。如果第二個不存在，則沿用第一個關鍵字的設定。如果兩者皆不存在，預設值為 stretch。
+
+ +

範例

+ +

[這裡還需要一些活範例]

+ +
#header  { -moz-border-image: url(border.png) 27 27 27 27 round round; }
+
+.button  { -moz-border-image: url(button.png) 0 5 0 5; }
+
+.example { -moz-border-image: url(example.jpg) 3 4 6 8 / 10px 12px 14px 22px; }
+
+ +
/* 鮮見例，在 Firefox 3.5 下看起來像是完全伸展的 background-image */
+
+ div     { -moz-border-image: url(bgimage.png) 0; }
+
+ +

瀏覽器兼容性

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
瀏覽器最小版本支援
Internet Explorer------
Firefox (Gecko)3.5 (1.9.1)-moz-border-image
Opera10.5border-image
Safari (WebKit)3.0 (522)-webkit-border-image
+ +

規範

+ + + +

{{ languages( { "en": "en/CSS/-moz-border-image"} ) }}

diff --git a/files/zh-tw/web/css/border-image/index.html b/files/zh-tw/web/css/border-image/index.html new file mode 100644 index 0000000000..bd553c7d6e --- /dev/null +++ b/files/zh-tw/web/css/border-image/index.html @@ -0,0 +1,9 @@ +--- +title: border-image +slug: Web/CSS/border-image +--- +

 

+ +

This page was auto-generated because a user created a sub-page to this page.

+ +

 

diff --git a/files/zh-tw/web/css/border/index.html b/files/zh-tw/web/css/border/index.html new file mode 100644 index 0000000000..b7a8d098e3 --- /dev/null +++ b/files/zh-tw/web/css/border/index.html @@ -0,0 +1,134 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS + - CSS Borders + - CSS Property + - Layout + - Reference +translation_of: Web/CSS/border +--- +
{{CSSRef("CSS Borders")}}
+ +

border shorthand CSS 屬性可用來設定元素的邊框。它可以設定以下的值 {{Cssxref("border-width")}}、{{Cssxref("border-style")}} 以及 {{Cssxref("border-color")}}。

+ +
{{EmbedInteractiveExample("pages/css/border.html")}}
+ + + +

As with all shorthand properties, any omitted sub-values will be set to their initial value. Importantly, border cannot be used to specify a custom value for {{cssxref("border-image")}}, but instead sets it to its initial value, i.e., none.

+ +

The border shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, and {{Cssxref("border-color")}} properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., {{Cssxref("border-top")}} ) and logical (e.g., {{Cssxref("border-block-start")}}) border properties.

+ +

Borders vs. outlines

+ +

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

+ + + +

Syntax

+ +
/* style */
+border: solid;
+
+/* width | style */
+border: 2px dotted;
+
+/* style | color */
+border: outset #f33;
+
+/* width | style | color */
+border: medium dashed green;
+
+/* Global values */
+border: inherit;
+border: initial;
+border: unset;
+
+ +

The border property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

+ +
+

Note: The border will be invisible if its style is not defined. This is because the style defaults to none.

+
+ +

Values

+ +
+
<line-width>
+
Sets the thickness of the border. Defaults to medium if absent. See {{Cssxref("border-width")}}.
+
<line-style>
+
Sets the style of the border. Defaults to none if absent. See {{Cssxref("border-style")}}.
+
{{cssxref("<color>")}}
+
Sets the color of the border. Defaults to currentcolor if absent. See {{Cssxref("border-color")}}.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>
+
+ +

CSS

+ +
div {
+  border: 0.5rem outset pink;
+  outline: 0.5rem solid khaki;
+  box-shadow: 0 0 0 2rem skyblue;
+  border-radius: 12px;
+  font: bold 1rem sans-serif;
+  margin: 2rem;
+  padding: 1rem;
+  outline-offset: 0.5rem;
+}
+ +

Result

+ +

{{EmbedLiveSample('Example')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}{{Spec2('CSS3 Backgrounds')}}Removes specific support for transparent, as it is now a valid {{cssxref("<color>")}}; this has no practical impact.
+ Though it cannot be set to a custom value using the shorthand, border now resets {{cssxref("border-image")}} to its initial value (none).
{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}{{Spec2('CSS2.1')}}Accepts the inherit keyword. Also accepts transparent as a valid color.
{{SpecName('CSS1', '#border', 'border')}}{{Spec2('CSS1')}}Initial definition.
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border")}}

diff --git a/files/zh-tw/web/css/box-shadow/index.html b/files/zh-tw/web/css/box-shadow/index.html new file mode 100644 index 0000000000..4d23dc2d13 --- /dev/null +++ b/files/zh-tw/web/css/box-shadow/index.html @@ -0,0 +1,228 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Property + - CSS Styles + - HTML Colors + - Reference + - Shadows + - Styles + - Styling HTML + - box-shadow +translation_of: Web/CSS/box-shadow +--- +

{{CSSRef}}

+ +

box-shadow 屬性為一個逗號分隔的列表描述一個或多個的陰影效果. 這使的你能夠從幾乎任何元素的框架放入陰影. 如果一個標記了 {{cssxref("border-radius")}} 的元素也標記了 box shadow, 這將使得他們有相同的圓邊. 多重 box shadows 的 z-index 排序跟多重 text shadows 一樣(第一個備標記的陰影在最上面).

+ +

{{cssinfo}}

+ +

Box-shadow 產生器

+ +

Interactive tool 可以產生 box-shadow.

+ +

表達式

+ +
/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Any number of shadows, separated by commas */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+ +

參數

+ +
+

+ inset
+ 如果未指定（默認），則假定陰影為陰影（就好像該框被提升到內容之上）。 inset關鍵字的存在將陰影更改為幀內的陰影（就好像內容在框內被壓下）。在邊框內部（甚至是透明的）繪製插入陰影，在背景上方，但在內容下方。
+
+ <offset-x> <offset-y>
+ 這兩個 {{cssxref("<length>")}} 值用於設置陰影偏移量。 <offset-x>指定水平距離。負值將陰影置於元素的左側。 <offset-y>指定垂直距離。負值將陰影置於元素上方。有關可能的單位，請參見 {{cssxref("<length>")}}。 如果兩個值均為0，則陰影位於元素後面（如果設置了<blur-radius>和/或<spread-radius>，則可能會生成模糊效果）。
+
+ <blur-radius>
+ 這是第三個 {{cssxref("<length>")}} 值。此值越大，模糊越大，陰影變得越來越大。不允許使用負值。如果未指定，則為0（陰影邊緣清晰）。
+
+ <spread-radius>
+ 這是第四個 {{cssxref("<length>")}} 值。正值將導致陰影擴大並變大，負值將導致陰影縮小。如果未指定，則為0（陰影將與元素的大小相同）。
+
+ <color>
+ 有關可能的關鍵字和符號，請參閱 {{cssxref("<color>")}} 值。 如果未指定，則使用的顏色取決於瀏覽器 - 它通常是 {{cssxref("color")}} 屬性的值，但請注意，Safari在此情況下當前繪製透明陰影。
+
+ +

語法

+ +
{{csssyntax}}
+ +

範例

+ + + +
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+
+ +
box-shadow: 60px -16px teal;
+ +
box-shadow: 10px 5px 5px black;
+ +
box-shadow: 3px 3px red, -1em 0 0.4em olive;
+ +
box-shadow: inset 5em 1em gold;
+ +
box-shadow: 0 0 1em gold;
+ +
box-shadow: inset 0 0 1em gold;
+ +
box-shadow: inset 0 0 1em gold, 0 0 1em red;
+ +

規範

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

瀏覽相容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support10.0[1]
+ 1.0{{property_prefix("-webkit")}}		{{CompatGeckoDesktop("2.0")}}[3]
+ {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}		9.0[2]10.5[1]5.1[1]
+ 3.0 {{property_prefix("-webkit")}}
Multiple shadows10.0
+ 1.0{{property_prefix("-webkit")}}		{{CompatGeckoDesktop("2.0")}}
+ {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}		9.010.55.1
+ 3.0 {{property_prefix("-webkit")}}
inset keyword10.0
+ 4.0{{property_prefix("-webkit")}}		{{CompatGeckoDesktop("2.0")}}
+ {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}		9.010.55.1
+ 5.0 {{property_prefix("-webkit")}}
Spread radius10.0
+ 4.0{{property_prefix("-webkit")}}		{{CompatGeckoDesktop("2.0")}}
+ {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}		9.010.55.1
+ 5.0 {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureSafari MobileOpera MiniOpera MobileAndroid
Basic support +

5.0[1]
+ {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}

+ 		{{CompatUnknown}}{{CompatVersionUnknown }}[1]{{CompatVersionUnknown }}{{property_prefix("-webkit")}}[1]
Multiple shadows5.0
+ {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
inset keyword5.0
+ {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Spread radius5.0
+ {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a width of 100%, you'll see a scrollbar.

+ +

[2] Since version 5.5, Internet Explorer supports Microsoft's DropShadow and Shadow Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3). In order to get box-shadow in IE9 or later, you need to set {{cssxref("border-collapse")}} to separate.

+ +

[3] Gecko 13 {{geckoRelease(13)}} removed support for -moz-box-shadow. Since then, only the unprefixed version is supported. Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a width of 100%, you'll see a scrollbar.

diff --git a/files/zh-tw/web/css/box-sizing/index.html b/files/zh-tw/web/css/box-sizing/index.html new file mode 100644 index 0000000000..058f179918 --- /dev/null +++ b/files/zh-tw/web/css/box-sizing/index.html @@ -0,0 +1,94 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - CSS Box Model + - CSS Property + - Experimental + - Reference + - border-box + - box model + - content-box +translation_of: Web/CSS/box-sizing +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

概要

+ +

The box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

+ +

box-sizing  屬性 用於更改預設 CSS 盒子模型 中所計算的寬度和高度。可以使用此屬性來模擬不正確支持CSS盒子模型規範的瀏覽器的行為。

+ +

{{cssinfo}}

+ +

句法

+ +
/* Keyword values */
+box-sizing: content-box;
+box-sizing: border-box;
+
+/* Global values */
+box-sizing: inherit;
+box-sizing: initial;
+box-sizing: unset;
+
+ +

值

+ +
+
content-box
+
這是根據 CSS 標準的起始值和預設值。 {{Cssxref("width")}}  與  {{Cssxref("height")}} 只包括內容本身的寬和高， 不包括邊框（border）、內邊距（padding）、外邊距（margin）。注意：內邊距、邊框和外邊距都在這個盒子的外部。例如，如果 .box {width: 350px}; 而且 {border: 10px solid black;} ，那麼在瀏覽器中的渲染該容器的實際寬度將是370px，;
+
+ 簡單來說，尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。
+
border-box
+
 {{Cssxref("width")}} 和 {{Cssxref("height")}} 屬性包括內容（content），內邊距（padding）和邊框（border），但不包括外邊距（margin）。這是當文檔處於 Quirks 模式時 Internet Explorer 所使用的盒模型。注意，內邊距和邊框都將在盒子內 ，例如，.box {width: 350px; border: 10px solid black;} ，渲染出的容器寬度會固定在 350px，而內容（content）的寬度就會變成 330px， 因為邊框（border）佔了20px。內容框不能為負，並且進位到 0，使得不可能使用 border-box 使元素消失。
+
+ 這裡的維度計算為：
+
width = border + padding + 內容的  width，
+
height = border + padding + 內容的 height。
+
padding-box {{non-standard_inline}} {{deprecated_inline}}
+
The {{Cssxref("width")}} and {{Cssxref("height")}} properties include the content, the padding but neither the border, nor the margin. Only Firefox implemented this value, and it was removed in Firefox 50.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
/* support Firefox, Chrome, Safari, Opera, IE8+ and old Android */
+
+.example {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("css.properties.box-sizing")}}

+ +

See also

+ + diff --git a/files/zh-tw/web/css/clip/index.html b/files/zh-tw/web/css/clip/index.html new file mode 100644 index 0000000000..900be65c41 --- /dev/null +++ b/files/zh-tw/web/css/clip/index.html @@ -0,0 +1,174 @@ +--- +title: clip +slug: Web/CSS/clip +translation_of: Web/CSS/clip +--- +
{{CSSRef}}{{deprecated_header}}
+ +

總結

+ +

這個 clip CSS 屬性用來定義元素的哪一個部分是可見的. clip 屬性只能被賦予在絕對位置的元素(element)上, 像是帶有這些的CSS屬性的元素 {{cssxref("position","position:absolute")}} or {{cssxref("position","position:fixed")}}.

+ +
+

警告: 這個屬性被遺棄了. 請改用 {{cssxref("clip-path")}} .

+
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Keyword value */
+clip: auto;
+
+/* <shape> values */
+clip: rect(1px 10em 3rem 2ch);
+clip: rect(1px, 10em, 3rem, 2ch);
+
+/* Global values */
+clip: inherit;
+clip: initial;
+clip: unset;
+
+ +

Values

+ +
+
<shape>
+
A rectangular {{cssxref("<shape>")}} of the form rect(<top>, <right>, <bottom>, <left>) or of the form rect(<top> <right> <bottom> <left>) (which is a more backwards compatible syntax) <top> and <bottom> specify offsets from the inside top border edge of the box, and <right>, and <left> specify offsets from the inside left border edge of the box — that is, the extent of the padding box.
+
<top>, <right>, <bottom>, and <left> may either have a {{cssxref("<length>")}} value or auto. If any side's value is auto, the element is clipped to that side's inside border edge.
+
auto
+
The element does not clip (default value). Note that this is distinct from rect(auto, auto, auto, auto), which does clip to the inside border edges of the element.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

Examples

+ +
.dotted-border {
+   border: dotted;
+   position: relative;
+   width: 536px;
+   height: 350px;
+}
+
+#top-left, #middle, #bottom-right {
+   position: absolute;
+   top: 0px;
+}
+
+#top-left {
+   left: 360px;
+   clip: rect(0px, 175px, 113px, 0px);
+}
+
+
+#middle {
+   left: 280px;
+   clip: rect(119px, 255px, 229px, 80px);
+   /* standard syntax, unsupported by Internet Explorer 4-7 */
+}
+
+#bottom-right {
+   left: 200px;
+   clip: rect(235px 335px 345px 160px);
+   /* non-standard syntax, but supported by all major browsers*/
+}
+ +
<p class="dotted-border">
+   <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original Graphic" />
+   <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left">
+   <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle">
+   <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right">
+</p>
+ +

{{EmbedLiveSample('Examples', '689px', '410px')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Masks', '#clip-property', 'clip')}}{{Spec2('CSS Masks')}}Deprecates clip property, suggests {{cssxref("clip-path")}} as replacement.
{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}{{Spec2('CSS3 Transitions')}}Defines clip as animatable.
{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.01.0 (1.0)4.0[1]7.01.0 (85)[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer up to version 7.0 and Safari up to at least 5.1.7 incorrectly interpret clip: auto as clip: rect(auto, auto, auto, auto).

+ +

See also

+ + diff --git a/files/zh-tw/web/css/common_css_questions/index.html b/files/zh-tw/web/css/common_css_questions/index.html new file mode 100644 index 0000000000..b824c671c4 --- /dev/null +++ b/files/zh-tw/web/css/common_css_questions/index.html @@ -0,0 +1,165 @@ +--- +title: CSS 一般問題 +slug: Web/CSS/Common_CSS_Questions +tags: + - CSS + - 待審閱技術 + - 待審閱文字 + - 所有類別 +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

+

+

我的 CSS 合乎規格，但繪出的版面有誤

+

如果想讓大部分的瀏覽器都能正確繪製標準 HTML/CSS 頁面，便須於 HTML 檔案中放上完整的正確 DOCTYPE。 +

新近瀏覽器都有兩種佈局模式： +

+ +

以 Gecko 為核心的瀏覽器都有第三種近乎標準模式，其中只有一些些不合規範的地方。 +

如果你宣告的 DTD 不合標準或過期了，那麼瀏覽器就會進入 Quirks 模式。 +

以下是常用的 DTD 列表，可以讓瀏覽器進入標準或近乎標準模式。 +

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+

id 與 class 之間的差別

+

HTML 元素都可有 id 及 class 屬性。id 屬性是讓你為元素命名的，整個頁面中的元素名稱也不應有重複；class 屬性則可將元素歸為某特定類別，通常也會有很多元素屬於同一種類別 (意即 class 屬性值相同。) CSS 可以讓你以 id 或 class 來決定某元素的樣式。 +

如果你想指定某特定單一元素的樣式，則應使用 id。 +

+
+

若有很多個元素皆有相同樣式，則可使用 class。 +

這方面的資訊亦可參考 CSS 選取符。 +

+
+

恢復某特性的預設值

+

CSS2 並不提供任何指定某特性預設值的方法，所以要恢復某特性預設值的唯一方法就是重新指定此值。此外你自己得知道預設值是什麼，因為 CSS 也沒有所謂 default 的關鍵字。 +

所以，以選取符撰寫樣式時須特別注意 (例如以標籤名稱 p 作為選取符)，或許可以用更明確的選取符 (例如 ID 或 class)。以標籤名稱作選取符茲事體大，一旦使用便將影響整個網頁，而且沒有自動恢復預設值的方法。 +

此外，由於 CSS 具串聯特性，指定選取符時通常越明確越好，以免把不相干的元素都牽扯進來。 +

+

相依樣式

+

CSS 並不支援「以另一個樣式規則為基準」的樣式設定法。 (參考 Eric Meyer 所寫、關於 CSS 工作小組的說明。) 不過，你可以為某單一元素套上多重樣式，製作出類似效果。 +

+

套用多重類別

+

你可以在 HTML 元素的 class 屬性裡以空白字元分隔填上多個樣式類別名稱，便能同時套用多重類別。 +

+
<style type="text/css">
+.firstclass { background: black; color: white; }
+.secondclass { font-weight: bold; }
+</style>
+
+<div class="firstclass secondclass">
+... content ...
+... content ...
+... content ...
+</div>
+
+

若是這些規則中設定了同一種特性值，則會依序以明確性（specificity）、定義位置先後決定顯示方式，與class 屬性中的次序無關。 +

+

無用樣式

+

即使樣式規則已經正確設定完畢，還是可能為瀏覽器所忽略，此時通常是經過語法及優先權法則判斷後的正常現象。 +

以下是導致樣式被略過的常見情形： +

+ +

你可以使用 DOM 觀察器 的 CSS Style Rules 來檢查上述問題。 +

HTML 元素層次問題 +

此時 CSS 樣式套用與否與元素的層次大有相關，請留意：套用到子元素的樣式必定會蓋過母元素的樣式，跟明確性或 CSS 規則的優先權無關。 +

+
#section { font-weight: bold; }
+.redtext { font-weight: normal; color: red; }
+
+<div id="section">
+   粗體、
+   <span class="redtext">正常紅字、</span>
+   又見粗體
+</div>
+
+

如果你的 HTML 層級錯綜複雜，發生規則意外被忽略的情形時，請檢查元素層級問題。可能有某個子元素套上了不該用的樣式。 +

樣式規則重新定義 +

在 CSS 樣式表中，先後次序非常重要。如果你定義了某規則後又重新定義一次，則晚定義的才算數。 +

+
#section { font-weight: bold; }
+.redtext { color: red; }
+/* 其他規則 */
+/* 其他規則 */
+/* 其他規則 */
+.redtext { color: green; }
+
+<div id="section">
+粗體、
+<span class="redtext">正常紅字？</span>
+又見粗體
+</div>
+
+

為避免此類錯誤發生，每個特定選取符請僅定義一次樣式，集中特性一次定義也便於管理些。 +


+特性的簡寫法 +

使用簡寫法來定義樣式簡明扼要，是個不錯的方法。你也可以用簡寫法設定某組特性中的部分特性值，但須留意其他沒寫到的部分會自動採用預設值。這表示之前的規則中為某單一特性定義的值可能失效。 +

+
#section { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.redtext { font: 14px Arial; color: red; }
+
+<div id="section">
+   採用 Verdana 粗體的 12px 字樣；
+   <span class="redtext">採用 Arial 正常字體的 14px 紅字；</span>
+   還是採用 Verdana 粗體的 12px 字樣。
+</div>
+
+

前一個例子中，套用到不同元素範圍的同族特性是問題所在，但就算特性都寫在同一條規則裡也可能出問題，因為順序真的很重要。 +

+
#section {
+   font-weight: bold;
+   font: 12px Verdana;  /* 有了這行，font-weight 又回到預設的 normal 了 */
+}
+
+


+使用 * 選取符 +

* 選取符表示任何元素皆符合，但使用上應多加小心。 +

+
body * { font-weight: normal; }
+#section { font: 12px Verdana; }
+.boldtext { font-weight: bold; }
+.redtext { color: red; }
+
+<div id="section">
+   正常、
+   <span class="boldtext">
+      <span class="redtext">正常紅字、</span>
+   </span>
+   又見正常。
+</div>
+
+

在此例中，選取符為 body * 的規則會套用到所有 body 內的元素，也包括 redtext，所以原先套用到 boldtext 的 font-weight: bold; 就被覆蓋為 font-weight: normal; 了。 +


+CSS 明確性 +

如果某元素會套用好幾條規則，則相衝突的特性就要靠規則的明確性來分高下。行內樣式（放在 HTML 各標籤的 style 屬性中）優先權最高，其次是以 id 做選取符的規則，再其次是以 class 套用的類別，最後則是單純以元素名稱當選取符的規則。 +

+
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">是紅的！</div>
+
+

如果樣式規則的選取符分成好幾段，計算方式就更為複雜一些。需要瞭解完整資訊者，請參考 CSS 2.1 規格書的 6.4.3 一節。 +

+

-moz-* 特性是什麼玩意？

+

請見 Mozilla 擴充的 CSS。由於這些擴充規格不是 W3C 標準的一部分，因此並不建議使用。 +

+
+
+{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS" } ) }} diff --git a/files/zh-tw/web/css/css_animations/index.html b/files/zh-tw/web/css/css_animations/index.html new file mode 100644 index 0000000000..7c953b2359 --- /dev/null +++ b/files/zh-tw/web/css/css_animations/index.html @@ -0,0 +1,136 @@ +--- +title: CSS Animations +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS Animations + - Experimental + - Overview + - Reference +translation_of: Web/CSS/CSS_Animations +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Animations is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

CSS At-rules

+ +
+ +
+ +

Guides

+ +
+
Detecting CSS animation support
+
Describes a technique for detecting if the browser supports CSS animations.
+
Using CSS animations
+
Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations') }}{{ Spec2('CSS3 Animations') }}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ 43.0		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012{{property_prefix("-o")}}
+ 12.10[2]		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1 {{property_prefix("-webkit")}} [1]
+ 4.0 {{property_prefix("-webkit")}}		{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.

+ +

[2] See the release notes to Opera 12.50.

+ +

See also

+ + + +

 

diff --git a/files/zh-tw/web/css/css_animations/using_css_animations/index.html b/files/zh-tw/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..82acb8ac6e --- /dev/null +++ b/files/zh-tw/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,334 @@ +--- +title: CSS 動畫 +slug: Web/CSS/CSS_Animations/Using_CSS_animations +tags: + - Advanced + - CSS animation + - CSS 動畫 + - Example + - Experimental + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +
+

 CSS animations 使 CSS style configuration 的轉變變得可行。在這種動畫的運作上，你只需要定義兩個部份：1. 動畫的最初及結尾 2. 動畫轉變的方式。

+ +

  相較於傳統 script-driven 的動畫技術，CSS animations 有三種好處：

+ +
    +
  1. 對於不複雜的動畫來說，CSS animation 是好選擇。你甚至不必懂得  JavaScript。
    2. +
  2. 在資源消耗上，CSS animation 有優勢，即使在系統負載超過 50% 仍可有效運作。在 JavaScript 上要達到一樣的目的有賴於你寫出品質非常好的  code。事實上，CSS animation 在運作上可以適時的減少 frame 量或以其它技術減少資源消耗。
    3. +
  3. CSS animation 讓瀏覽器來負責動畫的產生過程，如此可以擁有較好的優化。
    4. +
+ +

CSS animation 設定

+ +

  你可以使用 {{ cssxref("animation") }} property 或其 sub-properties 來創建 CSS 動畫的細節(諸如轉化時間等)。但這並不能決定動畫的外觀，外觀的部份我們將在下面的 {{ anch("使用關鍵影格定義動畫流程") }} 介紹。

+ +

  這裡是 {{ cssxref("animation") }} property 的 sub-properties：

+ +
+
{{ cssxref("animation-delay") }}
+
定義元素讀取完畢到動畫開始的間隔時間。
+
{{ cssxref("animation-direction") }}
+
定義是否動畫播放完畢後將會反向播放。
+
{{ cssxref("animation-duration") }}
+
定義動畫完成一次週期的時間。
+
{{ cssxref("animation-iteration-count") }}
+
定義動畫重複的次數。你可以用 infinite 來讓動畫永遠重複播放。
+
{{ cssxref("animation-name") }}
+
定義關鍵影格 {{ cssxref("@keyframes") }} 的名字。
+
{{ cssxref("animation-play-state") }}
+
控制動畫的播放狀態。有 pause 和 running 兩種值，後者為預設值。
+
{{ cssxref("animation-timing-function") }}
+
定義動畫轉變時時間的加速曲線 (例如 linear)。
+
{{ cssxref("animation-fill-mode") }}
+
定義元素在動畫播放外(動畫開始前及結束後)的狀態。
+
+ +

使用關鍵影格定義動畫流程

+ +

  在你設定了動畫的時間資訊之後，你必須要設定動畫漸變的過程。這可以藉由建造兩個或更多的關鍵影格來達到目的 (使用 {{ cssxref("@keyframes") }} )。關鍵影格描述了該元素在漸變過程中的外觀。

+ +

  因為動畫漸變時間已經在 CSS style 中被定義(見上節)，所以關鍵影格使用 {{ cssxref("percentage") }} 來指出他們會在整個漸變流程中的哪個時間點出現。 0% 代表他是整個動畫的起點，而 100% 指出他是整個動畫的結束點。這兩個特殊時間點一定要被定義，如此一來瀏覽器材知道該如何產生你的動畫。也因為他們是如此重要，所以這兩個時間點有特殊的別名： from 和 to。

+ +

  當然你也可以在動畫轉變過程中增加更多的關鍵影格。

+ +

範例

+ +
注意： 為了簡潔起見，以下的範例中我們只列出前綴為 -moz- 的部份。當你查看 Live Sample 的原始碼時，可以看到前綴為 -webkit- 的部份。
+ +

使文字滑過畫面

+ +

  這是一個簡單的範例，他展示了 {{ HTMLElement("p") }} element 從畫面右方滑向左方。

+ +
<style type="text/css">
+  p {
+    -moz-animation-duration: 3s;
+    -moz-animation-name: slidein;
+  }
+
+  @-moz-keyframes slidein {
+    from {
+      margin-left: 100%;
+      width: 300%
+    }
+
+    to {
+      margin-left: 0%;
+      width: 100%;
+    }
+  }
+</style>
+
+ +

  這裡用 {{ cssxref("animation-duration") }} property 定義 {{ HTMLElement("p") }} element 的變動自開始到結束共花 3 秒。而關鍵影格的名稱由 {{ cssxref("@keyframes") }} 指定 - 叫做 slidein。

+ +

  傳統的 {{ HTMLElement("p") }} element 尚有其他性質可供設定，但假設這些性質並不支援 CSS animation，則我們不能期待他們會被瀏覽器顯示。

+ +

  這裡的關鍵影格我們定義了兩個 (以 {{ cssxref("@keyframes") }} 定義)，開始 (0%)和結束 (100%)。開始的影格在 from 中，而結束在 to 中。由程式中我們可以看到，整個動畫由最一開始處於最右方且 width 為 300% 轉變為處於最左方且 width 為 100%。如此一來你就可以看到 {{ HTMLElement("p") }} element 由右而左的滑過畫面。

+ +

  結束影格描述 width 為 100% 可以確保 {{ HTMLElement("p") }} element 在可視範圍內。

+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +

{{EmbedLiveSample("使文字滑過畫面","100%","250")}}

+ +

在開頭和結束間加入關鍵影格

+ +

  現在我們試著多加入新的關鍵影格。在這個範例中，我們希望做到在文字在移動時字體先變大而後恢復正常。程式碼如下：

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + + +

  這段程式碼告訴瀏覽器在開始後過了 75% 的時間後字體增大到三倍，且位置在離左側 25 % 處，此時總寬度為 150%。

+ +

{{EmbedLiveSample("在開頭和結束間加入關鍵影格","100%","250")}}

+ +

重複播放

+ +

  為了達到重複播放的目的，我們使用 {{ cssxref("animation-iteration-count") }} property。讓我們把它設定成 infinite ：

+ +
p {
+  -moz-animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -moz-animation-iteration-count: infinite;
+} 
+ + + + + +

{{EmbedLiveSample("重複播放","100%","250")}}

+ +

播放完畢後反向播放

+ +

  由上個例子我們知道該如何永久性播放動畫。但這個顯示結果有些突兀，是以我們試著讓他播放完畢後倒帶執行。這需要用到 {{ cssxref("animation-direction") }}，賦予 alternate 的值：

+ +
p {
+  -moz-animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-direction: alternate;
+} 
+ + + + + +

{{EmbedLiveSample("播放完畢後反向播放","100%","250")}}

+ +

使用動畫的事件

+ +

  你可以藉由 animation event 來對 CSS animation 做更進階的控制，這需要用到 {{ domxref("event/AnimationEvent", "AnimationEvent") }} 物件。他可以用來偵測動畫所處的時間點等資訊。每個 event 包含發生的時間以及觸發 event 的動畫名字。

+ +

  我們將修改剛剛的範例來展示 animation event 的能力。

+ +
.slidein {
+  -moz-animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -webkit-animation-name: slidein;
+  animation-name: slidein;
+  -moz-animation-iteration-count: 3;
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+  -moz-animation-direction: alternate;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+}
+
+@-moz-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+
+@-webkit-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+ +

設定 animation event listeners

+ +

  我們使用 JavaScript 來監控所有可能的 animation events。下面的 setup() 函式設定我們的 event listeners，並且在文件第一次被載入時執行他：

+ +
function setup() {
+  var e = document.getElementById("watchme");
+  e.addEventListener("animationstart", listener, false);
+  e.addEventListener("animationend", listener, false);
+  e.addEventListener("animationiteration", listener, false);
+
+  var e = document.getElementById("watchme");
+  e.className = "slidein";
+}
+
+ +

  這是非常簡單的程式，你可以從其它相關文件中取得 {{ domxref("element.addEventListener()") }} 的更多細節。setup() 函式所做的最後一件事是設定這個 element 的 class name 為 slidein，此時，我們啟動了這個動畫。

+ +

  這麼做的原因是 animationstart event 會在被動畫執行時立刻被觸發，所以我們只好在最後才設定 class name。

+ +

接收 events

+ +

  這些 events 會被發送到 listener() 函式，如下所示：

+ +
function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

  這段程式檢查藉由檢查 {{ domxref("event.type") }} 得知現在收到了哪種 animation event，並且以一個 {{ HTMLElement("ul") }} (unordered list) 形式的記錄下他。

+ +

  程式執行結果看起來會是這樣子的：

+ + + +

  注意這裡的時間是一個範例，你自己執行可能會取得不一樣的結果(但應該會近似)。此外，在動畫的最後，event 會是 animationend 而非  animationiteration 。

+ +

完整的 HTML 程式碼

+ +

  這裡是完整的 HTML 程式碼：

+ +
<body onload="setup()">
+  <h1 id="watchme">Watch me move</h1>
+  <p>This example shows how to use CSS animations to make <code>h1</code> elements
+  move across the page.</p>
+  <p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
+  <ul id="output">
+  </ul>
+</body> 
+ +

{{EmbedLiveSample('使用動畫的事件', '600', '300')}}

+ +

更多資訊

+ + +
+ +

 

diff --git a/files/zh-tw/web/css/css_background_and_borders/index.html b/files/zh-tw/web/css/css_background_and_borders/index.html new file mode 100644 index 0000000000..dcfeef033a --- /dev/null +++ b/files/zh-tw/web/css/css_background_and_borders/index.html @@ -0,0 +1,152 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Background and Borders + - CSS Reference + - Overview +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +

{{CSSRef}}

+ +

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

Guides

+ +
+
Using CSS multiple backgrounds
+
Explains how to set backgrounds on elements and how they will interact with it.
+
Scaling background images
+
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
+
diff --git a/files/zh-tw/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/zh-tw/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html new file mode 100644 index 0000000000..244234b839 --- /dev/null +++ b/files/zh-tw/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html @@ -0,0 +1,84 @@ +--- +title: 使用 CSS 多重背景 +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +

{{CSSRef}}

+ +

藉由 CSS3 我們可以對元素使用 多重背景。每個設定的背景被一個個分層，第一個背景在最上面，最後一個背景是在最下面一層。 記得只有最後一個背景可以設定 background color。

+ +

簡易的表達方式:

+ +
.myclass {
+  background:
+      background 1, //第一層
+      background 2,
+      ...,
+      background N;  //最後一層
+}
+
+ +

可以使用縮寫的方式 {{ cssxref("background") }} 和個別標記的方式設定多重背景，但是部分屬性無法設置多重背景，例如 {{ cssxref("background-color") }}。下面是能設置為多重背景的背景屬性： 

+ + + +

範例

+ +

下面的範例中，重疊三個背景：Firefox logo、線性漸層、一張泡泡的圖片

+ +
.multi_bg_example {
+  background-image   : url(https://mdn.mozillademos.org/files/11305/firefox.png),
+                       url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+                       linear-gradient(to right, rgba(30, 75, 115, 1),  rgba(255, 255, 255, 0));
+
+  background-repeat  : no-repeat,
+                       no-repeat,
+                       no-repeat;
+
+  background-position: bottom right,
+                       left,
+                       right;
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample('範例','100%','400')}}

+ +

如你所見，Firefox logo（列表第一個選項）在最上面，接著是漸層。每個隨後的子屬性（{{ cssxref("background-repeat") }} 和 {{ cssxref("background-position") }}）應用相對的背景上。所以第一個 {{ cssxref("background-repeat") }} 的值應用在第一個（最前面）背景。

+ +

參見

+ + diff --git a/files/zh-tw/web/css/css_box_model/index.html b/files/zh-tw/web/css/css_box_model/index.html new file mode 100644 index 0000000000..cb4dd91343 --- /dev/null +++ b/files/zh-tw/web/css/css_box_model/index.html @@ -0,0 +1,167 @@ +--- +title: CSS Box Model +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

CSS Box Model is a CSS module that defines the rectangular boxes, including their padding and margin, that are generated for elements and laid out according to the visual formatting model.

+ +

Reference

+ +

Properties

+ +

Properties controlling the flow of content in a box

+ +
+ +
+ +

Properties controlling the size of a box

+ +
+ +
+ +

Properties controlling the margins of a box

+ +
+ +
+ +

Properties controlling the paddings of a box

+ +
+ +
+ +

Other properties

+ +
+ +
+ +

Guides and tools

+ +
+
Introduction to the CSS box model
+
Explains one of the fundamental concept of CSS, the box model: describes the meaning of the margin, padding, as well as the different areas of a box.
+
Mastering margin collapsing
+
In several cases, two adjacent margins are collapsed into one. This article describes when this is happening and how to control it.
+
Box-shadow generator
+
An interactive tool that allows to visually create shadows and to generate the needed syntax for the {{cssxref("box-shadow")}} property.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/zh-tw/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/zh-tw/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..be8ea00259 --- /dev/null +++ b/files/zh-tw/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,107 @@ +--- +title: 理解邊界重疊的原因 +slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +
當一個 Block 的 下邊界範圍 ( margin-bottom ) 和一個 Block 的 上邊界範圍 ( margin-top ) 都有設定時只會留下最大那個，這種情況我們稱為邊界重疊 ( margin collapsing )。請留意設定了 float 或絕對定位的元件並不會產生邊界重疊。
+ + + +

有三個標準情況會形成邊界重疊：

+ +
+
同一層的相鄰
+
兩個相鄰的元素邊界就會發生重疊，除非後者有加上clear-fix。例如： + 
<style>
+  p:nth-child(1){
+    margin-bottom: 13px;
+  }
+  p:nth-child(2){
+    margin-top: 87px;
+  }
+</style>
+
+ <p>下邊界範圍會...</p>
+ <p>...跟這個元素的上邊界範圍重疊。</p>
+
+
+
如果邊界會合併的的話，理所當然會認為上例中的上下兩個元素會合成一個 100px 的邊界範圍。
+ 但其實會發生重疊，而且只會留下最大的邊界範圍，以此例子來說，邊界範圍就是 87px。
+
+
父元素與第一個/最後一個子元素
+
如果第一個子元素跟父元素的上邊界範圍 ( margin-top ) 貼在一起，也會發生邊界重疊的情況。除非父元素有設定邊框 ( border ) 、 內距 ( padding )、內容設定為 inline 或是有加上 clear-fix，這些都會隔開子元素和父元素的屬性。
+ 最後一個子元素也是，但是與父元素的下邊界範圍 ( margin-bottom ) 更容易被隔開，因為父元素可以設定這些屬性。例如：
+
+ 
<style type="text/css">
+    section    {
+        margin-top: 13px;
+        margin-bottom: 87px;
+    }
+
+    header {
+        margin-top: 87px;
+    }
+
+    footer {
+        margin-bottom: 13px;
+    }
+</style>
+
+<section>
+    <header>上邊界重疊是 87</header>
+    <footer>下邊界重疊還是 87 不能再高了</footer>
+</section>
+
+
空的元素
+
當同一個元素上邊界範圍可以直接貼到下邊界範圍時，也會發生邊界重疊。這種情況會發生在一個元素完全沒有設定邊框 ( border ) 、 內距 ( padding )、高度 ( height )​ 、最小高度 ( min-height ) 、最大高度 ( max-height )​ 、內容設定為 inline 或是加上 clear-fix 的時候。例如：
+
+ 
<style>
+  p {
+    margin: 0px;
+  }
+  div {
+    margin-top: 13px;
+    margin-bottom: 87px;
+  }
+</style>
+
+<p>下邊界範圍是 87</p>
+<div></div>
+<p>...上邊界範圍也是 87。</p>
+
+
+
+ +

上面這些情況是會同時發生的，那時邊界重疊的原因又更複雜了。

+ +

比較特別的是，當計算的時候某些邊界範圍是負數，邊界重疊的結果會取最大值和最小值相加。舉例來說如果 -13px、8px 和 100px 疊在一起，邊界範圍的計算方法會是 100px - 13px 也就是 87px。

+ +

以上這些內容都是發生在 Block-Level 的元素，設定 floating 和 absolutely positioned 的元素完全不用擔心邊界重疊的計算。

+ +

標準文件

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Initial definition
+ +

參考

+ + diff --git a/files/zh-tw/web/css/css_colors/color_picker_tool/index.html b/files/zh-tw/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..367e58ce23 --- /dev/null +++ b/files/zh-tw/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3221 @@ +--- +title: 色彩選擇工具 +slug: Web/CSS/CSS_Colors/Color_picker_tool +tags: + - CSS + - Tools +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPicker tool

+ +

HTML Content

+ +
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ + +

{{CSSRef}}

+ +

這是個可以讓人新增、調整和測試網頁顏色的工具。藉由這個工具讓人可以輕鬆將顏色轉換成各種 CSS 支援的格式，包含：HEXA、RGB（Red/Green/Blue）和 HSL （Hue/Staturation/Lightness）。在 RGB（rgba）和 HSL（hsla）格式也支援控制阿爾法通道（alpha channel）

+ +

隨著調整每個顏色都會顯示成三種 CSS 的標準格式；此外，基於目前選擇的顏色，一個調色板 HSL 和 HSV、還有 alpha, 被創建。滴管風格的色彩選擇器對話框可以在 HSL 或 HSV 格式中切換。

+ +

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

+ +

 

diff --git a/files/zh-tw/web/css/css_colors/index.html b/files/zh-tw/web/css/css_colors/index.html new file mode 100644 index 0000000000..607d1790af --- /dev/null +++ b/files/zh-tw/web/css/css_colors/index.html @@ -0,0 +1,119 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +--- +

{{CSSRef}}

+ +

CSS Colors is a module of CSS that deals with colors, color types and transparency.

+ +

Reference

+ +

Properties

+ +
+ +
+ +

CSS Data Types

+ +

{{cssxref("<color>")}}

+ +

Guides

+ +

None.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

See also

+ + diff --git a/files/zh-tw/web/css/css_flexible_box_layout/index.html b/files/zh-tw/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..f26fcfb2e8 --- /dev/null +++ b/files/zh-tw/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,118 @@ +--- +title: CSS 彈性盒子排版 +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Boxes + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +
{{CSSRef}}
+ +

CSS 彈性盒子排版（CSS Flexible Box Layout）是 CSS 的模組。它為了最佳化 CSS 盒子模型的使用者介面設計而來、並把項目都配置在一個維度之內。在彈性盒子排版中，彈性容器的子項目們可以伸展到任何方向、並讓他們的尺寸更加「彈性」、或者持續增大，以填補未使用的空間，抑或縮小，以避免父元素溢出。子項目橫向或縱向對齊都很容易操作。

+ +

基本範例

+ +

下例的容器已經設為 display: flex、意味著三個子元素變成了彈性項目（flex item）。justify-content 值也設成了 space-between 以便將項目均勻地分佈在主軸上。每個物品之間放置相等數量的空間，左右項目與彈性容器（flex container）的邊緣齊平。你可能也發現到各項目在切軸（cross axis）上伸展。那是因為 align-items 的值是 stretch。項目伸展為彈性容器的高度、令它們看起来都如同最高的項目一般高。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

+ +

參考

+ +

CSS 屬性

+ +
+ +
+ +

對齊屬性

+ +

The properties align-content, align-self, align-items and justify-content initially appeared in the Flexbox specification, but are now defined in Box Alignment and the Flexbox spec refers to the Box Alignment Specification for up to date definitions. Additional alignment properties are also defined in Box Alignment.

+ +
+ +
+ +

短詞

+ +
+ +
+ +

教學

+ +
+
彈性盒子的基本概念
+
彈性盒子的概述
+
彈性盒子與其他排版的關係
+
彈性盒子如何與其他排版和 CSS 規範相關連
+
在彈性容器內對齊
+
彈性盒子的 Box Alignment 屬性如何做動。
+
給彈性項目排序
+
解釋改變彈性項目順序和方向的不同方法，並講到潛在的問題。
+
控制彈性項目與主軸的比例
+
將解釋 flex-grow、flex-shrink、flex-basis 屬性。
+
掌握彈性項目 wrapping
+
如何使用多行建立彈性容器，並控制這些行中項目的顯示。
+
彈性盒子的典型用例
+
彈性盒子常見的設計範式。
+
彈性盒子的向下相容
+
彈性盒子的瀏覽器相容性、互操作性問題、支持舊版瀏覽器和規範的版本
+
+ +

規範

+ + + + + + + + + + + + + + + + +
規範狀態註解
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}初期定義。
+ +

參見

+ +
+
Flexbugs
+
a community-curated list of flexbox browser bugs and workarounds
+
Cross-browser Flexbox mixins
+
This article provides a set of mixins for those who want to create cross-browser flexbox experiences that even work in older browser that don't support the modern flexbox syntax
+
diff --git a/files/zh-tw/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/zh-tw/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html new file mode 100644 index 0000000000..19ca6226ec --- /dev/null +++ b/files/zh-tw/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html @@ -0,0 +1,382 @@ +--- +title: CSS彈性盒子用法 +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +tags: + - '#RWD' + - CSS + - Web + - 例子 + - 先进的 + - 入门 + - 灵活 + - 盒 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

CSS3 彈性盒子，又稱flexbox，是為了適應不同螢幕尺寸和顯示設備而生的佈局模式。針對許多應用而言，不用 floats 的彈性盒子模型會比塊狀模型（block model）易用，彈性容器的邊緣也不會與內容的邊緣重疊。

+ +

多數設計師會發現 flexbox 用起來比 box 簡單得多。像是不多注意 div 的話，它就會經常違反設計師意願地，跑到頁頂去──令 footer 附著在頁底，也因此變得很棘手。flexbox 的寬高能改變以適應顯示空間，將較低的元件固定住。Flexbox 邏輯也能讓你確實令 div 壓在頁面的右方或底部。Flexbox 元素的顯示順序，與原始碼的顯示順序相互獨立。

+ +

一些時髦的佈局，也能因而透過更簡潔的程式碼完成。這種有意的獨立性只影響視覺渲染，基於 HTML 原始碼的語意順序及瀏覽不會受到影響。

+ +
注：儘管 CSS 彈性盒子佈局規範還處於最終徵求意見稿（Last Call Working Draft）階段（參見最新編輯草案）、也不是所有瀏覽器都實做彈性盒子的所有功能。但這麼說好了，現在主流的瀏覽器，都對 flexbox 有著良好的支持。請參見相容性表格的具體屬性，以獲取最新的相容狀態。
+ +

彈性盒子的概念

+ +

Flex 排版的大致定義，是能更改該項目的長與（或）高，以便貼合任何顯示設備的空間。Flex container 能針對該元件擴張以便填補可用的空間、或收縮以便阻止空間溢出。

+ +

塊狀佈局（Block layout）以垂直方向為準、行內佈局（Inline layout）以水平方向為準、而彈性佈局（Flexbox layout）則同時允許這兩種。塊狀佈局雖適於頁面顯示，但在程式元件（application component）需要在用戶代理（user agent）變更、手機從垂直方向翻轉到水平方向……等變更定位、大小、拉伸、收縮的情形下，這種佈局就很難用了。彈性盒子佈局長於小規模佈局、而剛剛流行的格線佈局（Grid layout）則長於大規模佈局。二者皆為 CSS 工作小組為在不同用戶代理、書寫模式、和其他要求下的 Web 應用程式，提供良好互通性的一部分。

+ +

彈性盒子的字彙

+ +

在彈性盒子的世界，我們不會稱水平（inline）或垂直（block），而是主軸（main axis）與切軸（cross axis）。如果 flex-direction 是 column，主軸就會充當垂直、而切軸則充當水平。請參考下面的圖，它展示了一個 flex-direction 是 row 的彈性容器，意味著該彈性項目會基於主軸，作水平排列。

+ +

flex_terms.png

+ +
+
彈性容器（Flex container）
+
包住彈性項目（Flex item）的父元素。在 {{Cssxref("display")}} 屬性用上 flex 或 inline-flex 值的，就是彈性容器。
+
彈性項目（Flex item）
+
+

所有彈性容器的子元素都會變成彈性項目。直接包含在彈性容器的文字，會被包裝成匿名的 Flex 項目。

+
+
軸（Axes）
+
+

所有彈性盒子布局都有兩個軸。主軸（main axis）是跟隨著彈性項目順序的軸、而切軸(cross axis)是垂直於主軸的軸。

+ +
    +
  • flex-direction 屬性啟用主軸。
    • +
  • justify-content 屬性定義目前彈性項目的主軸如何擺放。
    • +
  • align-items 屬性定義目前彈性項目的切軸如何擺放。
    • +
  • align-self 屬性定義目前單一彈性項目如何對齊。這個設定會覆蓋 align-items 的預設值。
    • +
+
+
方向（Directions）
+
+

彈性容器的 main start/main end 與 cross start/cross end sides 描述了彈性項目流的起點與終點。它們跟隨著由 writing-mode 所建立的向量中，彈性容器的主軸與切軸排列（左至右或右至左……等等）。

+ +
    +
  • order assigns elements to ordinal groups and determines which elements appear first.
    • +
  • flex-flow 屬性是 flex-direction 與 flex-wrap 屬性的簡寫，描述了彈性項目的整體布局。
    • +
+
+
Lines
+
+

Flex items can be laid out on either a single line or on several lines according to the flex-wrap property, which controls the direction of the cross axis and the direction in which new lines are stacked.

+
+
Dimensions
+
+

The flex items' agnostic equivalents of height and width are main size and cross size, which respectively follow the main axis and cross axis of the flex container.

+ + +
+
+ +

設計一個彈性盒子

+ +

要設計基於這種風格的 CSS 元素，請把 display 屬性設為：

+ +
display: flex;
+ +

或：

+ +
display: inline-flex;
+ +

這樣一來，元素就會變成彈性容器，而它的子元素們就會變成彈性項目。flex 值會讓彈性容器變成塊級元素（block-level element）、inline-flex 則會讓彈性容器成為單一的行內元素（atomic inline-level element）。

+ +
注意：如果需要支援較舊的瀏覽器，請把廠商前輟標記（vendor prefix tag）寫在 display 屬性（property），而不是屬性值（attribute）。例如：display: -webkit-flex。
+ +

彈性項目需要留心……

+ +

Text that is directly contained inside a flex container is automatically wrapped in an anonymous flex item. However, an anonymous flex item that contains only white space is not rendered, as if it were designated display: none.

+ +

Absolutely positioned children of a flex container are positioned so that their static position is determined in reference to the main start content-box corner of their flex container.

+ +

The margins of adjacent flex items do not collapse. Using auto margins absorbs extra space in the vertical or horizontal direction and can be used for alignment or to separate adjacent flex items. See Aligning with 'auto' margins in the W3C CSS Flexible Box Layout Module specification for more details.

+ +

Flexbox's alignment properties do "true" centering, unlike other centering methods in CSS. This means that the flex items will stay centered, even if they overflow the flex container. This can sometimes be problematic, however, if they overflow past the top edge of the page, or the left edge (in LTR languages like English; the problem occurs on the right edge in RTL languages like Arabic), as you can't scroll to that area, even if there is content there! In a future release, the alignment properties will be extended to have a "safe" option as well. For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the align- properties, just put auto margins on the flex items you wish to center. Instead of the justify- properties, put auto margins on the outside edges of the first and last flex items in the flex container. The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. However, if you're trying to replace justify-content with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the justify-content property.

+ +

Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.

+ +

彈性盒子的屬性

+ +

不對彈性盒子生效的屬性

+ +

由於彈性盒子使用不同的排版演算法，所以有些屬性不太適合用在彈性容器內：

+ + + +

示例

+ +

基本彈性排版示例

+ +

這個基本彈性將展示如何把「彈性化」引至某個元素、並在彈性狀態下相鄰該元素的表現。

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <style>
+    .flex {
+        /* basic styling */
+        width: 350px;
+        height: 200px;
+        border: 1px solid #555;
+        font: 14px Arial;
+
+        /* flexbox setup */
+        display: flex;
+        flex-direction: row;
+    }
+
+    .flex > div {
+        flex: 1 1 auto;
+        width: 30px; /* To make the transition work nicely. (Transitions to/from
+                        "width:auto" are buggy in Gecko and Webkit, at least.
+                        See http://bugzil.la/731886 for more info.) */
+        transition: width 0.7s ease-out;
+    }
+
+    /* colors */
+    .flex > div:nth-child(1){ background: #009246; }
+    .flex > div:nth-child(2){ background: #F1F2F1; }
+    .flex > div:nth-child(3){ background: #CE2B37; }
+
+    .flex > div:hover {
+        width: 200px;
+    }
+
+    </style>
+  </head>
+  <body>
+    <p>Flexbox nuovo</p>
+    <div class="flex">
+      <div>uno</div>
+      <div>due</div>
+      <div>tre</div>
+    </div>
+  </body>
+</html>
+ +

聖杯排版示例

+ +

本示例將示範彈性盒子在不同的解析度之下，如何提供動態變更的能力。下圖將說明轉換。

+ +

HolyGrailLayout.png

+ +

這裡展示了貼合了瀏覽器視窗的排版，必須為智慧型手機視窗最佳化的情況。不僅尺寸要縮減，呈現順序也要改變。彈性盒子把這件事變得相當簡單。

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+    body {
+        font: 24px Helvetica;
+        background: #999999;
+    }
+
+    #main {
+        min-height: 800px;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: row;
+    }
+
+    #main > article {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #cccc33;
+        border-radius: 7pt;
+        background: #dddd88;
+        flex: 3 1 60%;
+        order: 2;
+    }
+
+    #main > nav {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #8888bb;
+        border-radius: 7pt;
+        background: #ccccff;
+        flex: 1 6 20%;
+        order: 1;
+    }
+
+    #main > aside {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #8888bb;
+        border-radius: 7pt;
+        background: #ccccff;
+        flex: 1 6 20%;
+        order: 3;
+    }
+
+    header, footer {
+        display: block;
+        margin: 4px;
+        padding: 5px;
+        min-height: 100px;
+        border: 1px solid #eebb55;
+        border-radius: 7pt;
+        background: #ffeebb;
+    }
+
+    /* Too narrow to support three columns */
+    @media all and (max-width: 640px) {
+        #main, #page {
+            flex-direction: column;
+        }
+
+        #main > article, #main > nav, #main > aside {
+        /* Return them to document order */
+            order: 0;
+        }
+
+        #main > nav, #main > aside, header, footer {
+            min-height: 50px;
+            max-height: 50px;
+        }
+    }
+    </style>
+  </head>
+  <body>
+    <header>header</header>
+    <div id='main'>
+      <article>article</article>
+      <nav>nav</nav>
+      <aside>aside</aside>
+    </div>
+    <footer>footer</footer>
+  </body>
+</html>
+ +

遊樂場

+ +

以下提供一些與彈性盒子相關的網站讓你親手操作：

+ + + +

要注意的事情

+ +

有時候配置 Flex item 的演算法會有點難以理解。因此，在設計 Flexible box 時有一些指引，能讓你避免負面意義上的驚嘆。

+ +

Flexible box 通常會盡量貼合 writing mode 的配置，這意味著 main start 與 main end 會基於 start 與 end 的位置來配置。

+ +

cross start 與 cross end 依賴 start 或 before 的定義的位置，其依賴 direction 的值。

+ +

Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before, and break-inside as well as CSS 2.1 page-break-before, page-break-after, and page-break-inside properties are accepted on a flex container, flex items, and inside flex items.

+ +

瀏覽器相容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (single-line flexbox){{CompatGeckoDesktop("18.0")}}[6]{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10[5]
+ 15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
Basic support (single-line flexbox){{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoMobile("22.0")}}		 +

1.0{{property_prefix("-moz")}}[2]
+ 1.1

+ 		2.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
+
+ +

[1] Safari up to version 6.0 (iOS.1) supported an old incompatible draft version of the specification. Safari 6.1 (and Safari on iOS 7) has been updated to support the final version.

+ +

[2] Up to Firefox 22, to activate flexbox support, the user has to change the about:config preference layout.css.flexbox.enabled to true. From Firefox 22 to Firefox 27, the preference is true by default, but the preference has been removed in Firefox 28.

+ +

[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 has been updated to support the final version.

+ +

[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.

+ +

[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.

+ +

[6] Up to Firefox 29, specifying visibility: collapse on a flex item causes it to be treated as if it were display: none instead of the intended behavior, treating it as if it were visibility: hidden. The suggested workaround is to use visibility:hidden for flex items that should behave as if they were designated visibility:collapse. For more information, see {{bug(783470)}}.

+ +

參見

+ + diff --git a/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..2c6c9685cc --- /dev/null +++ b/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,715 @@ +--- +title: 格線佈局的基本概念 +slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +

CSS 格線佈局介紹了二維的 CSS 格線系統。格線可以用來佈置頁面的主要區域、或小型用戶介面。本文介紹 CSS 格線 Level 1 規範的其中一部份。這份概觀顯示的某些功能，將在教學的其他部份詳細解釋。

+ +

什麽是格線？

+ +

格線是一組水平線和垂直線的交叉集合（intersecting set）：一個定義為行（row），另一個定義為列（column）。你可以讓各元素依照行列的規則放到各格線上。CSS 格線佈局具有以下特點：

+ +

固定和靈活的軌道尺寸

+ +

你可以給各格線指定一個固定的軌道大小，例如像素（pixel）。這樣就能把格線設為指定的像素，以貼近你期望的排版。也可以創建一個使用百分比、或是新的 fr 單位之格線。fr 單位就是為了格線布局而生。

+ +

單元佈置

+ +

你可以在格線使用行號、名字、目標區域，讓各單元放到精確的位置。格線也有控制非明式（explicit）單元的布局演算法。

+ +

Creation of additional tracks to hold content

+ +

你可以按照需求，定義明式格線、也可以處理沒有指定的格線、還可以增加額外的行（row）與列（column）。如果需要「盡可能地放進容器容得了的列」之類的也辦得到。

+ +

控制對齊

+ +

格線也包含了依序對齊的功能，以便控制各格線內的各單元、還有整個格線要如何對齊。

+ +

Control of overlapping content

+ +

數個單位也能被放進 grid cell、或是區域的一部分相互重疊。我們可以透過 {{cssxref("z-index")}} 控制該分層。

+ +

格線是個強大的規範、它在與諸如彈性盒子之類的 CSS 結合時，也有助於用 CSS 建立前所尚未有的排版。一切都建立要從建立格線容器（grid container）開始。

+ +

格線容器

+ +

我們會宣告 display: grid 或 display: inline-grid 來給一個元素建立格線容器（grid container）。宣告以後，該元素的所有直接子元素會變成格線單位（grid item）

+ +

本例中，我有個稱作 wrapper class 的 div，裡面有五個元素。

+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +

接著我讓 .wrapper 變成格線容器（grid container）。

+ +
.wrapper {
+  display: grid;
+}
+
+ + + +

{{ EmbedLiveSample('The_Grid_container', '200', '330') }}

+ +

在它下面的直接子元素，現在都是格線單元了。從網路瀏覽器來看，各單元變成格線的前後，似乎沒什麼不同，因為目前格線只有建立一個格線列，來放所有的格線單元。這時候，你會發現格線檢測器相當好用。如果在 Firefox 檢查這個示例的格線，你會發現在 grid 值旁邊，有一個小圖標。點選這個小圖標，瀏覽器視窗的元素，就會被一個圖層覆蓋。

+ +

Using the Grid Highlighter in DevTools to view a grid

+ +

在理解並與 CSS 格線共事時，這個工具能幫你視覺化理解，格線到底怎麼做動的。

+ +

如果要開始把做得更像格線，我們還需要多寫個 column track。

+ +

格線軌道（Grid Track）

+ +

我們在格線裡透過 {{cssxref("grid-template-columns")}} 與 {{cssxref("grid-template-rows")}} 屬性定義了行與列。它們也定義了格線軌道。格線軌道是在格線的兩個欄位之間的空隙。下圖就會看到軌道的高亮：就在格線裡面的第一行。

+ +

+ +

I can add to our earlier example by adding the grid-template-columns property, then defining the size of the column tracks.

+ +

I have now created a grid with three 200-pixel-wide column tracks. The child items will be laid out on this grid one in each grid cell.

+ +
+
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+ + + +

{{ EmbedLiveSample('grid_first', '610', '200') }}

+
+ +

fr 單位

+ +

格線軌道可以使用任何單位定義，不過格線引入了額外的單位，以助於建立有彈性的格線軌道。新的單位 fr 代表格線容器內，可用空間的分塊（fraction）。接下來的格線定義，會建立三個同等、且能依照可用空間縮放的長度軌道。

+ +
+
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ + + +

{{ EmbedLiveSample('fr_unit_ls', '220', '180') }}

+
+ +

接著下例將創建有一個 2fr 的軌道，接著還有兩個 1fr 的軌道。可用空間會因此被分為四塊：其中兩塊給第一個軌道、剩下兩塊給兩個軌道各一個。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+ +

最後，我們會把分塊與絕對大小做結合。第一個軌道有 500 像素，這個固定的寬度，會因此從可用空間先割一塊出去。接下來的空間會被劃分為三塊，並按比例指派給剩下的彈性軌道。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+
+ +

Track listings with repeat() notation

+ +

含有許多軌道的格線能用 repeat() 標記，以使軌道透過迴圈表列數次。以下面為例：

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

這可以寫成：

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

重複標記是軌道表列一部分。下例中，我們建立了有 20 像素的軌道，接著重複 1fr 軌道六次，最後以 20 像素的軌道做結。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+
+ +

重複標記使用軌道表列，因此可以用它來建立重複的模式。下個例子的格線，會包含十個軌道：也就是 1fr 後面有 2fr 的軌道，並重複五次。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+
+ +

明式與暗式格線

+ +

在建立上例格線的時候，我們用 {{cssxref("grid-template-columns")}} 屬性指定了列軌道，但格線自己也建立了一行。相較於使用 {{cssxref("grid-template-columns")}} 或 {{cssxref("grid-template-rows")}} 屬性的明式格線（explicit grid），這幾行就屬於暗式格線（implicit grid）。

+ +

你也能在暗式格線內透過 {{cssxref("grid-auto-rows")}} 與 {{cssxref("grid-auto-columns")}} 屬性，給軌道定義一套大小。

+ +

下例將使用 grid-auto-rows 以確保由暗式格線建立的軌道，高度都會是 200 像素。

+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+
+ + + +

{{ EmbedLiveSample('The_implicit_and_explicit_grid', '210', '410') }}

+ +

軌道縮放與 minmax()

+ +

在設定顯式格線或希望自動給軌道一個最小尺寸，但也要確保它們擴展以適應任何添加的內容——像是希望某行不能小於 100 像素以避免跑版，但如果內容高度超過 300 像素，該行就要拉到那麼高。

+ +

針對這個情境，格線提供了 {{cssxref("minmax", "minmax()")}} 函式。本例中，我針對 {{cssxref("grid-auto-rows")}} 指定了 minmax() 的數值。它會指定高度最小要 100 像素，最大則是 auto。auto 意味著大小會檢查內容大小，並適配這一行 cell 內最高項目的高度。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two
+  <p>I have some more content in.</p>
+  <p>This makes me taller than 100 pixels.</p>
+</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('Track_sizing_and_minmax()', '230', '490') }}

+ +

Grid Lines

+ +

It should be noted that when we define a grid we define the grid tracks, not the lines. Grid then gives us numbered lines to use when positioning items. In our three column, two row grid we have four column lines.

+ +

Diagram showing numbered grid lines.

+ +

Lines are numbered according to the writing mode of the document. In a left-to-right language, line 1 is on the left-hand side of the grid. In a right-to-left language, it is on the right-hand side of the grid. Lines can also be named, and we will look at how to do this in a later guide in this series.

+ +

Positioning items against lines

+ +

We will be exploring line based placement in full detail in a later article, the following example demonstrates doing this in a simple way. When placing an item we target the line – rather than the track.

+ +

In the following example I am placing the first two items on our three column track grid, using the {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}} properties. Working from left to right, the first item is placed against column line 1, and spans to column line 4, which in our case is the far right line on the grid. It begins at row line 1 and ends at row line 3, therefore spanning two row tracks.

+ +

The second item starts on grid column line 1, and spans one track. This is the default so I do not need to specify the end line. It also spans two row tracks from row line 3 to row line 5. The other items will place themselves into empty spaces on the grid.

+ +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+   <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: 100px;
+}
+.box1 {
+    grid-column-start: 1;
+    grid-column-end: 4;
+    grid-row-start: 1;
+    grid-row-end: 3;
+}
+.box2 {
+    grid-column-start: 1;
+    grid-row-start: 3;
+    grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('Positioning_items_against_lines', '220', '410') }}

+ +

Don't forget that you can use the Grid Inspector in Firefox Developer Tools to see how the items are positioned against the lines of the grid.

+ +

Grid Cells

+ +

A grid cell is the smallest unit on a grid, conceptually it is like a table cell. As we saw in our earlier examples, once a grid is defined on a parent the child items will lay themselves out once in each cell of the defined grid. In the below image I have highlighted the first cell of the grid.

+ +

The first cell of the grid highlighted

+ +

Grid areas

+ +

Items can span one or more cells both by row or by column, and this creates a grid area. Grid areas have to be rectangular – it isn’t possible to create an L-shaped area for example. The highlighted grid area spans two row and two column tracks.

+ +

A grid area

+ +

Gutters

+ +

Gutters or alleys between grid cells can be created using the {{cssxref("grid-column-gap")}} and {{cssxref("grid-row-gap")}} properties, or the shorthand {{cssxref("grid-gap")}}. In the below example I am creating a 10-pixel gap between columns and a 1em gap between rows.

+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-column-gap: 10px;
+   grid-row-gap: 1em;
+}
+
+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ + + +

{{ EmbedLiveSample('Gutters') }}

+ +

Any space used by gaps will be accounted for before space is assigned to flexible length fr tracks, and gaps act for sizing purposes like a regular grid track, however you cannot place anything into a gap. In terms of line-based positioning, the gap acts like a fat line.

+ +

Nesting grids

+ +

A grid item can become a grid container. In the following example I have the three-column grid created earlier, with our two positioned items. In this case the first item has some sub-items. As these items are not direct children of the grid they do not participate in grid layout and so display in normal document flow.

+ +
+
<div class="wrapper">
+   <div class="box box1">
+       <div class="nested">a</div>
+       <div class="nested">b</div>
+        <div class="nested">c</div>
+    </div>
+    <div class="box box2">Two</div>
+    <div class="box box3">Three</div>
+    <div class="box box4">Four</div>
+    <div class="box box5">Five</div>
+</div>
+
+ +

Nested grid in flow

+ +

If I set box1 to display: grid I can give it a track definition and it too will become a grid, the items then lay out on this new grid.

+ +
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+}
+
+ + +
+ +

{{ EmbedLiveSample('nesting', '600', '410') }}

+ +

In this case the nested grid has no relationship to the parent. As you can see in the example it has not inherited the {{cssxref("grid-gap")}} of the parent and the lines in the nested grid do not align to the lines in the parent grid.

+ +

Subgrid

+ +

In the level 1 grid specification there is a feature called subgrid which would let us create nested grids that use the track definition of the parent grid.

+ +
+

Subgrids are not yet implemented in any browsers, and the specification is subject to change.

+
+ +

In the current specification, we would edit the above nested grid example to use display: subgrid rather than display: grid, then remove the track definition. The nested grid will use the parent grid tracks to lay out items.

+ +

It should be noted that the nested grid is in both dimensions—rows and columns. There is no concept of the implicit grid working with subgrids. This means you need to ensure that the parent grid has enough row and column tracks for all the subitems.

+ +
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: subgrid;
+}
+
+ +

Layering items with z-index

+ +

Grid items can occupy the same cell. If we return to our example with items positioned by line number, we can change this to make two items overlap.

+ +
+
<div class="wrapper">
+   <div class="box box1">One</div>
+   <div class="box box2">Two</div>
+   <div class="box box3">Three</div>
+   <div class="box box4">Four</div>
+   <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: 100px;
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box2 {
+   grid-column-start: 1;
+   grid-row-start: 2;
+   grid-row-end: 4;
+}
+
+ + +
+ +

{{ EmbedLiveSample('l_ex', '210', '410') }}

+ +

The item box2 is now overlapping box1, it displays on top as it comes later in the source order.

+ +

Controlling the order

+ +

We can control the order in which items stack up by using the z-index property - just as with positioned items. If we give box2 a lower z-index than box1 it will display below box1 in the stack.

+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: 100px;
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   z-index: 2;
+}
+.box2 {
+   grid-column-start: 1;
+   grid-row-start: 2;
+   grid-row-end: 4;
+   z-index: 1;
+}
+
+ + + +

{{ EmbedLiveSample('Controlling_the_order', '210', '410') }}

+ +

下一步

+ +

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.

+ + diff --git a/files/zh-tw/web/css/css_grid_layout/index.html b/files/zh-tw/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..0fd5616848 --- /dev/null +++ b/files/zh-tw/web/css/css_grid_layout/index.html @@ -0,0 +1,252 @@ +--- +title: CSS格線布局 +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS + - 參考 + - 布局 + - 柵格 + - 示列 + - 網格布局 +translation_of: Web/CSS/CSS_Grid_Layout +--- +

CSS 格線佈局長於把頁面的主要區域分離、或是在 HTML 原生語法構建的區域間，定義大小、位置、層次等方面的關聯。

+ +

格線佈局使作者能夠對齊元素為行和列，就像表格一樣，。然而，格線佈局可以更輕易的達成比一般表格更多元化的排版。例如，一個網格容器的子元素可以定位自己和層重疊，類似於CSS定位元素。

+ +

基本示例

+ +

以下示例展示了一個三列軌道格線，其中創建的行數最小為 100 像素，最大為 auto。Items 已經使用基於線放置在網格的位置上。

+ +
+ + +

HTML

+ +
<div class="wrapper">
+  <div class="one">One</div>
+  <div class="two">Two</div>
+  <div class="three">Three</div>
+  <div class="four">Four</div>
+  <div class="five">Five</div>
+  <div class="six">Six</div>
+</div>
+ +

CSS

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-row: 2 / 5;
+  grid-column: 1;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+
+ +

{{ EmbedLiveSample('example', '500', '440') }}

+
+ +

參考

+ +

CSS 屬性

+ +
+ +
+ +

CSS 函式

+ +
+ +
+ +

CSS 資料型別

+ +
+ +
+ +

詞匯表條目

+ +
+ +
+ +

指引

+ +
+ +
+ +

外部資源

+ + + +

規範

+ + + + + + + + + + + + + + + + +
格式狀態意見
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}初始定義
+ + diff --git a/files/zh-tw/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/zh-tw/web/css/css_lists_and_counters/consistent_list_indentation/index.html new file mode 100644 index 0000000000..cdde84086c --- /dev/null +++ b/files/zh-tw/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -0,0 +1,67 @@ +--- +title: 調整列表縮排 +slug: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +tags: + - CSS + - list indent + - 列表 + - 縮排 +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +--- +

原文 : Consistent List Indentation

+ + +

  使用 CSS 來協助縮排列表看來簡單實則卻否，原因很簡單 - 各大瀏覽器其實作方式不盡相同。一個很大的原因來自於對距離的掌握，但這很讓人喪志，因為瀏覽器沒有一致的排版方式。舉例來說，倘若你宣告一個 list 沒有 left margin，在 IE 中他可以被移動，但在 Gecko-based 的瀏覽器中他們將很固執的固定在那。

+ +

  為了更徹底明白為何有這種情況發生，了解列表是怎樣被創造的至關重要。

+

創建列表

+

  首先，我們考慮一個最簡單的 list item。他並不屬於任何一個 list 中，並且也沒有項目符號 (意思就是沒有 bullet )。如 Figure 1 所示：

+

Figure 1

+

  這裡的紅點線框是 list 內容的外框。在這裡的例子中， list item 並沒有設定 padding 或 borders。現在我們加上兩個 list item，如圖二：

+

Figure 2

+

  接著我們加上 parent element，這裡我們以 unordered list (i.e., <ul>)為例。根據 CSS box model，這些 list item 都會被包裹在 parent element 的範圍中。如下圖中的紫色外框，他包住了三個 list item 的外圍：

+

Figure 3

+

  然後我們加上 list item markers。因為我們用的是 unordered list，因此使用預設的 filled-circle "bullets"。結果如下：

+

Figure 4

+

  好的，現在看出來了，這些 marker 在 <ul> 空間之外。但更重要的是，這些 marker 其實是在 <li> 之外！這個結果使得 list item 看起來像是附加在 marker 之上。

+

  結論出來了，在瀏覽器(除了 windows 下的 IE)處理列表時， marker 是在 <li> element 的外頭。所以這些個對 list item 的設定並不會對 marker 造成影響，影響的是其後附加的內容。

+

二次縮排

+

  所以我們該如何設定其外觀？現在讓我們來分析一下下們這組設定：

+ 
ul, li {margin-left: 0; padding-left: 0;}
+

  當套用了這組設定， marker 將會很悲劇的落到畫面之外。

+

  為了避免這種慘劇發生，瀏覽器有三種不同的實作方式來避免：

+
    +
  1. 幫每一個 <li> element 設定 left margin
    2. +
  2. 幫 <ul> element 設定 left margin
    3. +
  3. 幫 <ul> element 設定一些 left padding
    4. +
+

  事後檢視，沒有瀏覽器採用第一種作法。Windows and Macintosh 上的 Internet Explorer 和 Opera 採用第二種作法。Gecko 相關的瀏覽器則使用第三種設計。

+

  現在讓我們來瞧瞧後兩種作法的差異。在 Internet Explorer 及 Opera 中，<ul> element 為了縮排需要被設定了 40 pixel 的 left margin。假如我們此時在 <ul> element 設定背景顏色，其結果如下：

+

Figure 5

+

  Gecko 則不太一樣，他為 <ul> element 設定了 40 pixel 的 left padding。因此造成上圖的程式碼會在 Gecko 中變成下圖：

+

Figure 6

+

  從結果來說，marker 都很好的附著在 <li> element 之前並未消失。唯一的不同點是發生在你替 <ul> element 設定背景顏色時。

+

不變的是 ...

+

  現在我們知道，若你希望在 Gecko, Internet Explorer 和 Opera 都有一樣的 list 外觀， <ul> element 的 left margin 和 left padding 都要設定。你大可不必理會 <li> 的設定。

+

  假如你想要有 Netscape 6.x 的預設風格，寫法如下：

+ 
ul {margin-left: 0; padding-left: 40px;}
+

  若你對 Explorer/Opera 風格有興趣，可以寫成：

+ 
ul {margin-left: 40px; padding-left: 0;}
+

  當然啦，你可以不用 pixel 來表示長度，取而代之的可以使用類似 1.25em 的寫法。現在若你想要重設列表，而不打算有任何縮排，可以這樣寫：

+ 
ul {margin-left: 0; padding-left: 0;}
+

  請注意，這樣的寫法將造成 bullet 被扔在整個列表及其 parent element 之外。當你在 body 中這樣寫，很顯然的你的 bullet 將不會出現在你的視窗內。

+

結論

+

  在這篇文章中我們並未指出哪個瀏覽器對 list 縮排的處理是正確的。之所以會有不同的排版方式只是因為他們採用了不同的排版方法。確定你設定了 list 的 left padding 和 left margin，這樣你比較能寫出跨瀏覽器良好縮排程式。

+

建議

+ +
+

關於此文件

+ +
diff --git a/files/zh-tw/web/css/css_lists_and_counters/index.html b/files/zh-tw/web/css/css_lists_and_counters/index.html new file mode 100644 index 0000000000..08b7fc4bcf --- /dev/null +++ b/files/zh-tw/web/css/css_lists_and_counters/index.html @@ -0,0 +1,127 @@ +--- +title: CSS Lists and Counters +slug: Web/CSS/CSS_Lists_and_Counters +translation_of: Web/CSS/CSS_Lists_and_Counters +--- +
{{CSSRef}}
+ +

CSS Lists and Counters is a module of CSS that defines how lists are laid out, how the list marker can be styled and how authors can create new counters.

+ +

參考

+ +

屬性

+ +
+ +
+ +

At-rules

+ +
+
{{cssxref("@counter-style")}}
+
+
+
    +
  • {{cssxref("@counter-style/system","system")}}
    • +
  • {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
    • +
  • {{cssxref("@counter-style/negative", "negative")}}
    • +
  • {{cssxref("@counter-style/prefix", "prefix")}}
    • +
  • {{cssxref("@counter-style/suffix", "suffix")}}
    • +
  • {{cssxref("@counter-style/range", "range")}}
    • +
  • {{cssxref("@counter-style/pad", "pad")}}
    • +
  • {{cssxref("@counter-style/speak-as", "speak-as")}}
    • +
  • {{cssxref("@counter-style/fallback", "fallback")}}
    • +
+
+
+
+ +

指南

+ +
+
Consistent list indentation
+
Explains how to reach a consistent indentation between different browsers.
+
Using CSS counters
+
Describes how to use counters to be able to use numbering outside of traditional list elements or to perform complex counting.
+
+ +

規範

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Lists')}}{{Spec2('CSS3 Lists')}} 
{{SpecName('CSS2.1', 'generate.html')}}{{Spec2('CSS2.1')}}Initial definition
+ +

瀏覽器相容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/zh-tw/web/css/css_positioning/index.html b/files/zh-tw/web/css/css_positioning/index.html new file mode 100644 index 0000000000..0fe6fd55d0 --- /dev/null +++ b/files/zh-tw/web/css/css_positioning/index.html @@ -0,0 +1,108 @@ +--- +title: CSS Positioning +slug: Web/CSS/CSS_Positioning +translation_of: Web/CSS/CSS_Positioning +--- +

{{CSSRef}}

+ +

CSS Positioning is a module of CSS that defines how to absolutely and relavitely position elements on the page.

+ +

參考

+ +

CSS 屬性

+ +
+ +
+ +

指南

+ +
+
Understanding CSS z-index
+
Presents the notion of stacking context and explain how z-ordering works, with several examples.
+
+ +

規範

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }} 
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }} 
+ +

瀏覽器相容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}5.06.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html b/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..8bfd77a677 --- /dev/null +++ b/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,40 @@ +--- +title: Understanding CSS z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index +tags: + - Advanced + - CSS + - Guide + - NeedsTranslation + - TopicStub + - Understanding_CSS_z-index + - Web +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +

Usually HTML pages can be considered two-dimensional, because text, images and other elements are arranged on the page without overlapping. There is a single rendering flow, and all elements are aware of the space taken by others. The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.

+
+

In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.

+
+

(from CSS 2.1 Section 9.9.1 - Layered presentation)

+

It means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS {{ cssxref("z-index") }} property.

+

Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or even unpredictable. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification CSS-2.1 Appendix E to explain these rules better.

+

This article will try to explain those rules, with some simplification and several examples.

+
    +
  1. Stacking without z-index : Default stacking rules
    2. +
  2. Stacking and float : How floating elements are handled
    3. +
  3. Adding z-index : Using z-index to change default stacking
    4. +
  4. The stacking context : Notes on the stacking context
    5. +
  5. Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
    6. +
  6. Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
    7. +
  7. Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
    8. +
+

Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.

+
+

Original Document Information

+ +
+

 

diff --git a/files/zh-tw/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/zh-tw/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..26771f0fbb --- /dev/null +++ b/files/zh-tw/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,139 @@ +--- +title: Stacking context example 1 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +

« CSS « 理解CSS的z-index

+ +

堆疊環境範例1

+ +

讓我們先從一個基本的例子。根堆疊情況下，我們有兩個div（DIV＃1和＃DIV 3），兩種相對定位的，但是如果沒有的z-index屬性。裡面DIV＃1有一個絕對定位的div＃2，而在DIV＃3有一個絕對定位的div＃4，雙方沒有的z-index屬性。

+ +

唯一的堆疊上下文是根上下文。如果沒有Z-指標，要素依次層疊的發生。

+ +

堆疊環境範例1

+ +

如果DIV＃2被分配一個正的（非零和非自動）z索引值，它是上述所有其他的DIV呈現。

+ +

堆疊環境範例1

+ +

然後，如果DIV＃4也被分配比DIV＃2的Z指數正z指數越大，它上面的所有其他的DIV DIV，包括2＃呈現。

+ +

堆疊環境範例1

+ +

在最後的例子，你可以看到，DIV＃2和＃DIV 4不兄弟姐妹，因為它們屬於不同的家長在HTML元素的層次結構。即便如此，DIV＃4堆疊相的DIV＃2可以通過z索引來控制。碰巧的是，由於DIV＃1和＃DIV 3不指定任何的z-index值，他們不創造一個堆疊環境。這意味著，所有的內容，包括DIV＃2和DIV＃4屬於相同根堆疊環境。

+ +

在堆疊上下文而言，DIV＃1和DIV＃3簡單地同化到根元素，將得到的層次結構如下：

+ + + +
注： DIV＃1和＃DIV 3不適透亮。重要的是要記住，分配的不透明度小於1到定位的元素隱式創建一個疊加的背景下，就像一個加入的z-index值是非常重要的。這個例子顯示，當父元素不會創建一個堆疊環境會發生什麼。
+ +

示例源代碼

+ +
<！DOCTYPE HTML PUBLIC“ -  // W3C // DTD XHTML 1.0過渡// EN”
+“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
+<HTML>
+<HEAD> <風格類型=“文本/ CSS”>
+
+DIV {字體：12px的宋體; }
+
+span.bold {字體重量：大膽的; }
+
+＃DIV1，＃{DIV3
+   高度：80px;
+   位置：親屬;
+   邊界：1px的虛線＃669966;
+   背景色：#ccffcc;
+   填充左：5px的;
+}
+
+＃{DIV2
+   不透明度：0.8;
+   的z-index：1;
+   位置：絕對的;
+   寬度：150像素;
+   高度：200像素;
+   頂：20像素;
+   左：170px;
+   邊界：1px的虛線＃990000;
+   背景色：#ffdddd;
+   文本對齊：中心;
+}
+
+＃{DIV4
+   不透明度：0.8;
+   的z-index：2;
+   位置：絕對的;
+   寬度：200像素;
+   高度：70px;
+   頂部：65px;
+   左：50像素;
+   邊界：1px的虛線＃000099;
+   背景色：#ddddff;
+   文本對齊：左;
+   填充左：10px的;
+}
+
+
+</風格> </ HEAD>
+
+<BODY>
+
+<br />
+
+<DIV ID =“DIV1”>
+<br />的<span class =“黑體”> DIV＃1 </ SPAN>
+<br />位置：親屬;
+   <DIV ID =“DIV2”>
+   <br />的<span class =“黑體”> DIV＃2 </ SPAN>
+   <br />位置：絕對的;
+   <br />的z-index：1;
+   </ DIV>
+</ DIV>
+
+<br />
+
+<DIV ID =“DIV3”>
+<br />的<span class =“黑體”> DIV＃3 </ SPAN>
+<br />位置：親屬;
+   <DIV ID =“DIV4”>
+   <br />的<span class =“黑體”> DIV＃4 </ SPAN>
+   <br />位置：絕對的;
+   <br />的z-index：2;
+   </ DIV>
+</ DIV>
+
+</ BODY> </ HTML>
+
+ +

另請參見

+ + + +
+

原始文檔信息

+ + +
+ +

 

diff --git a/files/zh-tw/web/css/css_properties_reference/index.html b/files/zh-tw/web/css/css_properties_reference/index.html new file mode 100644 index 0000000000..74d192427e --- /dev/null +++ b/files/zh-tw/web/css/css_properties_reference/index.html @@ -0,0 +1,317 @@ +--- +title: CSS 屬性參考 +slug: Web/CSS/CSS_Properties_Reference +translation_of: Web/CSS/CSS_Properties_Reference +--- +

常見 CSS 屬性參考

+ +

下列為最為常見的 CSS 屬性基本清單及其對應的 文件物件模型(DOM)屬性——通常由 JavaScript 進行存取：

+ +
備註:  此清單並不完整， 更多屬性請見  CSS 參考文件 與  Mozilla CSS extensions。 CSS參考文件也包含屬性使用範例。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSSJavaScript
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
floatcssFloat
text-aligntextAlign
text-decorationtextDecoration
text-decoration: blinktextDecorationBlink
text-decoration: line-throughtextDecorationLineThrough
text-decoration: nonetextDecorationNone
text-decoration: overlinetextDecorationOverline
text-decoration: underlinetextDecorationUnderline
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexzIndex
diff --git a/files/zh-tw/web/css/css_selectors/index.html b/files/zh-tw/web/css/css_selectors/index.html new file mode 100644 index 0000000000..5f52beea02 --- /dev/null +++ b/files/zh-tw/web/css/css_selectors/index.html @@ -0,0 +1,123 @@ +--- +title: CSS Selectors +slug: Web/CSS/CSS_Selectors +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

選擇器可以定義某組 CSS 樣式要套用到哪些元素上。

+ +

基本選擇器

+ +
+
通用選擇器（Universal selector）
+
用以選擇所有元素。（可選）可以將其限制為特定的名稱空間或所有名稱空間。
+ 語法: * ns|* *|*
+ 範例: * 套用文檔中所有元素。
+
標籤選擇器（Type selector）
+
用以選擇所有符合指定標籤的元素。
+ 語法: elementname
+ 範例: input 可選出任一 <input> 元素。
+
類別選擇器（Class selector）
+
用以選擇所有符合指定 class 屬性值的元素。
+ 語法: .classname
+ 範例: .index 可選出任一含有 index 的 class 屬性值之元素。
+
ID選擇器（ID selector）
+
用以選擇指定 id 屬性值的元素。（一個文件中，每個ID屬性都是唯一的。）
+ 語法: #idname
+ 範例: #toc 會比對含有 ID 是 toc 的元素(可以定義成 id="toc" 或其他類似的定義)。
+
屬性選擇器（Attribute selector）
+
用以選擇所有符合指定屬性的元素。
+ 語法: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ 範例: [autoplay] 將會套用含有 autoplay 屬性的元素。(不論這個屬性的值是什麼)。
+
+ +

分組選擇器

+ +
+
選擇器列表（Selector list）
+
, 用以將不同的選擇器組合起來的一種方法。
+ 語法: A, B
+ 範例: div, span 將同時選擇 <div> 和 <span> 元素。
+
+ +

組合選擇器

+ +
+
+
後代選擇器（Descendant combinator）
+
  (空格) 用以選擇某個元素後代的元素。
+ 語法: A B
+ 範例: div span 套用所有  <div> 元素內部的所有 <span> 元素。
+
子代選擇器（Child combinator）
+
> 用以選擇某個元素後代的元素。
+ 語法: A > B（B元素不可在A元素的其他元素裡）
+ 範例: ul > li 套用所有 <li> 元素內部的 <ul> 子元素。
+
一般兄弟選擇器（General sibling combinator）
+
~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.
+ 語法: A ~ B
+ 範例: p ~ span will match all {{HTMLElement("span")}} elements that follow a {{HTMLElement("p")}}, immediately or not.
+
相鄰兄弟選擇器（Adjacent sibling combinator）
+
+ 選擇緊接在後的元素，並共享父元素。
+ 語法: A + B
+ 範例: h2 + p 套用所有 緊接在 <h2> 元素後的 <p> 元素，並擁有 <h2> 的父元素。
+
Column combinator {{Experimental_Inline}}
+
The || combinator selects nodes which belong to a column.
+ 語法: A || B
+ 範例: col || td will match all {{HTMLElement("td")}} elements that belong to the scope of the {{HTMLElement("col")}}.
+
+ +

偽選擇器

+ +
+
Pseudo classes
+
The : pseudo allow the selection of elements based on state information that is not contained in the document tree.
+ 範例: a:visited will match all {{HTMLElement("a")}} elements that have been visited by the user.
+
Pseudo elements
+
The :: pseudo represent entities that are not included in HTML.
+ 範例: p::first-line will match the first line of all {{HTMLElement("p")}} elements.
+
+ +

規範

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}Added the || column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}Added the ~ general sibling combinator and tree-structural pseudo-classes.
+ Made pseudo-elements use a :: double-colon prefix. Additional attribute selectors
{{SpecName("CSS2.1", "selector.html")}}{{Spec2("CSS2.1")}}Added the > child and + adjacent sibling combinators.
+ Added the universal and attribute selectors.
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition.
+ +

See the pseudo-class and pseudo-element specification tables for details on those.

+ +

參見

+ + diff --git a/files/zh-tw/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/zh-tw/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..e21ca62c5f --- /dev/null +++ b/files/zh-tw/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,62 @@ +--- +title: '使用 :target' +slug: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +

When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience. As an aid to identifying the destination of a link that points to a specific portion of a document, CSS3 Selectors introduces the {{ Cssxref(":target") }} pseudo-class. Netscape 7.1 introduced support for this pseudo-class into the Netscape family, giving authors a new way to assist users keep oriented within large documents.

+ +

挑選目標

+ +

The pseudo-class {{ Cssxref(":target") }} is used to style the target element of a URI containing a fragment identifier. For example, the URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example contains the fragment identifier #Example. In HTML, identifiers are found as the values of either id or name attributes, since the two share the same namespace. Thus, the example URI would point to the heading "Example" in this document.

+ +

Suppose you wish to style any h2 element that is the target of a URI, but do not want any other kind of element to get a target style. This is simple enough:

+ +
h2:target {font-weight: bold;}
+ +

It's also possible to create styles that are specific to a particular fragment of the document. This is done using the same identifying value that is found in the URI. Thus, to add a border to the #Example fragment, we would write:

+ +
#Example:target {border: 1px solid black;}
+ +

選擇所有元素

+ +

If the intent is to create a "blanket" style that will apply to all targeted elements, then the universal selector comes in handy:

+ +
:target {color: red;}
+
+ +

範例

+ +

In the following example, there are five links that point to elements in the same document. Selecting the "First" link, for example, will cause <h1 id="one"> to become the target element. Note that the document may jump to a new scroll position, since target elements are placed on the top of the browser window if possible.

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

結論

+ +

In cases where a fragment identifier points to a portion of the document, readers may become confused about which part of the document they're supposed to be reading. By styling the target of a URI, reader confusion can be reduced or eliminated.

+ + + + + +
+

文檔訊息

+ + +
diff --git a/files/zh-tw/web/css/css_transitions/index.html b/files/zh-tw/web/css/css_transitions/index.html new file mode 100644 index 0000000000..30fb2738c2 --- /dev/null +++ b/files/zh-tw/web/css/css_transitions/index.html @@ -0,0 +1,110 @@ +--- +title: CSS Transitions +slug: Web/CSS/CSS_Transitions +translation_of: Web/CSS/CSS_Transitions +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS Transitions is a module of CSS that defines how to create smooth transitions between values of given CSS properties. It allows to create them but also to define their evolution, using timing functions.

+ +

參考

+ +

屬性

+ +
+ +
+ +

指南

+ +
+
Using CSS transitions
+
Step-by-step tutorial about how to create smooth transitions using CSS. This article describes each relevant CSS property and explains how they interact.
+
+ +

規範

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions')}}{{Spec2('CSS3 Transitions')}}Initial definition
+ +

瀏覽器相容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0 {{property_prefix("-webkit")}}
+ 26.0		{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10.011.6 {{property_prefix("-o")}}
+ 12.10 #		3.0 {{property_prefix("-webkit")}}
+ 6.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1 {{property_prefix("-webkit")}}{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}10.0 {{property_prefix("-o")}}
+ 12.10 #		3.2 {{property_prefix("-webkit")}}
+
+ +

參見

+ + diff --git a/files/zh-tw/web/css/css_transitions/using_css_transitions/index.html b/files/zh-tw/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..ecbdf92487 --- /dev/null +++ b/files/zh-tw/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,384 @@ +--- +title: CSS 轉場 +slug: Web/CSS/CSS_Transitions/Using_CSS_transitions +tags: + - CSS animation + - CSS transition + - CSS 轉場 + - CSS 過渡 +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +

   

+
+

原文 : https://developer.mozilla.org/en/CSS/CSS_transitions

+

 

+
+

{{ SeeCompatTable() }}

+

   CSS transitions 是 CSS3 specification 草案的一部分，他可以用來調整 CSS animation 變動的速度。舉例來說，倘若你設計了一個 element 會由白轉紅，你可以透過 CSS transitions 來控制轉變的時間及變化曲線。

+
+ 注意： CSS transitions specification 目前仍舊以草案形式存在，所以當你要在 Gecko 的系統中使用時，記得加上 "-moz-" 的前綴。此外，為了更好的相容，你還得加上 "-webkit-" 前綴 (給基於 Webkit 技術的瀏覽器)以及 "-o-" (Opera 使用)。舉例來說，你可能會寫出包含有 -moz-transition, -webkit-transition 及 -o-transition 的程式。
+

可供調整的 CSS property 清單

+

  CSS transitions 和 CSS animations 中可以用來修改的屬性在 CSS animatable properties 可以看到。這裡頭同時包含了 SVG properties。

+
+ 注意: 這些列出 properties 可能都還會改變，所以請使用已經被支援的那些，以免造成無法預期的結果。
+

CSS transition properties

+

  我們可以透過 {{ cssxref("transition") }} property 來控制 CSS transitions。這可有效避免使用過長的參數來控制你的 transitions，這樣亦減少了 debug 的難度。

+

  下列的 sub-properties 可以協助你控制轉場的性質：

+
+
+ {{ cssxref("transition-property") }}
+
+  定義哪些 CSS properties 會被轉場效果影響。除了這些被你特別指出的 property 名單，其他的轉場一如以往的會在瞬間完成。
+
+ {{ cssxref("transition-duration") }}
+
+ 定義轉場所花費的時間。你可以只定義一個時間給所有 property 使用，也可以給定多組不同時間。
+
+ {{ cssxref("transition-timing-function") }}
+
+ 設定轉場時所依據的貝茲曲線。
+
+ {{ cssxref("transition-delay") }}
+
+ 定義多久之後開始發生轉場。
+
+

使用漸變函式 (transition timing function)

+

  漸變函式可用來定義轉場發生的時間曲線。其規範方式是以四個參數的貝茲曲線代表：

+

+

  CSS transition function manipulator 是一個可以讓你非常容易以視覺化方式了解轉場流程的工具。

+

  除了自行定義之外，尚有幾個已經預先定義好的函式：

+
    +
  • ease, 等同於 cubic-bezier(0.25, 0.1, 0.25, 1.0)
    • +
  • linear, 等同於 cubic-bezier(0.0, 0.0, 1.0, 1.0)
    • +
  • ease-in, 等同於 cubic-bezier(0.42, 0, 1.0, 1.0)
    • +
  • ease-out, 等同於 cubic-bezier(0, 0, 0.58, 1.0)
    • +
  • ease-in-out, 等同於 cubic-bezier(0.42, 0, 0.58, 1.0)
    • +
+

一個 transition timing effect 範例

+

  我們在這直接用範例來說明。

+

  在看程式碼之前，或許你會想先看看實際的執行效果。請挑個有支援 transitions 的瀏覽器，然後看看這個 (而這裡有這個範例的相關 CSS 程式碼)。

+

  首先，先以 HTML 創建這個範例的主要外殼：

+ 
<ul>
+  <li id="long1">Long, gradual transition...</li>
+  <li id="fast1">Very fast transition...</li>
+  <li id="delay1">Long transition with a 2-second delay...</li>
+  <li id="easeout">Using ease-out timing...</li>
+  <li id="linear">Using linear timing...</li>
+  <li id="cubic1">Using cubic-bezier(0.2, 0.4, 0.7, 0.8)...</li>
+</ul>
+
+

  如你所見，每個 item 都有自己的 ID。剩下的部份交由 CSS 來處理。

+

使用延遲機制

+

  這個範例會在使用者滑鼠移過 element 後兩秒開始四秒的字體大小變化：

+ 
#delay1 {
+  position: relative;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 14px;
+}
+
+#delay1:hover {
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 36px;
+}
+
+

使用線性轉場函式 (linear transition timing function)

+

  如果你希望動畫的變動是以線性的速率，那你可以寫成：

+ 
transition-timing-function: linear;
+
+

  此外，還有許多不同的 timing functions 供你選擇，請見 {{ cssxref("transition-timing-function") }}。

+

用貝茲曲線定義 timing function

+

  你可以定義自己想要的 timing function，這要用貝茲曲線 (cubic bezier curve) 的形式定義之：

+ 
  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
+
+

  上例中我們定義了一個以 (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) 和 (1.0, 1.0) 描述的貝茲曲線。

+

偵測 transition 的完成

+

  在設計上，當 transition 完成時會觸發一個 event。在 Firefox 中，他是 transitionend ; 在 Opera 中，他是 oTransitionEnd ; 而在 WebKit 中，他是  webkitTransitionEnd。請注意相容性的問題(參閱本頁最下方)。

+

  transitionend event 提供了兩個 properties：

+
+
+ propertyName
+
+ 這指出哪個 CSS property 的 transition 已經完成。
+
+ elapsedTime
+
+ 指出 transition 花費了幾秒。注意，他不受 {{ cssxref("transition-delay") }} 影響。
+
+

  在平常使用上，你可以使用 {{ domxref("element.addEventListener()") }} method 來監控：

+ 
el.addEventListener("transitionend", updateTransition, true);
+
+
+ 注意: "transitionend" event 若 transition 在執行中被中斷(意指 transition 沒有真正完成)則不會觸發。
+

當 property value list 之間並不等長時 ... ?

+

  如果某個 property 的 list 長度比其他短時，他將會被重複，直到等長。例如：

+ 
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+
+

  他會被瀏覽器解釋成：

+ 
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}
+

  可以預期地，倘若列出的 value 過多，他會被切斷。例如：

+ 
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}
+

  那麼他等同於：

+ 
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}
+

使用 transitions 來強調選單中的選項

+

  一個使用 CSS 的好時機是用來強調目前使用者滑鼠經過的選單位置。使用 transitions 可以使效果變得更吸引人。

+

  在看實際的程式碼之前，你可以先看實際的範例 (當然你的瀏覽器要能支援 transitions)。相關的 CSS 程式在這裡。 

+

  我們先用 HTML 構建外殼：

+ 
<div class="sidebar">
+  <p><a class="menuButton" href="home">Home</a></p>
+  <p><a class="menuButton" href="about">About</a></p>
+  <p><a class="menuButton" href="contact">Contact Us</a></p>
+  <p><a class="menuButton" href="links">Links</a></p>
+</div>
+
+

  接著用 CSS 來產生特效：

+ 
.menuButton {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  -webkit-transition-property: background-color, color;
+  -webkit-transition-duration: 1s;
+  -o-transition-property: background-color, color;
+  -o-transition-duration: 1s;
+  text-align: left;
+  background-color: grey;
+  left: 5px;
+  top: 5px;
+  height: 26px;
+  color: white;
+  border-color: black;
+  font-family: sans-serif;
+  font-size: 20px;
+  text-decoration: none;
+  -moz-box-shadow: 2px 2px 1px black;
+  padding: 2px 4px;
+  border: solid 1px black;
+}
+
+.menuButton:hover {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  -webkit-transition-property: background-color, color;
+  -webkit-transition-duration: 1s;
+  -o-transition-property: background-color, color;
+  -o-transition-duration: 1s;
+  background-color:white;
+  color:black;
+  -moz-box-shadow: 2px 2px 1px black;
+}
+
+

  這些 CSS 程式使滑鼠滑過時 (在該 element 的 {{ cssxref(":hover") }} state) 造成背景及文字顏色的改變。

+

使用 transitions 來使 JavaScript 運作的更順暢

+

  Transition 是一種很好的工具，他可以幫助你的 JavaScript 執行結果看起來的更為順暢。舉例來說：

+ 
<p>Click anywhere to move the ball</p>
+<div id="foo"></div>
+
+

  當你使用 JavaScript 可以將 ball 移動到特定位置：

+ 
var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.left = (ev.clientX-25)+'px';
+    f.style.top = (ev.clientY-25)+'px';
+},false);    
+
+

  藉由 CSS，你可以使執行結果更為流暢。我們加入了：

+ 
p{
+  padding-left:60px;
+}
+#foo{
+  border-radius:50px;
+  width:50px;
+  height:50px;
+  background:#c00;
+  position:absolute;
+  top:0;
+  left:0;
+  -moz-transition: all 1s; 
+  -webkit-transition: all 1s;  
+  -ms-transition: all 1s;  
+  -o-transition: all 1s;  
+  transition: all 1s;  
+}
+
+

  你可以到 http://jsfiddle.net/RwtHn/5/ 看範例。

+

使用 transition events 來替 object 製作動畫

+

  這裡讓我們看個例子，一個內含文字的方塊左右來回移動，並且會在兩種顏色之間做轉變：

+

 

+ +

  在我們仔細研究程式碼之前可以先看範例。同樣地，可以到這看其 CSS 的寫法。

+

HTML 程式碼

+

  搭配上面範例的 HTML 程式碼並不複雜：

+ 
<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Transition Demo</title>
+    <link rel="stylesheet" href="transitions.css" type="text/css">
+    <script src="transitions.js" type="text/javascript"></script>
+  </head>
+  <body onload="runDemo()">
+    <div class="slideRight">This is a box!</div>
+  </body>
+</html>
+
+

  這裡唯一要注意的地方是我們用 slideRight 來修飾 "This is a box!"。此外，在這個文件被讀取時，就會觸發 runDemo() function。

+

CSS 程式碼

+

  我們使用 slideRight 和 slideLeft 這兩個 CSS class 來建構動畫 (請參閱 transitions.css )。這裡列出部分：

+ 
.slideRight {
+  position: absolute;
+  -moz-transition-property: background-color, color, left;
+  -moz-transition-duration: 5s;
+  -webkit-transition-property: background-color, color, left;
+  -webkit-transition-duration: 5s;
+  -o-transition-property: background-color, color, left;
+  -o-transition-duration: 5s;
+  background-color: red;
+  left: 0%;
+  color: black;
+}
+
+

  我們再這明確定義了 position property。這是一件必要的事情，不然動畫將不知道如何開始。

+

  {{ cssxref("transition-property") }} property 指出哪些 CSS properties 會被包含在動畫效果中。在這個例子中是 {{ cssxref("background-color") }}, {{ cssxref("color") }} 以及 {{ cssxref("left") }}。 {{ cssxref("transition-duration") }} property 則說明了整個動畫將歷時 5 秒。

+

  為了相容於 WebKit 及 Opera，當中還定了一些以 "-webkit-" 和 "-o-" 起始的 property。

+

  總的來說， "slideRight" class 定義了最左端點時的狀態 (準備向右滑動)。所以你可以看到 {{ cssxref("left") }} property 是 0% 。

+

  下面我們定義了 "slideLeft" class，他表示最右端時的狀態 (準備向左滑動)：

+ 
.slideLeft {
+  position: absolute;
+  -moz-transition-property: background-color, color, left;
+  -moz-transition-duration: 5s;
+  -webkit-transition-property: background-color, color, left;
+  -webkit-transition-duration: 5s;
+  -o-transition-property: background-color, color, left;
+  -o-transition-duration: 5s;
+  text-align: center;
+  background-color: blue;
+  left: 90%;
+  color: white;
+  width: 100px;
+  height: 100px;
+}
+

JavaScript 程式碼

+

  在定義了左右兩端點的狀態後，現在我們可以準備來描述 animation 了。這可以簡單的透過 JavaScript 達成。

+
+ 注意： 在這裡，倘若 CSS animations 被使用者的瀏覽器支援，那就未必要使用 JavaScript 了。
+

  首先定義 runDemo() function，他將在文件被讀取後立刻執行：

+ 
function runDemo() {
+  var el = updateTransition();
+
+  // Set up an event handler to reverse the direction
+  // when the transition finishes.
+
+  el.addEventListener("transitionend", updateTransition, true);
+}
+
+

  他呼叫了 updateTransition() function (這待會會定義)，並且他捕捉了 "transitionend" event，這使我們能夠知道動畫結束了。

+

  updateTransition() function 內容如下：

+ 
function updateTransition() {
+  var el = document.querySelector("div.slideLeft");
+
+  if (el) {
+    el.className = "slideRight";
+  } else {
+    el = document.querySelector("div.slideRight");
+    el.className = "slideLeft";
+  }
+
+  return el;
+}
+
+

  這裡的機制很簡單，我們找到 "slideLeft" 而後將他改變成 "slideRight"，接著動畫便結束。倘若此時並沒有 "slideLeft"，就表示已在右端點，於是執行反向動作。

+

瀏覽器的支援情形

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("2") }}1010.53.2
Property-webkit-transition-moz-transition-ms-transition-o-transition-webkit-transition
Transition ended eventwebkitTransitionEndtransitionendMSTransitionEndoTransitionEndwebkitTransitionEnd
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatGeckoMobile("2") }}{{ CompatUnknown() }}103.2
+
+

更多資訊

+ +

{{ HTML5ArticleTOC() }}

+

{{ languages( { "es": "es/CSS/Transiciones_de_CSS", "ja": "ja/CSS/CSS_transitions" } ) }}

+
+
+

 

diff --git a/files/zh-tw/web/css/cursor/index.html b/files/zh-tw/web/css/cursor/index.html new file mode 100644 index 0000000000..6e20cbbb43 --- /dev/null +++ b/files/zh-tw/web/css/cursor/index.html @@ -0,0 +1,306 @@ +--- +title: cursor +slug: Web/CSS/cursor +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}
+ +

此 cursor CSS 屬性可以指定當滑鼠指標指向哪個物件時，顯示不同的游標.

+ +
{{EmbedInteractiveExample("pages/css/cursor.html")}}
+ + + +

語法

+ +
/* 關鍵字值 */
+cursor: pointer;
+cursor: auto;
+
+/* URL, with a keyword fallback */
+cursor: url(hand.cur), pointer;
+
+/* URL and coordinates, with a keyword fallback */
+cursor: url(cursor1.png) 4 12, auto;
+cursor: url(cursor2.png) 2 2, pointer;
+
+/* 全域值 */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+
+ +

The cursor property is specified as zero or more <url> values, separated by commas, followed by a single mandatory keyword value. Each <url> should point to an image file. The browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified).

+ +

Each <url> may be optionally followed by a pair of space-separated numbers, which represent <x><y> coordinates. These will set the cursor's hotspot, relative to the top-left corner of the image.

+ +

For example, this specifies two images using <url> values, providing <x><y> coordinates for the second one, and falling back to the progress keyword value if neither image can be loaded:

+ +
cursor: url(one.svg), url(two.svg) 5 5, progress;
+ +

數值

+ +
+
<url>
+
A url(…) or a comma separated list url(…), url(…), …, pointing to an image file. More than one {{cssxref("<url>")}} may be provided as fallbacks, in case some cursor image types are not supported. A non-URL fallback (one or more of the keyword values) must be at the end of the fallback list. See Using URL values for the cursor property for more details.
+
<x> <y> {{experimental_inline}}
+
Optional x- and y-coordinates. Two unitless nonnegative numbers less than 32.
+
關鍵字值
+
+

Move your mouse over values to see their live appearance in your browser:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
分類CSS 值範例備註說明
一般auto The UA will determine the cursor to display based on the current context. E.g., equivalent to text when hovering text.
defaultdefault.gifThe platform-dependent default cursor. Typically an arrow.
none No cursor is rendered.
連結與狀態context-menucontext-menu.pngA context menu is available.
helphelp.gifHelp information is available.
pointerpointer.gifThe cursor is a pointer that indicates a link. Typically an image of a pointing hand.
progressprogress.gifThe program is busy in the background, but the user can still interact with the interface (in contrast to wait).
waitwait.gifThe program is busy, and the user can't interact with the interface (in contrast to progress). Sometimes an image of an hourglass or a watch.
選取cellcell.gifThe table cell or set of cells can be selected.
crosshaircrosshair.gifCross cursor, often used to indicate selection in a bitmap.
texttext.gifThe text can be selected. Typically the shape of an I-beam.
vertical-textvertical-text.gifThe vertical text can be selected. Typically the shape of a sideways I-beam.
拖曳aliasalias.gifAn alias or shortcut is to be created.
copycopy.gifSomething is to be copied.
movemove.gifSomething is to be moved.
no-dropno-drop.gifAn item may not be dropped at the current location.
+ {{bug("275173")}}: On Windows and Mac OS X, no-drop is the same as not-allowed.
not-allowednot-allowed.gifThe requested action will not be carried out.
grabgrab.gifSomething can be grabbed (dragged to be moved).
grabbinggrabbing.gifSomething is being grabbed (dragged to be moved).
改變尺寸與捲軸尺all-scrollall-scroll.gifSomething can be scrolled in any direction (panned).
+ {{bug("275174")}}: On Windows, all-scroll is the same as move.
col-resizecol-resize.gifThe item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
row-resizerow-resize.gifThe item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
n-resizeExample of a resize towards the top cursorSome edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
+ In some environments, an equivalent bidirectional resize cursor is shown. For example, n-resize and s-resize are the same as ns-resize.
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gifBidirectional resize cursor.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
縮放zoom-inzoom-in.gif +

Something can be zoomed (magnified) in or out.

+
zoom-outzoom-out.gif
+
+
+ +

公式語法

+ +
{{csssyntax}}
+
+ +

範例

+ +
.foo {
+  cursor: crosshair;
+}
+
+.bar {
+  cursor: zoom-in;
+}
+
+/* A fallback keyword value is required when using a URL */
+.baz {
+  cursor: url("hyper.cur"), auto;
+}
+
+ +

規格

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}Addition of several keywords and the positioning syntax for url().
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

瀏覽器相容性

+ + + +

{{Compat("css.properties.cursor")}}

+ +

參照

+ + diff --git a/files/zh-tw/web/css/descendant_combinator/index.html b/files/zh-tw/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..6fe82cfc8d --- /dev/null +++ b/files/zh-tw/web/css/descendant_combinator/index.html @@ -0,0 +1,121 @@ +--- +title: 後裔選擇器 +slug: Web/CSS/Descendant_combinator +tags: + - CSS + - CSS參考 + - Selectors + - 初學者 + - 選擇器 +translation_of: Web/CSS/Descendant_combinator +--- +

{{CSSRef("Selectors")}}

+ +

簡介

+ +

␣ 組合符號 (代表空白, 或更精準地說，代表一或多個空白字元) 結合了兩種選擇器，選擇了只有當第二個選擇器的目標為第一個選擇器目標的後裔時的元素，後裔選擇器跟子選擇器相似，但是不要求披對的元素要是嚴格是父子關係。

+ +

語法

+ +
selector1 selector2 { style properties }
+
+ +

範例

+ +
span { background-color: white; }
+div span { background-color: DodgerBlue; }
+
+ +
<div>
+  <span>Span 1.
+    <span>Span 2.</span>
+  </span>
+</div>
+<span>Span 3.</span>
+
+ +

{{ EmbedLiveSample('Example', 200, 50) }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Selectors', '#descendant-combinators', 'descendant combinator') }}{{ Spec2('CSS4 Selectors') }} 
{{ SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator') }}{{ Spec2('CSS3 Selectors') }} 
{{ SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors') }}{{ Spec2('CSS2.1') }} 
{{ SpecName('CSS1', '#contextual-selectors', 'contextual selectors') }}{{ Spec2('CSS1') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/zh-tw/web/css/grid-row/index.html b/files/zh-tw/web/css/grid-row/index.html new file mode 100644 index 0000000000..d7c3ed1543 --- /dev/null +++ b/files/zh-tw/web/css/grid-row/index.html @@ -0,0 +1,194 @@ +--- +title: grid-row +slug: Web/CSS/grid-row +translation_of: Web/CSS/grid-row +--- +

Summary 

+ +

The grid-row CSS property is a shorthand property for {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}} specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its {{glossary("grid areas", "grid area")}}.

+ +

If two <grid-line> values are specified, the grid-row-start longhand is set to the value before the slash, and the grid-row-end longhand is set to the value after the slash.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Keyword values */
+grid-row: auto;
+grid-row: auto / auto;
+
+/* <custom-ident> values */
+grid-row: somegridarea;
+grid-row: somegridarea / someothergridarea;
+
+/* <integer> + <custom-ident> values */
+grid-row: somegridarea 4;
+grid-row: 4 somegridarea / 6;
+
+/* span + <integer> + <custom-ident> values */
+grid-row: span 3;
+grid-row: span somegridarea;
+grid-row: 5 somegridarea span;
+grid-row: span 3 / 6;
+grid-row: span somegridarea / span someothergridarea;
+grid-row: 5 somegridarea span / 2 span;
+
+/* Global values */
+grid-row: inherit;
+grid-row: initial;
+grid-row: unset;
+
+ +

Values

+ +
+
auto
+
Is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
+
<custom-ident>
+
If there is a named line with the name '<custom-ident>-start'/'<custom-ident>-end', it contributes the first such line to the grid item’s placement. +

Note: Named grid areas automatically generate implicit named lines of this form, so specifying grid-row: foo; will choose the start/end edge of that named grid area (unless another line named foo-start/foo-end was explicitly specified before it).

+ +

Otherwise, this is treated as if the integer 1 had been specified along with the <custom-ident>.

+
+
<integer> && <custom-ident>?
+
Contributes the nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. +

If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

+ +

An {{cssxref("integer")}} value of 0 is invalid.

+
+
span && [ <integer> || <custom-ident> ]
+
Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is n lines from the opposite edge. +

If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

+ +

If the <integer> is omitted, it defaults to 1. Negative integers or 0 are invalid.

+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML Content

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

CSS Content

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(6, 1fr);
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-row: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-row: span 2 / 7;
+}
+
+ +

{{EmbedLiveSample("Example", "200px", "200px")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-row", "grid-row")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.grid-row")}}

+ +

See also

+ + + + diff --git a/files/zh-tw/web/css/grid-template-columns/index.html b/files/zh-tw/web/css/grid-template-columns/index.html new file mode 100644 index 0000000000..31ef2b30b3 --- /dev/null +++ b/files/zh-tw/web/css/grid-template-columns/index.html @@ -0,0 +1,196 @@ +--- +title: 网格模板列 +slug: Web/CSS/grid-template-columns +tags: + - CSS + - CSS網格 + - 列子 +translation_of: Web/CSS/grid-template-columns +--- +

Summary

+ +

The grid-template-columns CSS property defines the line names and track sizing functions of the {{glossary("grid column", "grid columns")}}.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Keyword value */
+grid-template-columns: none;
+
+/* <track-list> values */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+
+/* <auto-track-list> values */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+
+ +

Values

+ +
+
none
+
Is a keyword meaning that there is no explicit grid. Any columns will be implicitly generated and their size will be determined by the {{cssxref("grid-auto-columns")}} property.
+
<length>
+
Is a non-negative length.
+
<percentage>
+
Is a non-negative {{cssxref("percentage", "<percentage>")}} value relative to the inline size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as auto.
+ The intrinsic size contributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.
+
<flex>
+
Is a non-negative dimension with the unit fr specifying the track’s flex factor. Each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. +

When appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)).

+
+
max-content
+
Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.
+
min-content
+
Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.
+
{{cssxref("minmax", "minmax(min, max)")}}
+
Is a functional notation that defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. As a maximum, a <flex> value sets the track’s flex factor. It is invalid as a minimum.
+
auto
+
Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.
+
+

Note: auto track sizes (and only auto track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties.

+
+
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
+
Represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum.
+
{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}
+
Represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

CSS

+ +
#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="areaA">A</div>
+  <div id="areaB">B</div>
+</div>
+ +

Result

+ +

{{EmbedLiveSample("Examples", "100%", "20px")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.grid-template-columns")}}

+ +

See also

+ + + + diff --git a/files/zh-tw/web/css/grid-template/index.html b/files/zh-tw/web/css/grid-template/index.html new file mode 100644 index 0000000000..9363bb9e1e --- /dev/null +++ b/files/zh-tw/web/css/grid-template/index.html @@ -0,0 +1,197 @@ +--- +title: grid-template +slug: Web/CSS/grid-template +translation_of: Web/CSS/grid-template +--- +

的grid-templateCSS屬性是一個速記屬性，用於定義{{詞彙表（“網格列”，“網格列”）}}，{{詞彙表（“網格行”，“行”）}}，和{{詞彙表（“格狀區“，” area“）}}。

+ +
{{EmbedInteractiveExample（“ pages / css / grid-template.html”）}}
+ + + +

作者可以為長期屬性設置值：{{cssxref（“ grid-template-rows”）}}，{{cssxref（“ grid-template-columns”）}}和{{cssxref（“ grid-template-areas “）}}。

+ +

句法

+ +
/* Keyword value */
+grid-template: none;
+
+/* grid-template-rows / grid-template-columns values */
+grid-template: 100px 1fr / 50px 1fr;
+grid-template: auto 1fr / auto 1fr auto;
+grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
+grid-template: fit-content(100px) / fit-content(40%);
+
+/* grid-template-areas grid-template-rows / grid-template-column values */
+grid-template: "a a a"
+               "b b b";
+grid-template: "a a a" 20%
+               "b b b" auto;
+grid-template: [header-top] "a a a"     [header-bottom]
+                 [main-top] "b b b" 1fr [main-bottom]
+                            / auto 1fr auto;
+
+/* Global values */
+grid-template: inherit;
+grid-template: initial;
+grid-template: unset;
+
+ +

價值觀

+ +
+
none
+
是將所有三個長期屬性設置為的關鍵字none，表示沒有顯式網格。沒有命名的網格區域。行和列將隱式生成；它們的大小將由{{cssxref（“ grid-auto-rows”）}}和{{cssxref（“ grid-auto-columns”）}}屬性確定。
+
<'grid-template-rows'> / <'grid-template-columns'>
+
將{{cssxref（“ grid-template-rows”）}}和{{cssxref（“ grid-template-columns”）}}設置為指定值，並設置{{cssxref（“ grid-template-areas”）} }至none。
+
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
+
Sets {{cssxref("grid-template-areas")}} to the strings listed, {{cssxref("grid-template-rows")}} to the track sizes following each string (filling in auto for any missing sizes), and splicing in the named lines defined before/after each size, and {{cssxref("grid-template-columns")}} to the track listing specified after the slash (or none, if not specified).
+ +

Note: The {{cssxref("repeat")}} function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ASCII art”.

+
+
+ +

Note: The {{cssxref("grid")}} shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. Use grid (as opposed to grid-template) to prevent these values from cascading in seperately.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

CSS

+ +
#page {
+  display: grid;
+  width: 100%;
+  height: 200px;
+  grid-template: [header-left] "head head" 30px [header-right]
+                 [main-left]   "nav  main" 1fr  [main-right]
+                 [footer-left] "nav  foot" 30px [footer-right]
+                 / 120px 1fr;
+}
+
+header {
+  background-color: lime;
+  grid-area: head;
+}
+
+nav {
+  background-color: lightblue;
+  grid-area: nav;
+}
+
+main {
+  background-color: yellow;
+  grid-area: main;
+}
+
+footer {
+  background-color: red;
+  grid-area: foot;
+}
+ +

HTML

+ +
<section id="page">
+  <header>Header</header>
+  <nav>Navigation</nav>
+  <main>Main area</main>
+  <footer>Footer</footer>
+</section>
+ +

Result

+ +

{{EmbedLiveSample("Examples", "100%", "200px")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-template", "grid-template")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.grid-template")}}

+ +

See also

+ + + + diff --git a/files/zh-tw/web/css/height/index.html b/files/zh-tw/web/css/height/index.html new file mode 100644 index 0000000000..139ec496b6 --- /dev/null +++ b/files/zh-tw/web/css/height/index.html @@ -0,0 +1,234 @@ +--- +title: height +slug: Web/CSS/height +translation_of: Web/CSS/height +--- +
{{CSSRef}}
+ +

概要

+ +

高度(height) 的 CSS 屬性指定了元素內容區域的高度。content area 在元素的留白(padding)、邊框(border) 與 邊界(margin) 內。

+ +

{{cssxref("min-height")}} 與 {{cssxref("max-height")}} 的特性比 {{Cssxref("height")}} 更重要。

+ +

{{cssinfo}}

+ +

語法

+ +
/* Keyword value */
+height: auto;
+
+/* <length> values */
+height: 120px;
+height: 10em;
+
+/* <percentage> value */
+height: 75%;
+
+/* Global values */
+height: inherit;
+height: initial;
+height: unset;
+
+ +

值

+ +
+
<length>
+
查看 {{cssxref("<length>")}} 可用的單位。
+
<percentage>
+
{{cssxref("<percentage>")}} 相對於元素的塊狀高度。如果沒有指定塊狀元素的高度，預設值為 auto。用在 root 元素 (e.g. <html>) 上是相對於初始塊狀元素（即顯示器的尺寸）。
+
border-box {{experimental_inline}}
+
If present, the preceding {{cssxref("<length>")}} or {{cssxref("<percentage>")}} is applied to the element's border box.
+
content-box {{experimental_inline}}
+
{{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 是應用於元素的 content box.
+
auto
+
瀏覽器將計算並選擇指定元素的高度。
+
fill {{experimental_inline}}
+
Use the fill-available inline size or fill-available block size, as appropriate to the writing mode.
+
max-content {{experimental_inline}}
+
The intrinsic preferred height.
+
min-content {{experimental_inline}}
+
The intrinsic minimum height.
+
available {{experimental_inline}}
+
The containing block height minus vertical margin, border and padding.
+
fit-content {{experimental_inline}}
+
The larger of: +
    +
  • the intrinsic minimum height
    • +
  • the smaller of the intrinsic preferred height and the available height
    • +
+
+
+ +

正式語法

+ +
{{csssyntax}}
+ +

範例

+ +

HTML

+ +
<div id="red">
+  <span>I'm 50 pixels tall.</span>
+</div>
+<div id="green">
+  <span>I'm 25 pixels tall.</span>
+</div>
+<div id="parent">
+  <div id="child">
+    <span>I'm half the height of my parent.</span>
+  </div>
+</div>
+
+ +

CSS

+ +
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 3px solid #999999;
+}
+
+#red {
+  height: 50px;
+}
+
+#green {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+
+ +

{{EmbedLiveSample('Example')}}

+ +

規格

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}{{Spec2('CSS3 Box')}}Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}{{Spec2('CSS3 Transitions')}}Lists height as animatable.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}Adds support for the {{cssxref("<length>")}} values and precises on which element it applies to.
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}Initial definition
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Adds new sizing keywords for width and height.
+ +

瀏覽器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}4.07.01.0
fill, fit-content, min-content, max-content{{CompatChrome(46.0)}}{{CompatUnknown}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}6.06.01.0{{CompatVersionUnknown}}
fill, fit-content, min-content, max-content{{CompatUnknown}}{{CompatChrome(46.0)}}{{CompatUnknown}}    {{CompatChrome(46.0)}}
+
+ +

See also

+ + diff --git a/files/zh-tw/web/css/ime-mode/index.html b/files/zh-tw/web/css/ime-mode/index.html new file mode 100644 index 0000000000..a487af23e0 --- /dev/null +++ b/files/zh-tw/web/css/ime-mode/index.html @@ -0,0 +1,56 @@ +--- +title: ime-mode +slug: Web/CSS/ime-mode +tags: + - CSS +translation_of: Web/CSS/ime-mode +--- +

{{ CSSRef() }} +{{ Fx_minversion_header(3) }} +

+

摘要

+

ime-mode 特性可用以控制某文字輸入欄位的輸入法狀態。 +

+ +

語法

+
ime-mode: <mode>
+
+

特性值

+
auto
不改變輸入法狀態，此為預設值。 +
normal
輸入法設為一般狀態，使用者可在自訂樣式表中蓋過網頁的設定。Internet Explorer 不支援此值。 +
active
輸入法設為啟用狀態。除非使用者刻意關閉、否則此文字欄位將使用輸入法工具。Linux 不支援此值。 +
inactive
輸入法設為關閉狀態，但使用者仍可另行啟用。Linux 不支援此值。 +
disabled
輸入法設為停用狀態，在此欄位中使用者亦無法將其啟用。 +
+

範例

+
<input type="text" name="name" value="initial value" style="ime-mode: disabled">
+
+

此範例在輸入欄位中設定為停用輸入法，在後端資料庫不支援擴充字元集、卻必須讓使用者自行輸入文字時，可以使用。 +

+

備註

+

與 Internet Explorer 不同的地方是，Firefox 實作 ime-mode 時亦允許此特性套用至密碼輸入欄位，但這在理想的使用體驗上有不妥之處、而密碼欄位也應該停用輸入法。若有網站執意將不適切的行為套用至密碼欄位，則使用者可以在自訂 CSS 檔中加上下列設定以強迫調整此功能： +

+
input[type=password] {
+	ime-mode: auto !important;
+}
+
+

{{ Note("一般說來，公開的網站不該自行調整輸入法模式的行為。這個特性主要是給網際應用程式使用的。") }} +

Mac 版的 Gecko 1.9 中，若某欄位設定停用輸入法，則自該欄位移開輸入焦點時並無法自行恢復輸入法狀態，所以若使用 disabled 值，Mac 的使用者可能會碰上麻煩。 +

{{ Note("別僅僅仰賴停用輸入法的招術來避免使用者輸入擴充字元，因為即使輸入法被停用，使用者依然可自他處剪下擴充字元後貼到表單欄位中。") }} +

+

規格出處

+ +

瀏覽器相容性

+

Firefox 3 以後便能同 Internet Explorer 一般支援 ime-mode 特性。 +


+

+
+
+{{ languages( { "en": "en/CSS/ime-mode", "es": "es/CSS/ime-mode", "fr": "fr/CSS/ime-mode", "ja": "ja/CSS/ime-mode" } ) }} diff --git a/files/zh-tw/web/css/index.html b/files/zh-tw/web/css/index.html new file mode 100644 index 0000000000..f894fc2d6a --- /dev/null +++ b/files/zh-tw/web/css/index.html @@ -0,0 +1,100 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Cascading Style Sheets + - Design + - Landing + - Layout + - Reference + - Style Sheets + - Styles + - Stylesheets + - 樣式表 + - 版面配置 + - 設計 +translation_of: Web/CSS +--- +

層疊樣式表（Cascading Style Sheets, CSS）是用來描述 HTML 或 XML（包含 SVG 或 XHTML 等各種 XML 變形）文件外觀的樣式表語言。CSS 會描述文件裡的結構化元素，該如何呈現在螢幕、紙、語音報讀、或其他媒介上。

+ +

CSS 是開放網路的核心語言之一，具有標準化的 W3C 規範。歷經不同層級的開發，CSS1 目前已被棄用、CSS2.1 是建議規範，而 CSS3 目前被分作數個較小的模組，持續在標準化的路上行進。

+ +
+ + +
+
+

教學

+ +

我們的 CSS 學習專區有很多從頭教起的 CSS 模組。你不需要背景知識。

+ +
+
CSS 介紹
+
此模組讓你理解 CSS 工作原理，包含選擇器與屬性、撰寫 CSS 規則、在 HTML 套用 CSS、如何在 CSS 指定長度、色彩、還有其它單位、階層與繼承、box model 基礎、以及針對 CSS 除錯。
+
文字樣式
+
在這裡我們專注在文字樣式的基礎，包含設定字體、粗細、斜體、行距、字距、陰影以及其他文字屬性。最後以應用自訂字體、樣式化列表、樣式化連結結束。
+
樣式化盒子
+
接著，我們關注樣式化盒子，這是網頁排版中一個基礎的環節。在這個系列中我們會複習盒子模型，然後操作盒子的排版，像是設定留白、邊框、邊距、背景顏色或圖片以及其他特色，還有一些酷炫的功能像是陰影、過濾器。
+
CSS 排版
+
到了這裡，我們已經看完 CSS 的基礎（樣式化文字、樣式化與操作盒子使你的內容可以合適的展示）。現在該來看看如何把你的盒子放在相對於可視區正確的地方。我們已經擁有必要的知識，所以你可以更深入了解 CSS 排版、看不同的顯示設定、傳統排版方法如浮動或定位、新的排版方法如彈性盒子。
+
+
+ +
+

參考

+ + + +

CSS 開發工具

+ + + +

Meta 錯誤

+ +
    +
  • Firefox: {{bug(1323667)}}
    • +
+
+
+
+ +

參見

+ + diff --git a/files/zh-tw/web/css/inheritance/index.html b/files/zh-tw/web/css/inheritance/index.html new file mode 100644 index 0000000000..f67ad62107 --- /dev/null +++ b/files/zh-tw/web/css/inheritance/index.html @@ -0,0 +1,48 @@ +--- +title: 繼承 +slug: Web/CSS/inheritance +translation_of: Web/CSS/inheritance +--- +

摘要

+ +

每個 CSS property definition 都寫道是否這個屬性預設有繼承: ("Inherited: Yes") 或是 預設沒有繼承: ("Inherited: no"). 這個設定將會在沒有位屬性標註值時發生.

+ +

繼承屬性

+ +

When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. Only the root element of the document gets the initial value given in the property's summary.

+ +

A typical example of an inherited property is the {{ Cssxref("color") }} property. Given the style rules:

+ +
p { color: green }
+ +

HTML:

+ +
<p>This paragraph has <em>emphasized text</em> in it.</p>
+ +

the words "emphasized text" will appear green, since the em element has inherited the value of the {{ Cssxref("color") }} property from the p element. It does not get the initial value of the property (which is the color that is used for the root element when the page specifies no color).

+ +

非繼承屬性

+ +

When no value for an non-inherited property (sometimes called a reset property in Mozilla code) has been specified on an element, the element gets the initial value of that property (as specified in the property's summary).

+ +

A typical example of a non-inherited property is the {{ Cssxref("border") }} property. Given the style rules:

+ +
 p { border: medium solid }
+ +

HTML:

+ +
  <p>This paragraph has <em>emphasized text</em> in it.</p>
+ +

the words "emphasized text" will not have a border (since the initial value of {{ Cssxref("border-style") }} is none).

+ +

註

+ +

{{ Cssxref("inherit") }} 關鍵字允許作者準確地去標註. 這個在繼承和非繼承屬性都是有效的.

+ +

參見

+ + diff --git a/files/zh-tw/web/css/line-break/index.html b/files/zh-tw/web/css/line-break/index.html new file mode 100644 index 0000000000..f7e073e100 --- /dev/null +++ b/files/zh-tw/web/css/line-break/index.html @@ -0,0 +1,71 @@ +--- +title: line-break +slug: Web/CSS/line-break +translation_of: Web/CSS/line-break +--- +
{{CSSRef}}
+ +

line-break CSS 屬性能夠設定在中文、日文和韓文(CJK) 的文字中，遇到標點或符號時該如何斷行。

+ +
/* Keyword values */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+line-break: anywhere;
+
+/* Global values */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+
+ +
{{cssinfo}}
+ +

Syntax

+ +

Values

+ +
+
auto
+
以預設的斷行規則斷開文字。
+
loose
+
Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.
+
normal
+
Break text using the most common line break rule.
+
strict
+
Break text using the most stringent line break rule.
+
anywhere 
+
+

There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the word-break property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.

+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}{{Spec2('CSS3 Text')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.line-break")}}

diff --git a/files/zh-tw/web/css/media_queries/index.html b/files/zh-tw/web/css/media_queries/index.html new file mode 100644 index 0000000000..41339e07bc --- /dev/null +++ b/files/zh-tw/web/css/media_queries/index.html @@ -0,0 +1,112 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef}}
+ +

Media Queries is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.

+ +

參考

+ +

At-rules

+ +
+ +
+ +

指南

+ +
+
Using media queries
+
Presents what media queries are doing and explains the possible expressions.
+
Testing media queries
+
Explains how to test a media query programmatically, from JavaScript.
+
+ +

規範

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Initial definition
+ +

瀏覽器相容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop(1.7)}}9.09.21.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile(1.7)}}9.09.03.1
+
diff --git a/files/zh-tw/web/css/media_queries/testing_media_queries/index.html b/files/zh-tw/web/css/media_queries/testing_media_queries/index.html new file mode 100644 index 0000000000..5c61c6483f --- /dev/null +++ b/files/zh-tw/web/css/media_queries/testing_media_queries/index.html @@ -0,0 +1,118 @@ +--- +title: 測試 media queries +slug: Web/CSS/Media_Queries/Testing_media_queries +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +

{{SeeCompatTable}}

+ +

DOM 提供了一個用程式去測試 media query 的方法：那就是透過 {{domxref("MediaQueryList") }} 物件；透過 {{domxref("MediaQueryList") }} 物件上的屬性和方法，我們可以得知、觀察目前 media query 的狀態。

+ +

創建 media query list 物件

+ +

透過傳入目標 medai query 到 {{domxref("window.matchMedia") }} 方法，我們將可以取得相對應的 MediaQueryList 物件。

+ +

以下範例將取得偵測螢幕方向的 MediaQueryList 物件：

+ +
var mql = window.matchMedia("(orientation: portrait)");
+
+ +

檢查 media query 結果

+ +

讀取 MediaQueryList 物件 的 matches 屬性就可以得知測試結果：

+ +
if (mql.matches) {
+  /* The device is currently in portrait orientation */
+} else {
+  /* The device is currently in landscape orientation */
+}
+
+ +

接收測試結果通知

+ +

當我們想要動態依據 media query 測試狀況執行對應處理，除了持續定期偵測外，還有一個更有效率的途徑：那就是註冊 media query 的事件處理器 (listener)。只要呼叫 MediaQueryList 物件上 addListener 方法，傳入符合 {{domxref("MediaQueryListListener") }} 介面的 listener 便完成事件註冊：

+ +
var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(handleOrientationChange);
+handleOrientationChange(mql);
+
+ +

上面我們替螢幕方向 media query 註冊了一個 listener。請注意，在第一次註冊後，listener 會立刻被呼叫一次，這是為了初始化準備，因為我們可能預設 UI 是針對 'portait' 模式，但目前卻是 'landscape' 模式，所以這個第一次呼叫將給予我們作初始化調整的空間。

+ +

下面handleOrientationChange() 方法便是我們針對螢幕方向變化的 listener：

+ +
function handleOrientationChange(mql) {
+  if (mql.matches) {
+    /* The device is currently in portrait orientation */
+  } else {
+    /* The device is currently in landscape orientation */
+  }
+}
+
+ +

停止接收測試結果通知

+ +

當我們不需要接受通知時，只需要呼叫 removeListener 方法，然後傳入欲移除的 listener 即可：

+ +
mql.removeListener(handleOrientationChange);
+
+ +

瀏覽器相容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatGeckoDesktop("6.0") }}1012.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0{{CompatUnknown}}1012.15
+
+ +

 

+ +

延伸閱讀

+ + diff --git a/files/zh-tw/web/css/object-fit/index.html b/files/zh-tw/web/css/object-fit/index.html new file mode 100644 index 0000000000..e6b73dc0b9 --- /dev/null +++ b/files/zh-tw/web/css/object-fit/index.html @@ -0,0 +1,217 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +translation_of: Web/CSS/object-fit +--- +
{{CSSRef}}
+ +

Summary

+ +

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

+ +

物件契合(object-fit)CSS屬性能指定置換元素(replaced element)的內容要如何契合、安裝到其使用的高度和寬度已確定的框。

+ +

 

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Keyword values */
+object-fit: fill;
+object-fit: contain;
+object-fit: cover;
+object-fit: none;
+object-fit: scale-down;
+
+/* Global values */
+object-fit: inherit;
+object-fit: initial;
+object-fit: unset;
+
+ +

Values

+ +
+
fill
+
The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.
+
contain
+
The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.
+
cover
+
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.
+
none
+
The replaced content is not resized to fit inside the element’s content box: the object’s concrete object size is determined using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.
+
scale-down
+
The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML Content

+ +
<div>
+  <h2>object-fit: fill</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
+
+  <h2>object-fit: contain</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
+
+  <h2>object-fit: cover</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
+
+  <h2>object-fit: none</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
+
+  <h2>object-fit: scale-down</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
+
+</div>
+ +

CSS Content

+ +
h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+
+ +

Output

+ +

{{ EmbedLiveSample('Example', 500, 450) }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}}The from-image and flip keywords have been added.
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support31.0{{ CompatGeckoDesktop("36") }}{{CompatNo}}11.60{{ property_prefix("-o") }}
+ 19.0		{{ CompatVersionUnknown }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.4.4{{ CompatGeckoDesktop("36") }}{{CompatNo}}11.5{{ property_prefix("-o") }}
+ 24		{{ CompatVersionUnknown }}
+
+ +

See also

+ + diff --git a/files/zh-tw/web/css/pseudo-classes/index.html b/files/zh-tw/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..1a222e59cd --- /dev/null +++ b/files/zh-tw/web/css/pseudo-classes/index.html @@ -0,0 +1,129 @@ +--- +title: 虛擬類別 +slug: Web/CSS/Pseudo-classes +translation_of: Web/CSS/Pseudo-classes +--- +

{{ CSSRef() }}

+ +

CSS 虛擬類別（pseudo-class）的元素，在特殊狀態下被選取的話，會作為關鍵字被加到選擇器裡面。例如 {{ Cssxref(":hover") }} 會讓用戶的滑鼠停在某個元素的時候，套用指定選擇器的樣式。

+ +

虛擬類別與 {{ Cssxref("pseudo-elements") }} 能讓你不只能給文件樹（document tree）本身的相關內容套用樣式，還能給諸如瀏覽歷史（{{ cssxref(":visited") }}）、內容的狀態（{{ cssxref(":checked") }}）、還有滑鼠的位置（像 {{ cssxref(":hover") }} 就能讓偵測滑鼠是否在元件上）之類的外部相關因素套用樣式。

+ +

語法

+ +
selector:pseudo-class {
+  property: value;
+}
+
+ +

基本虛擬類別的目錄

+ +
+ +
+ +

規範

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
規範狀態註解
{{ SpecName('Fullscreen') }}{{ Spec2('Fullscreen') }}定義 :fullscreen。
{{ SpecName('HTML WHATWG') }}{{ Spec2('HTML WHATWG') }}在 {{ SpecName('HTML5 W3C') }} 並沒有改變。
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}定義 :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column(), and :matches().
+ 沒有針對 {{SpecName('CSS3 Selectors')}} 與 {{SpecName('HTML5 W3C')}} 虛擬類別的重大更改（though semantic meaning not taken over）
{{ SpecName('HTML5 W3C') }}{{ Spec2('HTML5 W3C') }}定義以下 HTML context 的語意含義： :link, :visited, :active, :enabled, :disabled, :checked, and :indeterminate.
+ 定義 :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write, and :dir().
{{ SpecName('CSS3 Basic UI') }}{{ Spec2('CSS3 Basic UI') }}定義 :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write，但沒有語意含義的定義。
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}定義 :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :not().
+ 定義 :enabled, :disabled, :checked, :indeterminate 的語法，但沒有語意含義的定義。
+ 在 {{SpecName('CSS2.1')}} 並沒有明顯改變。
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}定義 :lang(), :first-child, :hover, :focus.
+ 在 {{SpecName('CSS1')}} 並沒有明顯改變。
{{SpecName('CSS1')}}{{Spec2('CSS1')}}定義 :link, :visited, :active，但沒有語意含義的定義。
+ +

參閱

+ + diff --git a/files/zh-tw/web/css/radial-gradient()/index.html b/files/zh-tw/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..bd054abab3 --- /dev/null +++ b/files/zh-tw/web/css/radial-gradient()/index.html @@ -0,0 +1,183 @@ +--- +title: radial-gradient() +slug: Web/CSS/radial-gradient() +translation_of: Web/CSS/radial-gradient() +--- +
{{CSSRef}}
+ +

CSS radial-gradient() 函數創建了一個圖片，其由一個從原點輻射開的在兩個或者多個顏色之前的漸變組成。這個方法得到的是一個CSS<gradient>數據類型的物件，其是 <image> 的一種。

+ +
{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}
+ + + +

As with any gradient, a radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

+ +

To create a radial gradient that repeats so as to fill its container, use the {{cssxref("repeating-radial-gradient")}} function instead.

+ +

Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, radial-gradient() won't work on {{Cssxref("background-color")}} and other properties that use the {{cssxref("<color>")}} data type.

+ +

Composition of a radial gradient

+ +

向量漸變(Radial gradients)由其中心點、邊緣形狀輪廓及位置、色值結束點（color stops）定義而成。

+ +

To create a smooth gradient, the radial-gradient() function draws a series of concentric shapes radiating out from the center to the ending shape (and potentially beyond). The ending shape may be either a circle or an ellipse.

+ +

Color-stop points are positioned on a virtual gradient ray that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents 100%. Each shape is a single color determined by the color on the gradient ray it intersects.

+ +

Syntax

+ +
/* A gradient at the center of its container,
+   starting red, changing to blue, and finishing green */
+radial-gradient(circle at center, red 0, blue, green 100%)
+ +

Values

+ +
+
{{cssxref("<position>")}}
+
The position of the gradient, interpreted in the same way as {{cssxref("background-position")}} or {{cssxref("transform-origin")}}. If unspecified, it defaults to center.
+
<shape>
+
The gradient's shape. The value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to ellipse.
+
<extent-keyword>
+
A keyword describing how big the ending shape must be. The possible values are: + + + + + + + + + + + + + + + + + + + + + + + + + +
KeywordDescription
closest-sideThe gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
closest-cornerThe gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center.
farthest-sideSimilar to closest-side, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
farthest-cornerThe default value, the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center.
+ +
+

Note: Early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side, respectively. Use the standard keywords only, as some implementations have already dropped those older variants.

+
+
+
<linear-color-stop>
+
A color-stop's {{cssxref("<color>")}} value, followed by an one or two optional stop positions (either a {{cssxref("<percentage>")}} or a {{cssxref("<length>")}} along the gradient's axis). A percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.
+
<color-hint>
+
Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.
+
+ +

Formal syntax

+ +
radial-gradient(
+  [ [ circle || <length> ]                         [ at <position> ]? , |
+    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
+    [ [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , |
+    at <position> ,
+  ]?
+  <color-stop-list> [ , <color-stop-list> ]+
+)
+where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+   and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+   and <linear-color-stop> = <color> [ <color-stop-length> ]?
+   and <color-stop-length> = [ <percentage> | <length> ]{1,2}
+   and <color-hint> = [ <percentage> | <length> ]
+
+ +
+

Note that negative <length>'s are not allowed, however browsers had implemented negative lengths which are now being removed. See the Firefox site compat note.

+
+ +

Examples

+ +

Simple gradient

+ + + +
.radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+}
+ +

{{EmbedLiveSample('Simple_gradient', 120, 120)}}

+ +

Non-centered gradient

+ + + +
.radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}
+ +

{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}

+ +
+

Note: Please see Using CSS gradients for more examples.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

Browser compatibility

+ + + +
{{Compat("css.types.image.gradient.radial-gradient")}}
+ +

Quantum CSS notes

+ +

Gecko used to have a long-standing bug whereby radial gradients like radial-gradient(circle gold,red) would work, even though they shouldn't because of the missing comma between circle and gold. Also, {{cssxref("calc")}} expressions were rejected — causing the value to be invalid — when used as the radius component of a radial-gradient() function ({{bug(1376019)}}). Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, released in Firefox 57) fixed these bugs.

+ +

See also

+ + diff --git a/files/zh-tw/web/css/reference/index.html b/files/zh-tw/web/css/reference/index.html new file mode 100644 index 0000000000..2b2dfc4455 --- /dev/null +++ b/files/zh-tw/web/css/reference/index.html @@ -0,0 +1,211 @@ +--- +title: CSS 參考文件 +slug: Web/CSS/Reference +translation_of: Web/CSS/Reference +--- +

Use this CSS reference to browse an alphabetical index of all the standard CSS properties, pseudo-classes, pseudo-elements, data types, and at-rules. You can also browse a list of all the CSS selectors organized by type and a list of key CSS concepts. Also included is a brief DOM-CSS / CSSOM reference.

+ +

基本語法規則

+ +

Style rule syntax

+ +
selectorlist {
+  property: value;
+  [more property:value; pairs]
+}
+
+... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+
+See selector, pseudo-class, pseudo-element lists below.
+
+ +

Style rule examples

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

For a beginner-level introduction to the syntax of CSS selectors, please see this tutorial. Be aware that any CSS syntax error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM (the rule management system) is object-based.

+ +

At-rule syntax

+ +

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

+ +

Keyword index

+ +
+

Note: The property names in this index do not include the JavaScript names where they differ from the CSS standard names.

+
+ +
{{CSS_Ref}}
+ +

Selectors

+ +

Basic selectors

+ + + +

Combinators

+ + + +

Pseudo-classes

+ +
+ +
+ +

Pseudo-elements

+ +
+ +
+ +
+

See also: A complete list of selectors in the Selectors Level 3 specification.

+
+ +

Concepts

+ +

Syntax and semantics

+ + + +

Values

+ + + +

Layout

+ + + +

DOM-CSS / CSSOM

+ +

Major object types

+ + + +

Important methods

+ + + +

See also

+ + diff --git a/files/zh-tw/web/css/replaced_element/index.html b/files/zh-tw/web/css/replaced_element/index.html new file mode 100644 index 0000000000..10e6def514 --- /dev/null +++ b/files/zh-tw/web/css/replaced_element/index.html @@ -0,0 +1,20 @@ +--- +title: 置換元素 (Replaced element) +slug: Web/CSS/Replaced_element +translation_of: Web/CSS/Replaced_element +--- +
{{CSSRef()}}
+ +

摘要

+ +

CSS 中所謂的「置換元素 (Replaced element)」，即是該元素所呈現的內容不在 CSS 的控制範圍之內。這類外部物件所呈現的內容均獨立於 CSS 之外。常見的置換元素包含 {{HTMLElement("img")}}、{{HTMLElement("object")}}、{{HTMLElement("video")}}，或如 {{HTMLElement("textarea")}} 與 {{HTMLElement("input")}} 的表單元素。某些元素 (像是 {{HTMLElement("audio")}} 或 {{HTMLElement("canvas")}}) 只有在特殊情況下才是置替換元素。若是透過 CSS {{cssxref("content")}} 屬性所插入的物件，則稱為「不具名置換元素 (Anonymous replaced elements)」。

+ +

在某些情況下，CSS 會特別處理置換元素，如計算邊距空白 (Margin) 與某些 auto 的值。

+ +

另需注意的是，某些置換元素本身就具備固定尺寸 (Intrinsic dimension) 或已定義的基準線 (Baseline)，並可由 CSS 的某些屬性 (如 {{cssxref("vertical-align")}}) 所利用。

+ +

另可參閱

+ + diff --git a/files/zh-tw/web/css/ruby-position/index.html b/files/zh-tw/web/css/ruby-position/index.html new file mode 100644 index 0000000000..6caff70d64 --- /dev/null +++ b/files/zh-tw/web/css/ruby-position/index.html @@ -0,0 +1,112 @@ +--- +title: ruby-position +slug: Web/CSS/ruby-position +translation_of: Web/CSS/ruby-position +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS 的 ruby-position 屬性定義了 ruby 元素與該基礎元素（base element）相關聯的位置。它能在元素上方（over）、下方（under）、兩個字符之間、抑或右方（inter-character）。

+ +
/* 關鍵字值 */
+ruby-position: over;
+ruby-position: under;
+ruby-position: inter-character;
+
+/* 全域值 */
+ruby-position: inherit;
+ruby-position: initial;
+ruby-position: unset;
+
+ +

{{cssinfo}}

+ +

語法

+ +

屬性值

+ +
+
over
+
Over example如果文件以橫式排列，該關鍵字會指引旁註標記（ruby）出現在主文的上方。如果文件以直式排列，則會出現在主文的右方。
+
under
+
Under example如果文件以橫式排列，該關鍵字會指引旁註標記出現在在主文的下方。如果文件以直式排列，則會出現在主文的左方。
+
inter-character
+
該關鍵字會指引旁註標記出現在在主文的兩個字符的中間。
+
+ +

正式語法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML 會因為 ruby-position 的值不同，而作出不同的渲染：

+ +
<ruby>
+  <rb>超電磁砲</rb>
+  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
+</ruby>
+
+ +

旁註標記定位到主文上方

+ + + +
ruby {
+    ruby-position:over;
+}
+ +

它會給出如下結果：

+ +

{{EmbedLiveSample("旁註標記定位到主文上方", 100, 40)}}

+ +

旁註標記定位到主文下方

+ + + +
ruby {
+    ruby-position:under;
+}
+ +

它會給出如下結果：

+ +

{{EmbedLiveSample("旁註標記定位到主文下方", 100, 40)}}

+ +

規範

+ + + + + + + + + + + + + + + + +
規範狀態註解
{{ SpecName('CSS3 Ruby', '#rubypos', 'ruby-position') }}{{ Spec2('CSS3 Ruby') }}初始定義
+ +

瀏覽器相容性

+ + + +

{{Compat("css.properties.ruby-position")}}

+ +

參見

+ + diff --git a/files/zh-tw/web/css/shorthand_properties/index.html b/files/zh-tw/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..2e880da57e --- /dev/null +++ b/files/zh-tw/web/css/shorthand_properties/index.html @@ -0,0 +1,138 @@ +--- +title: 特性簡寫 +slug: Web/CSS/Shorthand_properties +translation_of: Web/CSS/Shorthand_properties +--- +

定義

+ +

特性簡寫，是一種可以同時設定許多其他 CSS 屬性值的 CSS 屬性。 使用特性簡寫，網頁開發者可以寫出更簡潔、且通常更具可讀性的樣式表，省時又省力。

+ +

CSS 規範中定義，特性簡寫用來組合作用於相同主題的常見性質。舉例來說，CSS {{cssxref("background")}} 這個性質是個特性簡寫，可同時定義 {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, 和 {{cssxref("background-position")}} 等屬性。同樣的，最常用的字體相關屬性，可以使用 {{cssxref("font")}} 來定義；圍繞在方塊周圍的邊界，則可簡單地以 {{cssxref("margin")}} 簡寫來定義。

+ +

需謹慎之處

+ +

即便特性簡寫非常易於使用，仍有幾個需要銘記在心的情況：

+ +
    +
  1. 未指明的值會被設為預設值。這聽起來真的很怪，但他的確會覆寫先前的設定值。比如： + + 
    background-color: red;
+background: url(images/bg.gif) no-repeat top right;
    + 不會將背景設為紅色，而是使用 {{cssxref("background-color")}} 的預設值 transparent，由於較後面的規則為優先。
    2. +
  2. 只有獨立的屬性可以被繼承。就如同遺失的值會被預設值取代一樣，不可能讓缺漏的值再去繼承個別屬性。關鍵字 inherit 可以用於屬性，但只能整體繼承，而不能用於個別值上。意思是，如果要繼承某個特定的值，就必須使用完整的語句，搭配 inherit 關鍵字。
    3. +
  3. 簡寫屬性試著不強迫使用特定順序，在那些屬性有許多不同類型的值的狀況下的確很方便。但是在許多屬性具有類似值時就沒這麼簡單了，此時會以以下規則處理： +
      +
    1. 關於區塊的簡寫性質，諸如 {{cssxref("border-style")}}, {{cssxref("margin")}} 或 {{cssxref("padding")}}，就會使用連貫的１～４個值來定義下列這些邊： + + + + + + + + + + + + + + + + + + + +
      border1.png單值語法：border-width: 1em — 這個唯一的值定義所有四邊
      border2.png雙值語法：border-width: 1em 2em — 第一個值代表垂直部分，也就是上和下邊；第二個值則是指水平部分，也就是左右邊。
      border3.png三值語法：border-width: 1em 2em 3em — 第一個值代表上邊，第二個值代表兩旁的邊，而第三個值代表下邊。
      border4.png +

      四值語法：border-width: 1em 2em 3em 4em — 這四個值分別代表上、右、下、左邊，順時針的方向由上開始排列（可以以 trouble 來記憶，即英文首文字的縮寫 TRBL）

      +
      +
      2. +
    2. 與之相似地，關於區塊角落的屬性，像是 {{cssxref("border-radius")}}，也會使用連貫的１～４個值來代表四個角落： + + + + + + + + + + + + + + + + + + + +
      corner1.png單值語法：border-radius: 1em — 這唯一的值代表了所有角落。
      corner2.png雙值語法：border-radius: 1em 2em — 第一個值代表左上和右下，第二個值則是右上及左下角。
      corner3.png三值語法：border-radius: 1em 2em 3em — 第一個值代表左上，第二個值代表右上及左下，第三個值則是右下的角落。
      corner4.png +

      四值語法：border-radius: 1em 2em 3em 4em — 這四個值分別代表左上、右上、右下、左下，由左上開始的順時針排序。

      +
      +
      3. +
    +
    4. +
+ +

背景屬性

+ +

背景會有下列這些屬性:

+ +
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;
+ +

可以簡寫為一句宣告：

+ +
background: #000 url(images/bg.gif) no-repeat top right;
+ +

（寫成簡化屬性的效果，完全等同於上方未簡化的屬性，外加 background-attachment: scroll 及其他 CSS3 中額外增加的屬性。)

+ +

字體屬性

+ +

下列的宣告:

+ +
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;
+ +

可以簡寫成這樣：

+ +
font: italic bold .8em/1.2 Arial, sans-serif;
+ +

簡化定義的效果完全等同於未簡化前的屬性效果，加上 font-variant: normal、font-size-adjust: none (CSS2.0 / CSS3) 及 font-stretch: normal (CSS3) 等屬性。

+ +

邊框屬性

+ +

邊框的寬度、顏色、樣式可以簡寫成一句宣告。舉例來說：

+ +
border-width: 1px;
+border-style: solid;
+border-color: #000;
+ +

可以寫成：

+ +
border: 1px solid #000;
+ +

邊界與內距屬性

+ +

margin 和 padding 的簡化版本大致相同。下列的 CSS 宣告:

+ +
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;
+ +

等同於下面的宣告（注意值的排序是順時鐘的順序：上，右，下，左 (TRBL，可以「trouble」這個單字的諧音來記憶）

+ +
margin: 10px 5px 10px 5px;
+ +

相關連結

+ + diff --git a/files/zh-tw/web/css/syntax/index.html b/files/zh-tw/web/css/syntax/index.html new file mode 100644 index 0000000000..c777095cb0 --- /dev/null +++ b/files/zh-tw/web/css/syntax/index.html @@ -0,0 +1,74 @@ +--- +title: 語法 +slug: Web/CSS/Syntax +translation_of: Web/CSS/Syntax +--- +
{{cssref}}
+ +

串接式樣式表 (CSS) 語言的基礎目標是是讓瀏覽器引擎用特定的功能將元素寫在頁面上，像是顏色、位置與裝飾。CSS 語法反映出了目的，而它的基本組成為：

+ + + +

CSS 宣告

+ +

設定特定參數值給 CSS 屬性是 CSS 語言的核心功能。一對屬性與參數叫做宣告，而為了適當的排版與套用樣式，任何 CSS 引擎會演算每個頁面上的元素該套用哪個宣告。

+ +

在 CSS 中屬性與參數都預設為不區分大小寫。它們由冒號區隔，':' (U+003A COLON)，而在屬性與參數前、中間與後面並不需要有空白，空白會被忽略。

+ +

css syntax - declaration.png

+ +

在 CSS 中有超過100種不同的屬性與接近無限個不同的參數。並非所有的屬性與參數組都是被准許的，且每個屬性定義了哪些是有效的參數。當一個參數對屬性無效的時候，宣告會被認為是無效的且會完全被 CSS 引擎忽略。

+ +

CSS 宣告區塊

+ +

Declarations are grouped in blocks, that is in a structure delimited by an opening brace, '{' (U+007B LEFT CURLY BRACKET), and a closing one, '}' (U+007D RIGHT CURLY BRACKET). Blocks sometimes can be nested, so opening and closing braces must be matched.

+ +

css syntax - block.png

+ +

Such blocks are naturally called declaration blocks and declarations inside them are separated by a semi-colon, ';' (U+003B SEMICOLON). A declaration block may be empty, that is containing null declaration. White spaces around declarations are ignored. The last declaration of a block doesn't need to be terminated by a semi-colon, though it is often considered good style to do it as it prevents forgetting to add it when extending the block with another declaration.

+ +

css syntax - declarations block.png

+ +
The content of a CSS declaration block, that is a list of semi-colon-separated declarations, without the initial and closing braces, can be put inside an HTML {{htmlattrxref("style")}} attribute.
+ +

CSS rulesets

+ +

If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.

+ +

CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by one or more comma-separated selectors which are conditions selecting some elements of the page. The pair selector group-declarations block is called a ruleset, or often simply a rule.

+ +

css syntax - ruleset.png

+ +

As an element of the page may be matched by several selectors, and therefore by several rules potentially containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the cascade algorithm.

+ +
It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.
+
+This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole selector is invalid and therefore the entire rule is ignored (as invalid too).
+ +

CSS statements

+ +

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

+ +

A statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).

+ +

css syntax - statements Venn diag.png

+ +

There are two kinds of statements:

+ + + +

Any statement which isn't a ruleset or an at-rule is invalid and ignored.

+ +

There is another group of statements – the nested statements. These are statements that can be used in a specific subset of at-rules – the conditional group rules. These statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which the browser runs matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though still experimental and not supported by every browser, conditional group rules can contain a wider range of content: rulesets but also some, but not all, at-rules.

+ +

See also

+ + diff --git a/files/zh-tw/web/css/transform-function/index.html b/files/zh-tw/web/css/transform-function/index.html new file mode 100644 index 0000000000..73b08839ed --- /dev/null +++ b/files/zh-tw/web/css/transform-function/index.html @@ -0,0 +1,894 @@ +--- +title: transform-function +slug: Web/CSS/transform-function +translation_of: Web/CSS/transform-function +--- +

{{ CSSRef("CSS Transforms") }}The <transform-function> CSS data type denotes a function applied to an element's representation in order to modify it. Usually such transform may be expressed by matrices and the resulting images can be determined using matrix multiplication on each point.

+ +

Coordinates for 2D graphics

+ +

There are several coordinate models used when describing transformation. The most common are the Cartesian coordinate system and homogeneous coordinates.

+ +

笛卡兒坐標系

+ +

+ +

In Cartesian coordinates each point of the Euclidian space is described using two values, the abscissa and the ordinate. The origin, the (0, 0) is the top-left corner of the element. Unlike the usual geometric convention, and like most cases in computer graphics, the y-axis goes to the bottom. Each point is mathematically described using the vector notation (x,y).

+ +

Each linear function is described using a 2x2 matrix like:

+ +
+

ac bd

+
+ +

Applying the transformation consists in doing, for each point, the matrix multiplication between both:

+ +
.
+ +

It is possible to apply several transformations in a row:

+ +
.
+ +

With this notation, it is possible to describe, and therefore composite, most usual transformations: rotations, scaling, or skewing. In fact all transformations that are linear functions can be described. One major transformation is not linear and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two more parameters.

+ +

Möbius' homogeneous coordinates in projective geometry leading to 3x3 transformation matrices, though more complex and unusual for non-specialists, doesn't suffer from the translation limitation as these can be expressed as linear functions in this algebra, removing the need for special cases.

+ +

Coordinates for 3D graphics

+ +

Functions defining transformations

+ +

matrix()

+ +

The matrix() CSS function specifies a homogeneous 2D transformation matrix comprised of the specified six values. The constant values of such matrices are implied and not passed as parameters; the other parameters are described in the column-major order.

+ +

matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

+ +
Note: Until Firefox 16, Gecko accepted a {{cssxref("<length>")}} value for tx and ty.
+ +

表達式

+ +
matrix(a, b, c, d, tx, ty)
+
+ +

值

+ +
+
a b c d
+
Are {{cssxref("<number>")}} describing the linear transformation.
+
tx ty
+
Are {{cssxref("<number>")}} describing the translation to apply.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
ac bd actybdtx001 actybdtx001 ac0txbd0ty00100001
[a b c d tx ty]
+ +

matrix3d()

+ +

The matrix3d() CSS function describes a 3D transform as a 4x4 homogeneous matrix. The 16 parameters are described in the column-major order.

+ +
Note: Until Firefox 16, Gecko accepted a {{cssxref("<length>")}} value for a4, b4 and c4.
+ +

表達式

+ +
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
+ +

值

+ +
+
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4
+
Are {{cssxref("<number>")}} describing the linear transformation.
+
a4 b4 c4
+
Are {{cssxref("<number>")}} describing the translation to apply.
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plan.Cartesian-coordinate matrix doesn't allow to represent a generic 3d affine transforms as translations are not linear transforms.a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4
+ +

perspective()

+ +

The perspective() CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.

+ +

表達式

+ +
perspective(l)
+
+ +

值

+ +
+
l
+
Is a {{cssxref("<length>")}} giving the distance from the user to the z=0 plane. It is used to apply a perspective transform to the element. If it is 0 or a negative value, no perspective transform is applied.
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
+

This transform applies to the 3D space and cannot be represented on the plan.

+ 		A perspective is not a linear transform in ℝ3 and cannot be represented using a matrix in the Cartesian coordinates system. 10000100001000−1/d1
+ +

rotate()

+ +

The rotate() CSS function defines a transformation that moves the element around a fixed point (as specified by the {{ Cssxref("transform-origin") }} property) without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. A rotation by 180° is called point reflection.

+ +

表達式

+ +
rotate(a)
+
+ +

值

+ +
+
a
+
Is an {{ cssxref("<angle>") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
+ +

rotate3d()

+ +

The rotate3d()CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.

+ +

In the 3D space, rotations have three degrees of liberty, describing an axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the {{ cssxref("transform-origin") }} CSS property. If the vector is not normalized, that is the sum of the square of its three coordinates is not 1, it will be normalized internally. A non-normalizable vector, like the null vector, [0, 0, 0], will cause the rotation not to be applied, without invaliding the whole CSS property.

+ +
In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.
+ +

表達式

+ +
rotate3d(x, y, z, a)
+
+ +

值

+ +
+
x
+
Is a {{cssxref("<number>")}} describing the x-coordinate of the vector denoting the axis of rotation.
+
y
+
Is a {{cssxref("<number>")}} describing the y-coordinate of the vector denoting the axis of rotation.
+
z
+
Is a {{cssxref("<number>")}} describing the z-coordinate of the vector denoting the axis of rotation.
+
a
+
Is an {{ cssxref("<angle>") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plane. 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
+ +

rotateX()

+ +

The rotateX()CSS function defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.

+ +

The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.

+ +

rotateX(a)is a shorthand for rotate3D(1, 0, 0, a).

+ +
In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.
+ +

表達式

+ +
rotateX(a)
+
+ +

值

+ +
+
a
+
Is an {{ cssxref("<angle>") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plane. 1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001
+ +

rotateY()

+ +

The rotateY()CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.

+ +

The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.

+ +

rotateY(a)is a shorthand for rotate3D(0, 1, 0, a).

+ +
In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.
+ +

表達式

+ +
rotateY(a)
+
+ +

值

+ +
+
a
+
Is an {{ cssxref("<angle>") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plane. cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001
+ +

rotateZ()

+ +

The rotateZ()CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.

+ +

The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.

+ +

rotateZ(a)is a shorthand for rotate3D(0, 0, 1, a).

+ +
In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.
+ +

表達式

+ +
rotateZ(a)
+
+ +

值

+ +
+
a
+
Is an {{ cssxref("<angle>") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plane. cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000000001
+ +

scale()

+ +

+ +

The scale() CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one.

+ +

This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If both coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.

+ +

When outside the ]-1, 1[ range, the scaling enlarges the element in the direction of the coordinate; when inside the range, it shrinks the element in that direction. When equal to 1 it does nothing and when negative it performs a point reflection and the size modification.

+ +
The scale() function only applies the transformation in the Euclidian plane (in 2D). To scale in the space, the scale3D() function has to be used.
+ +

表達式

+ +
scale(sx) or
+scale(sx, sy)
+
+ +

值

+ +
+
sx
+
Is a {{cssxref("<number>")}} representing the abscissa of the scaling vector.
+
sy
+
Is a {{cssxref("<number>")}} representing the ordinate of the scaling vector. If not present, its default value is sx, leading to a uniform scaling preserving the shape of the element.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
+ +

scale3d()

+ +

The scale3d() CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales.

+ +

This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If all three coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.

+ +

When outside the [-1, 1] range, the scaling enlarges the element in the direction of the coordinate; when inside the range, it shrinks the element in that direction. When equal to 1 it does nothing and when negative it performs a point reflection and the size modification.

+ +

表達式

+ +
scale3d(sx, sy, sz)
+
+ +

值

+ +
+
sx
+
Is a {{cssxref("<number>")}} representing the abscissa of the scaling vector.
+
sy
+
Is a {{cssxref("<number>")}} representing the ordinate of the scaling vector.
+
sz
+
Is a {{cssxref("<number>")}} representing the z-component of the scaling vector.
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plane. sx000sy000sz sx0000sy0000sz00001
+ +

scaleX()

+ +

The scaleX() CSS function modifies the abscissa of each element point by a constant factor, except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.

+ +

scaleX(sx) is a shorthand for scale(sx, 1) or for scale3d(sx, 1, 1).

+ +

scaleX(-1) defines an axial symmetry with a vertical axis passing by the origin (as specified by the transform-origin property).

+ +

表達式

+ +
scaleX(s)
+
+ +

值

+ +
+
s
+
Is a {{cssxref("<number>")}} representing the scaling factor to apply on the abscissa of each point of the element.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
s0 01 s00010001 s00010001 s000010000100001
[s 0 0 1 0 0]
+ +

scaleY()

+ +

+ +

The scaleY() CSS function modifies the ordinate of each element point by a constant factor except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.

+ +

scaleY(sy) is a shorthand for scale(1, sy) or for scale3d(1, sy, 1).

+ +

scaleY(-1) defines an axial symmetry with a horizontal axis passing by the origin (as specified by the transform-origin property).

+ +

表達式

+ +
scaleY(s)
+
+ +

值

+ +
+
s
+
Is a {{cssxref("<number>")}} representing the scaling factor to apply on the ordinate of each point of the element.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
10 0s 1000s0001 1000s0001 10000s0000100001
[1 0 0 s 0 0]
+ +

scaleZ()

+ +

The scaleZ() CSS function modifies the z-coordinate of each element point by a constant factor, except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.

+ +

scaleZ(sz) is a shorthand for scale3d(1, 1, sz).

+ +

scaleZ(-1) defines an axial symmetry along the z-axis passing by the origin (as specified by the transform-origin property).

+ +

表達式

+ +
scaleZ(s)
+
+ +

值

+ +
+
s
+
Is a {{cssxref("<number>")}} representing the scaling factor to apply on the z-coordinate of each point of the element.
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plane. 10001000s 1000010000s00001
+ +

skew()

+ +

The skew() CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.

+ +

表達式

+ +
skew(ax)       or
+skew(ax, ay)
+
+ +

值

+ +
+
ax
+
Is an {{ cssxref("<angle>") }} representing the angle to use to distort the element along the abscissa.
+
ay
+
Is an {{ cssxref("<angle>") }} representing the angle to use to distort the element along the ordinate.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001
[1 tan(ay) tan(ax) 1 0 0]
+ +

skewX()

+ +

The skewX() CSS function is a horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction. It is done by increasing the abscissa coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.

+ +

表達式

+ +
skewX(a)
+
+ +

值

+ +
+
a
+
Is an {{ cssxref("<angle>") }} representing the angle to use to distort the element along the abscissa.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
1tan(ay)01 1tan(ay)0010001 1tan(ay)0010001 1tan(ay)00010000100001
[1 0 tan(a) 1 0 0]
+ +

skewY()

+ +

The skewY() CSS function is a vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.

+ +

表達式

+ +
skewY(a)
+
+ +

值

+ +
+
a
+
Is an {{ cssxref("<angle>") }} representing the angle to use to distort the element along the ordinate.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
10tan(ax)1 100tan(ax)10001 100tan(ax)10001 1000tan(ax)10000100001
[1 tan(a) 0 1 0 0]
+ +

translate()

+ +

The translate() CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.

+ +

Syntax

+ +
translate(tx)       or
+translate(tx, ty)
+
+ +

值

+ +
+
tx
+
Is a {{cssxref("<length>")}} representing the abscissa of the translating vector.
+
ty
+
Is a {{cssxref("<length>")}} representing the ordinate of the translating vector. If missing, it is assumed to be equals to tx :  translate(2) means translate(2, 2).
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
+

A translation is not a linear transform in ℝ2 and cannot be represented using a matrix in the cartesian coordinates system.

+ 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
+ +

translate3d()

+ +

The translate3d() CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.

+ +

表達式

+ +
translate3d(tx, ty, tz)
+
+ +

值

+ +
+
tx
+
Is a {{cssxref("<length>")}} representing the abscissa of the translating vector.
+
ty
+
Is a {{cssxref("<length>")}} representing the ordinate of the translating vector.
+
tz
+
Is a {{cssxref("<length>")}} representing the z component of the translating vector. It can't be a {{cssxref("<percentage>")}} value; in that case the property containing the transform is considered invalid.
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
+

This transform applies to the 3D space and cannot be represented on the plane.

+ 		A translation is not a linear transform in ℝ3 and cannot be represented using a matrix in the Cartesian coordinates system. 100tx010ty001tz0001
+ +

translateX()

+ +

The translateX() CSS function moves the element horizontally on the plane. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves horizontally.

+ +

translateX(tx) is a shortcut for translate(tx, 0).

+ +

表達式

+ +
translateX(t)
+
+ +

值

+ +
+
t
+
Is a {{cssxref("<length>")}} representing the abscissa of the translating vector.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
+

A translation is not a linear transform in ℝ2 and cannot be represented using a matrix in the cartesian coordinates system.

+ 		10t010001 10t010001 100t010000100001
[1 0 0 1 t 0]
+ +

translateY()

+ +

The translateY() CSS function moves the element vertically on the plane. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves vertically.

+ +

translateY(ty) is a shortcut for translate(0, ty).

+ +

Syntax

+ +
translateY(t)
+
+ +

值

+ +
+
t
+
Is a {{cssxref("<length>")}} representing the ordinate of the translating vector.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
+

A translation is not a linear transform in ℝ2 and cannot be represented using a matrix in the cartesian coordinates system.

+ 		10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]
+ +

translateZ()

+ +

The translateZ() CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves.

+ +

translateZ(tz) is a shorthand for translate3d(0, 0, tz).

+ +

表達式

+ +
translateZ(t)
+
+ +

值

+ +
+
t
+
Is a {{cssxref("<length>")}} representing the z-component of the translating vector. It can't be a {{cssxref("<percentage>")}} value; in that case the property containing the transform is considered invalid.
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plane.A translation is not a linear transform in ℝ3 and cannot be represented using a matrix in the Cartesian coordinates system. 10000100001t0001
+ +

 

diff --git a/files/zh-tw/web/css/transform-function/translate3d()/index.html b/files/zh-tw/web/css/transform-function/translate3d()/index.html new file mode 100644 index 0000000000..149980d71d --- /dev/null +++ b/files/zh-tw/web/css/transform-function/translate3d()/index.html @@ -0,0 +1,116 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d() +translation_of: Web/CSS/transform-function/translate3d() +--- +
{{CSSRef}}
+ +

translate3d() CSS 函式以 3D 場境的方式定位元素。其結果為 {{cssxref("<transform-function>")}} 資料型別。

+ +
{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
+ + + +

這個轉場的特徵是三維向量，其坐標則定義元素的方向該如何移動。

+ +

語法

+ +
translate3d(tx, ty, tz)
+
+ +

數值

+ +
+
tx
+
其 {{cssxref("<length>")}} 代表平移向量的橫坐標。
+
ty
+
其 {{cssxref("<length>")}} 代表平移向量的縱坐標。
+
tz
+
其 {{cssxref("<length>")}} 代表平移向量的 z 分量。數值不能是 {{cssxref("<percentage>")}}：否則，此轉場的屬性無效。
+
+ + + + + + + + + + + + + + + + + +
ℝ2 上的笛卡兒座標（Cartesian coordinate）ℝℙ2 上的齊次坐標（homogeneous coordinates）ℝ3 上的笛卡兒座標ℝℙ3 上的齊次坐標
+

This transformation applies to the 3D space and can't be represented on the plane.

+ 		A translation is not a linear transformation in ℝ3 and can't be represented using a Cartesian-coordinate matrix. 100tx010ty001tz0001
+ +

示例

+ +

使用單軸平移

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  /* Equivalent to perspective(500px) translateX(10px) */
+  transform: perspective(500px) translate3d(10px, 0, 0px);
+  background-color: pink;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}

+ +

Combining z-axis and x-axis translation

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translate3d(10px, 0, 100px);
+  background-color: pink;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}

+ +

瀏覽器相容性

+ +

請參見 <transform-function>。

+ +

參見

+ + diff --git a/files/zh-tw/web/css/transform-origin/index.html b/files/zh-tw/web/css/transform-origin/index.html new file mode 100644 index 0000000000..2cfccb1716 --- /dev/null +++ b/files/zh-tw/web/css/transform-origin/index.html @@ -0,0 +1,455 @@ +--- +title: transform-origin +slug: Web/CSS/transform-origin +tags: + - CSS +translation_of: Web/CSS/transform-origin +--- +
{{ CSSRef }}
+ +

CSS 內的transform-origin屬性可以設定元素變化的原點。

+ +
{{EmbedInteractiveExample("pages/css/transform-origin.html")}}
+ + + +

變化原點指的是應用變化的點。舉例來說， 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.)

+ +

語法

+ +
/* One-value syntax */
+transform-origin: 2px;
+transform-origin: bottom;
+
+/* x-offset | y-offset */
+transform-origin: 3cm 2px;
+
+/* x-offset-keyword | y-offset */
+transform-origin: left 2px;
+
+/* x-offset-keyword | y-offset-keyword */
+transform-origin: right top;
+
+/* y-offset-keyword | x-offset-keyword */
+transform-origin: top right;
+
+/* x-offset | y-offset | z-offset */
+transform-origin: 2px 30% 10px;
+
+/* x-offset-keyword | y-offset | z-offset */
+transform-origin: left 5px -3px;
+
+/* x-offset-keyword | y-offset-keyword | z-offset */
+transform-origin: right bottom 2cm;
+
+/* y-offset-keyword | x-offset-keyword | z-offset */
+transform-origin: bottom right 2cm;
+
+/* Global values */
+transform-origin: inherit;
+transform-origin: initial;
+transform-origin: unset;
+
+ +

The transform-origin p屬性可以使用多次，每一次都代表著一個偏移量。若未設定偏移量，則重置為其對應的 初始值。

+ +

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.

+ + + +

Values

+ +
+
x-offset
+
Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} describing how far from the left edge of the box the origin of the transform is set.
+
offset-keyword
+
Is one of the left, right, top, bottom, or center keyword describing the corresponding offset.
+
y-offset
+
Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} describing how far from the top edge of the box the origin of the transform is set.
+
x-offset-keyword
+
Is one of the left, right, or center keyword describing how far from the left edge of the box the origin of the transform is set.
+
y-offset-keyword
+
Is one of the top, bottom, or center keyword describing how far from the top edge of the box the origin of the transform is set.
+
z-offset
+
Is a {{cssxref("<length>")}} (and never a {{cssxref("<percentage>")}} which would make the statement invalid) describing how far from the user eye the z=0 origin is set.
+
+ +

The keywords are convenience shorthands and match the following {{cssxref("<percentage>")}} values:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeywordValue
left0%
center50%
right100%
top0%
bottom100%
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CodeSample
+

transform: none;

+ 		+ + +
{{EmbedLiveSample('transform_none', '', 120, '', '', 'no-button') }}
+
+

transform: rotate(30deg);

+ 		+ + +
{{EmbedLiveSample('transform_rotate_only', '', 120, '', '', 'no-button') }}
+
+

transform: rotate(30deg);
+ transform-origin: 0 0;

+ 		+ + +
{{EmbedLiveSample('transform_rotate', '', 120, '', '', 'no-button') }}
+
+

transform: rotate(30deg);
+ transform-origin: 100% 100%;

+ 		+ + +
{{EmbedLiveSample('transform_rotate_with_percentage', '', 120, '', '', 'no-button') }}
+
+

transform: rotate(30deg);
+ transform-origin: -1em -3em;

+ 		+ + +
{{EmbedLiveSample('transform_rotate_with_em', '', 120, '', '', 'no-button') }}
+
+

transform: scale(1.7);

+ 		+ + +
{{EmbedLiveSample('transform_scale_only', '', 120, '', '', 'no-button') }}
+
+

transform: scale(1.7);
+ transform-origin: 0 0;

+ 		+ + +
{{EmbedLiveSample('transform_scale_without_origin', '', 120, '', '', 'no-button') }}
+
+

transform: scale(1.7);
+ transform-origin: 100% -30%;

+ 		+ + +
{{EmbedLiveSample('transform_scale', '', 120, '', '', 'no-button') }}
+
+

transform: skewX(50deg);
+ transform-origin: 100% -30%;

+ 		+ + +
{{EmbedLiveSample('transform_skew_x', '', 120, '', '', 'no-button') }}
+
+

transform: skewY(50deg);
+ transform-origin: 100% -30%;

+ 		+ + +
{{EmbedLiveSample('transform_skew_y', '', 120, '', '', 'no-button') }}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}{{ Spec2('CSS3 Transforms') }} 
+ +

{{Cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.transform-origin")}}

+ +

See also

+ + diff --git a/files/zh-tw/web/css/transform/index.html b/files/zh-tw/web/css/transform/index.html new file mode 100644 index 0000000000..7b1f9ee11b --- /dev/null +++ b/files/zh-tw/web/css/transform/index.html @@ -0,0 +1,159 @@ +--- +title: transform +slug: Web/CSS/transform +tags: + - CSS + - CSS Property + - NeedsBrowserCompatibility + - Reference + - Transforms +translation_of: Web/CSS/transform +--- +
{{CSSRef}}
+ +

transform CSS 屬性可以讓你修改 CSS 可視化格式模型（visual formatting model）的空間維度。使用此屬性，元素可以被平移、旋轉、縮放和傾斜。

+ +
{{EmbedInteractiveExample("pages/css/transform.html")}}
+ +

如果這個屬性的值不是 none，將會建立一個 stacking context。在這個情況下，此元素將被其所包含的 position: fixed 元素當成一個 containing block。

+ +
+

只有可以變形的元素可以被變形，這包括所有被CSS box model掌管輸出的元素，除了視覺格式化模型, table-column boxes 和 table-colunm-group boxes。

+
+ +

語法

+ +
/* Keyword values */
+transform: none;
+
+/* Function values */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+transform: perspective(17px);
+transform: rotate(0.5turn);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: translate(12px, 50%);
+transform: translate3d(12px, 50%, 3em);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: translateZ(2px);
+transform: scale(2, 0.5);
+transform: scale3d(2.5, 1.2, 0.3);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: scaleZ(0.3);
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+
+/* Multiple function values */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
+
+/* Global values */
+transform: inherit;
+transform: initial;
+transform: unset;
+ +

transform 屬性可能被指定為關鍵字值 none 或著一或多個 <transform-function> 值。

+ +

值

+ +
+
{{cssxref("<transform-function>")}}
+
可使用一個或多個 CSS transform functions。複合的transforms 會由左至右的順序來套用。
+
none
+
設定為沒有套用任何 transform。
+
+ +

可使用性問題

+ +

改變尺寸和伸縮的動畫會影響網頁普遍的可使用性，因為它們可能促發一些頭痛的問題。如果你想要在網頁中提供這樣的功能，最好在網頁中放上給使用者關閉這些功能的控制開關。

+ +

另外也可考慮使用{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} 這個媒體功能來寫一個在系統設定端的媒體詢問，讓使用者在減少了動畫偏好之後可以關閉該使用者網頁的動畫功能。

+ +

瞭解更多:

+ + + +

正式定義

+ +

{{CSSInfo}}

+ +

標準語法

+ +
{{csssyntax}}
+ +

範例

+ +

平移、旋轉元素

+ + + +

HTML

+ + + +
<p>Transformed element</p>
+ +

CSS

+ +
p {
+  border: solid red;
+  transform: translate(100px) rotate(20deg);
+  transform-origin: 0 -250px;
+}
+ +

結果

+ +

{{EmbedLiveSample("Translating_and_rotating_an_element", "400", "160")}}

+ +

更多範例

+ +

請參考使用 CSS transforms 以及 {{cssxref("<transform-function>")}} 的更多範例。

+ +

規範

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Adds 3D transform functions.
{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}Initial definition.
+ +

{{cssinfo}}

+ +

瀏覽器相容性

+ + + +

{{Compat("css.properties.transform")}}

+ +

參見

+ + diff --git a/files/zh-tw/web/css/transition-duration/index.html b/files/zh-tw/web/css/transition-duration/index.html new file mode 100644 index 0000000000..f29fa166ca --- /dev/null +++ b/files/zh-tw/web/css/transition-duration/index.html @@ -0,0 +1,342 @@ +--- +title: transition-duration +slug: Web/CSS/transition-duration +tags: + - CSS + - CSS Property + - CSS 轉場 + - Reference +translation_of: Web/CSS/transition-duration +--- +
{{CSSRef}}
+ +

transition-duration CSS 屬性指定轉場動畫所需經歷的時間，以秒或是毫秒為單位。默認值為0，表示沒有任何轉場動畫。

+ +
{{EmbedInteractiveExample("pages/css/transition-duration.html")}}
+ + + +

你可以指定多個時間長度，每一個時間長度都會被應用在{{ cssxref("transition-property") }} 設定的對應屬性上(which acts as a master list.) 如果指定的時間長度的數量比對應屬性的數量少，那麼時間長度就會被重複使用。反之，多餘的時間長度就會被刪去。而這兩種情況之下的CSS宣告都是有效的。

+ +

語法

+ +
/* <time> 值 */
+transition-duration: 6s;
+transition-duration: 120ms;
+transition-duration: 1s, 15s;
+transition-duration: 10s, 30s, 230ms;
+
+/* 全域值 */
+transition-duration: inherit;
+transition-duration: initial;
+transition-duration: unset;
+
+ +

值

+ +
+
<time>
+
{{cssxref("<time>")}}類型表示轉場動畫從舊狀態轉至新狀態所需要的時間。如果時間長度為0，表示沒有任何轉場，狀態之間會立即改變。若時間長度為負值則無效。
+
+ +

正式語法

+ +
{{csssyntax}}
+ +

範例

+ +
+
+

transition-duration: 0.5s

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_0_5s",275,150)}}
+
+ +
+

transition-duration: 1s

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_1s",275,150)}}
+
+ +
+

transition-duration: 2s

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_2s",275,150)}}
+
+ +
+

transition-duration: 4s

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_4s",275,150)}}
+
+
+ +

規範

+ + + + + + + + + + + + + + + + +
規範狀態備註
{{ SpecName('CSS3 Transitions', '#transition-duration', 'transition-duration') }}{{ Spec2('CSS3 Transitions') }}Initial definition
+ +

{{cssinfo}}

+ +

瀏覽器支援情形

+ + + +

{{Compat("css.properties.transition-duration")}}

+ +

更多資訊

+ + diff --git a/files/zh-tw/web/css/transition-timing-function/index.html b/files/zh-tw/web/css/transition-timing-function/index.html new file mode 100644 index 0000000000..492a4e3c3e --- /dev/null +++ b/files/zh-tw/web/css/transition-timing-function/index.html @@ -0,0 +1,605 @@ +--- +title: transition-timing-function +slug: Web/CSS/transition-timing-function +translation_of: Web/CSS/transition-timing-function +--- +
{{CSSRef}}
+ +

transition-timing-function CSS 屬性用於表示各個被動畫特效影響的屬性的區間值計算方式。

+ +
{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}
+ + + +

 

+ +

本質上，這個屬性讓你使用加速度曲線來表示動畫變換的速度。

+ +

而每個可以動畫化的屬性使用一個 {{cssxref("<timing-function>")}} 作為加速度曲線。

+ +

 

+ +

你也許有許多時間函數，而你可以透過使用 {{ cssxref("transition-property") }} 屬性來個別設置。如果有前述清單的數量超過時間函數的數量，則會使用預設值 ease；如果少於那多餘的時間函數會被忽略，在這兩種情況，CSS 宣告總會有效。

+ +

語法

+ +
/* Keyword */
+transition-timing-function: ease;
+transition-timing-function: ease-in;
+transition-timing-function: ease-out;
+transition-timing-function: ease-in-out;
+transition-timing-function: linear;
+transition-timing-function: step-start;
+transition-timing-function: step-end;
+
+/* 函數 */
+transition-timing-function: steps(4, end);
+transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+transition-timing-function: frames(10);
+
+/* 多個函數 */
+transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* 全域值 */
+transition-timing-function: inherit;
+transition-timing-function: initial;
+transition-timing-function: unset;
+
+/* 包含 transition-property */
+transition-property: width, height;
+transition-timing-function: ease-in, ease-out; // ease-in to width and ease-out to height
+
+
+ +

值

+ +
+
<timing-function>
+
每個 {{cssxref("<timing-function>")}} 連結到對應的動畫化屬性，請參考 {{ cssxref("transition-property") }}。
+
+ +

公式語法

+ +
{{csssyntax}}
+ +

範例

+ +
+
+

transition-timing-function: ease

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_ease",275,150)}}
+
+ +
+

transition-timing-function: ease-in

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_easein",275,150)}}
+
+ +
+

transition-timing-function: ease-out

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-out;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_easeout",275,150)}}
+
+ +
+

transition-timing-function: ease-in-out

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_easeinout",275,150)}}
+
+
+ +
+

transition-timing-function: linear

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_linear",275,150)}}
+
+ +
+

transition-timing-function: step-start

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-start;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-start;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-start;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-start;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepstart",275,150)}}
+
+ +
+

transition-timing-function: step-end

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepend",275,150)}}
+
+ +
+

transition-timing-function: steps(4, end)

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_step4end",275,150)}}
+
+ +

規格

+ + + + + + + + + + + + + + + + +
規格狀態備註
{{ SpecName('CSS3 Transitions', '#transition-timing-function-property', 'transition-timing-function') }}{{ Spec2('CSS3 Transitions') }}初始定義
+ +

{{cssinfo}}

+ +

相容性

+ + + +

{{Compat("css.properties.transition-timing-function")}}

+ +

看更多

+ + diff --git a/files/zh-tw/web/css/transition/index.html b/files/zh-tw/web/css/transition/index.html new file mode 100644 index 0000000000..3e5b3c042c --- /dev/null +++ b/files/zh-tw/web/css/transition/index.html @@ -0,0 +1,106 @@ +--- +title: transition +slug: Web/CSS/transition +tags: + - CSS + - CSS Property + - CSS轉場 + - Reference +translation_of: Web/CSS/transition +--- +
{{CSSRef}}
+ +

transition CSS 屬性是 {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, and {{ cssxref("transition-delay") }}的 特性簡寫。

+ +
{{EmbedInteractiveExample("pages/css/transition.html")}}
+ + + +

Transitions 讓你可以定義元件在兩個狀態之間切換的轉場效果。兩個不同狀態可以使用虛擬類別 定義，像是{{cssxref(":hover")}} 或 {{cssxref(":active")}} 亦或是 使用JavaScript設定的狀態變化。

+ +

語法

+ +
/* Apply to 1 property */
+/* property name | duration */
+transition: margin-right 4s;
+
+/* property name | duration | delay */
+transition: margin-right 4s 1s;
+
+/* property name | duration | timing function */
+transition: margin-right 4s ease-in-out;
+
+/* property name | duration | timing function | delay */
+transition: margin-right 4s ease-in-out 1s;
+
+/* Apply to 2 properties */
+transition: margin-right 4s, color 1s;
+
+/* Apply to all changed properties */
+transition: all 0.5s ease-out;
+
+/* Global values */
+transition: inherit;
+transition: initial;
+transition: unset;
+
+ +

transition 屬性可以包含一個或多個轉場設定，每一項設定都以逗點分開。

+ +

每一項設定都描述著每一項屬性所對應的轉場效果(或是all 及 none這兩個特殊值) 。其包含了：

+ + + +

當每個轉場設定不等長時，請參見 當property values list 之間不等長時... 。簡而言之，多餘的描述(超過實際被執行的數量)會直接被忽略。

+ +

標準語法

+ +
{{csssyntax}}
+ +

範例

+ +

CSS 轉場 有更多範例。

+ +

規範

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}{{ Spec2('CSS3 Transitions') }}Initial definition
+ +

{{cssinfo}}

+ +

瀏覽器支援情況

+ + + +

{{Compat("css.properties.transition")}}

+ +

更多資訊

+ + diff --git a/files/zh-tw/web/css/type_selectors/index.html b/files/zh-tw/web/css/type_selectors/index.html new file mode 100644 index 0000000000..6a6bb32e89 --- /dev/null +++ b/files/zh-tw/web/css/type_selectors/index.html @@ -0,0 +1,79 @@ +--- +title: 元素選擇器 +slug: Web/CSS/Type_selectors +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef}}
+CSS 元素選擇器 （也稱 型態選擇器）依照 Node 節點名稱選取匹配的 Element 元素。換句話說，此選擇器選取在 Document 文件內所有指定該型態的元素。
+ +
 
+ +
/* 全部的 <a> 元素。*/
+a {
+  color: red;
+}
+ +

語法

+ +
element { style properties }
+
+ +

範例

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<span>Here's a span with some text.</span>
+<p>Here's a p with some text.</p>
+<span>Here's a span with more text.</span>
+
+ +

Result

+ +

{{EmbedLiveSample('Example', '100%', 150)}}

+ +

規範

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}No changes
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.selectors.type")}}

diff --git a/files/zh-tw/web/css/white-space/index.html b/files/zh-tw/web/css/white-space/index.html new file mode 100644 index 0000000000..eef166cc0e --- /dev/null +++ b/files/zh-tw/web/css/white-space/index.html @@ -0,0 +1,425 @@ +--- +title: white-space +slug: Web/CSS/white-space +translation_of: Web/CSS/white-space +--- +
{{CSSRef}}
+ +

此 CSS white-space 屬性決定如何處理元素內的空白字元。

+ +
+

提醒：如果要讓文字本身斷行，請改用 {{cssxref("overflow-wrap")}}、{{cssxref("word-break")}} 或 {{cssxref("hyphens")}}。

+
+ +
/* Keyword values */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+
+/* Global values */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+
+ + + +

{{EmbedLiveSample("white-space", "100%", 530, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

Syntax

+ +

 white-space 的特性值為下列其中之一。

+ +

Values

+ +
+
normal
+
連續的空白字元會被合併(collapse)，換行字元被視為空白字元。換行只在被文字空間限制時發生。
+
nowrap
+
對待空白字元的方式跟 normal 一樣，且會強制不換行。
+
pre
+
連續的空白字元都會被保留。換行在有換行字元以及{{HTMLElement("br")}}時發生。
+
pre-wrap
+
連續的空白字元都會被保留。換行會在換行字元、有{{HTMLElement("br")}}元素以及被文字空間限制時發生。
+
pre-line
+
連續的空白字元會被合併(collapse)。換行在換行字元、 {{HTMLElement("br")}}以及被文字空間限制時發生。
+
+ +

下列表格整理了各項 white-space 值的行為：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 New linesSpaces and tabsText wrapping
normalCollapseCollapseWrap
nowrapCollapseCollapseNo wrap
prePreservePreserveNo wrap
pre-wrapPreservePreserveWrap
pre-linePreserveCollapseWrap
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Basic example

+ +
code {
+  white-space: pre;
+}
+ +

Line breaks inside {{HTMLElement("pre")}} elements

+ +
pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
+  white-space: pre-wrap;      /* Modern browsers */
+}
+ +

See it in action

+ + + +

Source

+ +
    <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ +

CSS + Result

+ +

{{ EmbedLiveSample('See_in_action', '80%', '500px') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}{{Spec2('CSS3 Text')}}Precisely defines the breaking algorithms.
{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (normal and nowrap)1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}5.5[1]4.01.0 (85)
pre1.0{{CompatVersionUnknown}}1.06.04.01.0 (85)
pre-wrap1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("1.9")}}		8.08.03.0 (522)
pre-line1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}8.09.53.0 (522)
Support on <textarea>1.0{{CompatUnknown}}{{CompatGeckoDesktop("36")}}5.54.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer 5.5+ supports {{Cssxref("word-wrap")}}: break-word;.

+ +

See also

+ + diff --git a/files/zh-tw/web/css/width/index.html b/files/zh-tw/web/css/width/index.html new file mode 100644 index 0000000000..9459dd32e9 --- /dev/null +++ b/files/zh-tw/web/css/width/index.html @@ -0,0 +1,294 @@ +--- +title: width +slug: Web/CSS/width +translation_of: Web/CSS/width +--- +
{{CSSRef}}
+ +

The width CSS property specifies the width of an element. By default, the property defines the width of the content area. If {{cssxref("box-sizing")}} is set to border-box, however, it instead determines the width of the border area.

+ +
/* <length> values */
+width: 300px;
+width: 25em;
+
+/* <percentage> value */
+width: 75%;
+
+/* Keyword values */
+width: 25em border-box;
+width: 75% content-box;
+width: max-content;
+width: min-content;
+width: available;
+width: fit-content;
+width: auto;
+
+/* Global values */
+width: inherit;
+width: initial;
+width: unset;
+
+ + + +
{{EmbedLiveSample("width", "100%", 660, "", "", "example-outcome-frame")}}
+ +
+

注意： {{cssxref("min-width")}} 和 {{cssxref("max-width")}} 會覆寫 {{cssxref("width")}}.

+
+ +
{{cssinfo}}
+ +

Syntax

+ +

The width property is specified as either:

+ + + +

Values

+ +
+
{{cssxref("<length>")}}
+
Defines the width as an absolute value.
+
{{cssxref("<percentage>")}}
+
Defines the width as a percentage of the containing block's width. If the width of the containing block depends on the width of the element, the resulting layout is undefined.
+
border-box {{experimental_inline}}
+
If present, the preceding {{cssxref("<length>")}} or {{cssxref("<percentage>")}} is applied to the element's border box.
+
content-box {{experimental_inline}}
+
If present, the preceding {{cssxref("<length>")}} or {{cssxref("<percentage>")}} is applied to the element's content box.
+
auto
+
The browser will calculate and select a width for the specified element.
+
fill {{experimental_inline}}
+
Use the fill-available inline size or fill-available block size, as appropriate to the writing mode.
+
max-content {{experimental_inline}}
+
The intrinsic preferred width.
+
min-content {{experimental_inline}}
+
The intrinsic minimum width.
+
available {{experimental_inline}}
+
The containing block width minus horizontal margin, border and padding.
+
fit-content {{experimental_inline}}
+
The larger of: +
    +
  • the intrinsic minimum width
    • +
  • the smaller of the intrinsic preferred width and the available width
    • +
+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

範例

+ +

預設寬度

+ +
p.goldie {
+  background: gold;
+}
+ +
<p class="goldie">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('Default_width', '500px', '64px')}}

+ +

像素和相對大小

+ +
.px_length {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.em_length {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+
+ +
<div class="px_length">Width measured in px</div>
+<div class="em_length">Width measured in em</div>
+ +

{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}

+ +

百分比

+ +
.percent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}
+ +
<div class="percent">Width in percentage</div>
+ +

{{EmbedLiveSample('Percentage', '500px', '64px')}}

+ +

內容最大值

+ +
p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+}
+ +
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('max-content_2', '500px', '64px')}}

+ +

內容最小值

+ +
p.minblue {
+  background: lightblue;
+  width: -moz-min-content;    /* Firefox */
+  width: -webkit-min-content; /* Chrome */
+}
+ +
<p class="minblue">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('min-content_2', '500px', '155px')}}

+ +

規範

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}}{{Spec2('CSS3 Box')}}Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}{{Spec2('CSS3 Transitions')}}Lists width as animatable.
{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}{{Spec2('CSS2.1')}}Precises on which element it applies to.
{{SpecName('CSS1', '#width', 'width')}}{{Spec2('CSS1')}}Initial definition.
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Adds new sizing keywords for width and height.
+ +

瀏覽器相容性

+ + + +

{{Compat("css.properties.width")}}

+ +

參考

+ + -- cgit v1.2.3-54-g00ecf