CSS 用於設計和佈置網頁 — 舉例來說，要改變你內容中的字形, 顏色, 字體大寫與間距 , 將網頁分隔成多欄樣式, 或新增動畫跟效果. 這份文件可以帶領你學習 CSS 並征服它, 以及它如何工作的基礎知識，包括選擇器和屬性，寫CSS 風格，應用 CSS 到HTML上, 如何指定大小, 顏色, 與其他的 CSS 元素, 層疊性 與 繼承性, 以其對 CSS 進行除錯.
Before starting this module, you should have:
- 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 centimeters, or 30 ems? In this guide we look at more common values like length, color 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 to style HTML elements on a webpage using CSS selectors, attributes, and values.