XML: Bài 5.4. Kế thừa và Các tầng trong CSS

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Trong bài học này, Kế thừa và Các tầng trong CSS, bạn sẽ học cách:

  • Xác định quá trình xếp tầng.
  • Giải thích sự kế thừa (inheritance).

5.4.1. Xếp tầng trong CSS

Có một số cách để xác định các biểu định kiểu. Ví dụ: một tài liệu có thể có nhiều hơn một biểu định kiểu được xác định cho nó. Trình duyệt có biểu định kiểu riêng. Trong những trường hợp như vậy, có thể tồn tại nhiều hơn một quy tắc kiểu cho một phần tử. Do đó, World Wide Web Consortium (W3C) xác định các quy tắc sau để xác định kiểu nào sẽ áp dụng cho một phần tử. Việc sắp xếp các quy tắc kiểu bắt đầu bằng quy tắc số 1. Nếu quy tắc kiểu phù hợp với quy tắc số 1 thì quá trình tìm kiếm kết thúc; nếu không thì tìm kiếm tiếp tục với quy tắc số 2 và cứ tiếp tục như vậy.

  1. Tìm tất cả các khai báo thuộc tính cho một phần tử được đề cập. Áp dụng các quy tắc kiểu nếu tên phần tử khớp với phần tử trong bộ chọn. Nếu không có quy tắc kiểu nào được xác định cho một phần tử, phần tử sẽ kế thừa các quy tắc kiểu được xác định cho phần tử cha. Tuy nhiên, nếu phần tử mẹ không có bất kỳ quy tắc kiểu nào được xác định, thì phần tử sẽ được hiển thị với các giá trị mặc định.

  2. Các quy tắc kiểu được khai báo là quan trọng sẽ được xem xét tiếp theo. Quy tắc kiểu có thể được khai báo quan trọng theo cách sử dụng !important như ví dụ sau:

Threat { display: block !important }

Việc thể hiện thuộc tính là important được ưu tiên hơn so với việc thể hiện thông thường.

Lưu ý: Các quy tắc kiểu được xác định là quan trọng được cho là có trọng số cao hơn.

  3. Tiếp theo, gốc của stylesheet được xác định. Một biểu định kiểu có thể có các nguồn sau:

  • Author: Tác giả của tài liệu XML có thể xác định một biểu định kiểu trong tài liệu bên ngoài để định dạng tài liệu XML.
  • User/Reader: Người dùng cuối xem tài liệu XML có thể chỉ định biểu định kiểu cá nhân của họ được sử dụng để định dạng tài liệu XML.
  • User-agent: Trình duyệt được gọi là tác nhân người dùng. Trình duyệt có biểu định kiểu mặc định của riêng nó.

    Các quy tắc kiểu được xác định trong biểu định kiểu của tác giả ghi đè các quy tắc kiểu được xác định trong biểu định kiểu của người dùng. Cả tác giả và biểu định kiểu của người dùng đều ghi đè biểu định kiểu của tác nhân người dùng.

  4. Tiếp theo, tính cụ thể của một bộ chọn được xác định trong đó một bộ chọn cụ thể hơn sẽ ghi đè lên bộ chọn chung. Tính cụ thể được xác định bằng cách thực hiện ba hoạt động sau:

  • Đếm số thuộc tính ID trong bộ chọn.
  • Đếm số lượng thuộc tính lớp trong một bộ chọn.
  • Đếm số lượng tên phần tử trong bộ chọn.

  5. Tiếp theo, viết ba số không có dấu phẩy hoặc dấu cách và theo cùng một trình tự. Số cao hơn, mức độ cao hơn là có độ ưu tiên cao hơn. Các quy tắc có độ cụ thể cao hơn sẽ ghi đè các quy tắc có độ cụ thể thấp hơn. Ví dụ sau đây là danh sách các bộ chọn được sắp xếp theo tính cụ thể:

  #favorite {...} /* a=1;b=0;c=0; specificity = 100 */
  Name, CD, Artist.caps {...} /* a=0;b=1;c=3; specificity = 013 */
  Artist.caps    {...} /* a=0;b=0;c=1; specificity = 001 */

  6. Nếu hai quy tắc có cùng trọng lượng, thì quy tắc cuối cùng được chỉ định sẽ thắng.

5.4.2. Thừa kế trong CSS

Tính kế thừa là khả năng một thực thể có được các đặc điểm của thực thể khác. Trong CSS, các phần tử con kế thừa các quy tắc kiểu được xác định cho phần tử cha. Tuy nhiên, điều này chỉ có thể áp dụng nếu con không có quy tắc kiểu rõ ràng nào được xác định cho nó. Nếu không, quy tắc kiểu được xác định cho phần tử con sẽ ghi đè quy tắc kiểu được xác định cho phần tử cha.

Hình 5.45 cho thấy văn bản trong phần tử Name được in nghiêng. Điều này là do không có quy tắc kiểu nào được xác định cho các phần tử Audio và Name. Do đó, quy tắc kiểu định nghĩa cho CD được kế thừa bởi phần tử con Name.

Kế thừa trong CSS

Hình 5.45: Kế thừa trong CSS

Kiểm tra kiến thức bài 5.4

1. Phát biểu nào sau đây về phân tầng và thừa kế là đúng và phát biểu nào là sai?

(A)

Các tờ khai được sắp xếp theo trọng lượng và xuất xứ.

(B)

Tính kế thừa cho phép một thực thể có được các thuộc tính của một thực thể khác.

(C)

Phần tử con chỉ thừa kế các thuộc tính của phần tử tổ tiên nếu nó là phần tử con ngay lập tức.

(D)

Các tờ khai được sắp xếp theo thứ tự được chỉ định.

(E)

Luôn chỉ có một quy tắc kiểu được xác định cho mọi phần tử.

Tóm tắt về mô-đun

Trong mô-đun này, StyleSheet, bạn đã học về:

Ø StyleSheet

StyleSheet là một tập hợp các quy tắc xác định sự xuất hiện của dữ liệu. Các quy tắc này được viết trong một tệp có đuôi .css. Tệp .css được liên kết với tài liệu XML bằng cách sử dụng hướng dẫn xử lý xml.

Ø Các bộ chọn trong CSS

Bộ chọn xác định các phần tử mà các kiểu sẽ được áp dụng. Các loại bộ chọn khác nhau là bộ chọn đơn, phổ thông và bộ chọn ID.

Ø Thuộc tính và giá trị

CSS cung cấp một số thuộc tính để xác định sự xuất hiện của dữ liệu. Một số thuộc tính này là màu sắc, màu nền, vị trí, phần đệm, phông chữ, căn chỉnh văn bản để đặt tên.

Ø Kế thừa và các tầng trong CSS

Trong CSS, một phần tử con kế thừa các quy tắc kiểu được áp dụng cho phần tử tổ tiên của nó. Ngoài ra, có một số nguồn biểu định kiểu, do đó CSS tuân theo thứ tự xếp tầng được xác định bởi W3C khi áp dụng quy tắc định kiểu cho các phần tử.

» Tiếp: Bài 6.1. Giới thiệu về XSL
« Trước: Bài 5.3. Thuộc tính và Giá trị
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!