1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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>
|
