diff options
Diffstat (limited to 'files/vi/learn/css')
| -rw-r--r-- | files/vi/learn/css/building_blocks/index.html | 99 | ||||
| -rw-r--r-- | files/vi/learn/css/building_blocks/the_box_model/index.html | 358 | ||||
| -rw-r--r-- | files/vi/learn/css/first_steps/index.html | 54 | ||||
| -rw-r--r-- | files/vi/learn/css/index.html | 67 |
4 files changed, 578 insertions, 0 deletions
diff --git a/files/vi/learn/css/building_blocks/index.html b/files/vi/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..46a3177fd8 --- /dev/null +++ b/files/vi/learn/css/building_blocks/index.html @@ -0,0 +1,99 @@ +--- +title: CSS building blocks +slug: Learn/CSS/Building_blocks +tags: + - Beginner + - CSS + - Learn + - NeedsTranslation + - TopicStub + - building blocks +translation_of: Learn/CSS/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">This module carries on where <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.</p> + +<p class="summary">The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p> + + +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> + +<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should have:</p> + +<ol> + <li>Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)</li> + <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li> + <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> + <li>An understanding of the basics of CSS, as discussed in the <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> module.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/another device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which cover the most essential parts of the CSS language. Along the way you'll come across plenty of exercises to allow you to test your understanding.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></dt> + <dd>The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a></dt> + <dd>There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles, we'll run through the different types in great detail, seeing how they work. The sub-articles are as follows: + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></dt> + <dd>Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson, we will take a proper look at the CSS <em>Box Model</em>, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></dt> + <dd>In this lesson we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></dt> + <dd>In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></dt> + <dd>In this lesson we will look at another important concept in CSS — <strong>overflow</strong>. Overflow is what happens when there is too much content to be contained comfortably inside a box. In this guide, you will learn what it is and how to manage it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS values and units</a></dt> + <dd>Every property used in CSS has a value or set of values that are allowed for that property. In this lesson, we will take a look at some of the most common values and units in use.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></dt> + <dd>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson, we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></dt> + <dd>In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></dt> + <dd>Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></dt> + <dd>Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you find out what is going on.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></dt> + <dd>As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article, we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>Want to test your CSS skills? The following assessments will test your understanding of the CSS covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Fundamental CSS comprehension</a></dt> + <dd>This assessment tests your understanding of basic syntax, selectors, specificity, box model, and more.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></dt> + <dd>If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment, we'll challenge you to create an online template to achieve such a look.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></dt> + <dd>Here you'll get some practice in using background and border styling to create an eye-catching box.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced styling effects</a></dt> + <dd>This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.</dd> +</dl> diff --git a/files/vi/learn/css/building_blocks/the_box_model/index.html b/files/vi/learn/css/building_blocks/the_box_model/index.html new file mode 100644 index 0000000000..d0ce29ae05 --- /dev/null +++ b/files/vi/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,358 @@ +--- +title: Box model trong CSS +slug: Learn/CSS/Building_blocks/The_box_model +tags: + - CSS + - Cơ Bản + - Người mới + - border + - box model + - display + - margin + - padding +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> + +<p>Tất cả element trong CSS đều có một cái hộp (box) bọc lấy nó, và việc hiểu cách vận hành của những chiếc hộp này là chìa khóa giúp bạn xây dựng layout với CSS, hoặc sắp xếp các nội dung trên trang web theo đúng vị trí mong muốn. Trong bài học lần này, hãy cùng tìm hiểu rõ hơn về CSS <em>Box Model</em>, qua đó giúp bạn thật sự hiểu nó hoạt động thế nào và có thể tự tin dựng nên những layout phức tạp một cách đúng đắn. Ngoài ra bạn cũng sẽ hiểu được các thuật ngữ có liên quan.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Yêu cầu kiến thức:</th> + <td> + <p>Hiểu biết cơ bản về máy tính, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">cơ bản về cài đặt phần mềm</a>, kiến thức cơ bản về <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">làm việc với file</a>, kiến thức cơ bản về HTML (tham khảo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Giới thiệu về HTML</a>) và ý tưởng về cách CSS hoạt động (tham khảo <a href="/en-US/docs/Learn/CSS/First_steps">các bước đầu tiên để học CSS</a>.)</p> + </td> + </tr> + <tr> + <th scope="row">Mục tiêu:</th> + <td> + <p>Học về Box Model (mô hình hộp) trong CSS, điều gì tạo nên nó và làm cách nào để chuyển đổi sang các mô hình thay thế khác.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Khối_block_và_khối_cùng_hàng_inline">Khối (block) và khối cùng hàng (inline)</h2> + +<p>Trong CSS, thông thường chúng ta có 2 loại box — box dạng khối (<strong>block</strong>) và box dạng khối cùng hàng (<strong>inline boxes</strong>). (TN: chúng ta nên hiểu và ghi nhớ thuật ngữ tiếng Anh, thay vì cố gắng dịch sang tiếng Việt). 2 loại (tính chất của box) này liên quan đến cách các box được sắp xếp trên trang (page flow) và mối liên hệ giữa các box với nhau:</p> + +<p>Nếu một box được định nghĩa là một <strong>block</strong>,<strong> </strong>thì nó sẽ có các tính chất sau:</p> + +<ul> + <li>Box này sẽ rớt xuống một dòng mới trên trang.</li> + <li>Box này sẽ giãn rộng trên dòng mà nó đang đứng (inline direction) để lấp đầy khoảng trống nhiều nhất có thể của box cha đang chứa nó. Trong hầu hết trường hợp, điều này có nghĩa là nó sẽ giãn rộng bằng với box chứa nó, chiếm trọn 100% khoảng trống sẵn có.</li> + <li>Các thuộc tính {{cssxref("width")}} và {{cssxref("height")}} vẫn được tôn trọng để thay đổi chiều rộng và cao của box.</li> + <li>Padding, margin và border (nếu có) sẽ đẩy các elements khác ra xa.</li> +</ul> + +<p>Các element như thẻ heading (ví dụ <code><h1></code>) và thẻ <code><p></code> đều mặc định có thuộc tính hiển thị bên ngoài (outer display type) là <code>block</code>, trừ phi chúng ta quyết định thay đổi nó sang <strong>inline</strong>.</p> + +<p>Nếu một box có thuộc tính hiển thị bên ngoài là <code>inline</code>, khi đó:</p> + +<ul> + <li>Box này sẽ không rớt xuống dòng mới trên trang.</li> + <li>Các thuộc tính {{cssxref("width")}} và {{cssxref("height")}} sẽ không có tác dụng.</li> + <li>Padding, margin, border ở hướng dọc (top và bottom) vẫn có tác dụng nhưng sẽ không làm đẩy các inline box khác ra xa khỏi nó.</li> + <li>Padding, margin, border ở hướng ngang (left và right) vẫn có tác dụng và vẫn sẽ đẩy các inline box khác ra xa khỏi nó.</li> +</ul> + +<p>Thẻ <code><a></code> (dùng để tạo hyperlink), thẻ <code><span></code>, <code><em></code> và <code><strong></code> là những ví dụ về các element có thuộc tính hiển thị mặc định là <code>inline</code>.</p> + +<p>Để khai báo loại hiển thị cho một element, chúng ta sử dụng thuộc tính {{cssxref("display")}} với các giá trị như <code>block</code> và <code>inline</code>, và các giá trị này là giá trị hiển thị bên ngoài (<strong>outer</strong>) của thuộc tính <code>display</code>.</p> + +<h2 id="Các_loại_hiển_thị_bên_trong_và_bên_ngoài_inner_và_outer">Các loại hiển thị bên trong và bên ngoài (inner và outer)</h2> + +<p>Đến đây thì chúng ta nên tìm hiểu thêm về loại hiển thị <strong>inner</strong> và <strong>outer</strong> là gì. Như đã đề cập ở trên, box trong CSS có tồn tại loại hiển thị phía ngoài (<em>outer</em>) là block hay inline.</p> + +<p>Box còn có cả loại hiển thị phía trong (<em>inner</em>), tuy nhiên nó không tác động lên chính box đó mà là những element con của nó. Mặc đinh, các element con của một box sẽ được layout theo cách mặc định (<strong><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">normal flow</a></strong>), có nghĩa là các element đó cũng sẽ được layout theo các quy tắc giống như các block và inline elements khác (đã trình bày ở trên).</p> + +<p>Tuy nhiên, chúng ta có thể thay đổi loại hiển thị inner bằng cách sử dụng các giá trị như <code>flex</code> cho thuộc tính <code>display</code>. Nếu chúng ta gán <code>display: flex;</code> lên một element, loại hiển thị bên ngoài của nó vẫn là <code>block</code>, nhưng loại hiển thị bên trong sẽ là <code>flex</code>. Khi đó, tất cả các element con trực tiếp của nó sẽ trở thành những <em>flex items</em> và sẽ được layout dựa trên các quy tắc của <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> sẽ được đề cập bên dưới.</p> + +<div class="blockIndicator note"> +<p><strong>Ghi chú</strong>: Để tìm hiểu thêm về các giá trị của thuộc tính display, và cách các block và inline box được layout, bạn có thể tham khảo bài hướng dẫn từ MDN <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout</a>.</p> +</div> + +<p>Nếu bạn tiếp tục tìm hiểu sâu hơn về CSS Layout, bạn sẽ bắt gặp <code>flex</code>, và một số giá trị hiển thị bên trong (inner) khác, ví dụ như <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> + +<p>Tuy vậy, Block và inline layout là cách hiển thị mặc định trên web — như đã trình bày ở trên, thỉnh thoảng nó được gọi với thuật ngữ là <em>normal flow</em>, bởi vì nếu chúng ta không cố tình thay đổi cách hiển thị của các element, thì nó sẽ tự động được layout như là các block hoặc inline.</p> + +<h2 id="Ví_dụ_về_các_loại_display">Ví dụ về các loại display</h2> + +<p>Hãy cùng nhau xem qua các ví dụ sau. Trong ví dụ bên dưới, chúng ta có 3 element khác nhau, và cả 3 đều có loại hiển thị bên ngoài (outer) là <code>block</code>. Element đầu tiên là một paragraph (<code><p></code>) có đường kẻ border. Trình duyệt sẽ render nó như là một block, vì thế nó sẽ bắt đầu từ đầu dòng và giãn ra toàn bộ khoảng trống đang có.</p> + +<p>Element thứ 2 là một list (<code><ul></code>), được thay đổi thuộc tính hiển thị với <code>display: flex</code>. Điều này giúp tạo ra một flex layout cho các element bên trong nó, và bản thân nó (<code><ul></code>) vẫn là một block giống như paragraph ở trên, giãn ra toàn bộ khoảng trống của element cha, và tự rớt xuống một dòng mới.</p> + +<p>Cuối cùng, chúng ta có một paragraph với thuộc tính hiển thị là block, bên trong nó là 2 thẻ <code><span></code>. Thông thường thẻ span sẽ có thuộc tính hiển thị là inline, tuy nhiên do chúng ta đã thay đổi thuộc tính của thẻ span đầu tiên sang block bằng cách thêm class tên block và gán giá trị cho class là <code>display: block</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p> + +<p>Trong ví dụ tiếp theo, chúng ta có thể thấy các elements với thuộc tính hiển thị là <code>inline</code> sẽ được layout như thế nào. Các thẻ <code><span></code> ở paragraph đầu tiên đều mặc định là <code>inline</code> và không tự động rớt xuống dòng như block. </p> + +<p>Ngoài ra chúng ta còn có thẻ <code><ul></code> được gán thuộc tính hiển thị là <code>display: inline-flex</code>, tạo ra một box với thuộc tính hiển thị là inline và các element bên trong nó sẽ trở thành các <em>flex items</em>.</p> + +<p>Cuối cùng, chúng ta có 2 paragraphs đều được gán thuộc tính <code>display: inline</code>. Vì tất cả đều là inline, ta thấy thẻ <code><ul></code> phía trên (là một flex container) và các paragraphs đều được dàn đều trên một dòng, thay vì mỗi element sẽ tự rớt xuống dòng riêng như block.</p> + +<p><strong>Trong ví dụ bên dưới, bạn có thể tương tác trực tiếp vào source code và thay đổi các thuộc tính <code>display: inline</code> sang <code>display: block</code> hay <code>display: inline-flex</code> sang <code>display: flex</code> để chuyển qua lại các thuộc tính hiển thị khác nhau và xem so sánh sự khác biệt.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p> + +<p>Bạn sẽ được tìm hiểu thêm về flex layout trong các bài tiếp theo; có một điều quan trọng mà bạn cần ghi nhớ là thay đổi giá trị của thuộc tính <code>display</code> sẽ làm thay đổi thuộc tính hiển thị bên ngoài (outer display type) của box sang block hoặc inline, điều đó sẽ ảnh hưởng trực tiếp đến việc các elements sẽ được hiển thị và sắp xếp như thế nào trên trang.</p> + +<p>Trong các phần còn lại của bài học lần này, chúng ta sẽ tập trung trao đổi về thuộc tính hiển thị bên ngoài (outer display type).</p> + +<h2 id="CSS_box_model_là_gì">CSS box model là gì?</h2> + +<p>TN: "CSS Box model" thường được dịch là "mô hình khối trong CSS", nhưng cá nhân mình nghĩ chúng ta nên dùng thuật ngữ tiếng Anh cho chuẩn, nó sẽ giúp ích khi chúng ta đọc các tài liệu khác bằng tiếng Anh.</p> + +<p>Để thấy được một CSS box model hoàn chỉnh, thì chúng ta cần nhìn vào các box có thuộc tính hiển thị là block, vì các inline box chỉ sử dụng một vài tính chất được định nghĩa trong box model mà thôi. Box model định nghĩa cách các thuộc tính khác nhau của một box — margin, border, padding và content — tương tác với nhau như thế nào để tạo ra một box mà bạn thấy trên giao diện. Tuy vậy, box model cũng được chia ra thành box model chuẩn (standard) và box model thay thế (alternate).</p> + +<h3 id="Các_thành_phần_của_một_box">Các thành phần của một box</h3> + +<p>Để tạo nên một block box trong CSS, chúng ta có các thành phần như sau:</p> + +<ul> + <li><strong>Content box</strong>: Là vùng chứa content của bạn, kích thước vùng này có thể xác định qua các thuộc tính {{cssxref("width")}} và {{cssxref("height")}}.</li> + <li><strong>Padding box</strong>: Là vùng trống (white space) bọc lấy vùng content; kích thước của nó có thể được xác định bởi thuộc tính {{cssxref("padding")}} và các thuộc tính liên quan khác.</li> + <li><strong>Border box</strong>: Là vùng bọc bên ngoài vùng padding và content. Kích thước và style của nó có thể được xác định bởi thuộc tính {{cssxref("border")}} và các thuộc tính liên quan khác.</li> + <li><strong>Margin box</strong>: Là vùng trống (white space) ngoài cùng tất cả, bọc lấy vùng padding, border và content, nằm ngăn cách giữa các elements. Kích thước của nó có thể được xác định bởi thuộc tính {{cssxref("margin")}} và các thuộc tính liên quan khác.</li> +</ul> + +<p>Hình bên dưới minh họa cho các vùng (tầng) như mô tả bên trên:</p> + +<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> + +<h3 id="CSS_box_model_chuẩn_standard">CSS box model chuẩn (standard)</h3> + +<p>Trong box model chuẩn, nếu một box được gán các thuộc tính <code>width</code> và <code>height</code>, thì các thuộc tính này định nghĩa kích thước của <em>vùng content</em>. Nếu box được thêm padding và border, thì nó sẽ được cộng dồn vào kích thước của box đó và làm tăng tổng kích thước của box lên. Điều này được minh họa bởi hình bên dưới.</p> + +<p>Ví dụ chúng ta có một box được gán các thuộc tính CSS sau <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, và <code>padding</code>:</p> + +<pre class="brush: css notranslate">.box { + width: 350px; + height: 150px; + margin: 10px; + padding: 25px; + border: 5px solid black; +} +</pre> + +<p>Kích thước mà box này, tính theo box model chuẩn, là 410px (350 + 25 + 25 + 5 + 5), bởi vì padding và border được cộng dồn và chiều rộng của box.</p> + +<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p> + +<div class="blockIndicator note"> +<p><strong>Ghi chú</strong>: Vùng margin không được cộng vào kích thước thật của box — đương nhiên là nó có tác động đến tổng kích thước mà box sẽ chiếm trên trang, nhưng nó chỉ là vùng trống bên ngoài box mà thôi. Phạm vi của box dừng lại ở vị trí border và không tràn ra vùng margin.</p> +</div> + +<h3 id="CSS_box_model_thay_thế">CSS box model thay thế</h3> + +<p>Có thể bạn sẽ nghĩ rằng thật là bất tiện khi phải cộng dồn cả padding và border để có được kích thước thực của box, và có lẽ bạn đã đúng! Cũng vì lý do đó, CSS đã giới thiệu một loại box model khác một thời gian sau khi box model chuẩn ra đời. Khi sử dụng model này, khi ta gán kích thước thông qua thuộc tính <code>width</code>, thì nó sẽ là kích thước thật của box hiển thị trên trang. Điều đó có nghĩa để biết kích thước của vùng content, ta sẽ phải lấy <code>width</code> trừ đi padding và border. Với mã CSS ở ví dụ trên khi áp dụng box model mới này, kết quả sẽ là (width = 350px, height = 150px)</p> + +<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> + +<p>Mặc định, trình duyện sẽ sử dụng box model chuẩn. Nếu bạn muốn chuyển sang box model thay thế như trên cho một element, bạn cần gắn dòng code sau <code>box-sizing: border-box</code>. Bằng cách này, bạn báo với trình duyệt rằng hãy lấy vùng border làm kích thước cho box mà bạn định nghĩa.</p> + +<pre class="brush: css notranslate"><code>.box { + box-sizing: border-box; +} </code></pre> + +<p>Nếu bạn muốn sử dụng box model thay thế cho tất cả các element, thì có một cách thông dụng mà các developers sử dụng, là gán thuộc tính <code>box-sizing</code> lên thẻ <code><html></code>, bằng cách này tất cả các elements sẽ kế thừa giá trị này, như đoạn code bên dưới. Nếu bạn muốn tìm hiểu thêm về ý tưởng về nó, bạn có thể tham khảo <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">bài viết từ CSS Tricks về box-sizing</a>.</p> + +<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<div class="blockIndicator note"> +<p><strong>Ghi chú</strong>: Lịch sử có một thông tin thú vị rằng — Internet Explorer từng mặc định sử dụng box model thay thế , tuy nhiên chúng ta lại không có cách nào để chuyển về box model chuẩn để sử dụng.</p> +</div> + +<h2 id="Thực_hành_với_box_model">Thực hành với box model</h2> + +<p>Trong ví dụ bên dưới, bạn sẽ thấy 2 box. Cả hai đều có class là <code>.box</code> để được gán cùng <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> và <code>padding</code>. Sự khác biệt duy nhất là chúng ta sẽ sử dụng box model thay thế cho box thứ 2.</p> + +<p><strong>Bài tập: Bạn có thể tìm cách thay đổi kích thước của box thứ 2 (bằng cách thay đổi CSS trong class <code>.alternate</code>) để kích thước của nó đúng bằng với box đầu tiên được không?</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p> + +<div class="blockIndicator note"> +<p><strong>Ghi chú</strong>: Bạn có thể tham khảo lời giải cho bài tập trên tại <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">đây</a>.</p> +</div> + +<h3 id="Sử_dụng_bộ_DevTools_của_trình_duyệt_để_xem_trực_quan_box_model">Sử dụng bộ DevTools của trình duyệt để xem trực quan box model</h3> + +<p><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Bộ devtools của trình duyệt</a> có thể giúp bạn hiểu nhanh hơn và hình dung dễ hơn về box model. Nếu bạn "inspect" một element với bộ devtools của Firefox, bạn sẽ thấy kích thước của element cùng với margin, padding và border. Đây là một cách tuyệt vời để kiểm tra chắc chắn rằng element của bạn có kích thước đúng như bạn mong muốn hay không.</p> + +<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p> + +<h2 id="Margins_padding_và_borders">Margins, padding, và borders</h2> + +<p>Bạn đã thấy các thuộc tính {{cssxref("margin")}}, {{cssxref("padding")}}, và {{cssxref("border")}} hoạt động như thế nào trong các ví dụ trên. Các thuộc tính trên là các thuộc tính viết tắt (shorthand) giúp chúng ta định nghĩa nhanh cả 4 hướng của box chỉ với một dòng CSS. Các thuộc tính viết tắt này cũng có các thuộc tính cụ thể (viết dài hơn) tương ứng cho từng hướng nếu bạn muốn định nghĩa từng hướng riêng biệt.</p> + +<p>Hãy cùng tìm hiểu chi tiết các thuộc tính này:</p> + +<h3 id="Margin">Margin</h3> + +<p>Margin là một vùng trống vô hình (invisible) bao quanh box. Nó có nhiệm vụ đẩy các các elements khác ra xa box. Margin có thể nhận cả giá trị dương và âm. Nếu margin nhận giá trị âm ở một hướng nào đó, nó có thể tạo ra việc chồng (overlap) các thứ lên nhau trên trang. Dù cho bạn đang sử dụng box model chuẩn hay thay thế, thì margin luôn luôn được thêm vào sau khi kích thước hiển thị (visible) của box đã được tính toán xong.</p> + +<p>Chúng ta có thể tùy chỉnh tất cả các hướng (top, right, bottom, left) margin chỉ với một thuộc tính {{cssxref("margin")}}, hoặc từng hướng riêng biệt với các thuộc tính sau:</p> + +<ul> + <li>{{cssxref("margin-top")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> +</ul> + +<p><strong>Trong ví dụ bên dưới, bạn hãy thử thay đổi giá trị margin (cả âm lẫn dương) để xem cách các box được đẩy đi và thu lại như thế nào.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p> + +<h4 id="Sự_chồng_margin_margin_collapsing">Sự chồng margin (margin collapsing)</h4> + +<p>Để hiểu rõ hơn về margin, có một khái niệm quan trọng (key) mà bạn cần hiểu là sự chồng margin (margin collapsing). Nếu bạn có 2 element mà margin của nó đụng nhau, và giá trị của nó đều dương, thì margin của chúng sẽ được gộp làm một và lấy giá trị lớn nhất (trong 2). Nếu 1 trong 2 margin có giá trị âm, thì margin gộp sẽ trừ đi phần âm đó.</p> + +<p>Trong ví dụ bên dưới, chúng ta có 2 paragraphs. Paragraph ở trên có <code>margin-bottom</code> là 50px. Paragraph thứ 2 có <code>margin-top</code> là 30px. Chúng bị chồng lên nhau và khoảng trống (margin) thực sự giữa 2 box là 50px chứ không phải tổng của cả hai.</p> + +<p><strong>Bạn có thể thử kiểm chứng bằng cách giảm <code>margin-top</code> của paragraph thứ 2 về 0 (từ 30px về 0). Vùng margin giữa 2 paragraphs vẫn không thay đổi và vẫn là 50px (là <code>margin-bottom</code> của paragraph đầu tiên). Nếu bạn giảm tiếp thành giá trị âm (ví dụ -10px), bạn sẽ thấy margin cuối cùng sẽ là 40px (= 50px - 10px).</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p> + +<p>Có nhiều quy tắc (rule) định nghĩa việc margin có được chồng (collapse) hay không. Tham khảo bài viết chi tiết về <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">sự chồng margin</a>. Điều quan trọng cần ghi nhớ là việc chồng margin vẫn đang diễn ra như một điều bình thường, vì vậy nếu khi layout với margin nhưng bạn không nhận được kết quả (khoảng cách giữa các element) như mong muốn, thì có thể bạn đã gặp phải việc chồng margin.</p> + +<h3 id="Borders">Borders</h3> + +<p>Border được vẽ ở giữa vùng margin và padding của box. Nếu bạn sử dụng box model chuẩn, kích thước của border sẽ được cộng dồn vào chiều rộng (<code>width</code>) và chiều cao (<code>height</code>) của box. Nếu bạn sử dụng box model thay thế, thì border sẽ không làm thay đổi kích thước của box mà sẽ làm giảm vùng content (content box) lại.</p> + +<p>Để tùy chỉnh thiết kế (style) cho border, có rất nhiều thuộc tính giúp bạn làm điều đó — border có 4 hướng, và mỗi hướng có một kiểu (style), độ dày (width), và màu sắc (color) khác nhau.</p> + +<p>Bạn có thể sử dụng thuộc tính viết tắt (shorthand) {{cssxref("border")}} để xác định width, style và color cho cả 4 hướng.</p> + +<p>Để tùy chỉnh thông tin border một cách độc lập cho từng hướng, bạn có thể sử dụng:</p> + +<ul> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-left")}}</li> +</ul> + +<p>Để tùy chỉnh width, style, và color của 4 hướng, bạn có thể sử dụng:</p> + +<ul> + <li>{{cssxref("border-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-color")}}</li> +</ul> + +<p>Để tùy chỉnh width, style, và color cho từng hướng riêng biệt, bạn có thể sử dụng các thuộc tính sau:</p> + +<ul> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-color")}}</li> +</ul> + +<p><strong>Ở ví dụ bên dưới, chúng ta sử dụng nhiều loại thuộc tính khác nhau để tạo border. Bạn hãy thử chỉnh sửa theo ý của bạn để hiểu hơn về border và cách hoạt động của chúng.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p> + +<h3 id="Padding">Padding</h3> + +<p>Padding là vùng nằm giữa border và content. Không giống như margin, padding không nhận giá trị âm, giá trị hợp lệ là từ 0 trở lên. Nếu element có background, thì nó nó sẽ tràn ra cả vùng padding (nằm dưới padding). Thông thường mục đích sử dụng của padding là để tạo khoảng cách giữa content và border.</p> + +<p>Chúng ta có thể tùy chỉnh padding lên các hướng của element thông qua thuộc tính viết tắt {{cssxref("padding")}}, hoặc từng hướng riêng biệt thông qua các thuộc tính cụ thể:</p> + +<ul> + <li>{{cssxref("padding-top")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> +</ul> + +<p><strong>Nếu bạn thử thay đổi giá trị padding của class <code>.box</code> ở ví dụ bên dưới, bạn sẽ thấy cách mà đoạn text thay đổi vị trí tương ứng với box.</strong></p> + +<p><strong>Bạn cũng có thể thay đổi giá trị padding trên class <code>.container</code>, điều này sẽ giúp tạo ra vùng trống giữa container và box. Padding có thể được tùy chỉnh ở bất kì element nào, và nó sẽ giúp tạo khoảng giống giữa border của nó và bất kì content gì bên trong nó.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p> + +<h2 id="Box_model_và_các_khối_cùng_hàng_inline_boxes">Box model và các khối cùng hàng (inline boxes)</h2> + +<p>Tất cả các lý thuyết (thuộc tính) trên đều được áp dụng được cho các box dạng khối (block). Tuy nhiên chỉ một số thuộc tính ấy áp dụng được cho các khối cùng hàng (inline box), ví dụ như các element được tạo với thẻ <code><span></code>.</p> + +<p>Trong ví dụ bên dưới, chúng ta có một thẻ <code><span></code> bên trong một paragraph và có các thuộc tính <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, và <code>padding</code>. Bạn có thể thấy thuộc tính width và height không có tác dụng. Ngoài ra, margin, padding và border dọc (top và bottom) vẫn được tính nhưng chúng không làm thay đổi mối liên hệ với các element xung quanh, vì thế padding và border sẽ đè (overlap) lên các kí tự khác trong đoạn paragraph. Padding, margin và border ngang (left và right) cũng được tính và sẽ đẩy các content xung quanh ra xa nó.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p> + +<h2 id="Sử_dụng_display_inline-block">Sử dụng display: inline-block</h2> + +<p>Có một giá trị đặc biệt của thuộc tính <code>display</code>, giúp tạo ra một loại box vừa có tính chất của <code>inline</code>, vừa có tính chất của <code>block</code>. Điều này đặc biệt hữu ích khi bạn không muốn item bị rớt xuống dòng mới (tính chất của block), nhưng vẫn muốn giữ các thuộc tính như <code>width</code> và <code>height</code>, và tránh trường hợp bị đè padding và border dọc như ví dụ trên.</p> + +<p>Element với thuộc tính <code>display: inline-block</code> sẽ có một vài thuộc tính của block như sau:</p> + +<ul> + <li>Thuộc tính <code>width</code> và <code>height</code> sẽ được tôn trọng và áp dụng.</li> + <li><code>padding</code>, <code>margin</code>, và <code>border</code> sẽ đẩy các element xung quanh ra xa box.</li> +</ul> + +<p>Tuy nhiên nó sẽ không làm box rớt xuống dòng mới, mà chỉ trở nên lớn hơn so với content thực của nó nếu bạn gán cho nó các thuộc tính <code>width</code> và <code>height</code>.</p> + +<p><strong>Trong ví dụ tiếp theo, chúng ta gán giá trị <code>display: inline-block</code> cho thẻ <code><span></code>. Bạn hãy thử đổi thành <code>display: block</code> hoặc đơn giản là xóa dòng code trên để so sánh sự khác biệt giữa các chế display.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p> + +<p>Một ứng dụng khác là khi bạn muốn một đường link có vùng click (hit area) rộng hơn để user dễ dàng click vào nó, thì bạn có thể thêm <code>padding</code>. Tuy nhiên vì thẻ <code><a></code> có loại hiển thị là inline giống như thẻ <code><span></code>, bạn có thể gán cho nó giá trị <code>display: inline-block</code> để cho phép padding được mở rộng hoàn toàn.</p> + +<p>Bạn sẽ thấy điều này được ứng dụng khá thường xuyên ở các thanh điều hướng (navigation bars). Trong ví dụ bên dưới, các thẻ <code><a></code> được dàn hàng ngang (sử dụng flexbox) và được thêm padding. Chúng ta muốn thẻ <code><a></code> thay đổi màu nền <code>background-color</code> khi hover lên chúng. Tuy nhiên padding có vẻ như nằm đè lên border của thẻ <code><ul></code>. Điều là xảy ra bởi vì thẻ <code><a></code> là có loại hiển thị là inline.</p> + +<p><strong>Bằng cách thêm giá trị <code>display: inline-block</code> vào <code>.links-list a</code>, bạn sẽ thấy cách lỗi được sửa bằng cách tôn trọng các padding của các thẻ <code><a></code>.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p> + +<h2 id="Kiểm_tra_khả_năng_của_bạn!">Kiểm tra khả năng của bạn!</h2> + +<p>Chúng ta đã đi qua rất nhiều khái niệm trong bài viết này, liệu bạn có thể nhớ tất cả các phần kiến thức quan trọng chưa? Bạn có thể thử một số bài kiểm tra sau để đảm bảo bạn sẽ ghi nhớ tốt các kiến thức quan trọng trước khi đi tiếp — <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Kiểm tra khả năng của bạn: The Box Model</a>.</p> + +<h2 id="Kết_luận">Kết luận</h2> + +<p>Đó là hầu hết những kiến thức mà bạn cần hiểu về box model. Bạn có thể quay lại bài viết này để tham khảo nếu bạn có cảm giác bối rối về kích thước của các box của mình khi layout.</p> + +<p>Trong bài học tiếp theo, chúng ta sẽ cùng tìm hiểu về <a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">background và border</a> để giúp trang trí box của bạn được lung linh và thú vị hơn.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Các_bài_viết_cùng_module">Các bài viết cùng module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> diff --git a/files/vi/learn/css/first_steps/index.html b/files/vi/learn/css/first_steps/index.html new file mode 100644 index 0000000000..47c45f1921 --- /dev/null +++ b/files/vi/learn/css/first_steps/index.html @@ -0,0 +1,54 @@ +--- +title: CSS first steps +slug: Learn/CSS/First_steps +translation_of: Learn/CSS/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">CSS (Cascading Style Sheets) được dùng để tạo hiểu, bố cục và định dạng hiển thị các trang web — ví dụ như, thay đổi phông chữ, màu sắc, kích thước, và khoảng trống trong nội dung, chia nọi dung thành nhiều cột, hoặc là thêm các hiệu ứng trang trí khác. Modulr này cung cấp cho bạn một khởi đầu nhẹ nhàng trên con đường làm chủ CSS với những điều cơ bản về cách hoạt động , cú pháp trông như thế nào và làm cách nào để bắt đầu sử dụng nó thêm kiểu vào HTML.</p> + +<div class="in-page-callout webdev"> +<h3 id="Hướng_tới_trở_thành_một_front-end_web_developer">Hướng tới trở thành một front-end web developer?</h3> + +<p>Chúng tôi đã tập hợp một khóa học bao gồm tất cả những thông tin cần thiết mà bạn cần để hướng tới mục tiêu đặt ra.</p> + +<p>Bắt đầu thôi</p> +</div> + +<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2> + +<p>Trước khi bắt đầu module này, bạn cần phải biết:</p> + +<ol> + <li>Quen cơ bản với việc sử dụng máy tính và sử dụng các trang web một cách thụ động (ví dụ như nhìn và thu thập nội dung)</li> + <li> Cài đặt môi trường làm việc cơ bản như đã giơi thiệu tại <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, và hiểu cách tọa và quản lý các file, như đã đề cập tại <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li> + <li>Hiểu biết cơ bản về HTML, như đã thảo luận tại <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> +</ol> + +<div class="note"> +<p><strong>Lưu ý</strong>: Nếu bạn làm việc trên PC/máy tính bảng/các thiết bị khác mà bạn không có khả năng để khởi tạo các file của riêng mình, bạn có thể thử hầu hết các ví dụ trên một số các chương trình học lập trình online như <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Hướng_dẫn">Hướng dẫn</h2> + +<p>Mô-dun này bào gốm các bài viết sau đây, sẽ đưa bạn đi qua tất cả nhứng lý thuyết cơ bản của CSS, và cũng cấp cho bạn nhiều cơ hội để kiểm tra khả năng của mình.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS là gì?</a></dt> + <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) cho phép bạn tọa ra được các trang web đẹp, nhưng cách nó hoặt động như thế nào? Bài viết này giải thích CSS là gì với một ví dụ cú pháp đơn giản, và cũng bao gồm một số thuật ngữ chính về ngôn ngữ này.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Bắt đầu với CSS</a></dt> + <dd>Trong bài viết này chúng ta sẽ sử dụng một tài liệu HTML đơn giản và áp dụng CSS vào nó, đồng thời tìm hiểu một số điều thực tế về ngôn ngữ này.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS có cấu trúc như thế nào</a></dt> + <dd>Lúc này bạn đã những hiểu biết cơ bản về CSS và cách sử dụng nó, đã đến lúc để xem xét sâu hơn một chút về cấu trúc của ngôn ngữ này. Chúng tôi thảo luận nhiều khái niệm ở đây, bạn có thể quay lại phần này để tóm tắt nếu nếu bạn gặp phải bất kỳ khái niệm nào khó hiểu sau này.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS làm việc như thế nào</a></dt> + <dd>Chúng ta đã học được những điều cơ bản về CSS, nó là gì và làm cách nào để tạo một bảng định dạng cơ bản. Trong bài học này chúng ta sẽ xem xét cách một trình duyệt sử dụng CSS và HTML và biến nớ thành một trang web.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Sử dụng kiến thức mới của bạn</a></dt> + <dd>Với những thứ bạn đã học trong những bài học vừa qua bạn có thể thấy rằng mình có thể định dạng các văn bản đơn giản bằng cách sử dụng CSS, để thêm phong cách riêng của bạn vào chúng. Bài viết này cũng cấp cho bạn một cơ hội để làm điều đó.</dd> +</dl> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Kiến thức Web trung cấp 1: Giới thiệu CSS</a></dt> + <dd>Một khóa học nền tảng tuyệt vời của Mozilla giúp khám phá và kiểm tra rất nhiều kỹ năng được nói đến trong mô đun giới thiệu về CSS. Tìm hiểu về tạo kiểu cho các phần tử HTML trên một trang web, bộ chọn CSS, các thuộc tính và giá trị.</dd> +</dl> diff --git a/files/vi/learn/css/index.html b/files/vi/learn/css/index.html new file mode 100644 index 0000000000..3b3424781a --- /dev/null +++ b/files/vi/learn/css/index.html @@ -0,0 +1,67 @@ +--- +title: Learn to style HTML using CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - Debugging + - Landing + - NeedsContent + - NeedsTranslation + - Style + - Topic + - TopicStub + - length + - specificity +translation_of: Learn/CSS +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Cascading Stylesheets - hoặc {{glossary ("CSS")}} - là công nghệ đầu tiên bạn nên bắt đầu học sau {{glossary ("HTML")}}. Trong khi HTML được sử dụng để xác định cấu trúc và ngữ nghĩa của nội dung của bạn, CSS được sử dụng để tạo kiểu. Ví dụ: bạn có thể sử dụng CSS để thay đổi phông chữ, màu sắc, kích thước và khoảng cách của nội dung, chia thành nhiều cột hoặc thêm hoạt ảnh và các tính năng trang trí khác.</p> + +<h2 id="Con_đường_học_tập">Con đường học tập</h2> + +<p>Bạn thực sự nên tìm hiểu những điều cơ bản về HTML trước khi thử bất kỳ CSS nào. Chúng tôi khuyên bạn nên tìm hiểu thông qua phần <a href="https://developer.mozilla.org/vi/docs/Learn/HTML/Introduction_to_HTML">Giới thiệu về HTML</a> của chúng tôi trước tiên - sau đó bạn có thể tìm hiểu về:</p> + +<ul> + <li>CSS, bắt đầu với module <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li> + <li>Module nâng cao hơn <a href="/en-US/Learn/HTML#Modules">HTML modules</a></li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a> và cách sử dụng nó để thêm chức năng động cho trang web</li> +</ul> + +<p>Một khi bạn đã hiểu những nguyên tắc cơ bản của HTML,chúng tôi đề xuất bạn có thể học HTML và CSS cùng lúc, chuyển qua lại giữa 2 đề tài . Đó là vì việc học HTML sẽ trở nên thú vị hơn nếu bạn áp dụng các CSS vào HTML, và bạn cũng không thể học CSS mà không biết HTML.</p> + +<p>Trước khi bắt đầu bài học này, bạn cũng nên làm quen với việc sử dụng máy tính và sử dụng web. Bạn nên thiết đặt môi trường làm việc cơn bản được mô tả chi tiết trong<a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> Cài đặt những phần mềm cơ bản</a>, và hiểu cách tạo, quản lý tập tin <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Thao tác với các tập tin</a> — cả hai đều là những phần của module <a href="/en-US/docs/Learn/Getting_started_with_the_web">Bắt đầu với web</a> cho người mới bắt đầu.</p> + +<p>Chúng tôi đề xuất bạn nên tìm hiểu thông qua <a href="/en-US/docs/Learn/Getting_started_with_the_web">Bắt đầu với web</a> trước khi tiếp tục với chủ đề này, tuy nhiên, nó cũng không hoàn toàn cần thiết vì phần lớn những gì có trong <a href="/vi/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS cơ bản</a> cũng được nhắc tới trong module <a href="/vi/docs/Learn/CSS/First_steps">CSS first steps</a>, ở mức chi tiết hơn.</p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt> + <dd>This module gets you started with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt> + <dd>Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> + <dd>Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images and other features, and fancy features such as drop shadows and filters on boxes.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> + <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so you can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new, fangled layout tools like flexbox.</dd> + <dt>Responsive design (TBD)</dt> + <dd>With so many different types of devices able to browse the Web these days, <a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD, explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution, and explore the technologies available for serving different videos and images depending on such features.</dd> +</dl> + +<h2 id="Solving_common_CSS_problems">Solving common CSS problems</h2> + +<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a webpage.</p> + +<p>From the beginning, the things you'll do most are to apply colors to HTML elements and their backgrounds, change the size, shape, and position of elements, and add and define borders on elements. But there's not much you can't do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't actually know how to do it yet!</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt> + <dd>The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.</dd> +</dl> |