diff options
Diffstat (limited to 'files/vi/web/css')
26 files changed, 5796 insertions, 0 deletions
diff --git a/files/vi/web/css/-ms-scroll-snap-points-y/index.html b/files/vi/web/css/-ms-scroll-snap-points-y/index.html new file mode 100644 index 0000000000..2fb27bbef7 --- /dev/null +++ b/files/vi/web/css/-ms-scroll-snap-points-y/index.html @@ -0,0 +1,89 @@ +--- +title: '-ms-scroll-snap-points-y' +slug: Web/CSS/-ms-scroll-snap-points-y +translation_of: Archive/Web/CSS/-ms-scroll-snap-points-y +--- +<div>{{CSSRef}}</div> + +<div>{{non-standard_header}}</div> + +<div> </div> + +<p>The <strong><code>-ms-scroll-snap-points-y</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property is a <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft extension</a> that specifies where snap-points will be located along the y-axis.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<h3 id="Values" name="Values">Values</h3> + +<div class="note"> +<p>Note: a <code><length-percentage></code> is a value that can be either a {{cssxref("<length>")}} or a {{cssxref("<percentaqe>")}}.</p> +</div> + +<dl> + <dt><code>snapInterval( <length-percentage>, <length-percentage> )</code></dt> + <dd> + <p>Specifies a starting snap-point followed by the interval between all snap-points.</p> + + <ul> + <li>The first value specifies where the first snap-point will be placed.</li> + <li>The second value specifies the distance between subsequent snap-points both above and below the initial snap-point.</li> + </ul> + </dd> + <dt><code>snapList( <length-percentage># )</code></dt> + <dd> + <p>Specifies the position of individual snap-points as a comma-separated list of values, each of which represents a zoom factor.</p> + + <ul> + <li>If any value is less than {{CSSXref("-ms-scroll-limit-y-min")}} , then {{cssxref("-ms-scroll-limit-y-min")}} is used.</li> + <li>If any value is greater than {{CSSXref("-ms-scroll-limit-y-max")}}, then {{cssxref("-ms-scroll-limit-y-max")}} is used.</li> + </ul> + </dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox"> {{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">Examples</h2> + +<p>This example demonstrates both types of values for the <code>-ms-scroll-snap-points-y</code> property. In the first selector, the first snap-point is at 0%, and the interval is set to 100%. In the second selector, each snap-point is listed separately — 100%, 200%, 300%, and so on. (The <code>-ms-scroll-snap-points-y</code> property behaves identically to the {{cssxref("-ms-scroll-snap-points-x")}} property, but along the y-axis.)</p> + +<pre class="brush: css">.container { + overflow-x: auto; + overflow-y: hidden; + -ms-scroll-snap-type: mandatory; + -ms-scroll-snap-points-y: snapInterval(0%, 100%); + width: 480px; + height: 270px; +} + +.imageContainer { + -ms-scroll-chaining: chained; + -ms-overflow-style: none; + -ms-content-zooming: zoom; + -ms-scroll-rails: none; + -ms-scroll-limit-y-min: 100%; + -ms-scroll-limit-y-max: 500%; + -ms-scroll-snap-type: proximity; + -ms-scroll-snap-points-y: snapList(100%, 200%, 300%, 400%, 500%); + -ms-overflow-style: none; + width: 480px; + height: 270px; + overflow: auto; +} +</pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<p>Not part of any specification.</p> + +<h2 id="Remarks" name="Remarks">Remarks</h2> + +<p>This property requires Windows 8 or later.</p> + +<p>This property has no effect on non-scrollable elements.</p> + +<p>Starting with Windows 8.1, this property is also supported for mouse, keyboard, and touchpad interaction.</p> diff --git a/files/vi/web/css/_colon_first-child/index.html b/files/vi/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..b02b008f18 --- /dev/null +++ b/files/vi/web/css/_colon_first-child/index.html @@ -0,0 +1,127 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +translation_of: 'Web/CSS/:first-child' +--- +<div>{{CSSRef}}</div> + +<p><strong><code>:first-child</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> đại diện cho phần tử đầu tiên trong số các phần tử anh chị em của nó.</p> + +<pre class="brush: css no-line-numbers">/* Chọn thẻ <p> đầu tiên trong số các thẻ anh chị em của nó*/ +p:first-child { + color: lime; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.</p> +</div> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Ví_dụ_đơn_giản">Ví dụ đơn giản</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <p>This text is selected!</p> + <p>This text isn't selected.</p> +</div> + +<div> + <h2>This text isn't selected: it's not a `p`.</h2> + <p>This text isn't selected.</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p:first-child { + color: lime; + background-color: black; + padding: 5px; +} +</pre> + +<h4 id="Kết_quả">Kết quả</h4> + +<p><span>{{EmbedLiveSample('Basic_example', 500, 200)}}</span></p> + +<h3 id="Styling_một_danh_sách">Styling một danh sách</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ul> + <li>Item 1</li> + <li>Item 2</li> + <li>Item 3 + <ul> + <li>Item 3.1</li> + <li>Item 3.2</li> + <li>Item 3.3</li> + </ul> + </li> +</ul></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">ul li { + color: blue; +} + +ul li:first-child { + color: red; + font-weight: bold; +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Styling_a_list')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Matching elements are not required to have a parent.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Khả_năng_tương_thích_của_trình_duyệt">Khả năng tương thích của trình duyệt</h2> + + + +<p>{{Compat("css.selectors.first-child")}}</p> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}}</li> + <li>{{CSSxRef(":first-of-type")}}</li> + <li>{{CSSxRef(":last-child")}}</li> + <li>{{CSSxRef(":nth-child")}}</li> +</ul> diff --git a/files/vi/web/css/_colon_focus-within/index.html b/files/vi/web/css/_colon_focus-within/index.html new file mode 100644 index 0000000000..3c39e176fa --- /dev/null +++ b/files/vi/web/css/_colon_focus-within/index.html @@ -0,0 +1,88 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +translation_of: 'Web/CSS/:focus-within' +--- +<div>{{CSSRef}}</div> + +<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Lớp giả</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:focus-within</code></strong> đại diện cho thành phần nhận focus hoặc <em>chứa </em>một thành phần nhận focus. Nói cách khác, nó đại diện cho một thành phần mà chính nó khớp bởi một lớp giả {{cssxref(":focus")}} hoặc có một hậu duệ (con cháu) được khớp bởi <code>:focus</code>. (Gồm cả hậu duệ trong <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow trees</a>.)</p> + +<pre><code>/* Chọn một <div> khi hậu duệ của nó được focus */</code> +div:focus-within { + background: cyan; +}</pre> + +<p>Nó rất hữu dụng, ví dụ chung, để làm nổi bật toàn bộ container {{htmlElement("form")}} khi người dùng focus vào một trong các field {{htmlElement("input")}} của nó.</p> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<p>Trong ví dụ này, form sẽ nhận kiểu màu đặc biệt khi text input nhận focus.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Try typing into this form.</p> + +<form> + <label for="given_name">Given Name:</label> + <input id="given_name" type="text"> + <br> + <label for="family_name">Family Name:</label> + <input id="family_name" type="text"> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">form { + border: 1px solid; + color: gray; + padding: 4px; +} + +form:focus-within { + background: #ff8; + color: black; +} + +input { + margin: 4px; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", 500, 150)}}</p> + +<h2 id="Chi_tiết">Chi tiết</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Chi tiết</th> + <th scope="col">Tình trạng</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Tương_thích_Trình_duyệt">Tương thích Trình duyệt</h2> + + + +<p>{{Compat("css.selectors.focus-within")}}</p> + +<h2 id="Xem_cả">Xem cả</h2> + +<ul> + <li>{{cssxref(":focus")}}</li> +</ul> diff --git a/files/vi/web/css/_colon_focus/index.html b/files/vi/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..c13a30c0d9 --- /dev/null +++ b/files/vi/web/css/_colon_focus/index.html @@ -0,0 +1,96 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +translation_of: 'Web/CSS/:focus' +--- +<div>{{CSSRef}}</div> + +<p><a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Lớp giả </a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:focus</code></strong> đại diện cho thành phần (như một input form) nhận focus. Nó được kích hoạt khi người dùng kích hoặc tap lên thành phần hoặc chọn nó bằng phím "tab".</p> + +<pre class="brush: css no-line-numbers">/* Chọn bấy kỳ thành phần input nào được focus */ +input:focus { + color: red; +}</pre> + +<div class="note"> +<p><strong>Chú ý: </strong>Lớp giả này chỉ áp dụng với chính thành phần được focus. Sử dụng {{cssxref(":focus-within")}} nếu bạn muốn chọn thành phần <em>chứa</em> một thành phần được focus.</p> +</div> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input class="red-input" value="I'll be red when focused."><br> +<input class="blue-input" value="I'll be blue when focused."></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.red-input:focus { + background: yellow; + color: red; +} + +.blue-input:focus { + background: yellow; + color: blue; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h2 id="Chi_tiết">Chi tiết</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Chi tiết</th> + <th scope="col">Trạng thái</th> + <th scope="col">Bình luận</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Defines HTML-specific semantics.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> + +<div> + + +<p>{{Compat("css.selectors.focus")}}</p> +</div> + +<p> </p> + +<div id="compat-mobile"> </div> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{cssxref(":focus-within")}}</li> +</ul> diff --git a/files/vi/web/css/_colon_last-of-type/index.html b/files/vi/web/css/_colon_last-of-type/index.html new file mode 100644 index 0000000000..2fad50fb05 --- /dev/null +++ b/files/vi/web/css/_colon_last-of-type/index.html @@ -0,0 +1,130 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +translation_of: 'Web/CSS/:last-of-type' +--- +<div>{{CSSRef}}</div> + +<h2 id="Nội_dung_tóm_tắt">Nội dung tóm tắt</h2> + +<p>Cú pháp <code>:last-of-type</code> (<a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a>) đại diện cho phần tử cuối cùng trong danh sách các phần tử con có chung phần tử cha trong phép chọn css.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Example">Example</h2> + +<p>Để chỉ định phần tử cuối cùng bên trong thẻ {{HTMLElement("p")}} , bạn có thể sử dụng cú pháp:</p> + +<pre class="brush: css">p em:last-of-type { + color: lime; +} +</pre> + +<pre class="brush: html"><p> + <em>I'm not lime :(</em> + <strong>I'm not lime :(</strong> + <em>I'm lime :D</em> + <strong>I'm also not lime :(</strong> +</p> + +<p> + <em>I'm not lime :(</em> + <span><em>I am lime!</em></span> + <strong>I'm not lime :(</strong> + <em>I'm lime :D</em> + <span><em>I am also lime!</em> <strike> I'm not lime </strike></span> + <strong>I'm also not lime :(</strong> +</p></pre> + +<p id="...will_result_in.3A">...hết quả trả về:</p> + +<div>{{EmbedLiveSample('Example','100%', '120')}}</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Trình_duyệt_(browser)_tương_thích">Trình duyệt (browser) tương thích</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>9.0</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{Cssxref(":nth-last-of-type")}}</li> + <li>{{Cssxref(":first-of-type")}}</li> + <li>{{Cssxref(":nth-of-type")}}</li> +</ul> diff --git a/files/vi/web/css/backdrop-filter/index.html b/files/vi/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..6edf76fb78 --- /dev/null +++ b/files/vi/web/css/backdrop-filter/index.html @@ -0,0 +1,146 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - Bố trí + - Bộ lọc SVG + - CSS + - SVG + - Thuộc tính CSS + - Tài liệu tham khảo + - Web + - 'recipe:css-property' + - Đồ họa +translation_of: Web/CSS/backdrop-filter +--- +<div>{{CSSRef}}</div> + +<p>Thuộc tính <a href="/vi/docs/Web/CSS">CSS</a> <strong><code>backdrop-filter</code></strong> cho phép bạn áp dụng các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho vùng phía sau một phần tử. Bởi vì nó áp dụng cho mọi thứ <em>phía sau</em> phần tử, để xem hiệu ứng, bạn phải làm cho phần tử hoặc nền của nó ít nhất một phần trong suốt.</p> + +<pre class="brush: css no-line-numbers notranslate">/* Giá trị từ khóa */ +backdrop-filter: none; + +/* Bộ lọc URL đến SVG */ +backdrop-filter: url(commonfilters.svg#filter); + +/* Giá trị <filter-function> */ +backdrop-filter: blur(2px); +backdrop-filter: brightness(60%); +backdrop-filter: contrast(40%); +backdrop-filter: drop-shadow(4px 4px 10px blue); +backdrop-filter: grayscale(30%); +backdrop-filter: hue-rotate(120deg); +backdrop-filter: invert(70%); +backdrop-filter: opacity(20%); +backdrop-filter: sepia(90%); +backdrop-filter: saturate(80%); + +/* Nhiều bộ lọc */ +backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); + +/* Giá trị chung */ +backdrop-filter: inherit; +backdrop-filter: initial; +backdrop-filter: unset; +</pre> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<h3 id="Giá_trị">Giá trị</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Không có bộ lọc nào được áp dụng cho phông nền.</dd> + <dt><code><filter-function-list></code></dt> + <dd>Danh sách được phân tách bằng dấu cách về {{cssxref("<filter-function>")}}s hoặc một <a href="/en-US/docs/Web/SVG/Element/filter">bộ lọc SVG</a> sẽ được áp dụng cho phông nền.</dd> +</dl> + +<h2 id="Định_nghĩa_hình_thức">Định nghĩa hình thức</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Cấu_trúc_hình_thức">Cấu trúc hình thức</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.box { + background-color: rgba(255, 255, 255, 0.3); + border-radius: 5px; + font-family: sans-serif; + text-align: center; + line-height: 1; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + max-width: 50%; + max-height: 50%; + padding: 20px 40px; +} + +html, +body { + height: 100%; + width: 100%; +} + +body { + background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; +} + +.container { + align-items: center; + display: flex; + justify-content: center; + height: 100%; + width: 100%; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="container"> + <div class="box"> + <p>backdrop-filter: blur(10px)</p> + </div> +</div> +</pre> + +<h3 id="Kết_quả">Kết quả</h3> + +<p>{{EmbedLiveSample("Examples", 600, 400)}}</p> + +<h2 id="Thông_số_kỹ_thuật">Thông số kỹ thuật</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td> + <td>{{Spec2('Filters 2.0')}}</td> + <td>Định nghĩa ban đầu.</td> + </tr> + </tbody> +</table> + +<h2 id="Tính_tương_thích_của_trình_duyệt_web">Tính tương thích của trình duyệt web</h2> + +<div class="hidden">Bảng tương thích trên trang này được tạo từ dữ liệu có cấu trúc. Nếu bạn muốn đóng góp vào dữ liệu, vui lòng truy cập <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> và gửi cho chúng tôi một pull request.</div> + +<p>{{Compat("css.properties.backdrop-filter")}}</p> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{cssxref("filter")}}</li> +</ul> diff --git a/files/vi/web/css/background-color/index.html b/files/vi/web/css/background-color/index.html new file mode 100644 index 0000000000..9cb5bc0330 --- /dev/null +++ b/files/vi/web/css/background-color/index.html @@ -0,0 +1,157 @@ +--- +title: background-color +slug: Web/CSS/background-color +translation_of: Web/CSS/background-color +--- +<div>{{CSSRef}}</div> + +<p>Thuộc tính <a href="/vi/docs/Web/CSS">CSS</a> <strong><code>background-color</code></strong> đặt màu nền của một phần tử.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div> + +<p class="hidden">Nguồn cho ví dụ tương tác này được lưu trữ trong kho lưu trữ GitHub. Nếu bạn muốn đóng góp vào dự án ví dụ tương tác, vui lòng sao chép <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> và gửi cho chúng tôi một pull request.</p> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="brush: css no-line-numbers notranslate">/* Giá trị từ khóa */ +background-color: red; +background-color: indigo; + +/* Giá trị Hex (Thập lục phân) */ +background-color: #bbff00; /* Hoàn toàn mờ đục */ +background-color: #bf0; /* Fully opaque shorthand */ +background-color: #11ffee00; /* Hoàn toàn trong suốt */ +background-color: #1fe0; /* Fully transparent shorthand */ +background-color: #11ffeeff; /* Hoàn toàn mờ đục */ +background-color: #1fef; /* Fully opaque shorthand */ + +/* Giá trị RGB */ +background-color: rgb(255, 255, 128); /* Hoàn toàn mờ đục */ +background-color: rgba(117, 190, 218, 0.5); /* Trong suốt 50% */ + +/* Giá trị HSL */ +background-color: hsl(50, 33%, 25%); /* Hoàn toàn mờ đục */ +background-color: hsla(50, 33%, 25%, 0.75); /* Trong suốt 75% */ + +/* Giá trị từ khóa đặc biệt */ +background-color: currentcolor; +background-color: transparent; + +/* Giá trị chung */ +background-color: inherit; +background-color: initial; +background-color: unset;</pre> + +<p>Thuộc tính <code>background-color</code> được chỉ định là một giá trị <code><a href="#<color>"><color></a></code>.</p> + +<h3 id="Giá_trị">Giá trị</h3> + +<dl> + <dt><a id="<color>"></a>{{cssxref("<color>")}}</dt> + <dd>Màu đồng nhất của nền. Nó được hiển thị đằng sau bất kỳ {{cssxref("background-image")}} được chỉ định, mặc dù màu sẽ vẫn hiển thị qua bất kỳ độ trong suốt nào của hình ảnh.</dd> +</dl> + +<h2 id="Mối_quan_tâm_về_khả_năng_tiếp_cận">Mối quan tâm về khả năng tiếp cận</h2> + +<p>Điều quan trọng là phải đảm bảo rằng tỷ lệ tương phản giữa màu nền và màu của văn bản được đặt trên nó đủ cao để những người gặp tình trạng thị lực kém có thể đọc được nội dung của trang.</p> + +<p>Tỷ lệ tương phản màu được xác định bằng cách so sánh độ chói của văn bản và giá trị màu nền. Để xem <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a> hiện tại, tỷ lệ 4,5:1 là bắt buộc đối với nội dung văn bản và 3:1 đối với văn bản to, chẳng hạn như tiêu đề. Văn bản to được định nghĩa là 18,66px và <a href="/vi/docs/Web/CSS/font-weight">đậm</a> hoặc lớn hơn, hoặc 24px hoặc lớn hơn.</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Định_nghĩa_hình_thức">Định nghĩa hình thức</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Cú_pháp_hình_thức">Cú pháp hình thức</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[2,7,12]; notranslate">.exampleone { + background-color: teal; + color: white; +} + +.exampletwo { + background-color: rgb(153,102,153); + color: rgb(255,255,204); +} + +.examplethree { + background-color: #777799; + color: #FFFFFF; +} +</pre> + +<h3 id="Kết_quả">Kết quả</h3> + +<p>{{EmbedLiveSample("Examples", 200, 150)}}</p> + +<ul> +</ul> + +<h2 id="Thông_số_kỹ_thuật">Thông số kỹ thuật</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Thông số kỹ thuật</th> + <th scope="col">Ghi chú</th> + <th scope="col">Phản hồi</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td> + <td>Though technically removing the <code>transparent</code> keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}</td> + <td><a href="https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3">Backgrounds Level 3 GitHub issues</a></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td> + <td></td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td> + <td>Initial definition</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Tính_tương_thích_của_trình_duyệt_web">Tính tương thích của trình duyệt web</h2> + +<p class="hidden">Bảng tương thích trong trang này được tạo từ dữ liệu có cấu trúc. Nếu bạn muốn đóng góp vào dữ liệu, vui lòng xem <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> và gửi cho chúng tôi một pull request.</p> + +<p>{{Compat("css.properties.background-color")}}</p> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Multiple backgrounds</a></li> + <li>Kiểu dữ liệu của {{cssxref("<color>")}}</li> + <li>Các thuộc tính khác liên quan đến màu sắc: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> +</ul> diff --git a/files/vi/web/css/content/index.html b/files/vi/web/css/content/index.html new file mode 100644 index 0000000000..188f634136 --- /dev/null +++ b/files/vi/web/css/content/index.html @@ -0,0 +1,296 @@ +--- +title: content +slug: Web/CSS/content +translation_of: Web/CSS/content +--- +<div>{{CSSRef}}</div> + +<p class="summary">The <strong><code>content</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property replaces an element with a generated value. Objects inserted using the <code>content</code> property are <strong>anonymous <a href="/en-US/docs/Web/CSS/Replaced_element">replaced elements</a></strong><em>.</em></p> + +<pre class="brush:css no-line-numbers notranslate">/* Keywords that cannot be combined with other values */ +content: normal; +content: none; + +/* <a href="/en-US/docs/Web/CSS/image"><image></a> values */ +content: url("http://www.example.com/test.png"); +content: linear-gradient(#e66465, #9198e5); + +/* alt text for generated content, added in the Level 3 specification */ +content: url("http://www.example.com/test.png") / "This is the alt text"; + +/* values below can only be applied to generated content using ::before and ::after */ + +/* <string> value */ +content: "prefix"; + +/* <a href="/en-US/docs/Web/CSS/counter"><counter></a> values, optionally with <a href="/en-US/docs/Web/CSS/list-style-type"><list-style-type> </a>*/ +content: counter(chapter_counter); +content: counter(chapter_counter, upper-roman); +content: counters(section_counter, "."); +content: counters(section_counter, ".", <code>decimal-leading-zero</code>); + +/* <a href="/en-US/docs/Web/CSS/attr">attr()</a> value linked to the HTML attribute value */ +content: attr(value string); + +/* Language- and position-dependent keywords */ +content: open-quote; +content: close-quote; +content: no-open-quote; +content: no-close-quote; + +/* Except for normal and none, several values can be used simultaneously */ +content: open-quote chapter_counter; + +/* Global values */ +content: inherit; +content: initial; +content: unset; +</pre> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>none</code></dt> + <dd>The pseudo-element is not generated.</dd> + <dt><code>normal</code></dt> + <dd>Computes to <code>none</code> for the <code>::before</code> and <code>::after</code> pseudo-elements.</dd> + <dt>{{cssxref("<string>")}}</dt> + <dd>Specifies the "alt text" for the element. This value can be any number of text characters. Non-Latin characters must be encoded using their Unicode escape sequences: for example, <code>\000A9</code> represents the copyright symbol.</dd> + <dt>{{cssxref("<image>")}}</dt> + <dd>An {{cssxref("<image>")}}, denoted by the {{cssxref("<url>")}} or {{cssxref("<gradient>")}} data type, or part of the webpage, defined by the {{cssxref("element", "element()")}} function, denoting the content to display.</dd> + <dt>{{cssxref("<counter>")}}</dt> + <dd>The value of a <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS counter</a>, generally a number produced by computations defined by {{cssxref("<counter-reset>")}} and {{cssxref("<counter-increment>")}} properies. It can be displayed using either the {{cssxref("counter")}} or {{cssxref("counters")}} function.</dd> + <dd> + <p>The {{cssxref("counter")}} function has two forms: 'counter(<var>name</var>)' or 'counter(<var>name</var>, style)'. The generated text is the value of the innermost counter of the given name in scope at the given pseudo-element. It is formatted in the specified {{cssxref("<list-style-type>")}} (<code>decimal</code> by default).</p> + + <p>The {{cssxref("counters")}} function also has two forms: 'counters(<var>name</var>, <var>string</var>)' or 'counters(<var>name</var>, <var>string</var>, <var>style</var>)'. The generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string. The counters are rendered in the indicated {{cssxref("<list-style-type>")}} (<code>decimal</code> by default).</p> + </dd> + <dt><code>attr(x)</code></dt> + <dd>The value of the element's attribute <code>x</code> as a string. If there is no attribute <code>x</code>, an empty string is returned. The case-sensitivity of attribute names depends on the document language.</dd> + <dt><code>open-quote</code> | <code>close-quote</code></dt> + <dd>These values are replaced by the appropriate string from the {{cssxref("quotes")}} property.</dd> + <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt> + <dd>Introduces no content, but increments (decrements) the level of nesting for quotes.</dd> +</dl> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>CSS-generated content is not included in the <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Because of this, it will not be represented in the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> and certain assistive technology/browser combinations will not announce it. If the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main document.</p> + +<ul> + <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">Accessibility support for CSS generated content – Tink</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Explanation of WCAG, Guideline 1.3 – MDN</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Formal_definition">Formal definition</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">Formal syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Headings_and_quotes">Headings and quotes</h3> + +<p>This example inserts quotation marks around quotes, and adds the word "Chapter" before headings.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><h1>5</h1> +<p>According to Sir Tim Berners-Lee, + <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was + lucky enough to invent the Web at the time when the Internet + already existed - and had for a decade and a half.</q> + We must understand that there is nothing fundamentally wrong + with building on the contributions of others. +</p> + +<h1>6</h1> +<p>According to the Mozilla Manifesto, + <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals + must have the ability to shape the Internet and + their own experiences on the Internet.</q> + Therefore, we can infer that contributing to the open web + can protect our own individual experiences on it. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">q { + color: blue; +} + +q::before { + content: open-quote; +} + +q::after { + content: close-quote; +} + +h1::before { + content: "Chapter "; /* The trailing space creates separation + between the added content and the + rest of the content */ +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Headings_and_quotes', '100%', 200)}}</p> + +<h3 id="Image_combined_with_text">Image combined with text</h3> + +<p>This example inserts an image before the link. If the image is not found, it inserts text instead.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">a::before { + content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") / " MOZILLA: "; + font: x-small Arial, sans-serif; + color: gray; +}</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample('Image_combined_with_text', '100%', 60)}}</p> + +<h3 id="Targeting_classes">Targeting classes</h3> + +<p>This example inserts additional text after special items in a list.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><h2>Paperback Best Sellers</h2> +<ol> + <li>Political Thriller</li> + <li class="new-entry">Halloween Stories</li> + <li>My Biography</li> + <li class="new-entry">Vampire Romance</li> +</ol></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css notranslate">.new-entry::after { + content: " New!"; /* The leading space creates separation + between the added content and the + rest of the content */ + color: red; +}</pre> + +<h4 id="Result_3">Result</h4> + +<p>{{EmbedLiveSample('Targeting_classes', '100%', 160)}}</p> + +<h3 id="Images_and_element_attributes">Images and element attributes</h3> + +<p>This example inserts an image before each link, and adds its <code>id</code> attribute after.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html notranslate"><ul> + <li><a id="moz" href="http://www.mozilla.org/"> + Mozilla Home Page</a></li> + <li><a id="mdn" href="https://developer.mozilla.org/"> + Mozilla Developer Network</a></li> +</ul></pre> + +<h4 id="CSS_4">CSS</h4> + +<pre class="brush: css notranslate">a { + text-decoration: none; + border-bottom: 3px dotted navy; +} + +a::after { + content: " (" attr(id) ")"; +} + +#moz::before { + content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico"); +} + +#mdn::before { + content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png"); +} + +li { + margin: 1em; +} +</pre> + +<h4 id="Result_4">Result</h4> + +<p>{{EmbedLiveSample('Images_and_element_attributes', '100%', 160)}}</p> + +<h3 id="Element_replacement">Element replacement</h3> + +<p>This example replaces an element's content with an image. You can replace the contents of an element with either a {{cssxref("<url>")}} or an {{cssxref("<image>")}} value. Content added with <code>::before</code> or <code>::after</code> will not be generated as the contents of the element have been replaced.</p> + +<h4 id="HTML_5">HTML</h4> + +<pre class="brush: html notranslate"><div id="replaced">Mozilla</div> +</pre> + +<h4 id="CSS_5">CSS</h4> + +<pre class="brush: css notranslate">#replaced { + content: url("https://mdn.mozillademos.org/files/12668/MDN.svg"); +} + +#replaced::after { /* will not show if element replacement is supported */ + content: " (" attr(id) ")"; +}</pre> + +<h4 id="Result_5">Result</h4> + +<p>{{EmbedLiveSample('Element_replacement', '100%', 200)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Content", "#content-property", "content")}}</td> + <td>{{Spec2("CSS3 Content")}}</td> + <td>Adds support for alt-text</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "generate.html#content", "content")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.content")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced elements</a></li> + <li>{{Cssxref("::after")}}</li> + <li>{{Cssxref("::before")}}</li> + <li>{{Cssxref("::marker")}}</li> + <li>{{Cssxref("quotes")}}</li> + <li>{{cssxref("url()", "url()")}} function</li> +</ul> diff --git a/files/vi/web/css/css_box_alignment/index.html b/files/vi/web/css/css_box_alignment/index.html new file mode 100644 index 0000000000..c3014fee65 --- /dev/null +++ b/files/vi/web/css/css_box_alignment/index.html @@ -0,0 +1,245 @@ +--- +title: CSS Box Alignment +slug: Web/CSS/CSS_Box_Alignment +translation_of: Web/CSS/CSS_Box_Alignment +--- +<div><font><font>{{CSSRef}}</font></font></div> + +<p class="summary"><font><font>Mô-đun sắp xếp hộp CSS chỉ định các tính năng CSS liên quan đến căn chỉnh các hộp trong các mô hình bố trí hộp CSS khác nhau: bố trí khối, bố cục bảng, bố cục flex và bố cục lưới. </font><font>Mô-đun này nhằm mục đích tạo ra một phương thức liên kết nhất quán trên tất cả CSS. </font><font>Tài liệu này nêu chi tiết các khái niệm chung được tìm thấy trong đặc tả.</font></font></p> + +<div class="note"> +<p><strong><font><font>Lưu ý</font></font></strong><font><font> : Tài liệu cho từng phương pháp bố cục sẽ nêu chi tiết cách áp dụng Sắp xếp hộp ở đó.</font></font></p> +</div> + +<h2 id="Phương_thức_căn_chỉnh_cũ_hơn"><font><font>Phương thức căn chỉnh cũ hơn</font></font></h2> + +<p><font><font>CSS theo truyền thống có khả năng liên kết rất hạn chế. </font><font>Chúng tôi đã có thể căn chỉnh văn bản bằng cách sử dụng {{cssxref ("text-align")}}, các khối trung tâm sử dụng tự động {{cssxref ("margin")}} s và trong bảng hoặc khối nội tuyến bằng cách sử dụng {{cssxref ( thuộc tính "vertical-align")}}. </font><font>Việc căn chỉnh văn bản hiện được bao phủ bởi các </font><font>mô-đun </font><a href="https://www.w3.org/TR/css-text-3/"><font>Văn bản </font></a></font><a href="https://www.w3.org/TR/css-inline-3/"><font><font>Nội tuyến</font></font></a><font><font> và </font></font><a href="https://www.w3.org/TR/css-text-3/"><font><font>CSS</font></font></a><font><font> , và lần đầu tiên trong Căn chỉnh Hộp, chúng tôi có khả năng căn chỉnh ngang và dọc hoàn toàn.</font></font></p> + +<p><font><font>Nếu ban đầu bạn học </font></font><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout"><font><font>Flexbox</font></font></a><font><font> thì bạn có thể xem xét các thuộc tính này là một phần của đặc tả Flexbox, và một số thuộc tính thực sự được liệt kê trong Cấp 1 của Flexbox. </font><font>Tuy nhiên, đặc điểm kỹ thuật lưu ý rằng đặc tả của Alignment Box nên được nhắc đến vì nó có thể bổ sung thêm các khả năng so với những gì hiện có trong Flexbox.</font></font></p> + +<h2 id="Ví_dụ_cơ_bản"><font><font>Ví dụ cơ bản</font></font></h2> + +<p><font><font>Các ví dụ sau đây minh họa cách một số Thuộc tính sắp xếp hộp được áp dụng trong </font></font><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout"><font><font>Grid</font></font></a><font><font> và </font></font><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout"><font><font>Flexbox</font></font></a><font><font> .</font></font></p> + +<h3 id="Ví_dụ_căn_chỉnh_bố_cục_lưới_CSS"><font><font>Ví dụ căn chỉnh bố cục lưới CSS</font></font></h3> + +<p><font><font>Trong ví dụ này bằng cách sử dụng Grid Layout, có thêm không gian trong vùng chứa lưới sau khi đặt các bản nhạc có chiều rộng cố định trên trục nội tuyến (chính). </font><font>Không gian này được phân phối bằng {{cssxref ("justify-content")}}. </font><font>Trên trục (chéo), sự liên kết của các mục bên trong vùng lưới của chúng được điều khiển bằng {{cssxref ("align-items")}}. </font><font>Mục đầu tiên ghi đè </font></font><code>align-items</code><font><font>giá trị được đặt trên nhóm bằng cách đặt {{cssxref ("align-self")}} thành </font></font><code>center</code><font><font>.</font></font></p> + +<p><font><font>{{EmbedGHLiveSample ("css-example / box-alignment / overview / grid-align-items.html", '100%', 500)}}</font></font></p> + +<h3 id="Ví_dụ_liên_kết_Flexbox"><font><font>Ví dụ liên kết Flexbox</font></font></h3> + +<p><font><font>Trong ví dụ này, ba mục flex được căn chỉnh trên trục chính sử dụng </font></font><code>justify-content</code><font><font>và trên Trục chéo sử dụng </font></font><code>align-items</code><font><font>. </font><font>Mục đầu tiên ghi đè </font></font><code>align-items</code><font><font>tập hợp trên nhóm bằng cách đặt </font></font><code>align-self</code><font><font>thành </font></font><code>center</code><font><font>.</font></font></p> + +<p><font><font>{{EmbedGHLiveSample ("css-example / box-alignment / overview / flex-align-items.html", '100%', 500)}}</font></font></p> + +<h2 id="Khái_niệm_và_thuật_ngữ_chính"><font><font>Khái niệm và thuật ngữ chính</font></font></h2> + +<p><font><font>Đặc tả chi tiết một số thuật ngữ liên kết để giúp dễ dàng thảo luận các thuộc tính căn chỉnh bên ngoài việc thực hiện chúng trong một phương pháp bố cục cụ thể. </font><font>Ngoài ra còn có một số khái niệm chính được phổ biến cho tất cả các phương pháp bố trí.</font></font></p> + +<h3 id="Mối_quan_hệ_với_chế_độ_viết"><font><font>Mối quan hệ với chế độ viết</font></font></h3> + +<p><font><font>Sự liên kết được liên kết với các chế độ viết trong đó khi chúng ta căn chỉnh một mục, chúng ta không xem xét liệu chúng ta đang căn chỉnh nó với các kích thước vật lý của trên cùng, bên phải, phía dưới và bên trái. </font><font>Thay vào đó, chúng tôi mô tả sự liên kết về mặt bắt đầu và kết thúc của thứ nguyên cụ thể mà chúng tôi đang làm việc. </font><font>Điều này đảm bảo rằng liên kết hoạt động theo cùng một cách mà bất kỳ chế độ ghi nào của tài liệu.</font></font></p> + +<h3 id="Hai_kích_thước_căn_chỉnh"><font><font>Hai kích thước căn chỉnh</font></font></h3> + +<p><font><font>Khi sử dụng các thuộc tính căn chỉnh hộp, bạn sẽ căn chỉnh nội dung trên một trong hai trục - trục nội tuyến (hoặc trục chính) và trục khối (hoặc chéo). </font><font>Trục nội tuyến là trục dọc theo đó các từ trong dòng câu trong chế độ viết đang được sử dụng - cho tiếng Anh, ví dụ, trục nội tuyến nằm ngang. </font><font>Trục khối là trục dọc theo đó các khối, chẳng hạn như các phần tử đoạn, được đặt ra và nó chạy trên trục Inline.</font></font></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png"><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png" style="height: 260px; width: 480px;"></p> + +<p><font><font>Khi căn chỉnh các mục trên trục nội tuyến, bạn sẽ sử dụng các thuộc tính bắt đầu bằng </font></font><code>justify-</code><font><font>:</font></font></p> + +<ul> + <li><font><font>{{cssxref ("justify-items")}}</font></font></li> + <li><font><font>{{cssxref ("biện minh")}}</font></font></li> + <li><font><font>{{cssxref ("justify-content")}}</font></font></li> +</ul> + +<p><font><font>Khi căn chỉnh các mục trên trục khối, bạn sẽ sử dụng các thuộc tính bắt đầu </font></font><code>align-</code><font><font>:</font></font></p> + +<ul> + <li><font><font>{{cssxref ("align-items")}}</font></font></li> + <li><font><font>{{cssxref ("căn chỉnh")}}</font></font></li> + <li><font><font>{{cssxref ("căn chỉnh nội dung")}}</font></font></li> +</ul> + +<p><font><font>Flexbox bổ sung thêm một biến chứng trong đó ở trên là đúng khi {{cssxref ("flex-direction")}} được đặt thành </font></font><code>row</code><font><font>. </font><font>Các thuộc tính được hoán đổi khi flexbox được đặt thành </font></font><code>column</code><font><font>. </font><font>Vì vậy, khi làm việc với flexbox, bạn sẽ dễ dàng nghĩ về trục chính và trục chéo hơn là nội tuyến và khối. </font><font>Các </font></font><code>justify-</code><font><font>thuộc tính luôn được sử dụng để căn chỉnh trên trục chính, các </font></font><code>align-</code><font><font>thuộc tính trên trục chéo.</font></font></p> + +<h3 id="Chủ_thể_căn_chỉnh"><font><font>Chủ thể căn chỉnh</font></font></h3> + +<p><font><font>Các </font></font><strong><font><font>chủ đề liên kết</font></font></strong><font><font> là điều đang được liên kết. </font><font>Đối với </font></font><code>justify-self</code><font><font>hoặc </font></font><code>align-self</code><font><font>, hoặc khi thiết lập các giá trị này dưới dạng một nhóm có </font></font><code>justify-items</code><font><font>hoặc </font></font><code>align-items</code><font><font>, đây sẽ là hộp lề của phần tử mà thuộc tính này đang được sử dụng. </font><font>Các </font><font>thuộc tính </font></font><code>justify-content</code><font><font>và </font></font><code>align-content</code><font><font>khác nhau theo phương thức bố cục.</font></font></p> + +<h3 id="Container_liên_kết"><font><font>Container liên kết</font></font></h3> + +<p><font><font>Các </font></font><strong><font><font>thùng chứa liên kết</font></font></strong><font><font> là hộp đề tài này đã được liên kết bên trong. </font><font>Điều này thường sẽ là khối chứa của đối tượng căn chỉnh. </font><font>Vùng chứa liên kết có thể chứa một hoặc nhiều đối tượng căn chỉnh.</font></font></p> + +<p><font><font>Hình ảnh dưới đây cho thấy một container liên kết với hai đối tượng căn chỉnh bên trong.</font></font></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p> + +<h3 id="Căn_chỉnh_dự_phòng"><font><font>Căn chỉnh dự phòng</font></font></h3> + +<p><font><font>Nếu bạn đặt căn chỉnh không thể hoàn thành, thì </font></font><strong><font><font>căn chỉnh dự phòng</font></font></strong><font><font> sẽ đi vào hoạt động và đối phó với không gian có sẵn. </font><font>Liên kết dự phòng này được chỉ định riêng cho từng phương thức bố cục và được trình bày chi tiết trên trang cho phương thức đó.</font></font></p> + +<h2 id="Các_loại_căn_chỉnh"><font><font>Các loại căn chỉnh</font></font></h2> + +<p><font><font>Có ba loại căn chỉnh khác nhau mà chi tiết đặc điểm kỹ thuật; </font><font>các giá trị từ khóa này sử dụng.</font></font></p> + +<ul> + <li><strong><font><font>Căn chỉnh vị trí</font></font></strong><font><font> : xác định vị trí của đối tượng căn chỉnh có liên quan đến vùng chứa căn chỉnh của nó.</font></font></li> + <li><strong><font><font>Căn chỉnh đường cơ sở</font></font></strong><font><font> : Các từ khóa này xác định căn chỉnh là mối quan hệ giữa các đường cơ sở của nhiều đối tượng căn chỉnh trong một ngữ cảnh căn chỉnh.</font></font></li> + <li><strong><font><font>Căn chỉnh phân phối</font></font></strong><font><font> : Các từ khóa này xác định căn chỉnh là phân bố không gian giữa các đối tượng căn chỉnh.</font></font></li> +</ul> + +<h3 id="Giá_trị_từ_khóa_liên_kết_vị_trí"><font><font>Giá trị từ khóa liên kết vị trí</font></font></h3> + +<p><font><font>Các giá trị sau được định nghĩa cho sự liên kết vị trí, và có thể được sử dụng như giá trị cho sự liên kết nội dung với </font></font><code>justify-content</code><font><font>và </font></font><code>align-content</code><font><font>và còn cho sự liên kết tự với </font></font><code>justify-self</code><font><font>và </font></font><code>align-self</code><font><font>.</font></font></p> + +<ul> + <li><code>center</code></li> + <li><code>start</code></li> + <li><code>end</code></li> + <li><code>self-start</code></li> + <li><code>self-end</code></li> + <li><code>flex-start</code><font><font> chỉ dành cho Flexbox</font></font></li> + <li><code>flex-end</code><font><font> chỉ dành cho Flexbox</font></font></li> + <li><code>left</code></li> + <li><code>right</code></li> +</ul> + +<p><font><font>Khác với các giá trị vật lý </font></font><code>left</code><font><font>và </font></font><code>right</code><font><font>, liên quan đến các thuộc tính vật lý của màn hình, tất cả các giá trị khác là các giá trị logic và liên quan đến chế độ viết của nội dung.</font></font></p> + +<p><font><font>Ví dụ, khi làm việc trong CSS Grid Layout, nếu bạn đang làm việc bằng tiếng Anh và thiết lập </font></font><code>justify-content</code><font><font>để </font></font><code>start</code><font><font>điều này sẽ di chuyển các mục trong kích thước nội tuyến để bắt đầu, mà sẽ được trái như câu trong tiếng Anh bắt đầu ở bên trái. </font><font>Nếu bạn đang sử dụng tiếng Ả Rập, ngôn ngữ từ phải sang trái, thì giá trị tương tự </font></font><code>start</code><font><font>sẽ dẫn đến các mục di chuyển sang phải, như các câu trong tiếng Ả Rập bắt đầu ở phía bên tay phải của trang.</font></font></p> + +<p><font><font>Cả hai ví dụ này đều có </font></font><code>justify-content: start</code><font><font>, tuy nhiên vị trí bắt đầu thay đổi theo chế độ viết.</font></font></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15956/writing-mode-start.png" style="height: 101px; width: 478px;"></p> + +<h3 id="Căn_chỉnh_căn_bản"><font><font>Căn chỉnh căn bản</font></font></h3> + +<p><font><font>Các từ khóa căn chỉnh đường cơ sở được sử dụng để căn chỉnh các đường cơ sở của các hộp trên một nhóm đối tượng căn chỉnh. </font><font>Chúng có thể được sử dụng như giá trị cho sự liên kết nội dung với </font></font><code>justify-content</code><font><font>và </font></font><code>align-content</code><font><font>và còn cho sự liên kết tự với </font></font><code>justify-self</code><font><font>và </font></font><code>align-self</code><font><font>.</font></font></p> + +<ul> + <li><code>baseline</code></li> + <li><code>first baseline</code></li> + <li><code>last baseline</code></li> +</ul> + +<p><font><font>Căn chỉnh nội dung đường cơ sở - chỉ định giá trị căn chỉnh căn bản cho </font></font><code>justify-content</code><font><font>hoặc </font></font><code>align-content</code><font><font>- hoạt động trong các phương thức bố cục để sắp xếp các mục ra theo hàng. </font><font>Các đối tượng căn chỉnh là đường cơ sở được căn chỉnh với nhau bằng cách thêm đệm vào bên trong các hộp.</font></font></p> + +<p><font><font>Căn chỉnh tự căn chỉnh thay đổi các hộp để căn chỉnh theo đường cơ sở bằng cách thêm lề ngoài các hộp. </font><font>Tự căn chỉnh là khi sử dụng </font></font><code>justify-self</code><font><font>hoặc </font></font><code>align-self</code><font><font>, hoặc khi đặt các giá trị này thành một nhóm có </font></font><code>justify-items</code><font><font>và </font></font><code>align-items</code><font><font>.</font></font></p> + +<h3 id="Căn_chỉnh_phân_phối"><font><font>Căn chỉnh phân phối</font></font></h3> + +<p><font><font>Các </font></font><strong><font><font>từ khóa liên kết phân tán</font></font></strong><font><font> được sử dụng với các </font><font>thuộc tính </font></font><code>align-content</code><font><font>và </font></font><code>justify-content</code><font><font>. </font><font>Những từ khóa này xác định những gì sẽ xảy ra với bất kỳ không gian bổ sung nào sau khi đối tượng căn chỉnh được hiển thị. </font><font>Các giá trị như sau:</font></font></p> + +<ul> + <li><code>stretch</code></li> + <li><code>space-between</code></li> + <li><code>space-around</code></li> + <li><code>space-evenly</code></li> +</ul> + +<p><font><font>Ví dụ, trong các mục Flex Layout được căn chỉnh với </font></font><code>flex-start</code><font><font>ban đầu. </font><font>Làm việc ở chế độ viết ngang từ trên xuống dưới như tiếng Anh, </font></font><code>flex-direction</code><font><font>khi </font></font><code>row</code><font><font>các mục bắt đầu ở phía xa bên trái và bất kỳ khoảng trống nào sau khi hiển thị các mục được đặt sau các mục.</font></font></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15954/justify-content-start.png" style="height: 100px; width: 559px;"></p> + +<p><font><font>Nếu bạn đặt </font></font><code>justify-content: space-between</code><font><font>trên thùng chứa flex, không gian có sẵn hiện được chia sẻ và đặt giữa các mục.</font></font></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15955/justify-content-space-between.png" style="height: 100px; width: 559px;"></p> + +<p><font><font>Cần có khoảng trống trong thứ nguyên bạn muốn căn chỉnh các mục để các từ khóa này có hiệu lực. </font><font>Không có không gian, không có gì để phân phối.</font></font></p> + +<h2 id="Căn_chỉnh_tràn"><font><font>Căn chỉnh tràn</font></font></h2> + +<p><font><font>Các </font><font>từ khóa </font></font><code>safe</code><font><font>và </font></font><code>unsafe</code><font><font>từ khóa giúp xác định hành vi khi đối tượng căn chỉnh lớn hơn vùng chứa căn chỉnh. </font><font>Các </font></font><code>safe</code><font><font>từ khóa sẽ sắp xếp để </font></font><code>start</code><font><font>trong trường hợp của một liên kết cụ thể gây ra một tràn, mục đích là để tránh “mất dữ liệu”, nơi một phần của mặt hàng đó nằm ngoài ranh giới của container liên kết và không thể được cuộn để.</font></font></p> + +<p><font><font>Nếu bạn chỉ định </font></font><code>unsafe</code><font><font>sau đó sự liên kết sẽ được tôn trọng ngay cả khi nó sẽ gây ra mất dữ liệu như vậy.</font></font></p> + +<h2 id="Khoảng_cách_giữa_các_hộp"><font><font>Khoảng cách giữa các hộp</font></font></h2> + +<p><font><font>Các đặc điểm kỹ thuật liên kết hộp cũng bao gồm </font></font><code>gap</code><font><font>, </font></font><code>row-gap</code><font><font>và </font></font><code>column-gap</code><font><font>tài sản. </font><font>Các thuộc tính này cho phép thiết lập khoảng cách nhất quán giữa các mục trong một hàng hoặc cột, trong bất kỳ phương thức bố cục nào có các mục được sắp xếp theo cách này.</font></font></p> + +<p><font><font>Tài </font></font><code>gap</code><font><font>sản là một cách viết tắt </font></font><code>row-gap</code><font><font>và </font></font><code>column-gap</code><font><font>cho phép chúng tôi thiết lập các thuộc tính này cùng một lúc:</font></font></p> + +<ul> + <li><font><font>{{cssxref ("hàng-khoảng cách")}}</font></font></li> + <li><font><font>{{cssxref ("khoảng trống cột")}}</font></font></li> + <li><font><font>{{cssxref ("khoảng cách")}}</font></font></li> +</ul> + +<p><font><font>Trong ví dụ dưới đây, bố cục lưới sử dụng </font></font><code>gap</code><font><font>viết tắt để đặt </font></font><code>10px</code><font><font>khoảng cách giữa các bản nhạc hàng và </font></font><code>2em</code><font><font>khoảng cách giữa các bản nhạc cột.</font></font></p> + +<p><font><font>{{EmbedGHLiveSample ("css-example / box-alignment / overview / grid-gap.html", '100%', 500)}}</font></font></p> + +<p><font><font>Trong ví dụ này, tôi đang sử dụng thuộc tính {{cssxref ("grid-gap")}} ngoài {{cssxref ("gap")}}. </font><font>Các thuộc tính khoảng trống ban đầu được bắt đầu bằng </font></font><code>grid-</code><font><font>đặc tả bố cục lưới và một số trình duyệt chỉ hỗ trợ các phiên bản tiền tố này.</font></font></p> + +<ul> + <li><font><font>{{cssxref ("lưới-hàng-khoảng cách")}}</font></font></li> + <li><font><font>{{cssxref ("lưới-cột-khoảng trống")}}</font></font></li> + <li><font><font>{{cssxref ("lưới-khoảng cách")}}</font></font></li> +</ul> + +<p><font><font>Các phiên bản tiền tố sẽ được duy trì như một bí danh của những cái chưa được sửa đổi, tuy nhiên bạn luôn có thể tăng gấp đôi theo cách bạn muốn với tiền tố của nhà cung cấp, thêm thuộc </font></font><code>grid-gap</code><font><font>tính và sau đó thuộc </font></font><code>gap</code><font><font>tính có cùng giá trị.</font></font></p> + +<p><font><font>Ngoài ra, hãy lưu ý rằng những thứ khác có thể làm tăng khoảng cách trực quan được hiển thị, ví dụ bằng cách sử dụng các từ khóa phân phối không gian hoặc thêm các lề vào các mục.</font></font></p> + +<h2 id="Các_trang_chi_tiết_các_thuộc_tính_căn_chỉnh_riêng_lẻ"><font><font>Các trang chi tiết các thuộc tính căn chỉnh riêng lẻ</font></font></h2> + +<p><font><font>Vì các thuộc tính căn chỉnh hộp CSS được thực hiện khác nhau tùy thuộc vào đặc tả mà chúng tương tác, hãy tham khảo các trang sau cho từng loại bố cục để biết chi tiết về cách sử dụng các thuộc tính căn chỉnh với nó:</font></font></p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox"><font><font>Sắp xếp hộp trong Flexbox</font></font></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout"><font><font>Sắp xếp hộp trong Bố cục lưới CSS</font></font></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout"><font><font>Căn chỉnh hộp trong bố cục nhiều cột</font></font></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables"><font><font>Sắp xếp hộp cho khối, bố trí hoàn toàn và bố cục bảng</font></font></a></li> +</ul> + +<h2 id="Tài_liệu_tham_khảo"><font><font>Tài liệu tham khảo</font></font></h2> + +<h3 id="Thuộc_tính_CSS"><font><font>Thuộc tính CSS</font></font></h3> + +<div class="index"> +<ul> + <li><font><font>{{cssxref ("justify-content")}}</font></font></li> + <li><font><font>{{cssxref ("căn chỉnh nội dung")}}</font></font></li> + <li><font><font>{{cssxref ("vị trí nội dung")}}</font></font></li> + <li><font><font>{{cssxref ("justify-items")}}</font></font></li> + <li><font><font>{{cssxref ("align-items")}}</font></font></li> + <li><font><font>{{cssxref ("địa điểm")}}</font></font></li> + <li><font><font>{{cssxref ("biện minh")}}</font></font></li> + <li><font><font>{{cssxref ("căn chỉnh")}}</font></font></li> + <li><font><font>{{cssxref ("địa điểm")}}</font></font></li> + <li><font><font>{{cssxref ("hàng-khoảng cách")}}</font></font></li> + <li><font><font>{{cssxref ("khoảng trống cột")}}</font></font></li> + <li><font><font>{{cssxref ("khoảng cách")}}</font></font></li> +</ul> +</div> + +<h3 id="Thuật_ngữ"><font><font>Thuật ngữ</font></font></h3> + +<div class="index"> +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis"><font><font>Trục chéo</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis"><font><font>Trục chính</font></font></a></li> + <li><a href="/en-US/docs/Glossary/Alignment_Container"><font><font>Container sắp xếp</font></font></a></li> + <li><a href="/en-US/docs/Glossary/Alignment_Subject"><font><font>Chủ đề căn chỉnh</font></font></a></li> + <li><a href="/en-US/docs/Glossary/Fallback_Alignment"><font><font>Căn chỉnh dự phòng</font></font></a></li> +</ul> +</div> + +<h2 id="Hướng_dẫn"><font><font>Hướng dẫn</font></font></h2> + +<ul> + <li><font><font>Hướng dẫn CSS Flexbox: </font></font><em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"><font><font>Các khái niệm cơ bản của Flexbox</font></font></a></em></li> + <li><font><font>Hướng dẫn Flexbox CSS: Sắp xếp </font></font><em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container"><font><font>các mục trong một thùng chứa flex</font></font></a></em></li> + <li><font><font>Hướng dẫn lưới CSS: </font></font><em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout"><font><font>Sắp xếp hộp trong bố cục lưới CSS</font></font></a></em></li> +</ul> + +<h2 id="Tài_nguyên_bên_ngoài"><font><font>Tài nguyên bên ngoài</font></font></h2> + +<ul> + <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment"><font><font>Hộp liên kết cheatsheet</font></font></a></li> + <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/"><font><font>CSS Grid, Flexbox và Box alignment</font></font></a></li> + <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/"><font><font>Suy nghĩ về việc triển khai từng phần của căn chỉnh Hộp</font></font></a></li> +</ul> diff --git a/files/vi/web/css/css_box_model/index.html b/files/vi/web/css/css_box_model/index.html new file mode 100644 index 0000000000..08152c9c16 --- /dev/null +++ b/files/vi/web/css/css_box_model/index.html @@ -0,0 +1,115 @@ +--- +title: CSS Basic Box Model +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Box_Model +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Basic Box Model</strong> is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the <a href="/en-US/docs/Web/CSS/Visual_formatting_model">visual formatting model</a>.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Properties">Properties</h3> + +<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("overflow")}}</li> + <li>{{CSSxRef("overflow-x")}}</li> + <li>{{CSSxRef("overflow-y")}}</li> +</ul> +</div> + +<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("height")}}</li> + <li>{{CSSxRef("width")}}</li> + <li>{{CSSxRef("max-height")}}</li> + <li>{{CSSxRef("max-width")}}</li> + <li>{{CSSxRef("min-height")}}</li> + <li>{{CSSxRef("min-width")}}</li> +</ul> +</div> + +<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("margin")}}</li> + <li>{{CSSxRef("margin-bottom")}}</li> + <li>{{CSSxRef("margin-left")}}</li> + <li>{{CSSxRef("margin-right")}}</li> + <li>{{CSSxRef("margin-top")}}</li> + <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("padding")}}</li> + <li>{{CSSxRef("padding-bottom")}}</li> + <li>{{CSSxRef("padding-left")}}</li> + <li>{{CSSxRef("padding-right")}}</li> + <li>{{CSSxRef("padding-top")}}</li> +</ul> +</div> + +<h4 id="Other_properties">Other properties</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("visibility")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt> + <dd>Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt> + <dd>Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.</dd> + <dt><a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual formatting model</a></dt> + <dd>Explains the visual formatting model.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box")}}</td> + <td>{{Spec2("CSS3 Box")}}</td> + <td>Added <code style="white-space: nowrap;">margin-trim</code></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "box.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> diff --git a/files/vi/web/css/css_box_model/kien_thuc_co_ban_ve_css_box_model/index.html b/files/vi/web/css/css_box_model/kien_thuc_co_ban_ve_css_box_model/index.html new file mode 100644 index 0000000000..287d709494 --- /dev/null +++ b/files/vi/web/css/css_box_model/kien_thuc_co_ban_ve_css_box_model/index.html @@ -0,0 +1,77 @@ +--- +title: Kiến thức cơ bản về CSS box model +slug: Web/CSS/CSS_Box_Model/Kien_thuc_co_ban_ve_css_box_model +tags: + - CSS + - CSS Box Model + - Layout +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +<div>{{CSSRef}}</div> + +<p>Khi dựng giao diện của một trang web, theo lý thuyết chuẩn của <strong>CSS box model</strong>, engine của trình duyệt thể hiện các element trên trang web dưới dạng một hình chữ nhật. CSS sẽ giúp định nghĩa các thuộc tính như kích thước, vị trí và các thuộc tính khác (màu sắc, màu nền, kích thước của border...) của các element này.</p> + +<p>Mỗi element được cấu tạo bởi bốn phần (vùng), các phần này được xác định thông qua các cạnh (đường biên) tương ứng: cạnh ngoài vùng nội dung (<em>content edge)</em>, cạnh ngoài vùng padding (<em>padding edge)</em>, cạnh ngoài vùng border (<em>border edge)</em>, và cạnh ngoài vùng margin (<em>margin edge).</em></p> + +<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p> + +<p><strong>Vùng nội dung, </strong>được bọc bởi các cạnh ngoài (<em>content edge</em>), là nơi chứa nội dung chính của element như văn bản, hình ảnh, hoặc video. Các thông số về kích thước của vùng này gồm chiều rộng (<em>content width</em>) và chiều cao (<em>content height</em>). Vùng này thường có cả màu nền hoặc ảnh nền.</p> + +<p>Nếu thuộc tính {{cssxref("box-sizing")}} được gán giá trị <code>content-box</code> (mặc định) và nếu element này có kiểu hiển thị block, thì kích thước của vùng nội dung có thể được định nghĩa bởi các thông số thuộc tính {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, và {{cssxref("max-height")}}.</p> + +<p><strong>Vùng padding</strong>, được bọc bởi các cạnh ngoài (<em>padding edge</em>), bọc lấy bên ngoài vùng nội dung bằng padding của element. Các thông số kích thước của vùng này gồm chiều rộng (<em>padding-box width</em>) và chiều cao (<em>padding-box height</em>).</p> + +<p id="padding-area">Độ dày của padding được xác định dựa trên các thuộc tính {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, hay viết tắt là {{cssxref("padding")}}.</p> + +<p><strong>Vùng border</strong>, được bọc bởi các cạnh ngoài (border edge), bọc lấy bên ngoài vùng padding bằng border của element. Các thông số kích thước của vùng này gồm chiều rộng (<em>border-box width)</em> và chiều cao (<em>border-box height)</em>;</p> + +<p>Độ dày của border được xác định dựa trên thuộc tính {{cssxref("border-width")}}. Nếu thuộc tính {{cssxref("box-sizing")}} được gán giá trị <code>border-box</code>, thì kích thước của vùng border có thể được định nghĩa bởi các thông số thuộc tính {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, và {{cssxref("max-height")}}. Nếu element có background bằng cách gán thuộc tính ({{cssxref("background-color")}} hoặc {{cssxref("background-image")}}), thì background sẽ tràn ra cả vùng border. Bạn có thể thay đổi trạng thái mặc định này bằng cách sử dụng kèm thuộc tính {{cssxref("background-clip")}}.</p> + +<p><strong>Vùng margin</strong>, được bọc bởi các cạnh ngoài (margn edge), bọc lấy bên ngoài vùng border và tạo ra một vùng trống để giãn cách vị trí của element này với các element khác xung quanh. Các thông số kích thước của vùng này gồm chiều rộng (<em>margin-box width)</em> và chiều cao (<em>margin-box height)</em>;</p> + +<p>Kích thước của vùng margin được xác định dựa trên các thuộc tính {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}, hay viết tắt là {{cssxref("margin")}}. Khi có sự xung đột margin xảy ra (<a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">margin collapsing</a>), sẽ khó xác định chính xác vùng margin của một element vì nó được chia sẻ cho các element với nhau.</p> + +<p>Cuối cùng, lưu ý với một elements với thuộc tính hiển thị là inline (inline element), thì khoảng không gian mà nó chiếm dụng (chiều cao) được xác định bởi thuộc tính {{cssxref('line-height')}}, dù cho nó có các thuộc tính border hay padding thêm vào.</p> + +<h2 id="Tham_khảo_thêm">Tham khảo thêm</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Containing_block">Layout và containing block trong CSS Box Model</a></li> + <li><a href="/en-US/docs/Web/CSS/Cascade">Giới thiệu về CSS Cascade</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade và inheritance trong CSS</a></li> +</ul> + +<h2 id="Đặc_tả_kĩ_thuật">Đặc tả kĩ thuật</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Đặc tả kĩ thuật</th> + <th scope="col">Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#intro')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Chỉnh sửa từ ngữ chính xác hơn, không có thay đổi gì về quan trọng.</td> + </tr> + <tr> + <td>{{ SpecName("CSS1","#formatting-model")}}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Các định nghĩa ban đầu.</td> + </tr> + </tbody> +</table> + +<h2 id="Tham_khảo_thêm_2">Tham khảo thêm</h2> + +<ul> + <li>{{css_key_concepts}}</li> +</ul> diff --git a/files/vi/web/css/css_grid_layout/index.html b/files/vi/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..9869d6b999 --- /dev/null +++ b/files/vi/web/css/css_grid_layout/index.html @@ -0,0 +1,243 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout +--- +<p><strong>CSS Grid Layout</strong> chia trang thành các nhiều phần và định hình mối quan hệ giữa các phần dựa trên kích thước, vị trí, và lớp (layer) xây dựng từ HTML nguyên thủy.</p> + +<p>Giống như tables, grid layout cho phép chúng ta sắp xếp các phần thành cột và hàng. Tuy nhiên, đối với nhiều bố cục, việc sử dụng CSS grid sẽ dễ dàng hơn là table. Ví dụ như các phần tử con trong grid có thể chồng chéo lên nhau thành các layer, giống như việc sử dụng cách định hình vị trí của CSS.</p> + +<h2 id="Basic_Example" name="Basic_Example">Ví dụ cơ bản</h2> + +<p>Ví dụ dưới đây sẽ cho bạn thấy một bố cục grid gồm 3 cột có kích thước nhỏ nhất là 100 pixels và kích thước lớn nhất được chỉnh tự động. Các phần được sắp xếp vào grid theo đường thẳng.</p> + +<div id="example"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} +.wrapper { + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid rgb(233,171,88); + border-radius: 5px; + background-color: rgba(233,171,88,.5); + padding: 1em; + color: #d9480f; +}</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.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-column: 1; + grid-row: 2 / 5; +} +.four { + grid-column: 3; + grid-row: 3; +} +.five { + grid-column: 2; + grid-row: 4; +} +.six { + grid-column: 3; + grid-row: 4; +} +</pre> + +<p>{{ EmbedLiveSample('example', '500', '440') }}</p> +</div> + +<h2 id="Liên_quan">Liên quan</h2> + +<h3 id="Thuộc_tính_CSS">Thuộc tính CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-template")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-flow")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row")}}</li> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-area")}}</li> + <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("grid-column-gap")}}</li> + <li>{{cssxref("grid-gap")}}</li> +</ul> +</div> + +<h3 id="Chức_năng_CSS">Chức năng CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("repeat", "repeat()")}}</li> + <li>{{cssxref("minmax", "minmax()")}}</li> + <li>{{cssxref("fit-content", "fit-content()")}}</li> +</ul> +</div> + +<h3 id="Kiểu_dữ_liệu_CSS">Kiểu dữ liệu CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<flex>")}}</li> +</ul> +</div> + +<h3 id="Glossary_entries">Glossary entries</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li> +</ul> +</div> + +<h2 id="Chỉ_dẫn">Chỉ dẫn</h2> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li> +</ul> +</div> + +<h2 id="Nguồn_bên_ngoài">Nguồn bên ngoài</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li> + <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li> + <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> + <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> +</ul> + +<h2 id="Đặc_điểm">Đặc điểm</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Grid') }}</td> + <td>{{ Spec2('CSS3 Grid') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/vi/web/css/css_grid_layout/tong_quan_ve_grid_layout/index.html b/files/vi/web/css/css_grid_layout/tong_quan_ve_grid_layout/index.html new file mode 100644 index 0000000000..c1ebfbf5d5 --- /dev/null +++ b/files/vi/web/css/css_grid_layout/tong_quan_ve_grid_layout/index.html @@ -0,0 +1,763 @@ +--- +title: Tổng quan về Bố cục Lưới +slug: Web/CSS/CSS_Grid_Layout/tong_quan_ve_grid_layout +tags: + - ok +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Bố cục Lưới CSS</a> đưa vào CSS một hệ thống lưới hai chiều. Các lưới có thể dùng để bố cục những vùng lớn trong trang hoặc những thành phần giao diện người dùng nhỏ. Bài viết này giới thiệu Bố cục Lưới CSS và hệ thống thuật ngữ nằm trong chi tiết kỹ thuật của Bố cục Lưới CSS Cấp 1. Những đặc trưng được thể hiện trong tổng quan này sẽ được giải thích chi tiết hơn trong phần còn lại của hướng dẫn.</p> + +<h2 id="Lưới_là_gì">Lưới là gì?</h2> + +<p>Một lưới là một tổ hợp của những đường ngang và dọc cắt nhau - một nhóm xác định các cột và nhóm kia xác định các hàng. Các phần tử có thể được đặt lên lưới, dựa vào các đường hàng và cột này. Lưới CSS có các đặc trưng sau:</p> + +<h3 id="Kích_thước_đường_ray_cố_định_và_linh_hoạt">Kích thước đường ray cố định và linh hoạt</h3> + +<p>Bạn có thể tạo một lưới có kích thước đường ray cố định - bằng điểm ảnh chẳng hạn. Điều này sẽ đặt lưới vào điểm ảnh xác định khớp với bố cục bạn mong muốn. Bạn cũng có thể tạo một lưới sử dụng kích thước linh hoạt bằng phần trăm hoặc dùng đơn vị mới <code>fr</code> được thiết kế cho mục đích này.</p> + +<h3 id="Sắp_đặt_phần_tử">Sắp đặt phần tử</h3> + +<p>Bạn có thể đặt những phần tử vào những vị trí chính xác trên lưới bằng cách dùng số thứ tự đường, bằng tên hoặc trỏ vào một khu vực của lưới. Lưới có bao gồm một thuật toán để điều khiển việc sắp đặt các phần tử không có vị trí rõ ràng trên lưới.</p> + +<h3 id="Creation_of_additional_tracks_to_hold_content">Creation of additional tracks to hold content</h3> + +<p>You can define an explicit grid with grid layout but the specification also deals with the content added outside of a declared grid, which adds additional rows and columns when needed. Features such as adding “as many columns that will fit into a container” are included.</p> + +<h3 id="Alignment_control">Alignment control</h3> + +<p>Grid contains alignment features so that we can control how the items align once placed into a grid area, and how the entire grid is aligned. </p> + +<h3 id="Control_of_overlapping_content">Control of overlapping content</h3> + +<p>More than one item can be placed into a grid cell or area, they can partially overlap each other. This layering may then be controlled with {{cssxref("z-index")}} property.</p> + +<p>Grid is a powerful specification and when combined with other parts of CSS such as <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, can help you to create layouts that were previously impossible to build in CSS. It all starts by creating a grid in your <strong>grid container</strong>.</p> + +<h2 id="The_Grid_container">The Grid container</h2> + +<p>We create a <em>grid container</em> by declaring <code>display: grid</code> or <code>display: inline-grid</code> on an element. As soon as we do this all <em>direct children</em> of that element will become <em>grid items</em>.</p> + +<p>In this example, I have a containing div with a class of wrapper, inside are five child elements.</p> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>I make the <code>.wrapper</code> a grid container.</p> + +<pre class="brush: css">.wrapper { + display: grid; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('The_Grid_container', '200', '330') }}</p> + +<p>All the direct children are now grid items. In a web browser, you won’t see any difference to how these items are displayed before turning them into a grid, as grid has created a single column grid for the items. At this point, you may find it useful to work in Firefox Developer Edition, which has the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> available as part of the Developer Tools. If you view this example in Firefox and inspect the grid, you will see a small icon next to the value <code>grid</code>. Click this and then the grid on this element will be overlaid in the browser window.</p> + +<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p> + +<p>As you learn and then work with the CSS Grid Layout this tool will give you a better idea of what is happening with your grids visually.</p> + +<p>If we want to start making this more grid-like we need to add column tracks.</p> + +<h2 id="Grid_Tracks">Grid Tracks</h2> + +<p>We define rows and columns on our grid with the {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} properties. These define grid tracks. A <em>grid track</em> is the space between any two lines on the grid. In the below image you can see a track highlighted – this is the first row track in our grid.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p> + +<p>I can add to our earlier example by adding the <code>grid-template-columns</code> property, then defining the size of the column tracks.</p> + +<p>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.</p> + +<div id="grid_first"> +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 200px 200px 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p> +</div> + +<h3 id="The_fr_Unit">The fr Unit</h3> + +<p>Tracks can be defined using any length unit. Grid also introduces an additional length unit to help us create flexible grid tracks. The new <code>fr</code> unit represents a fraction of the available space in the grid container. The next grid definition would create three equal width tracks that grow and shrink according to the available space.</p> + +<div id="fr_unit_ls"> +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p> +</div> + +<p>In this next example, we create a definition with a <code>2fr</code> track then two <code>1fr</code> tracks. The available space is split into four. Two parts are given to the first track and one part each to the next two tracks.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} +</pre> + +<p>In this final example, we mix absolute sized tracks with fraction units. The first track is 500 pixels, so the fixed width is taken away from the available space. The remaining space is divided into three and assigned in proportion to the two flexible tracks.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 500px 1fr 2fr; +} +</pre> + +<h3 id="Track_listings_with_repeat()_notation">Track listings with <code>repeat()</code> notation</h3> + +<p>Large grids with many tracks can use the <code>repeat()</code> notation, to repeat all or a section of the track listing. For example the grid definition:</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<p>Can also be written as:</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>Repeat notation can be used for a part of the track listing. In this next example I have created a grid with an initial 20-pixel track, then a repeating section of 6 <code>1fr</code> tracks then a final 20-pixel track.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 20px repeat(6, 1fr) 20px; +} +</pre> + +<p>Repeat notation takes the track listing, and uses it to create a repeating pattern of tracks. In this next example, my grid will consist of 10 tracks, a <code>1fr</code> track, and then followed by a <code>2fr</code> track. This pattern will be repeated five times.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(5, 1fr 2fr); +} +</pre> + +<h3 id="The_implicit_and_explicit_grid">The implicit and explicit grid</h3> + +<p>When creating our example grid we defined our column tracks with the {{cssxref("grid-template-columns")}} property, but in addition let the grid create rows it needed for any other content. These rows are created in the implicit grid. The explicit grid consists of the rows and columns you define with {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}}. If you place something outside of that defined grid, or due to the amount of content more grid tracks are needed, then the grid creates rows and columns in the implicit grid. These tracks will be auto-sized by default, resulting in their size being based on the content that is inside them.</p> + +<p>You can also define a set size for tracks created in the implicit grid with the {{cssxref("grid-auto-rows")}} and {{cssxref("grid-auto-columns")}} properties.</p> + +<p>In the below example we use <code>grid-auto-rows</code> to ensure that tracks created in the implicit grid are 200 pixels tall.</p> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('The_implicit_and_explicit_grid', '230', '420') }}</p> + +<h3 id="Track_sizing_and_minmax()">Track sizing and <code>minmax()</code></h3> + +<p>When setting up an explicit grid or defining the sizing for automatically created rows or columns we may want to give tracks a minimum size, but also ensure they expand to fit any content that is added. For example, I may want my rows to never collapse smaller than 100 pixels, but if my content stretches to 300 pixels in height, then I would like the row to stretch to that height.</p> + +<p>Grid has a solution for this with the {{cssxref("minmax", "minmax()")}} function. In this next example I am using <code>minmax()</code> in the value of {{cssxref("grid-auto-rows")}}. This means automatically created rows will be a minimum of 100 pixels tall, and a maximum of <code>auto</code>. Using <code>auto</code> means that the size will look at the content size and will stretch to give space for the tallest item in a cell, in this row.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><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> +</pre> + +<p>{{ EmbedLiveSample('Track_sizing_and_minmax()', '240', '470') }}</p> + +<h2 id="Grid_Lines">Grid Lines</h2> + +<p>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.</p> + +<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p> + +<p>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.</p> + +<h3 id="Positioning_items_against_lines">Positioning items against lines</h3> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: css">.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; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Positioning_items_against_lines', '230', '420') }}</p> + +<p>Don't forget that you can use the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> in Firefox Developer Tools to see how the items are positioned against the lines of the grid.</p> + +<h2 id="Grid_Cells">Grid Cells</h2> + +<p>A <em>grid cell</em> 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 as a parent the child items will lay themselves out in one cell each of the defined grid. In the below image, I have highlighted the first cell of the grid.</p> + +<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p> + +<h2 id="Grid_Areas">Grid Areas</h2> + +<p>Items can span one or more cells both by row or by column, and this creates a <em>grid area</em>. Grid areas must 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.</p> + +<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p> + +<h2 id="Gutters">Gutters</h2> + +<p><em>Gutters</em> or <em>alleys</em> 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 <code>1em</code> gap between rows.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-column-gap: 10px; + grid-row-gap: 1em; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Gutters') }}</p> + +<p>Any space used by gaps will be accounted for before space is assigned to the flexible length <code>fr</code> 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.</p> + +<h2 id="Nesting_grids">Nesting grids</h2> + +<p>A grid item can become a grid container. In the following example, I have the three-column grid that I 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 a normal document flow.</p> + +<div id="nesting"> +<pre class="brush: html"><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> +</pre> + +<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p> + +<p>If I set <code>box1</code> to <code>display: grid</code> I can give it a track definition and it too will become a grid. The items then lay out on this new grid.</p> + +<pre class="brush: css">.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); +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('nesting', '600', '340') }}</p> + +<p>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.</p> + +<h3 id="Subgrid">Subgrid</h3> + +<p>In the level 1 grid specification there is a feature called <em>subgrid</em> which would let us create nested grids that use the track definition of the parent grid.</p> + +<div class="note"> +<p>Subgrids are not yet implemented in any browsers, and the specification is subject to change.</p> +</div> + +<p>In the current specification, we would edit the above nested grid example to use <code>display: subgrid</code> rather than <code>display: grid</code>, then remove the track definition. The nested grid will use the parent grid tracks to layout items.</p> + +<p>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.</p> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: subgrid; +} +</pre> + +<h2 id="Layering_items_with_z-index">Layering items with <code>z-index</code></h2> + +<p>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.</p> + +<div id="l_ex"> +<pre class="brush: html"><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> +</pre> + +<pre class="brush: css">.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; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p> + +<p>The item <code>box2</code> is now overlapping <code>box1</code>, it displays on top as it comes later in the source order.</p> + +<h3 id="Controlling_the_order">Controlling the order</h3> + +<p>We can control the order in which items stack up by using the <code>z-index</code> property - just like positioned items. If we give <code>box2</code> a lower <code>z-index</code> than <code>box1</code> it will display below <code>box1</code> in the stack.</p> + +<pre class="brush: css">.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; +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><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> +</pre> + +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Controlling_the_order', '230', '420') }}</p> + +<h2 id="Next_Steps">Next Steps</h2> + +<p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">the next part of this guide where we will really start to dig into the detail of CSS Grid Layout</a>.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout"><strong>Bố cục Lưới CSS</strong></a></li> + <li data-default-state="open"><a href="#"><strong>Các hướng dẫn</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/vi/web/css/css_transitions/index.html b/files/vi/web/css/css_transitions/index.html new file mode 100644 index 0000000000..23559df42c --- /dev/null +++ b/files/vi/web/css/css_transitions/index.html @@ -0,0 +1,121 @@ +--- +title: CSS Transitions +slug: Web/CSS/CSS_Transitions +tags: + - CSS + - CSS Transitions + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Transitions +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Transitions</strong> is a module of CSS that lets you create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their timing function, duration, and other attributes.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Properties">Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("transition")}}</li> + <li>{{cssxref("transition-delay")}}</li> + <li>{{cssxref("transition-duration")}}</li> + <li>{{cssxref("transition-property")}}</li> + <li>{{cssxref("transition-timing-function")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></dt> + <dd>Step-by-step tutorial about how to create transitions using CSS. This article describes each relevant CSS property and explains how they interact with each other.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0 {{property_prefix("-webkit")}}<br> + 26.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10.0</td> + <td>11.6 {{property_prefix("-o")}}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>3.0 {{property_prefix("-webkit")}}<br> + 6.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1 {{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.0 {{property_prefix("-o")}}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>3.2 {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related to CSS Transitions, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> provide finer control over animated properties.</li> +</ul> diff --git a/files/vi/web/css/css_transitions/using_css_transitions/index.html b/files/vi/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..e9a5bd6acd --- /dev/null +++ b/files/vi/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,1139 @@ +--- +title: Sử dụng CSS transitions +slug: Web/CSS/CSS_Transitions/Using_CSS_transitions +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +<p>{{CSSref}}</p> + +<p><span class="seoSummary"><strong>CSS transitions</strong> cung cấp một cách để điều khiển tốc độ của hiệu ứng khi thay đổi các thuộc tính của CSS. Thay vì, các thay đổi thuộc tính tạo ra ảnh hưởng ngay lập tức, bạn có thể làm cho các thay đổi này diễn ra trong một khoảng thời gian. Ví dụ, nếu bạn thay đổi màu sắc của một phần tử từ trắng thành đen, thông thường sự thay đổi là tức thời. Với CSS transitions, các thay đổi xảy ra tại những khoảng thời gian, theo một đường cong tăng tốc, có thể tùy chỉnh.</span></p> + +<p>Các hình động liên quan đến quá trình chuyển tiếp giữa hai trạng thái thường được gọi là các chuyển tiếp tiềm ẩn (implicit transitions) vì các trạng thái ở giữa trạng thái bắt đầu và kết thúc đã được ngầm định bởi trình duyệt.</p> + +<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p> + +<p>CSS transitions giúp bạn quyết định những thuộc tính nào có hiệu ứng (bằng cách <em>liệt kê chúng</em>), khi nào thì hiệu ứng sẽ bắt đầu (bằng cách thiết lập <em>thời gian trì hoãn - delay</em>), bao lâu thì chuyển đổi sẽ kết thúc (bằng cách thiết lập khoảng <em>thời gian - duration</em>), và cách chuyển đổi diễn ra (bằng cách định nghĩa <em>timing function,</em> ... tuyến tính hoặc nhanh ở lúc bắt đầu, chậm ở lúc kết thúc).</p> + +<div class="note"><strong>Chú ý: </strong>các thuộc tính CSS transition có thể được sử dụng mà không cần bất kỳ prefix provider (nhà cung cấp tiền tố nào), nhưng hiện nay, các vender prefix (tiền tố nhà cung cấp) vẫn cần thiết để tương thích với các trình duyệt cũ (ví dụ Firefox 15 và các phiên bản trước đó, Opera 12 và các phiên bản trước đó, WebKit 5.1.10 và các phiên bản trước đó, Chrome 25 và các phiên bản thấp hơn). Một bảng thống kê khả năng tương thích ở phần cuối của trang này sẽ cung cấp nhiều thông tin hơn.</div> + +<h2 id="Những_thuộc_tính_CSS_nào_có_thể_tạo_hiệu_ứng">Những thuộc tính CSS nào có thể tạo hiệu ứng?</h2> + +<p>Những lập trình viên Web có thể định nghĩa thuộc tính nào có hiệu ứng và theo cách nào. Điều này cho phép tạo ra các chuyển đổi phức tạo. Tuy nhiên, không phải tất cả các thuộc tính đều có thể tạo hiệu ứng, vì vậy bạn cần biết <a href="/en-US/docs/CSS/CSS_animated_properties">danh sách các thuộc tính có thể tạo hiệu ứng</a>.</p> + +<div class="note">Chú ý: Danh sách này có thể thay đổi. Bạn cần chú ý tới điều này.</div> + +<p class="note">Ngoài ra giá trị <code>auto</code> là một trường hợp rất phức tạp. Một vài trình duyệt, dựa trên Gecko, triển khai giá trị này khác so với những trình duyệt dựa trên WebKit, ít chặt chẽ hơn. Sử dụng các hiệu ứng với <code>auto</code> có thể dẫn tới những kết quả khác nhau, phụ thuộc vào trình duyệt và phiên bản của nó, vì vậy nên tránh sử dụng giá trị này.</p> + +<p class="note">Cũng cần lưu ý khi sử dụng một transition ngay sau khi thêm phần tử tới DOM bằng cách sử dụng <code>.appendChild()</code> hoặc loại bỏ thuộc tính <code>display: none</code> của nó. Điều này xem như trạng thái ban đầu không bao giờ xảy ra và phần tử luôn luôn ở trạng thái kết thúc. Cách dễ nhất để giải quyết vấn đề này là sử dụng <code>window.setTimeout()</code> trước khi thay đổi thuộc tính CSS mà bạn muốn tạo hiệu ứng.</p> + +<h3 id="Ví_dụ_nhiều_thuộc_tính_với_hiệu_ứng">Ví dụ nhiều thuộc tính với hiệu ứng</h3> + +<h4 id="Nội_dung_HTML">Nội dung HTML</h4> + +<pre class="brush: html; highlight:[3]"><body> + <p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p> + <div class="box">Sample</div> +</body></pre> + +<h4 id="Nội_dung_CSS">Nội dung CSS</h4> + +<pre class="brush: css; highlight:[8,9]">.box { + border-style: solid; + border-width: 1px; + display: block; + width: 100px; + height: 100px; + background-color: #0000FF; + -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s; + transition: width 2s, height 2s, background-color 2s, transform 2s; +} + +.box:hover { + background-color: #FFCCCC; + width: 200px; + height: 200px; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +</pre> + +<p>{{EmbedLiveSample('Multiple_animated_properties_example', 600, 300)}}</p> + +<h2 id="Các_thuộc_tính_được_sử_dụng_để_định_nghĩa_các_transition">Các thuộc tính được sử dụng để định nghĩa các transition</h2> + +<p>CSS Transitions được điều khiển bằng cách viết tắt thuộc tính {{cssxref("transition")}}. Đây là cách tốt nhất để cấu hình các transition, nó tránh việc có một danh sách dài các tham số, cái có thể gây khó chịu khi phải dành nhiều thời gian để gỡ lỗi.</p> + +<p>Bạn có thể điều khiển từng thành phần của transition với các thuộc tính sau:</p> + +<p><strong>(Chú ý các vòng lặp vô hạn chỉ dành cho mục đích mục đích minh họa; CSS <code>transitions</code> chỉ thay đổi một thuộc tính từ bắt đầu tới kết thúc. Nếu bạn cần các hiệu ứng như vòng lặp, hãy sử dụng CSS <code><a href="/en-US/docs/">animation</a></code>)</strong></p> + +<dl> + <dt>{{cssxref("transition-property")}}</dt> + <dd>Chỉ định tên các thuộc tính CSS để áp dụng hiệu ứng. Chỉ các các thuộc tính được liệt kê ở đây có hiệu ứng trong thời gian chuyển đổi; những thay đổi của các thuộc tính khác xảy ra ngay lập tức như thường lệ.</dd> + <dt>{{cssxref("transition-duration")}}</dt> + <dd>Chỉ định khoảng thời gian các chuyển tiếp xảy ra. Bạn có thể chỉ định một khoảng thời gian duy nhất áp dụng cho tất cả các thuộc tính, hoặc nhiều giá trị cho mỗi cho phép mỗi thuộc tính chuyển đổi qua các khoảng thời gian khác nhau.</dd> + <dd> + <div> + <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 0.5s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css">.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; +} +</pre> + + <pre class="brush:js">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); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_0_5s", 275, 150)}}</div> + </div> + + <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 1s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.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; +} +</pre> + + <pre class="brush:js">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); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_1s",275,150)}}</div> + </div> + + <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 2s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.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; +} +</pre> + + <pre class="brush:js">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); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_2s",275,150)}}</div> + </div> + + <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 4s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.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; +} +</pre> + + <pre class="brush:js">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); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_4s",275,150)}}</div> + </div> + </div> + </dd> + <dt>{{cssxref("transition-timing-function")}}</dt> + <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">Chỉ định một hàm để định nghĩa cách các giá trị trung gian cho các thuộc tính được tính toán như thế nào. Timing functions xác định cách các giá trị trung gian của chuyển đổi được tính toán. Hầu hết <a href="/en-US/docs/CSS/timing-function">timing function</a> có thể được xác định bằng cách cung cấp các đồ thị tương ứng, như định nghĩa bốn đỉnh của một khối cubic bezier. Bạn cũng có thể chọn easing từ <a href="http://easings.net/">Easing Functions Cheat Sheet.</a></dd> + <dd> + <div class="cleared"> + <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: ease</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.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; +} +</pre> + + <pre class="brush:js">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); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div> + </div> + + <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: linear</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.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; +} +</pre> + + <pre class="brush:js">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); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div> + </div> + + <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: step-end</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.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; +} +</pre> + + <pre class="brush:js">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); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div> + </div> + + <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: steps(4, end)</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.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); +} +</pre> + + <pre class="brush:js">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); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div> + </div> + </div> + </dd> + <dt>{{cssxref("transition-delay")}}</dt> + <dd>Xác định khoảng thời gian trì hoãn giữa thời gian một thuộc tính thay đổi và lúc chuyển tiếp thực sự bắt đầu.</dd> + <dd> + <div> + <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 0.5s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.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-delay: 0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 0.5s; + 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-delay: 0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 0.5s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">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); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div> + </div> + + <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 1s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.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-delay: 1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 1s; + 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-delay: 1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 1s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">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); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_1s",275,150)}}</div> + </div> + + <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 2s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.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-delay: 2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 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-delay: 2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 2s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">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); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_2s",275,150)}}</div> + </div> + + <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 4s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.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-delay: 4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 4s; + 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-delay: 4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 4s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">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); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_4s",275,150)}}</div> + </div> + </div> + </dd> +</dl> + +<p>Cú pháp CSS được viết tắt như sau:</p> + +<pre class="brush: css">div { + transition: <property> <duration> <timing-function> <delay>; +}</pre> + +<h2 id="Phát_hiện_sự_bắt_đầu_và_hoàn_thành_của_quá_trình_chuyển_tiếp">Phát hiện sự bắt đầu và hoàn thành của quá trình chuyển tiếp</h2> + +<p>Bạn có thể sử dụng sự kiện {{event("transitionend")}} để phát hiện một hiệu ứng đã kết thúc. Đây là một đối tượng {{domxref("TransitionEvent")}}, trong đó có 2 thuộc tính được thêm vào một đối tượng {{domxref("Event")}} thông thường là:</p> + +<dl> + <dt><code>propertyName</code></dt> + <dd>Một chuỗi báo hiệu tên thuộc tính CSS đã hoàn thành quá trình chuyển tiếp.</dd> + <dt><code>elapsedTime</code></dt> + <dd>Một số thực báo hiệu số giây quá trình chuyển tiếp đã diễn ra tại thời điểm sự kiện xảy ra. Giá trị này không ảnh hưởng tới giá trị của {{cssxref("transition-delay")}}.</dd> +</dl> + +<p>Thông thường, bạn có thể sử dụng phương thức {{domxref("EventTarget.addEventListener", "addEventListener()")}} để theo dõi sự kiện này:</p> + +<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true); +</pre> + +<p>Để phát hiện quá trình chuyển tiếp bắt đầu sử dụng {{event("transitionrun")}} (xảy ra trước thời gian chờ) và {{event("transitionstart")}} (xảy ra sau thời gian chờ), theo cùng một mẫu:</p> + +<pre class="brush: js">el.addEventListener("transitionrun", signalStart, true); +el.addEventListener("transitionstart", signalStart, true);</pre> + +<div class="note"><strong>Chú ý: </strong>Sự kiện transitioned không xảy ra nếu quá trình chuyển tiếp bị hủy bỏ trước khi nó hoàn thành vì phần tử {{cssxref("display")}}<code>: none </code>hoặc giá trị của thuộc tính đã thay đổi.</div> + +<h2 id="Khi_danh_sách_thuộc_tính_và_giá_trị_có_độ_dài_khác_nhau">Khi danh sách thuộc tính và giá trị có độ dài khác nhau</h2> + +<p>Nếu danh sách giá trị ngắn hơn danh sách thuộc tính, giá trị của nó sẽ được lặp lại để phù hợp. Ví dụ:</p> + +<pre class="brush: css">div { + transition-property: opacity, left, top, height; + transition-duration: 3s, 5s; +} +</pre> + +<p>Điều này sẽ tương ứng với:</p> + +<pre class="brush: css">div { + transition-property: opacity, left, top, height; + transition-duration: 3s, 5s, 3s, 5s; +}</pre> + +<p>Tương tự, nếu danh sách giá trị dài hơn danh sách thuộc tính, nó sẽ bị cắt bớt, như ví dụ dưới đây:</p> + +<pre class="brush: css">div { + transition-property: opacity, left; + transition-duration: 3s, 5s, 2s, 1s; +}</pre> + +<p>Sẽ được biên dịch thành:</p> + +<pre class="brush: css">div { + transition-property: opacity, left; + transition-duration: 3s, 5s; +}</pre> + +<h2 id="Một_ví_dụ_đơn_giản">Một ví dụ đơn giản</h2> + +<p>Đây là ví dụ thực hiện quá trình chuyển tiếp font size trong bốn giây với 2 giây trì hoãn giữa thời điểm người dùng di chuyển chuột lên phần tử và khi hiệu ứng bắt đầu:</p> + +<pre class="brush: css">#delay { + font-size: 14px; + transition-property: font-size; + transition-duration: 4s; + transition-delay: 2s; +} + +#delay:hover { + font-size: 36px; +} +</pre> + +<h2 id="Sử_dụng_transitions_khi_highlighting_menus">Sử dụng transitions khi highlighting menus</h2> + +<p>Một trường hợp phổ biến là sử dụng CSS làm nổi bật các item trong một menu khi người dùng di chuột lên chúng. Việc sử dụng transition giúp hiệu ứng hấp dẫn hơn.</p> + +<p>Trước khi xem code, bạn có thể muốn xem <a href="https://codepen.io/anon/pen/WOEpva">live demo</a> (giả sử trình duyệt của bạn hỗ trợ transitions).</p> + +<p>Đầu tiên chúng ta thiết lập menu sử dụng HTML:</p> + +<pre class="brush: html"><nav> + <a href="#">Home</a> + <a href="#">About</a> + <a href="#">Contact Us</a> + <a href="#">Links</a> +</nav></pre> + +<p>Sau đó chúng ta sử dụng CSS để style và tạo hiệu ứng cho menu:</p> + +<pre class="brush: css">a { + color: #fff; + background-color: #333; + transition: all 1s ease-out; +} + +a:hover, +a:focus { + color: #333; + background-color: #fff; +} +</pre> + +<p>Đoạn CSS quyết định menu trông như thế nào, với cả màu background và text thay đổi khi phần tử có trạng thái là {{cssxref(":hover")}} và {{cssxref(":focus")}}.</p> + +<h2 id="Sử_dụng_transitions_để_làm_cho_tính_năng_JavaScript_mượt_mà">Sử dụng transitions để làm cho tính năng JavaScript mượt mà</h2> + +<p>Transitions là một công cụ tuyệt vời để làm mọi thứ trong mượt mà hơn mà không cần phải làm mọi thứ với JavaScript. Hãy xem ví dụ.</p> + +<pre class="brush: html"><p>Click anywhere to move the ball</p> +<div id="foo"></div> +</pre> + +<p>Sử dụng JavaScript bạn có thể làm hiệu ứng quả bóng di chuyển tới một vị trí nhất định xảy ra:</p> + +<pre class="brush: js">var f = document.getElementById('foo'); +document.addEventListener('click', function(ev){ + f.style.transform = 'translateY('+(ev.clientY-25)+'px)'; + f.style.transform += 'translateX('+(ev.clientX-25)+'px)'; +},false); +</pre> + +<p>Với CSS bạn có thể làm cho nó diễn ra mượt mà, mà không cần nhiều nỗ lực. Đơn giản thêm một transition tới phần tử và mọi thay đổi sẽ diễn ra mượt mà:</p> + +<pre class="brush: css">p { + padding-left: 60px; +} + +#foo { + border-radius: 50px; + width: 50px; + height: 50px; + background: #c00; + position: absolute; + top: 0; + left: 0; + transition: transform 1s; +} +</pre> + +<p>Bạn có thể thử ở đây: <a href="http://jsfiddle.net/9h261pzo/291/">http://jsfiddle.net/9h261pzo/291/</a></p> + +<h2 id="Các_thông_số_kỹ_thuật">Các thông số kỹ thuật</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '', '')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Khả_năng_tương_thích_với_trình_duyệt">Khả năng tương thích với trình duyệt</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0 {{property_prefix("-webkit")}}<br> + 26.0</td> + <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10.5 {{property_prefix("-o")}}<br> + 12.10</td> + <td>3.2 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>transitionend</code> event</td> + <td>1.0<sup>[1]</sup><br> + 26.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.5<sup>[2]</sup><br> + 12<br> + 12.10</td> + <td>3.2<sup>[1]</sup><br> + 6.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16.0")}}</td> + <td>10</td> + <td>10 {{property_prefix("-o")}}<br> + 12.10</td> + <td>3.2</td> + </tr> + <tr> + <td><code>transitionend</code> event</td> + <td>2.1<sup>[1]</sup></td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>10</td> + <td>10<sup>[2]</sup><br> + 12<br> + 12.10</td> + <td>3.2<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Chrome 1.0, WebKit 3.2 and Android 2.1 implemented this as the non-standard <code>webkitTransitionEnd</code>. Chrome 26.0 and WebKit 6.0 implement the standard <code>transitionend</code>.</p> + +<p>[2] Opera 10.5 and Opera Mobile 10 implemented this as <code>oTransitionEnd</code>, version 12 as <code>otransitionend</code> and version 12.10 as the standard <code>transitionend</code>.</p> + +<h2 id="Các_bài_liên_quan">Các bài liên quan</h2> + +<ul> + <li>The {{domxref("TransitionEvent")}} interface and the {{event("transitionend")}} event.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></li> +</ul> diff --git a/files/vi/web/css/filter-function/index.html b/files/vi/web/css/filter-function/index.html new file mode 100644 index 0000000000..d991ffe975 --- /dev/null +++ b/files/vi/web/css/filter-function/index.html @@ -0,0 +1,68 @@ +--- +title: <filter-function> +slug: Web/CSS/filter-function +tags: + - CSS + - CSS Data Type + - Filter Effects + - NeedsCompatTable + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/filter-function +--- +<div>{{cssref}}</div> + +<p>The <code><strong><filter-function></strong></code> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> represents a graphical effect that can change the appearance of an input image. It is used in the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>The <code><filter-function></code> data type is specified using one of the filter functions listed below. Each function requires an argument which, if invalid, results in no filter being applied.</p> + +<dl> + <dt>{{cssxref("filter-function/blur", "blur()")}}</dt> + <dd>Blurs the image.</dd> + <dt>{{cssxref("filter-function/brightness", "brightness()")}}</dt> + <dd>Makes the image brighter or darker.</dd> + <dt>{{cssxref("filter-function/contrast", "contrast()")}}</dt> + <dd>Increases or decreases the image's contrast.</dd> + <dt>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</dt> + <dd>Applies a drop shadow behind the image.</dd> + <dt>{{cssxref("filter-function/grayscale", "grayscale()")}}</dt> + <dd>Converts the image to grayscale.</dd> + <dt>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</dt> + <dd>Changes the overall hue of the image.</dd> + <dt>{{cssxref("filter-function/invert", "invert()")}}</dt> + <dd>Inverts the colors of the image.</dd> + <dt>{{cssxref("filter-function/opacity", "opacity()")}}</dt> + <dd>Makes the image transparent.</dd> + <dt>{{cssxref("filter-function/saturate", "saturate()")}}</dt> + <dd>Super-saturates or desaturates the input image.</dd> + <dt>{{cssxref("filter-function/sepia", "sepia()")}}</dt> + <dd>Converts the image to sepia.</dd> +</dl> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>') }}</td> + <td>{{ Spec2('Filters 1.0') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Properties that use this data type: {{cssxref("filter")}} and {{cssxref("backdrop-filter")}}</li> +</ul> diff --git a/files/vi/web/css/filter-function/url/index.html b/files/vi/web/css/filter-function/url/index.html new file mode 100644 index 0000000000..b341e7d763 --- /dev/null +++ b/files/vi/web/css/filter-function/url/index.html @@ -0,0 +1,29 @@ +--- +title: url() +slug: Web/CSS/filter-function/url +translation_of: Web/CSS/url() +--- +<div>{{cssref}}</div> + +<p>Hàm <strong><code>url()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> dùng <a href="/en-US/docs/Web/SVG/Element/filter">SVG filter</a> để thay đổi bề ngoài của ảnh.</p> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox">url(<em>location</em>)</pre> + +<h3 id="Thông_số">Thông số</h3> + +<dl> + <dt><code>location</code></dt> + <dd> {{cssxref("<url>")}} của tệp {{glossary("XML")}} chỉ định bộ lọc SVG, và có thể bao gồm một neo cho một phần tử bộ lọc cụ thể.</dd> +</dl> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<pre class="brush: css">url(resources.svg#c1)</pre> + +<h2 id="Liên_quan">Liên quan</h2> + +<ul> + <li>{{cssxref("<filter-function>")}}</li> +</ul> diff --git a/files/vi/web/css/flex-basis/index.html b/files/vi/web/css/flex-basis/index.html new file mode 100644 index 0000000000..8b2021d009 --- /dev/null +++ b/files/vi/web/css/flex-basis/index.html @@ -0,0 +1,206 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +translation_of: Web/CSS/flex-basis +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>flex-basis</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with {{Cssxref("box-sizing")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div> + + + +<div class="note"> +<p><strong>Note:</strong> in case both <code>flex-basis</code> (other than <code>auto</code>) and <code>width</code> (or <code>height</code> in case of <code>flex-direction: column</code>) are set for an element, <code>flex-basis</code> has priority.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers">/* Specify <'width'> */ +flex-basis: 10em; +flex-basis: 3px; +flex-basis: auto; + +/* Intrinsic sizing keywords */ +flex-basis: fill; +flex-basis: max-content; +flex-basis: min-content; +flex-basis: fit-content; + +/* Automatically size based on the flex item’s content */ +flex-basis: content; + +/* Global values */ +flex-basis: inherit; +flex-basis: initial; +flex-basis: unset; +</pre> + +<p>The <code>flex-basis</code> property is specified as either the keyword <code><a href="#content">content</a></code> or a <code><a href="#<'width'>"><'width'></a></code>.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><a id="<'width'>" name="<'width'>"><code><'width'></code></a></dt> + <dd>An absolute {{cssxref("<length>")}}, a {{cssxref("<percentage>")}} of the parent flex container's main size property, or the keyword <code>auto</code>. Negative values are invalid. Defaults to <code>auto</code>.</dd> + <dt><a id="content" name="content"><code>content</code></a></dt> + <dd>Indicates automatic sizing, based on the flex item’s content.</dd> + <dd> + <div class="note"><strong>Note:</strong> This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using <code>auto</code> together with a main size (<a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> or <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a>) of <code>auto</code>.</div> + + <div class="note"> + <p id="comment_text_0"><strong>History:</strong></p> + + <ul> + <li>Originally, <code>flex-basis:auto</code> meant "look at my <code>width</code> or <code>height</code> property".</li> + <li>Then, <code>flex-basis:auto</code> was changed to mean automatic sizing, and "main-size" was introduced as the "look at my <code>width</code> or <code>height</code> property" keyword. It was implemented in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1032922" title='RESOLVED FIXED - Rename "flex-basis:auto" to "main-size", while preserving "flex:auto" shorthand value'>bug 1032922</a>.</li> + <li>Then, that change was reverted in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1093316" title='RESOLVED FIXED - Back out flexbox "flex-basis:main-size" rename, since the CSSWG removed it from the spec'>bug 1093316</a>, so <code>auto</code> once again means "look at my <code>width</code> or <code>height</code> property"; and a new <code>content</code> keyword is being introduced to trigger automatic sizing. ({{bug("1105111")}} covers adding that keyword).</li> + </ul> + </div> + </dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="container"> + <li class="flex flex1">1: flex-basis test</li> + <li class="flex flex2">2: flex-basis test</li> + <li class="flex flex3">3: flex-basis test</li> + <li class="flex flex4">4: flex-basis test</li> + <li class="flex flex5">5: flex-basis test</li> +</ul> + +<ul class="container"> + <li class="flex flex6">6: flex-basis test</li> +</ul> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.container { + font-family: arial, sans-serif; + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + flex-wrap: wrap; +} + +.flex { + background: #6AB6D8; + padding: 10px; + margin-bottom: 50px; + border: 3px solid #2E86BB; + color: white; + font-size: 20px; + text-align: center; + position: relative; +} + +.flex:after { + position: absolute; + z-index: 1; + left: 0; + top: 100%; + margin-top: 10px; + width: 100%; + color: #333; + font-size: 18px; +} + +.flex1 { + flex-basis: auto; +} + +.flex1:after { + content: 'auto'; +} + +.flex2 { + flex-basis: max-content; +} + +.flex2:after { + content: 'max-content'; +} + +.flex3 { + flex-basis: min-content; +} + +.flex3:after { + content: 'min-content'; +} + +.flex4 { + flex-basis: fit-content; +} + +.flex4:after { + content: 'fit-content'; +} + +.flex5 { + flex-basis: content; +} + +.flex5:after { + content: 'content'; +} + +.flex6 { + flex-basis: fill; +} + +.flex6:after { + content: 'fill'; +} +</pre> + +<h3 id="Results">Results</h3> + +<p>{{EmbedLiveSample('Example', '860', '360', '', 'Web/CSS/flex-basis')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.flex-basis")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li> + <li>{{cssxref("width")}}</li> +</ul> + +<div id="eJOY__extension_root" style=""></div> diff --git a/files/vi/web/css/flex-wrap/index.html b/files/vi/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..b033cd54e5 --- /dev/null +++ b/files/vi/web/css/flex-wrap/index.html @@ -0,0 +1,173 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +tags: + - CSS + - CSS Flexible Boxes + - CSS Property +translation_of: Web/CSS/flex-wrap +--- +<p>{{ CSSRef}}</p> + +<h2 id="Tóm_tắt">Tóm tắt</h2> + +<p>Thuộc tính <strong>flex-wrap</strong> xác định xem flex item có bị ép vào một dòng đơn hay có thể được rớt dòng thành nhiều dòng. Nếu việc rớt dòng được chấp nhận, thuộc tính này còn cho phép bạn xác định hướng để rớt dùng.</p> + +<p>{{cssinfo}}</p> + +<p>Xem bài <a href="/en/CSS/Using_CSS_flexible_boxes">sử dụng flexible box</a> để biết thêm thông tin cũng như đọc thêm về các thuộc tính khác.</p> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="brush:css">flex-wrap: nowrap; +flex-wrap: wrap; +flex-wrap: wrap-reverse; + +/* Global values */ +flex-wrap: inherit; +flex-wrap: initial; +flex-wrap: unset; +</pre> + +<h3 id="Các_giá_trị">Các giá trị</h3> + +<p>Thuộc tính <strong>flex-wrap</strong> chấp nhận những giá trị sau đây.:</p> + +<dl> + <dt><code>nowrap</code></dt> + <dd>Các flex item phải nằm trên một dòng đơn, việc này có thể khiến cho các item này tràn ra ngoài container.</dd> + <dd><strong>Cross-start</strong> sẽ tương đương với <strong>start</strong> hoặc <strong>before</strong> tùy thuộc vào giá trị của {{cssxref("flex-direction")}}.</dd> + <dt><code>wrap</code></dt> + <dd>Những flex item sẽ có thể bị tách thành hai dòng nếu như tổng chiều rộng của các item lớn hơn chiều rộng của container. C<strong>ross-start</strong> sẽ tương đương với <strong>start</strong> hoặc <strong>before</strong> tùy thuộc vào giá trị của <code>flex-direction</code> và <strong>cross-end</strong> sẽ có giá trị ngược lại với <strong>cross-start</strong>.</dd> + <dt><code>wrap-reverse</code></dt> + <dd>Nó giống như <code>wrap</code> nhưng <strong>cross-start</strong> và <strong>cross-end</strong> thì có giá trị ngược lại.</dd> + <dt> + <h3 id="Cú_pháp_chính_quy">Cú pháp chính quy</h3> + </dt> +</dl> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="HTML">HTML</h3> + +<div id="Live_Sample"> +<pre class="brush: html"><h4>This is an example for flex-wrap:wrap </h4> +<div class="content"> + <div class="red">1</div> + <div class="green">2</div> + <div class="blue">3</div> +</div> +<h4>This is an example for flex-wrap:nowrap </h4> +<div class="content1"> + <div class="red">1</div> + <div class="green">2</div> + <div class="blue">3</div> +</div> +<h4>This is an example for flex-wrap:wrap-reverse </h4> +<div class="content2"> + <div class="red">1</div> + <div class="green">2</div> + <div class="blue">3</div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">/* Common Styles */ +.content, +.content1, +.content2 { + color: #fff; + font: 100 24px/100px sans-serif; + height: 150px; + text-align: center; +} + +.content div, +.content1 div, +.content2 div { + height: 50%; + width: 50%; +} +.red { + background: orangered; +} +.green { + background: yellowgreen; +} +.blue { + background: steelblue; +} + +/* Flexbox Styles */ +.content { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -moz-flex; + display: -webkit-flex; + display: flex; + flex-wrap: wrap; +} +.content1 { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -moz-flex; + display: -webkit-flex; + display: flex; + flex-wrap: nowrap; +} +.content2 { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -moz-flex; + display: -webkit-flex; + display: flex; + flex-wrap: wrap-reverse; +} + +</pre> +</div> + +<h3 id="Kết_quả">Kết quả</h3> + +<p>{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}</p> + +<h2 id="Các_thông_số_kỹ_thuật">Các thông số kỹ thuật</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Thông số</th> + <th>Trang thái</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tương_thích">Tương thích</h2> + +<p> </p> + +<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.flex-wrap")}}</p> + +<p> </p> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Sử dụng flexible boxes</a></li> +</ul> diff --git a/files/vi/web/css/flex/index.html b/files/vi/web/css/flex/index.html new file mode 100644 index 0000000000..9b253f0e98 --- /dev/null +++ b/files/vi/web/css/flex/index.html @@ -0,0 +1,347 @@ +--- +title: flex +slug: Web/CSS/flex +tags: + - CSS + - CSS Flexible Boxes + - Tham khảo + - Tham số CSS +translation_of: Web/CSS/flex +--- +<div>{{CSSRef}}</div> + +<div>Tham số CSS flex qui định những thành phần con bên trong thành phần cha sẽ co lại hoặc giản ra như thế nào.</div> + +<div>Dưới đây là các giá trị có thể:</div> + +<div>{{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}}, và {{cssxref("flex-basis")}}</div> + +<div> </div> + +<pre class="brush:css no-line-numbers">/* Giá trị cơ bản */ +flex: auto; +flex: initial; +flex: none; +flex: 2; + +/* Một giá trị thể hiện cho flex-grow */ +flex: 2; + +/* Một giá trị (độ rộng hoặc chiều cao) thể hiện cho flex-basis */ +flex: 10em; +flex: 30px; + +/* Hai giá trị thể hiện cho flex-grow (1) và flex-basis (30px) */ +/* Bởi vì 30px nên thể hiện cho flex-basis */ +flex: 1 30px; + +/* Hai giá trị thể hiện cho flex-grow và flex-shrink */ +flex: 2 2; + +/* Ba giá trị thể hiện cho flex-grow và flex-shrink và flex-basis */ +flex: 2 2 10%; + +/* Nhữg giá trị khái quát */ +flex: inherit; +flex: initial; +flex: unset; +</pre> + +<p>Trong hầu hết các trường hợp, Bạn nên sử dụng những giá trị sau: auto, initial, none, hoặc những số dương duy nhất. Để nhìn thấy hiệu quả của những giá trị này thử thay đổi kích thước của những "thành phần cha" sau đây:</p> + +<div id="flex"> +<pre class="hidden brush: html"><div class="flex-container"> + <div class="item auto">auto</div> + <div class="item auto">auto</div> + <div class="item auto">auto</div> +</div> + +<div class="flex-container"> + <div class="item auto">auto</div> + <div class="item initial">initial</div> + <div class="item initial">initial</div> +</div> + +<div class="flex-container"> + <div class="item auto">auto</div> + <div class="item auto">auto</div> + <div class="item none">none</div> +</div> + +<div class="flex-container"> + <div class="item initial">initial</div> + <div class="item none">none</div> + <div class="item none">none</div> +</div> + +<div class="flex-container"> + <div class="item four">4</div> + <div class="item two">2</div> + <div class="item one">1</div> +</div> +</pre> + +<pre class="hidden brush: css">* { + box-sizing: border-box; +} + +.flex-container { + background-color: #F4F7F8; + resize: horizontal; + overflow: hidden; + display: flex; + margin: 1em; +} + +.item { + margin: 1em; + padding: 0.5em; + width: 110px; + min-width: 0; + background-color: #1B5385; + color: white; + font-family: monospace; + font-size: 13px; +} + +.initial { + flex: initial; +} + +.auto { + flex: auto; +} + +.none { + flex: none; +} + +.four { + flex: 4; +} + +.two { + flex: 2; +} + +.one { + flex: 1; +} +</pre> + +<p>{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}</p> + +<dl> + <dt><code>auto</code></dt> + <dt> </dt> + <dd>Những "thành phần con" được quy định kích thước bởi những tham số width và height, nhưng "thành phần con" này sẽ cố gắng lấp đầy hoặc là thu nhỏ lại để phù hợp với "thành phần cha". Cú pháp này tương ứng với: "flex: 1 1 auto".</dd> + <dt><code>initial</code></dt> + <dd>Đây là giá trị mặc định ( giá trị khi bạn không khai báo cho "thành phần con"). "Thành phần con" có kích thước tùy theo tham số width và height. "Thành phần con" sẽ co lại để phù hợp với "thành phần cha", nhưng nó sẽ không phình to ra để lấp đầy khoảng trống trong thành phần cha. Cú pháp này tương ứng với: "flex: 0 1 auto."</dd> + <dt><code>none</code></dt> + <dd>"Thành phần con" có kích thước tùy theo tham số width và height. Nó sẽ không co lại hay phình to trong "thành phần cha". Cú pháp này tương ứng với: "flex: 0 0 auto"</dd> + <dt><code><số dương></code></dt> + <dd>"Thành phần con" được cho một tỉ lệ cụ thể trong khoảng trống của thành phần cha. Cú pháp này tương ứng với: "flex: <số dương> 1 0"</dd> +</dl> + +<p>Theo quy định, thì "thành phần con" không thu nhỏ lại quá kích thước nhỏ nhất mà nó cho phép. Để thay đổi kích thước nhỏ nhất bạn có thể dùng: {{cssxref("min-width")}} hoặc {{cssxref("min-height")}}.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Cú pháp</h2> + +<p>Tham số flex có thể sử dụng với một, hai hoặc 3 giá trị.</p> + +<p><strong>Cú pháp với 1 giá trị</strong>: Giá trị đó có thể là:</p> + +<ul> + <li>một giá trị đơn lẻ {{cssxref("<number>")}}: được xem nư là <code><a href="#<'flex-grow'>"><flex-grow></a></code>.</li> + <li>một giá trị với đơn vị là độ rộng {{cssxref("width")}}: khi đó được xem như là <code><a href="#<'flex-basis'>"><flex-basis></a></code>.</li> + <li>một giá trị là các từ sau: <code><a href="#none">none</a></code>, <code>auto</code>, or <code>initial</code>.</li> +</ul> + +<p><strong>Cú pháp với 2 giá trị</strong>: giá trị đầu phải là giá trị đơn lẻ {{cssxref("<number>")}} được xem là <code><a href="#<'flex-grow'>"><flex-grow></a></code>. Giá trị thứ 2 phải thuộc 1 trong 2 giá trị sau:</p> + +<ul> + <li>một giá trị lẻ {{cssxref("<number>")}}: được xem là <code><a href="#<'flex-grow'>"><flex-shrink></a></code>.</li> + <li>một giá trị với đơn vị (độ rộng hoặc chiều cao) {{cssxref("width")}}: được xem là <code><a href="#<'flex-basis'>"><flex-basis></a></code>.</li> +</ul> + +<p><strong>Cú pháp với 3 giá trị:</strong></p> + +<ul> + <li>Giá trị đầu phải đơn lẻ {{cssxref("<number>")}} được xem như là <code><a href="#<'flex-grow'>"><flex-grow></a></code>.</li> + <li>Giá trị thứ 2 phải đơn lẻ {{cssxref("<number>")}} được xem như là <code><a href="#<'flex-grow'>"><flex-shrink></a></code>.</li> + <li>Giá trị thứ 3 phải là hợp lý như độ rộng hoặc chiều cao {{cssxref("width")}} được xem như là <code><a href="#<'flex-basis'>"><flex-basis></a></code>.</li> +</ul> + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt><a id="<'flex-grow'>" name="<'flex-grow'>"><code><'flex-grow'></code></a></dt> + <dd>Định nghĩa {{cssxref("flex-grow")}} cho "thành phần con". Tìm hiểu {{cssxref("<number>")}} để biết thêm thông tin chi tiết Giá trị âm là không hợp lệ. Giá trị mặc định là 0 nếu không cung cấp.</dd> + <dt><a id="<'flex-shrink'>" name="<'flex-shrink'>"><code><'flex-shrink'></code></a></dt> + <dd>Định nghĩa {{cssxref("flex-shrink")}} cho "thành phần con". Tìm hiểu {{cssxref("<number>")}} để biết thêm thông tin chi tiết. Giá trị âm là không hợp lệ. Giá trị mặc định là 1 nếu không cung cấp.</dd> + <dt><a id="<'flex-basis'>" name="<'flex-basis'>"><code><'flex-basis'></code></a></dt> + <dd>Định nghĩa {{cssxref("flex-basis")}} cho "thành phần con". Bất cứ giá trị hợp lệ nào cho độ rộng hoặc chiều cao điều sử dụng được. Tốt nhất là phải cung cấp đơn vị. Giá trị mặc định là auto nếu không cung cấp.</dd> + <dt><a id="none" name="none"><code>none</code></a></dt> + <dd>Định nghĩa này tương đương với 0 0 auto.</dd> +</dl> + +<div class="note"> +<p>Khi sử dụng một hoặc nhiều giá trị đơn lẻ, flex-basis sẽ đổi từ auto tới 0. Để biết thêm chi tiết có thể xem bản draft <a href="https://drafts.csswg.org/css-flexbox/#flex-common">Flexible Box Layout Module.</a></p> +</div> + +<dl> + <dt> + <h3 id="Formal_syntax">Formal syntax</h3> + </dt> +</dl> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<pre class="brush: css">#flex-container { + display: flex; + flex-direction: row; +} + +#flex-container > .flex-item { + flex: auto; +} + +#flex-container > .raw-item { + width: 5rem; +} +</pre> + +<pre class="brush: html"><div id="flex-container"> + <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div> + <div class="raw-item" id="raw">Raw box</div> +</div> +</pre> + +<div class="hidden"> +<pre class="brush: js">var flex = document.getElementById("flex"); +var raw = document.getElementById("raw"); +flex.addEventListener("click", function() { + raw.style.display = raw.style.display == "none" ? "block" : "none"; +}); +</pre> + +<pre class="brush: css">#flex-container { + width: 100%; + font-family: Consolas, Arial, sans-serif; +} + +#flex-container > div { + border: 1px solid #f00; + padding: 1rem; +} + +#flex-container > .raw-item { + border: 1px solid #000; +} +</pre> +</div> + +<h3 id="Kết_quả">Kết quả</h3> + +<p>{{EmbedLiveSample('Example','100%','60')}}</p> + +<h2 id="Specifications" name="Specifications">Thông số kỷ thuật</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Độ_tương_thích_với_các_trình_duyệt_hiện_tại">Độ tương thích với các trình duyệt hiện tại</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("20.0")}}<br> + {{CompatGeckoDesktop("28.0")}}<sup>[2]</sup></td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br> + 11.0<sup>[3]</sup></td> + <td>12.10</td> + <td> + <p>6.1{{property_prefix("-webkit")}}<br> + 9.0</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>Edge</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>11</td> + <td>12.10</td> + <td>7.1{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Gecko 18.0 {{geckoRelease("18.0")}} và 19.0 {{geckoRelease("19.0")}} tính năng flexbox hổ trợ ẩn trong <code>about:config</code> với cấu hình <code>layout.css.flexbox.enabled</code>, giá trị mặc định là <code>false</code>.</p> + +<p>[2] Multi-line flexbox được hỗ trợ từ Gecko 28.0 {{geckoRelease("28.0")}}.</p> + +<p>Thêm nửa về hỗ trợ unprefixed, Gecko 48.0 {{geckoRelease("48.0")}} được hỗ trợ với tiền tố <code>-webkit</code> vì lý do tương thích xem <code>layout.css.prefixes.webkit</code>, giá trị mặc định to <code>false</code>. Từ Gecko 49.0 {{geckoRelease("49.0")}} giá trị mặc định là <code>true</code>.</p> + +<p>[3] Internet Explorer 10-11 (but not 12+) bỏ qua việc sử dụng <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a> trong phần flex-basis part của cú pháp <code>flex</code> . Có thể dùng longhand thay thế cho shorthand như một sự thay thế. Nhìn <a href="https://github.com/philipwalton/flexbugs#8-flex-basis-doesnt-support-calc">Flexbug #8</a> để tìm hiểu thêm. Thêm nửa cú pháp flex với một giá trị đơn lẻ trong <code>flex-basis</code> được xem như không hợp lệ trong những version trên và vì vậy sẽ bị phớt lờ . Một cách để giải quyết vấn đề này là luôn luôn thêm một đơn vị cho phần <code>flex-basis</code> trong cú pháp đơn giản. Nhìn <a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a> để tìm hiểu thêm.</p> + +<h2 id="See_also" name="See_also">Nên xem thêm</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li> +</ul> diff --git a/files/vi/web/css/index.html b/files/vi/web/css/index.html new file mode 100644 index 0000000000..25d2c39f23 --- /dev/null +++ b/files/vi/web/css/index.html @@ -0,0 +1,114 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Layout + - NeedsTranslation + - References + - TopicStub +translation_of: Web/CSS +--- +<p><span class="seoSummary"><strong>Cascading Style Sheets</strong>, viết tắt là <strong>CSS</strong>, là một ngôn ngữ <a href="/en-US/docs/DOM/stylesheet">định kiểu</a> được sử dụng để mô tả việc trình bày một tài liệu được viết bằng <a href="/en-US/docs/HTML" title="The HyperText Mark-up Language">HTML</a></span> or <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a> (bao gồm các ngôn ngữ khác nhau như XML, <a href="/en-US/docs/SVG" title="en-US/docs/SVG">SVG</a> or <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>)<span class="seoSummary">. CSS mô tả cách các phần tử được hiển thị trên màn hình, trên giấy, trong lời nói, hoặc trên các phương tiện khác.</span></p> + +<p>CSS là một trong những ngôn ngữ cốt lõi của<em> web</em> mở và có đặt tả <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>. Được phát triển theo cấp độ, CSS1 hiện tại đã lỗi thời, CSS2.1 là một đề xuất và <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>, hiên được chia thành các mô-đun nhỏ hơn, đang tiến triển trên bản theo dõi chuẩn. Bản thảo đầu tiên của các mô-đun CSS4 đang được viết.</p> + +<div style="margin: auto; text-align: center;"> +<div class="callout-box action-driven"> +<div>Tài liệu tham khảo CSS</div> + +<p><a href="/en-US/docs/CSS/CSS_Reference" title="en-US/docs/CSS/CSS_Reference">Tài liệu tham khảo</a> đầy đủ của chúng tôi dành cho <u>các nhà phát triển web dày dặn kinh nghiệm</u> mô tả mọi thuộc tính và khái niệm về CSS.</p> +</div> + +<div class="callout-box action-driven"> +<div>Hướng dẫn CSS</div> + +<p><a href="/en-US/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">Giới thiệu từng bước</a> hỗ trợ đầy đủ cho <u>người mới</u> bắt đầu. Nó trình bày tất cả các nguyên tắc cơ bản cần thiết.</p> +</div> + +<div class="callout-box action-driven"> +<div>CSS3 Demos</div> + +<p>Một <a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">bộ sưa tập các bản trình diễn</a> hiển thị <u>các công nghệ CSS mới nhất</u> đang hoạt động: một sự thúc đẩy cho sự sáng tạo.</p> +</div> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Tài liệu và hướng dẫn về CSS</h2> + +<dl> + <dt>Các khái niệm chính về CSS</dt> + <dd>Mô tả <a href="/en-US/docs/CSS/Syntax" title="/en-US/docs/CSS/Syntax">cú pháp của ngôn ngữ</a> và giới thiệu các nguyên tắc cơ bản như <a href="/en-US/docs/CSS/Specificity" title="Specificity">đặc tính</a> và <a href="/en-US/docs/CSS/inheritance" title="inheritance">sự kế thừa</a>, <a href="/en-US/docs/CSS/box_model" title="Box model">mô hình hộp</a> và <a href="/en-US/docs/CSS/margin_collapsing" title="Margin collapsing">biên độ thu hẹp</a>, <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">xếp chồng</a> và các <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">định dạng khối</a>, hoặc các giá trị <a href="/en-US/docs/CSS/initial_value" title="initial value">ban đầu</a>, <a href="/en-US/docs/CSS/computed_value" title="computed value">được tính toán</a>, <a href="/en-US/docs/CSS/used_value" title="used value">được sử dụng</a> và <a href="/en-US/docs/CSS/actual_value" title="actual value">thực tế</a>. Các thực thể như <a href="/en-US/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">các thuộc tính CSS viết tắt</a> cũng được xác định.</dd> + <dt><a href="/en-US/docs/CSS/Writing_Efficient_CSS" title="CSS/Writing_Efficient_CSS">Viết CSS hiệu quả</a></dt> + <dd>Giải thích cách các công cụ định kiểu thực hiện việc so khớp bộ chọn và mô tả các quy tắc để viết CSS hiệu quả hơn.</dd> + <dt><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transforms" title="How to use CSS3 Transforms (2D and 3D)">Chuyển đổi CSS</a></dt> + <dd>Trình bày các hoạt động 2D có thể được áp dụng cho từng phần tử để xoay, nghiêng, dịch chuyển nó.</dd> + <dt><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transitions" title="How to use a CSS transition">Chuyển tiếp CSS</a></dt> + <dd>Giải thích cách thay của một phần tử bằng cách sử dụng một động mượt giữa trạng thái ban đầu và trạng thái cuối cùng.</dd> + <dt><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="How to use a CSS animation">Hoạt ảnh trong CSS</a></dt> + <dd>Mô tả cách xác định hoạt ảnh của một phần tử mà còn cách <a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support">phát hiện</a> trong Javascript nếu trình duyệt hỗ trợ nó.</dd> + <dt><a href="/en-US/docs/CSS/Using_CSS_gradients" title="How to use CSS3 Gradients">Sử dụng Gradient trong CSS</a></dt> + <dd>Giải thích cách xác định gradient, hình ảnh bao gồm các biến thể mượt mà của màu sắc.</dd> + <dt><a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="How to use CSS3 Multicol layout">Bố cục nhiều cột trong CSS</a></dt> + <dd>Trình bày cách tạo trang nhiều cột bằng cách sử dụng bố cục nhiều cột CSS3.</dd> + <dt><a href="/en-US/docs/CSS/Multiple_backgrounds" title="How to use the CSS3 multiple background feature">Sử dụng nhiều nền trong CSS</a></dt> + <dd>Mô tả cách xác định một số hình nền trên cùng một thành phần.</dd> + <dt><a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Chia tỷ lệ hình ảnh nền</a></dt> + <dd>Hiển thị cách kiểm soát hình nền khi hình ảnh và vùng chứa không cùng kích thước.</dd> + <dt><a class="internal" href="/en-US/docs/CSS/Media_queries" title="How to use CSS3 Media Queries">CSS media queries</a></dt> + <dd>Trình bày cách chọn các định kiểu dựa trên những chi tiết của thiết bị được hiển thị, như kích thước màn hình, độ phân giải hoặc nếu nó có màn hình cảm ứng.</dd> + <dt><a href="/en-US/docs/CSS_Counters" title="CSS Counters">Bộ đếm trong CSS</a></dt> + <dd>Giải thích cách sử dụng bộ đếm tự động và đánh số, về cơ bản được sử dụng làm bộ đếm cho danh sách.</dd> + <dt>Fonts và Typography</dt> + <dd>Thông báo về quản lý <a href="/en-US/docs/CSS/font" title="font">phông chữ</a> bằng cách sử dụng {{ cssxref("@font-face") }} và định dạng <a href="/en-US/docs/WOFF" title="About_WOFF">phông chữ WOFF</a>.</dd> + <dt><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="Using CSS flexible boxes">Sử dụng các hộp linh hoạt CSS</a></dt> + <dd>Mô tả cách sử dụng các hộp linh hoạt để thiết kế bố cục.</dd> + <dt><a href="/en-US/docs/Consistent_List_Indentation" title="Consistent_List_Indentation">Consistent List Indentation</a></dt> + <dd>Việc cố gắng thay đổi thụt đầu dòng của các danh sách bằng CSS thì phức tạp hơn, nhưng vì các trình duyệt tuân thủ CSS có các đường dẫn khác nhau để thụt lề mặc định. Tìm hiểu làm thế nào để có được tất cả trong dòng.</dd> + <dt><a href="/en-US/docs/DOM/Using_dynamic_styling_information" title="DOM/Using_dynamic_styling_information">Using dynamic styling information</a></dt> + <dd>Cách lấy thông tin và thao tác kiểu dáng thông qua DOM..</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/CSS" title="/en-US/docs/tag/CSS">Xem tất cả ...</a></span></p> +</div> + +<div class="section"> +<h2 class="Community" id="Community" name="Community">Hỗ trợ từ cộng đồng</h2> + +<p>Bạn cần trợ giúp về vấn đề liên quan đến CSS và không thể tìm thấy giải pháp trong tài liệu?</p> + +<ul> + <li>Kiểm tra <a href="/en-US/docs/CSS/Common_CSS_Questions" title="en-US/docs/CSS/Common_CSS_Questions">các câu hỏi CSS phổ biến</a> để có gợi ý giải quyết vấn đề CSS.</li> + <li><a href="http://stackoverflow.com/questions/tagged/css" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a>, một trang web hỏi - đáp được xây dựng và duy trì, tại đây bạn có thể tìm thấy đáp án cho câu hỏi của mình hay không. Nếu không bạn sẽ có thể đặt câu hỏi của mình ở đó.</li> + <li>Tham khảo diễn đàn về bố cục, bao gồm CSS và HTML + <ul> + <li>Đặt câu hỏi của bạn trên kên Mozilla IRC: <a class="link-irc" href="irc://irc.mozilla.org/css">#css</a></li> + <li>Đặt câu hỏi của bạn trên <a href="http://www.css-discuss.org/">trang web và danh sách thảo luận CSS</a></li> + </ul> + </li> +</ul> + +<p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + +<h2 class="Tools" id="Tools" name="Tools">Công cụ dễ dàng phát triển CSS</h2> + +<ul> + <li><a class="external" href="http://jigsaw.w3.org/css-validator/">Dịch vụ Xác thực CSS W3C </a>kiểm tra CSS có hợp lệ. Nó là một công cụ gỡ lỗi vô cùng hữu ích.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug tiện ích mở rộng</a> của Firefox<span class="external">, một phần mở rộng phổ biến đó cho phép chỉnh sửa CSS trực tiếp trên các trang web mà bạn muốn xem</span>. Rất thực tế để kiểm tra một số thay đổi, mặc dù tiện ích mở rộng này làm được nhiều hơn nữa.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Tiện ích mở rộng Web Developer</a> của Firefox cũng cho phép xem và chỉnh sửa trực tuyến trên trang web bạn đang xem. Đơn giản hơn Firebug, mặc dù ít mạnh mẽ hơn.</li> + <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">Tiện ích EditCSS </a>của Firefox' cho phép sửa CSS trên Sidebar.</li> +</ul> + +<p><span class="alllinks"><a href="/en-US/docs/tag/CSS:Tools" title="/en-US/docs/tag/CSS:Tools">Xem tất cả...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Chủ đề liên quan</h2> + +<ul> + <li>Mozilla Learn <a href="/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">CSS resources</a>.</li> + <li>Các ngôn ngữ Web mở trên CSS, thường được áp dụng như: <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>.</li> + <li>Các công nghệ của Mozilla sử dụng CSS: <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">Tiện ích mở rộng</a> của Firefox và Thunderbird, và <a href="/en-US/docs/Themes" title="en-US/docs/Themes">các chủ đề</a>.</li> +</ul> +</div> +</div> diff --git a/files/vi/web/css/length/index.html b/files/vi/web/css/length/index.html new file mode 100644 index 0000000000..a73aeee55f --- /dev/null +++ b/files/vi/web/css/length/index.html @@ -0,0 +1,324 @@ +--- +title: <length> +slug: Web/CSS/length +translation_of: Web/CSS/length +--- +<div>{{CSSRef}}</div> + +<p>The <code><length></code> <a href="/en-US/docs/Web/CSS">CSS</a> data type denotes distance measurements. It is a {{cssxref("<number>")}} immediately followed by a length unit (<code>px</code>, <code>em</code>, <code>pc</code>, <code>in</code>, <code>mm</code>, …). Like for any CSS dimension, there is no space between the unit literal and the number. The length unit is optional after the {{cssxref("<number>")}} <code>0</code>.</p> + +<p>Many CSS properties take<code> <length> </code>values, such as {{Cssxref("width")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("font-size")}}, {{Cssxref("border-width")}}, {{Cssxref("text-shadow")}}, …</p> + +<p>For some properties, using negative lengths is a syntax error, but for some properties, negative lengths are allowed. Please note that although {{cssxref("<percentage>")}} values are also CSS dimensions and are accepted by some CSS properties that accept<code> <length></code> values, they are not themselves, <code><length></code> values.</p> + +<h2 id="Interpolation">Interpolation</h2> + +<p>Values of the <code><length></code> CSS data type can be interpolated in order to allow animations. In that case they are interpolated as real, floating-point, numbers. The interpolation happens on the calculated value. The speed of the interpolation is determined by the <a href="/en-US/docs/Web/CSS/timing-function">timing function</a> associated with the animation.</p> + +<h2 id="Units">Units</h2> + +<h3 id="Relative_length_units">Relative length units</h3> + +<h4 id="Font-relative_lengths">Font-relative lengths</h4> + +<dl> + <dt id="em"><code>em</code></dt> + <dd>This unit represents the calculated {{Cssxref("font-size")}} of the element. If used on the {{Cssxref("font-size")}} property itself, it represents the <em>inherited</em> font-size of the element. + <div class="note">This unit is often used to create scalable layouts, which keep the <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">vertical rhythm of the page</a>, even when the user changes the size of the fonts. The CSS properties {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} and {{cssxref("margin-top")}} often have values expressed in <strong>em</strong>.</div> + </dd> + <dt id="ex"><code>ex</code></dt> + <dd>This unit represents the <a href="http://en.wikipedia.org/wiki/X-height">x-height</a> of the element's {{Cssxref("font")}}. On fonts with the 'x' letter, this is generally the height of lowercase letters in the font;<code style="white-space: nowrap;"> 1ex ≈ 0.5em </code>in many fonts.</dd> + <dt id="ch"><code>ch</code></dt> + <dd>This unit represents the width, or more precisely the advance measure, of the glyph '0' (zero, the Unicode character U+0030) in the element's {{Cssxref("font")}}.</dd> + <dt id="rem"><code>rem</code></dt> + <dd>This unit represents the {{Cssxref("font-size")}} of the root element (e.g. the font-size of the {{HTMLElement("html")}} element). When used on the {{Cssxref("font-size")}} on this root element, it represents its initial value. + <div class="note">This unit is practical in creating perfectly scalable layout. If not supported by the targeted browsers, such layout can be achieved using the <strong>em</strong> unit, though this is slightly more complex.</div> + </dd> +</dl> + +<h4 id="Viewport-percentage_lengths">Viewport-percentage lengths</h4> + +<p>Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document. Only Gecko-based browsers are updating the viewport values dynamically, when the size of the viewport is modified (by modifying the size of the window on a desktop computer or by turning the device on a phone or a tablet).</p> + +<p>In conjunction with <code>overflow:auto</code>, space taken by eventual scrollbars is not subtracted from the viewport, whereas in the case of <code>overflow:scroll</code>, it is.</p> + +<p>In a {{cssxref("@page")}} at-rule declaration block, the use of the viewport lengths are invalid and the declaration will be dropped.</p> + +<dl> + <dt id="vh"><code>vh</code></dt> + <dd>1/100th of the height of the viewport.</dd> + <dt id="vw"><code>vw</code></dt> + <dd>1/100th of the width of the viewport.</dd> + <dt id="vmin"><code>vmin</code></dt> + <dd>1/100th of the minimum value between the height and the width of the viewport.</dd> + <dt id="vmax"><code>vmax</code></dt> + <dd>1/100th of the maximum value between the height and the width of the viewport.</dd> +</dl> + +<h3 id="Absolute_length_units">Absolute length units</h3> + +<p>Absolute length units represents a physical measurement and when the physical properties of the output medium are known, such as for print layout. This is done by anchored one of the unit to a physical unit and to defined the other relatively to it. The anchor is done differently for low-resolution devices, like screens, and high-resolution devices, like printers.</p> + +<p>For low-dpi devices, the unit <strong>px</strong> represents the physical <em>reference pixel</em> and the others are defined relative to it. Thus, <code>1in</code> is defined as <code>96px</code> which equals <code>72pt</code>. The consequence of this definition is that on such devices, length described in inches (<code>in</code>), centimeters (<code>cm</code>), millimeters (<code>mm</code>) doesn't necessary match the length of the physical unit with the same name.</p> + +<p>For high-dpi devices, inches (<code>in</code>), centimeters (<code>cm</code>), millimeters (<code>mm</code>) are defined as their physical counterparts. Therefore the <strong>px</strong> unit is defined relative to them (1/96 of 1 inch).</p> + +<div class="note"> +<p>Users may increase font size for accessibility purpose. To allow for usable layouts whatever is the used font size, use only absolute length units when the physical characteristics of the output medium are known, such as bitmap images. When setting length related to font-size, prefer relative units like <code>em</code> or <code>rem</code>.</p> +</div> + +<dl> + <dt id="px"><code>px</code></dt> + <dd>Relative to the viewing device.<br> + For screen display, typically one device pixel (dot) of the display.<br> + For <em>printers</em> and very <em>high resolution screens</em> one CSS pixel implies multiple device pixels, so that the number of pixel per inch stays around 96.</dd> + <dt id="mm"><code>mm</code></dt> + <dd>One millimeter.</dd> + <dt id="q"><code>q</code></dt> + <dd>A quarter of a millimeter (1/40th of a centimeter).</dd> + <dt id="cm"><code>cm</code></dt> + <dd>One centimeter (10 millimeters).</dd> + <dt id="in"><code>in</code></dt> + <dd>One inch (2.54 centimeters).</dd> + <dt id="pt"><code>pt</code></dt> + <dd>One point (1/72th of an inch).</dd> + <dt id="pc"><code>pc</code></dt> + <dd>One pica (12 points).</dd> + <dt id="mozmm"><code>mozmm</code> {{non-standard_inline}}</dt> + <dd>An experimental unit which attempts to render at exactly one millimeter regardless of the size or resolution of the display. This is rarely actually what you want, but may be useful in particular for mobile devices.</dd> +</dl> + +<h2 id="CSS_units_and_dots-per-inch">CSS units and dots-per-inch</h2> + +<p class="note">The unit <code>in</code> doesn't represent a physical inch on screen, but represents <code>96px</code>. That means that whatever is the real screen pixel density, it is assumed to be <code>96dpi</code>. On devices with a greater pixel density, <code>1in</code> will be smaller than 1 physical inch. Similarly <code>mm</code>, <code>cm</code>, and <code>pt</code> are not absolute length.</p> + +<p>Some specific examples:</p> + +<ul> + <li><code>1in</code> is always <code>96px,</code></li> + <li><code>3pt</code> is always <code>4px</code>,</li> + <li><code>25.4mm</code> is always <code>96px.</code></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Values', '#lengths', '<length>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Added <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code> and <code>q</code></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td><code>pt</code>, <code>pc</code>, <code>px</code> are explicitly defined (were implicitly defined in CSS1)</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#length-units', '<length>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}} </p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{ CompatGeckoDesktop("1.0")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + <tr> + <td><code>ch</code></td> + <td> + <p>27</p> + </td> + <td>{{ CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td> + <td>9.0</td> + <td>20.0</td> + <td>7.0</td> + </tr> + <tr> + <td>ex</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>4 (532.3)</td> + <td>{{ CompatGeckoDesktop("1.9.2")}}</td> + <td>9.0</td> + <td>11.6</td> + <td>4.1</td> + </tr> + <tr> + <td><code>vh, vw</code></td> + <td>20</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>9.0</td> + <td>20.0</td> + <td>6.0</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td> + <p>20</p> + </td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>9.0<sup>[2]</sup></td> + <td>20.0</td> + <td>6.0</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>26</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>{{CompatNo}}</td> + <td>20.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Viewport-percentage lengths invalid in {{cssxref("@page")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("21")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>mozmm</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>1in</code> always is <code>96dpi</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>q</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("49.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>7.8</td> + <td>{{CompatUnknown}}</td> + <td>7.1.1</td> + </tr> + <tr> + <td>ex</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>12.0</td> + <td>4.0</td> + </tr> + <tr> + <td><code>vh, vw, vmin</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>6.0</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>1.5</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + <tr> + <td>Viewport-percentage lengths invalid in {{cssxref("@page")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("21.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>q</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("49.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Gecko 1.0-1.9.0 (Firefox 1.0-3.0)<code> ch </code>was the width of 'M' and it didn't work for {{CSSxref("border-width")}} and {{CSSxref("outline-width")}} CSS properties.</p> + +<p>[2] Internet Explorer implements this with the non-standard name <code>vm</code>.</p> diff --git a/files/vi/web/css/perspective/index.html b/files/vi/web/css/perspective/index.html new file mode 100644 index 0000000000..4af62b0eab --- /dev/null +++ b/files/vi/web/css/perspective/index.html @@ -0,0 +1,289 @@ +--- +title: perspective +slug: Web/CSS/perspective +translation_of: Web/CSS/perspective +--- +<div>{{CSSRef}}</div> + +<p>Thuộc tính <strong><code>perspective</code></strong> của <a href="/en-US/docs/Web/CSS">CSS</a> xác định khoảng cách từ mặt phẳng z=0 cho đến người dùng, việc này nhằm tạo ra một phối cảnh xa-gần cho những phần tử muốn hiển thị dưới dạng 3D. Mỗi phần tử hiển thị dạng 3D với z > 0 sẽ trở nên to ra (vì "gần" với người xem hơn); ngược lại phần tử dạng 3D có z < 0 sẽ trở nên bé lại (vì "xa" người xem hơn). Giá trị của thuộc tính này sẽ quyết định cường độ của hiệu ứng.</p> + +<pre class="brush: css no-line-numbers">/* Keyword value */ +perspective: none; + +/* <length> values */ +perspective: 20px; +perspective: 3.5em; + +/* Global values */ +perspective: inherit; +perspective: initial; +perspective: unset; +</pre> + +<p>Những phần của phần tử 3D có toạ độ trục z lớn hơn giá trị của thuộc tính <code>perspective</code> sẽ không được vẽ (nó xuất hiện ở "phía sau" người xem). </p> + +<p>Mặc định thì điểm "biến mất" (vanishing point) được đặt tại chính giữa của phẩn tử, nhưng lập trình viên có thể thay điểm vị trí của điểm này thông qua thuộc tính {{cssxref("perspective-origin")}}.</p> + +<p>Đặt giá trị của thuộc tính <code>perspective-origin</code> bằng <code>0</code> hoặc <code>none</code> sẽ tạo một cụm môi trường mới (<a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">stacking context</a>).</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Giá_trị">Giá trị</h3> + +<dl> + <dt><code>none</code></dt> + <dd>là từ khoá chỉ thị việc không áp dụng phối cảnh xa gần.</dd> + <dt><code><length></code></dt> + <dd>{{cssxref("<length>")}} giá trị này là khoảng cáh từ người xem đến mặt phẳng z = 0. Khi giá trị này lớn hơn <code>0</code>, phối cảnh xa gần sẽ được thiết lập cho phần tử. Khi nó bằng <code>0</code> hoặc nhỏ hơn <code>0</code>, thì bỏ đi phối cảnh xa-gần. </dd> +</dl> + +<h3 id="Cú_pháp">Cú pháp</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Nội_dung_file_HTML">Nội dung file HTML </h3> + +<pre class="brush: html"><table> + <tbody> + <tr> + <th><code>perspective: 250px;</code> + </th> + <th><code>perspective: 350px;</code> + </th> + <th><code>perspective: 500px;</code> + </th> + </tr> + <tr> + <td> + <div class="container"> + <div class="cube pers250"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + </td> + <td> + <div class="container"> + <div class="cube pers350"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + </td> + <td> + <div class="container"> + <div class="cube pers500"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + </td> + </tr> + </tbody> +</table></pre> + +<h3 id="Nội_dung_file_CSS">Nội dung file CSS</h3> + +<pre class="brush: css">/* Shorthand classes for different perspective values */ +.pers250 { + perspective: 250px; + -webkit-perspective: 250px; +} + +.pers350 { + perspective: 350px; + -webkit-perspective: 350px; +} + +.pers500 { + perspective: 500px; + -webkit-perspective: 500px; +} + +/* Define the container div, the cube div, and a generic face */ + .container { + width: 200px; + height: 200px; + margin: 75px 0 0 75px; + border: none; +} + +.cube { + width: 100%; + height: 100%; + backface-visibility: visible; + perspective-origin: 150% 150%; + transform-style: preserve-3d; + -webkit-backface-visibility: visible; + -webkit-perspective-origin: 150% 150%; + -webkit-transform-style: preserve-3d; +} + +.face { + display: block; + position: absolute; + width: 100px; + height: 100px; + border: none; + line-height: 100px; + font-family: sans-serif; + font-size: 60px; + color: white; + text-align: center; +} + +/* Define each face based on direction */ +.front { + background: rgba(0, 0, 0, 0.3); + transform: translateZ(50px); + -webkit-transform: translateZ(50px); +} + +.back { + background: rgba(0, 255, 0, 1); + color: black; + transform: rotateY(180deg) translateZ(50px); + -webkit-transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(196, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); + -webkit-transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0, 0, 196, 0.7); + transform: rotateY(-90deg) translateZ(50px); + -webkit-transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(196, 196, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); + -webkit-transform: rotateX(90deg) translateZ(50px) +} + +.bottom { + background: rgba(196, 0, 196, 0.7); + transform: rotateX(-90deg) translateZ(50px); + -webkit-transform: rotateX(-90deg) translateZ(50px); +} + +/* Make the table a little nicer */ +th, p, td { + background-color: #EEEEEE; + padding: 10px; + font-family: sans-serif; + text-align: left; +}</pre> + +<h3 id="Kết_quả">Kết quả</h3> + +<p>{{EmbedLiveSample('Example', 940, 460)}}</p> + +<h2 id="Chi_tiết_kỹ_thuật">Chi tiết kỹ thuật</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Danh_sách_trình_duyệt_tương_thích">Danh sách trình duyệt tương thích</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>12{{property_prefix('-webkit')}}{{CompatGeckoDesktop("10")}}<br> + 45</p> + </td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td> + <p>{{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}}<br> + {{CompatGeckoDesktop("16")}}<sup>[1]</sup></p> + </td> + <td>10</td> + <td>15{{property_prefix('-webkit')}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0{{property_prefix('-webkit')}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("10")}}{{property_prefix('-moz')}}<br> + {{CompatGeckoMobile("16")}}<sup>[1]</sup></td> + <td>8.1</td> + <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In addition to the unprefixed support, Gecko 45.0 {{geckoRelease("45.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS Transforms</a></li> +</ul> diff --git a/files/vi/web/css/transform-function/index.html b/files/vi/web/css/transform-function/index.html new file mode 100644 index 0000000000..2237c7c1fb --- /dev/null +++ b/files/vi/web/css/transform-function/index.html @@ -0,0 +1,160 @@ +--- +title: <transform-function> +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Transforms + - Layout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/transform-function +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code><transform-function></code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.</p> + +<h2 id="Describing_transformations_mathematically">Describing transformations mathematically</h2> + +<p>Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the <a href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinate system</a>, although <a href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> are also sometimes used.</p> + +<h3 id="Cartesian_coordinates"><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a>Cartesian coordinates</h3> + +<p>In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation <code>(x, y)</code>.</p> + +<p>In CSS (and most computer graphics), the origin <code>(0, 0)</code> represents the<em> top-left</em> corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be <code>(2, 5)</code>, while a point 3 units to the left and 12 units up would be <code>(-3, -12)</code>.</p> + +<h3 id="Transformation_functions">Transformation functions</h3> + +<p>Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> </math></p> + +<p>The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p> + +<p>It is even possible to apply several transformations in a row:</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p> + +<p>With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.</p> + +<p>However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector <code>(tx, ty)</code> must be expressed separately, as two additional parameters.</p> + +<div class="note"> +<p><strong>Note:</strong> Though trickier than Cartesian coordinates, <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> lead to 3×3 transformation matrices, and can simply express translations as linear functions.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<p>The <code><transform-function></code> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.</p> + +<h3 id="Matrix_transformation">Matrix transformation</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/matrix">matrix()</a></code></dt> + <dd>Describes a homogeneous 2D transformation matrix.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></dt> + <dd>Describes a 3D transformation as a 4×4 homogeneous matrix.</dd> +</dl> + +<h3 id="Perspective">Perspective</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/perspective">perspective()</a></code></dt> + <dd>Sets the distance between the user and the z=0 plane.</dd> +</dl> + +<h3 id="Rotation">Rotation</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate()</a></code></dt> + <dd>Rotates an element around a fixed point on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></dt> + <dd>Rotates an element around a fixed axis in 3D space.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateX">rotateX()</a></code></dt> + <dd>Rotates an element around the horizontal axis.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateY">rotateY()</a></code></dt> + <dd>Rotates an element around the vertical axis.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></code></dt> + <dd>Rotates an element around the z-axis.</dd> +</dl> + +<h3 id="Scaling_resizing">Scaling (resizing)</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scale">scale()</a></code></dt> + <dd>Scales an element up or down on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code></dt> + <dd>Scales an element up or down in 3D space.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></dt> + <dd>Scales an element up or down horizontally.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></dt> + <dd>Scales an element up or down vertically.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></dt> + <dd>Scales an element up or down along the z-axis.</dd> +</dl> + +<h3 id="Skewing_distortion">Skewing (distortion)</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skew">skew()</a></code></dt> + <dd>Skews an element on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skewX">skewX()</a></code></dt> + <dd>Skews an element in the horizontal direction.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skewY">skewY()</a></code></dt> + <dd>Skews an element in the vertical direction.</dd> +</dl> + +<h3 id="Translation_moving">Translation (moving)</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate()</a></code></dt> + <dd>Translates an element on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></dt> + <dd>Translates an element in 3D space.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateX">translateX()</a></code></dt> + <dd>Translates an element horizontally.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateY">translateY()</a></code></dt> + <dd>Translates an element vertically.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateZ">translateZ()</a></code></dt> + <dd>Translates an element along the z-axis.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#transform-functions', '<transform-function>')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Added 3D transform functions.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-functions', '<transform-function>')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.types.transform-function")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS {{cssxref("transform")}} property</li> +</ul> diff --git a/files/vi/web/css/transform-function/perspective()/index.html b/files/vi/web/css/transform-function/perspective()/index.html new file mode 100644 index 0000000000..a69e46e094 --- /dev/null +++ b/files/vi/web/css/transform-function/perspective()/index.html @@ -0,0 +1,153 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective() +translation_of: Web/CSS/transform-function/perspective() +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>perspective()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. Its result is a {{cssxref("<transform-function>")}} data type.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-perspective.html")}}</div> + + + +<p>The <code>perspective()</code> transform function is part of the {{cssxref('transform')}} value applied on the element being transformed. This differs from the {{cssxref('perspective')}} and {{cssxref('perspective-origin')}} properties which are attached to the parent of a child transformed in 3-dimensional space.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>The perspective distance used by <code>perspective()</code> is specified by a {{cssxref("<length>")}} value, which represents the distance between the user and the z=0 plane. The z=0 plane is the plane where everything appears in a 2-dimensional view, or the screen. A positive value makes the element appear closer to the user than the rest of the interface, a negative value farther. The greater the value, the further away the perspective of the user is.</p> + +<pre class="syntaxbox">perspective(d) +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><var>d</var></dt> + <dd>Is a {{cssxref("<length>")}} representing the distance from the user to the z=0 plane. If it is 0 or a negative value, no perspective transform is applied.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2"> + <p>This transformation applies to the 3D space and can't be represented on the plane.</p> + </td> + <td colspan="1" rowspan="2">This transformation is not a linear transformation in ℝ<sup>3</sup>, and can't be represented using a Cartesian-coordinate matrix.</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Without perspective:</p> +<div class="no-perspective-box"> + <div class="face front">A</div> + <div class="face top">B</div> + <div class="face left">C</div> +</div> + +<p>With perspective (9cm):</p> +<div class="perspective-box-far"> + <div class="face front">A</div> + <div class="face top">B</div> + <div class="face left">C</div> +</div> + +<p>With perspective (4cm):</p> +<div class="perspective-box-closer"> + <div class="face front">A</div> + <div class="face top">B</div> + <div class="face left">C</div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.face { + position: absolute; + width: 100px; + height: 100px; + line-height: 100px; + font-size: 100px; + text-align: center; +} + +p + div { + width: 100px; + height: 100px; + transform-style: preserve-3d; + margin-left: 100px; +} +.no-perspective-box { + transform: rotateX(-15deg) rotateY(30deg); +} + +.perspective-box-far { + transform: perspective(9cm) rotateX(-15deg) rotateY(30deg); +} + +.perspective-box-closer { + transform: perspective(4cm) rotateX(-15deg) rotateY(30deg); +} + +.top { + background-color: skyblue; + transform: rotateX(90deg) translate3d(0, 0, 50px); +} + +.left { + background-color: pink; + transform: rotateY(-90deg) translate3d(0, 0, 50px); +} + +.front { + background-color: limegreen; + transform: translate3d(0, 0, 50px); +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Examples', '250', '350') }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Transforms 2", "#funcdef-perspective", "perspective()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> data type for compatibility info.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/vi/web/css/universal_selectors/index.html b/files/vi/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..da87129972 --- /dev/null +++ b/files/vi/web/css/universal_selectors/index.html @@ -0,0 +1,101 @@ +--- +title: Universal selectors +slug: Web/CSS/Universal_selectors +translation_of: Web/CSS/Universal_selectors +--- +<div>{{CSSRef}}</div> + +<p><strong>Ký hiệu chọn toàn bộ</strong> của CSS (<code>*</code>) sẽ chọn mọi đối tượng thuộc bất kỳ loại nào.</p> + +<pre class="brush: css no-line-numbers">/* Chọn tất cả đối tượng */ +* { + color: green; +}</pre> + +<p>Bắt đầu từ CSS3, dấu sao * có thể được dùng kết hợp cùng với {{cssxref("CSS_Namespaces", "namespaces")}}:</p> + +<ul> + <li><code>ns|*</code> - khớp với mọi đối tượng trong namespace <em>ns</em></li> + <li><code>*|*</code> - khớp với mọi đối tượng</li> + <li><code>|*</code> - khớp với mọi đối tượng không được khai báo namespace</li> +</ul> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox">* { <em>các thuộc tính</em> }</pre> + +<p>Dấu * không bắt buộc đối với những bộ chọn đơn giản. Ví dụ, <code>*.warning</code> và <code>.warning</code> tương đương nhau.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">* [lang^=en] { + color: green; +} + +*.warning { + color: red; +} + +*#maincontent { + border: 1px solid blue; +} + +.floating { + float: left +} + +/* tự động giãn cách đối tượng liền kề sau một đối tượng float */ +.floating + * { + clear: left; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="warning"> + <span lang="en-us">A green span</span> in a red paragraph.</span> +</p> +<p id="maincontent" lang="en-gb"> + <span class="warning">A red span</span> in a green paragraph.</span> +</p></pre> + +<h3 id="Kết_quả">Kết quả</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<h2 id="Quy_cách">Quy cách</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Quy cách</th> + <th scope="col">Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Không đổi</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Defines behavior regarding namespaces and adds hint that omitting the selector is allowed within pseudo-elements</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Định nghĩa ban đầu</td> + </tr> + </tbody> +</table> + +<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> + + + +<p>{{Compat("css.selectors.universal")}}</p> |