Các khái niệm cơ bản của CSS

0
12

Giới thiệu

Xin chào các bạn, trong bài này chúng ta sẽ cùng nhau tìm hiểu các khái niệm cũng như thuật ngữ quan trọng cần nắm rõ của CSS.

Thuật ngữ

Với “Cascading Style Sheet” chúng ta cần hiểu rõ:

Style: Kích cỡ, màu sắc, bố cục… mà chúng ta áp dụng lên thành phần của một trang web => Style Sheet: Danh sách các style đã được quy định và chúng ta sẽ sử dụng khi cần đến.

Nói một cách nôm na cho dễ hiểu là chúng ta sẽ sử dụng các “phong cách” (style) này trong danh sách đã được quy định để trang trí website sao cho bắt mắt theo ý muốn.

Vậy còn “cascading” thì sao? Nó có ý nghĩa gì?

Cascade

  • Là thuật ngữ đề cập tới thứ tự áp dụng style trên các phần tử trang của một trang web.
  • Thứ tự này rất quan trọng vì trường hợp phần tử trang bị xung đột do nhiều style khác nhau cùng áp dụng lên nó (bị áp dụng bởi nhiều style) là rất thường xuyên dẫn đến việc website không hiển thị như ý muốn.
  • Vì vậy, chúng ta cần lưu ý rằng việc style nào sẽ được ưu tiên theo thứ tự “xếp tầng” (cơ chế cascade) để nó được sử dụng.

Cơ chế “cascade”

Yếu tố quan trọng nhất trong việc làm chủ CSS là hiểu rõ cơ chế cascade – thứ tự ưu tiên.

Cơ chế cascade sẽ dựa trên 3 điều:

  • Importance (mức độ quan trọng).
  • Specificity (mức độ cụ thể).
  • Source Order.

Lưu ý: Thứ tự ưu tiên từ cao nhất đến thấp nhất của 3 điều kể trên sẽ lần lượt là importance, specificity và source order.

Khi có 2 hoặc nhiều style sheet cùng áp dụng lên một phần tử trang, thì “importance” sẽ được ưu tiên trên hết. Nếu chúng có cùng mức độ quan trọng, thì kế đến “specificity” sẽ được xét tiếp theo. Cuối cùng, nếu chúng giống nhau cả về mức độ cụ thể, thì nó sẽ xét đến “source order” .

Khi xung đột xảy ra, thứ tự ưu tiên sẽ là điều quyết định. Vì vậy, các bạn cần nắm vững thứ tự ưu tiên vừa đề cập ở trên để xử lí sự xung đột giữa các style trên cùng một phần tử trang.

Importance

Trong phạm vi này, các style sheet sẽ phụ thuộc vào 3 nguồn sau: User Agent, User và Author.

User Agent: Chính các trình duyệt (browser) sẽ quy định loại này, hay nói cách khác, đây chính là style mặc định của trình duyệt.

User: Nếu như các trình duyệt quy định style mặc định trong user agent, thì trong user, style sẽ được quy định bởi chính người sử dụng (người lướt web). Nói một cách dễ hiểu hơn là người sử dụng sẽ quy định, điều chỉnh style theo ý muốn của họ. Thông qua phần “settings” (cài đặt) của mỗi trình duyệt.

Author: Đây là nguồn do chính người thiết kế website tạo ra.

Lưu ý: Thứ tự ưu tiên cao đến thấp trong importance sẽ lần lượt là author, user và user agent.

Specificity

Đây là thuật ngữ có liên quan đến mức độ cụ thể của “selector” (chúng ta sẽ tìm hiểu chi tiết hơn về khái niệm này trong bài học kế tiếp).

Các bạn chỉ cần hiểu một cách tổng quát: Một trang web sẽ có nhiều phần tử trang và CSS cho phép chúng ta tìm kiếm những phần tử trang cụ thể để sử dụng style mà chúng ta muốn áp dụng vào, dựa trên các chỉ định của chúng ta. Chỉ định nào càng cụ thể, độ ưu tiên càng cao.

Source Order

Cách thức hoạt động của thuật ngữ này rất đơn giản. Style nào được viết sau sẽ có độ ưu tiên cao hơn style trước nó.

Inheritance (tính kế thừa)

Các bạn thử tưởng tượng về tính kế thừa trong gia đình. Bạn được sinh ra và thừa hưởng các đặc tính của cha mẹ bạn chẳng hạn như ngoại hình, màu tóc, màu mắt, chiều cao, tính cách… Tính kế thừa trong việc sử dụng CSS cũng tương tự.

Tính kế thừa này xảy ra khi các phần tử con thừa hưởng giá trị style từ phần tử cha.
Ví dụ:

<body style=”font-size:20px; color: blue”>
 <h1>Chào mừng các bạn đến với khóa học CSS</h1>
 <p>…</p>
</body>

Tất cả các thẻ con nằm trong thẻ cha đều chịu ảnh hưởng từ thẻ cha bởi tính kế thừa. Trong trường hơp này, thẻ h1 và thẻ p sẽ bị ảnh hưởng (cùng có kích cỡ chữ 20px và màu chữ xanh) bởi các thuộc tính của thẻ body vì h1 và p là thẻ con của thẻ body.

Kết luận

Các bạn cần nắm rõ thứ tự ưu tiên trong CSS để giải quyết các tình huống xung đột giữa các style sheet từ đó có thể trang trí website theo ý muốn cũng như hiểu rõ về tính kế thừa.

Chân thành cảm ơn các bạn đã theo dõi, Xin chào và hẹn gặp lại các bạn trong bài học tiếp theo.

Tài liệu tham khảo

http://www.w3.org/TR/CSS2/cascade.html

http://www.w3.org/wiki/Inheritance_and_cascade

0

BÌNH LUẬN

Nhập bình luận của bạn
Vui lòng nhập tên