Có bao nhiều loại CSS
Với Cascading Style Sheets – CSS giúp chúng ta có thể định kiểu cho bất kỳ phần tử HTML nào trên trang web. Một phần tử trên trang có thể sử dụng các bộ chọn khác nhau như bộ chọn class, bộ chọn id hoặc bộ chọn thẻ. Cũng có nhiều cách nhúng CSS:
Vấn đề xảy ra khi một phần tử HTML chịu tác động của nhiều bộ chọn với nhiều giá trị giống nhau ví dụ như định kiểu màu sắc cho chữ, thì nó sẽ ưu tiên giá trị nào để thiết lập định kiểu cho thẻ. Và với một website làm sao để có thể tối ưu việc thiết kế để có thể tái sử dụng lại CSS, làm cho giữa các trang web được đồng nhất về giao diện và rất nhiều khía cạnh khác như tối ưu tốc độ load trang, bảo hành, bảo trì được dễ dàng và hiệu quả. Hôm nay Tìm ở đây sẽ tổng hợp cách sử dụng CSS căn bản, thứ tự ưu tiên trong CSS và tư vấn để những bạn thiết kế web có thể tối ưu trong việc thiết kế WebSite của mình. Nội dung I. NHẮC LẠI CSS:Có 3 cách sử dụng CSS để định kiểu cho các thẻ trên trang HTML: 1. InlineĐịnh dạng CSS được đặt trực tiếp vào bên trong mỗi phần tử HTML thông qua thuộc tính style. 2. InternalĐịnh dạng CSS đặt trong thẻ và nằm bên trong trang HTML. Các định dạng CSS này sẽ được đưa vào các đối tượng thông qua 3 dạng rule: a. Rule dạng THẺ: Được định nghĩa bằng tên_thẻ {…}, sẽ tác động lên tất cả các thẻ trên trang đó. Như ví dụ bên dưới, tất các các thẻ phần nội dung sẽ có màu chữ là đỏ 3. ExternalCũng có 3 dạng (thẻ, class, id) như Internal nhưng các rule không được đặt trong một trang .html (Chỉ dùng cho duy nhất trang .html này) mà được đặt trong file .css riêng và có thể gọi từ một hoặc nhiều trang .html
II. CHỒNG CHÉO CSS VÀ THỨ TỰ ƯU TIÊN.– Sự chồng chéo xảy ra khi một đối tượng chịu tác động bởi nhiều rule khác nhau. 1. Dạng chồng chéo 1Chồng chéo giữa các rule khác loại. Nhận xét: Thứ tự ưu tiên tỉ lệ nghịch với phạm vi tác động. Dạng rule có phạm vi tác động càng cao thì ưu tiên càng thấp, ngược lại dạng rule có phạm vi tác động càng thấp thì ưu tiên càng cao. Ví dụ 1.1Đoạn văn “Chào mừng bạn đến với khoá học CSS!” chịu tác động bởi 4 rule thuộc 4 dạng khác nhau (inline, thẻ p, class .p1, id #p2). 4 rule này quy định 4 màu chữ (color) khác nhau. Ví dụ 1.2Bây giờ nếu ta bỏ đi style=”color:black” (rule dạng inline) thì theo bạn kết quả sẽ như thế nào? Kết quả dòng chữ “Chào mừng bạn đến với khoá học CSS!” sẽ có màu theo quy định của rule dạng id #p2 (màu blue) Ví dụ 1.3Nếu ta tiếp tục bỏ đi thuộc tính id (rule dạng id) Kết quả chữ “Chào mừng bạn đến với khoá học CSS!” sẽ có màu theo quy định của rule dạng class .p1 (màu green) Ví dụ 1.4Ta có thể sử dụng !important để tăng mức độ ưu tiên.
Ví dụ 1.5
2. Dạng chồng chéo 2Chồng chéo do nhiều rule của cùng một loại nào đó. Ví dụ 2.1
Ví dụ 2.2Trong ví dụ trên thì đối tượng đều chịu tác động bởi 2 rule dạng class .p1 và .p2. Vì .p2 nằm sau .p1 nên màu sẽ theo rule .p2 Ví dụ 2.3Một rule thiết lập ở dạng Internal (tức trong thẻ ) ví dụ .p2 {color:blue} và một rule thiết lập ở dạng External (file mystyle.css rồi nhúng vào trang html) ví dụ là .p1 { color: red }. |