Cấu trúc và sức mạnh của CSS

Vậy là chúng ta đã có một trải nghiệm mới về CSS thông qua cách mà CSS điều khiển và cung cấp các thuộc tính cho một đối tượng trên website (đối tượng có thể là một đoạn văn bản, hình ảnh hay dòng kẻ, thậm chí là từng ký tự).

Cấu trúc của CSS rất đơn giản, bao gồm 3 thành phần chính là Đối tượng - Thuộc tính - Giá trị.

#abc { padding-top: 10px; }

Trong ví dụ trên ta có thể thấy đối tượng đặt tên là abc và được ép cho cách mép trên 10px.

Ngoài ra các bạn còn thấy dấu "#" đứng trước tiên, đó là quy định của CSS để hiểu đối tượng abc được markup trên file X(HTML) là một ID, có nghĩa là trên toàn bộ trang web thì đối tượng abc là duy nhất. Sở dĩ tôi phải nói thêm về ID để các bạn không bị lầm tưởng giữa ID và CLASS (2 cái này khác nhau hoàn toàn nhé).

Đến đây các bạn đã có thể thấy rằng CSS thật là đơn giản và dễ hiểu. Nhưng theo tôi sức mạnh thực sự của CSS là nằm ở tính kế thừa. Có nghĩa là bạn có thể gán thuộc tính CSS cho rất nhiều các đối tượng trên website của bạn mà không phải viết lại. Hay như những đối tượng con nằm bên trong 1 đối tượng cha bao bọc nó thì mặc nhiên là nó được thừa hưởng toàn bộ thuộc tính CSS mà ta đã gán cho đối tượng cha

Chẳng hạn như đoạn CSS dưới đấy

body { background: #CCCCCC; font-family: "Trebuchet MS", Verdana; }

Ta có thể thấy rằng CSS gán thuộc tính cho toàn bộ phần body. Tất cả phần BODY sẽ có màu nền là màu #CCCCCC và font chữ là "Trebuchet MS", Verdana. Mà ta không cần phải khai báo thêm gì cho các đối tượng nằm trong thẻ BODY

Tương tự như vậy ta có thể thử với một số đối tượng với đoạn CSS sau:

h1 { font-family: Georgia, sans-serif; }
p { font-family: Tahoma, serif; }

Ngoài ra với CSS ta có thể viết gộp cho một số đối tượng.

h1, h2, h3, h4, h5, h6 { color: #009900; font-family: Georgia, sans-serif; }

Ta có thể chú thích từng đoạn CSS để người xem dễ hiểu.

/* Chèn đoạn chú thích ở đây */

Set as favorite

Bookmark

Comments (9) Add Comment