Bản dịch này đang trong quá trình.

CSS (Cascading Style Sheets) cho phép chúng ta xây dựng một cái nhìn tốt hơn cho trang web, nhưng làm sao nó có thể hoạt động bao quát? Bài viết này sẽ giải thích CSS là gì, làm sao trình duyệt trả về HTML sang một Document Object Model (DOM), làm thế nào CSS tác động đến những thành phần của DOM, một vài cú pháp ví dụ đơn giản và những dòng lệnh gì thực sự đã được thêm vào CSS trong trang web.

Điều kiện: Biết máy tính cơ bản, biết cái đặt phần mềm, hiểu biết cơ bản về tệp tin và HTML (xem Giới Thiệu HTML.)
Mục tiêu: Hiểu được CSS là gì, và làm sao nó hoạt động ở cấp cơ bản.

CSS là gì?

Như đã đề cập, CSS là một ngôn ngữ chỉ định cách trình bày tài liệu cho người dùng — cách chúng được tạo ra, đặt ra. v.v...

Tài liệu thường là mộ tệp văn bản được cấu trúc bởi markup language (đánh dấu văn bản) — HTML thì hầu hết là markup language, nhưng bạn cũng có thể tham khảo các tài liệu khác chẳng hạn như SVG or XML.

Cách trình bày 1 tài liệu đến người dùng nghĩa là chuyển đổi nó sang một hình thức có thể sử dụng được cho nhóm đối tượng của bạn. Browsers, giống như Firefox, Chrome hoặc Internet Explorer, chúng đã được thiết kế để mang đến một cái nhìn trực quan hơn, ví dụ như màn hình máy tính, máy chiếu hoặc máy in.

Làm thế nào CSS ảnh hưởng đến HTML?

Trình duyệt web áp dụng qui tắc của CSS cho tài liệu để ảnh hưởng đến cách chúng hiển thị. Một qui tắc của CSS được hình thành từ:

  • Một tập hợp thuộc tính, có những giá trị áp dụng cho nội dung HTML được hiển thị. Ví dụ: Tôi muốn phần tử con có chiều rộng bằng 50% của phần tử cha và nền của nó phải là màu đỏ.
  • Một bộ chọn, chọn những phần tử bạn muốn áp dụng để cập nhật giá trị thuộc tính đó. Ví dụ: Tôi muốn áp dụng qui tắc CSS cho tất cả các đoạn trong tài liệu HTML.

Một tập hợp qui tắc của CSS bên trong một Stylesheet(bảng định kiểu) xác định giao diện trang web như thế nào. Bạn sẽ học được nhiều hơn về cú pháp CSS  trong bài viết kế tiếp của Mô-đun — CSS Syntax.

Một ví dụ nhanh về CSS

Mô tả trên có thể có hoặc có thể không hợp lý, vậy hãy xem qua một ví dụ nhanh để đảm bảo điều đó. Đầu tiên, tạo một tài liệu HTML đơn giản, bao gồm một <h1> và một <p> (một stylesheet được áp dụng cho HTML đang sử dụng thông qua đường dẫn <link>):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

Bây giờ hãy cùng xem một ví dụ CSS đơn giản bao gồm 2 nguyên tắc:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

nguyên tắc thứ nhất với h1 sẽ được áp dụng giá trị của thuộc tính đó cho thẻ <h1>. Bao gồm 3 thuộc tính và giá trị tương ứng (mỗi thuộc tính/giá trị được gọi là khai báo):

  1. Đầu tiên khai báo cho chữ là màu xanh.
  2. Thứ hai khai báo cho nền là màu vàng.
  3. Thứ ba tạo 1 viền có độ rộng 1 pixel với đường liền (không đường chấm, hoặc gạch, v.v..) và màu là màu đen.

Nguyên tắc thứ 2 cho thẻ p sẽ được áp dụng giá trị của thuộc tính đó cho thẻ <p>. Bao gồm một thuộc tính khai báo cho chữ là màu đỏ.

Trên trình duyệt sẽ mang đến kết quả như bên dưới:

A simple webpage containing a header of Hello World, and a paragraph that says This is my first CSS example

Ví dụ không quá cầu kì nhưng ít nhất cũng thể hiện cho bạn biết được khái niệm làm sao CSS có thể hoạt động.

Active learning: Writing your first CSS

Now we'll give you a chance to write your own bit of CSS. You can do this using the Input areas below, in the live editable example. In a similar fashion to what you saw above, you've got some simple HTML elements, and some CSS properties. Try adding some simple declarations to your CSS, to style the HTML.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

How does CSS actually work?

When a browser displays a document, it must combine the document's content with its style information. It processes the document in two stages:

  1. The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.
  2. The browser displays the contents of the DOM.

About the DOM

A DOM has a tree-like structure. Each element, attribute and piece of text in the markup language becomes a DOM node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.

Understanding the DOM helps you design, debug and maintain your CSS because the DOM is where your CSS and the document's content meet up.

DOM representation

Rather than a long, boring explanation, let's take an example to see how the DOM and CSS work together.

Let's assume the following HTML code:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

In the DOM, the node corresponding to our <p> element is a parent. Its children are a text node and the nodes corresponding to our <span> elements. The SPAN nodes are also parents, with text nodes as their children:

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

This is how a browser interprets the previous HTML snippet —it renders the above DOM tree and then outputs it in the browser like so:

Applying CSS to the DOM

Let's say we added some CSS to our document, to style it. Again, the HTML is as follows:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

If we apply the following CSS to it:

span {
  border: 1px solid black;
  background-color: lime;
}

The browser will parse the HTML and create a DOM from it, then parse the CSS. Since the only rule available in the CSS has a span selector, it will apply that rule to each one of the three spans. The updated output is as follows:

How to apply your CSS to your HTML

There are three different ways to apply CSS to an HTML document that you'll commonly come across, some more useful than others. Here we'll briefly review each one.

External stylesheet

You've already seen external stylesheets in this article, but not by that name. An external stylesheet is when you have your CSS written in a separate file with a .css extension, and you reference it from an HTML <link> element. The HTML file looks something like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

And the CSS file:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

This method is arguably the best, as you can use one stylesheet to style multiple documents, and would only need to update the CSS in one place if changes were needed.

Internal stylesheet

An internal stylesheet is where you don't have an external CSS file, but instead place your CSS inside a <style> element, contained inside the HTML head. So the HTML would look like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

This can be useful in some circumstances (maybe you're working with a content management system where you can't modify the CSS files directly), but it isn't quite as efficient as external stylesheets — in a website, the CSS would need to be repeated across every page, and updated in multiple places if changes were required.

Inline styles

Inline styles are CSS declarations that affect one element only, contained within a style attribute:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

Please don't do this, unless you really have to! It is really bad for maintenance (you might have to update the same information multiple times per document), and it also mixes your presentational CSS information with your HTML structural information, making the CSS harder to read and understand. Keeping your different types of code separated and pure makes for a much easier job for all who work on the code.

The only time you might have to resort to using inline styles is when your working environment is really restrictive (perhaps your CMS only allows you to edit the HTML body.)

What's next

At this point you should understand the basics of how CSS works, and how browsers deal with it. Next, you'll move on to learn about CSS syntax.

 

In this module

 

Document Tags and Contributors

Những người đóng góp cho trang này: phd2d
Cập nhật lần cuối bởi: phd2d,