Bài 3: Đơn vị CSS và vị trí đặt CSS

1. Đơn vị trong CSS
Trong CSS2 hỗ trợ các loại đơn vị là đơn vị đo chiều dài và đơn vị đo góc, thời gian,cường độ âm thanh và màu sắc. Tuy nhiên, sử dụng phổ biến nhất vẫn là đơn vị đo hiều dài và màu sắc. Sau đây liệt kê các đơn vị chiều dài và màu sắc dùng trong CSS.
Đơn vị chiều dài
% - Phần trăm
in - Inch(1 inch = 2.54 cm)
cm - Centimeter
mm - Millimeter
em - 1 em tương đương kích thước font hiện hành, nếu font hiện hành có kích cỡ 14px thì 1 em = 14 px. Đây là một đơn vị rất hữu ích trong việc hiển thị trang web.
ex - 1 ex bằng chiều cao của chữ x in thường của font hiện hành.
pt - Point (1 pt = 1/72 inch)
pc - Pica (1 pc = 12 pt)
px - Pixels (điểm ảnh trên màn hình máy tính)

Đơn vị màu sắc
Color-name : Tên màu tiếng Anh. Ví dụ: black, white, red, green, blue, cyan, magenta,…
RGB (r,g,b): Màu RGB với 3 giá trị R, G, B có trị từ 0 – 255 kết hợp với nhau tạo ra vô số màu.
RGB (%r,%g,%b) :Màu RGB với 3 giá trị R, G, B có trị từ 0 – 100% kết hợp.
Hexadecimal RGB :Mã màu RGB dạng hệ thập lục. Ví dụ: #FFFFFF: trắng, #000000: đen, #FF00FF: đỏ tươi.

2. Vị trí đặt CSS

Chúng ta có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML
+ Cách 1: Nội tuyến (kiểu thuộc tính)
Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng. Và dĩ nhiên trong trường hợp này chúng ta sẽ không cần selector trong cú pháp.
Lưu ý: Nếu bạn muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì không nên dùng cách này.

+ Cách 2: Bên trong (thẻ style)
Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay thế cách thứ nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style (để tiện cho công tác bảo trì, sửa chữa ấy mà).

+ Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài)
Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link.
Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu. Các ví dụ trong sách này cũng được trình bày theo kiểu này.
Cú pháp link tới 1 file css (đặt trong thẻ head)

link rel="stylesheet" type="text/css" href="style.css">

Sự ưu tiên
Trước khi thực thi CSS cho một trang web. Trình duyệt sẽ đọc toàn bộ CSS mà trang web có thể được áp dụng, bao gồm: CSS mặc định của trình duyệt, file CSS bên ngoài liên kết vào trang web, CSS nhúng trong thẻ style> và các CSS nội tuyến. Sau đó, trình duyệt sẽ tổng hợp toàn bộ CSS này vào một CSS ảo, và nếu có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau sẽ được ưu tiên sử dụng . Theo nguyên tắc đó trình duyệt của bạn sẽ ưu tiên cho các CSS nội tuyến > CSS bên trong > CSS bên ngoài > CSS mặc định của trình duyệt.

Còn nữa......