Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh.
CSS được sử dụng để tạo kiểu và bố trí các trang web - ví dụ: để 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. Mô-đun này giúp bạn bắt đầu trên đường dẫn đến việc làm chủ CSS với các khái niệm cơ bản về cách hoạt động, bao gồm bộ chọn và thuộc tính, viết quy tắc CSS, áp dụng CSS cho HTML, cách chỉ định độ dài, màu và các đơn vị khác trong CSS, xếp tầng và thừa kế, và gỡ lỗi CSS.
Điều kiện tiên quyết
Trước khi bắt đầu mô-đun này, bạn nên có:
- Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)
- A basic work environment set up as detailed in Installing basic software, and an understanding of how to create and manage files, as detailed in Dealing with files.
- Basic familiarity with HTML, as discussed in the Introduction to HTML module.
Note: If you are working on a computer/tablet/other 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 JSBin or Thimble.
This module contains the following articles, which will take you through all the basic theory of CSS, and provide ample opportunity for you to test out some skills.
- How CSS works
- In this module we start off with a theoretical grounding, looking at what CSS is, how the browser turns HTML into a DOM, how CSS is applied to parts of the DOM, some very basic syntax examples, and what code is used to actually include our CSS in our web page.
- CSS syntax
- Next up, we dive into CSS syntax in a lot more detail, looking at how properties and their values form into declarations, multiple declarations form into declaration blocks, and declaration blocks and selectors form into complete CSS rules. We round off the article by looking at other CSS syntax features such as comments and whitespace.
- Selectors are mentioned in the previous article, but in this guide we go into a lot more detail, showing what selector types are available and how they work.
- CSS values and units
- There are many types of CSS property values to consider, from numerical values to colors to functions that perform a certain action (like embedding a background image or rotating an element.) Some of these rely on particular units for specifying the exact values they are representing — do you want your box to be 30 pixels wide, or 30 centimetres, or 30 ems? In this guide, we look at more common values like length, colour and simple functions, as well as exploring less common units like degrees, and even unitless numerical values.
- Cascade and inheritance
- CSS has two different but related systems to resolve situations where you have selector conflicts (different selectors select the same elements; which one wins and ends up being applied?) and elements nested inside other elements (some of the styling applied to the parent elements makes sense to be inherited by the child elements; some doesn't.) This article covers both systems in enough detail to be useful but not overwhelming.
- The box model
- The CSS box model is the foundation of layout on the Web — each element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like the layers of an onion. As a browser renders a web page, it works out what styles are applied to the content of each box, how big the surrounding onion layers are, and where the boxes sit in relation to one another. Before understanding how to create CSS layouts, you need to understand the box model.
- Debugging CSS
- In the final article of this module, we take a look at the basics of debugging CSS, including exploring the CSS applied to a page, and other tools that can help you find errors in your CSS code.
The following assessments will test your understanding of the CSS basics covered in the guides above.
- Fundamental CSS comprehension
- This assessment tests your understanding of the above guides with some carefully crafted exercises.
- Intermediate Web Literacy 1: Intro to CSS
- An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the Introduction to CSS module. Learn about styling HTML elements on a webpage, CSS selectors, attributes, and values.