Một số quy ước về cách viết CSS

Simple CSS Standard Edition WallPearl Bài 2: Một Số Quy Ước Về Cách Viết CSS  2.1 Cú pháp CSS: Để tìm hiểu cú pháp CSS thử xem ví dụ sau Ví dụ: Để định màu cho trang web xanh nhạt (light cyan) dùng code sau: + Trong HTML: + Trong CSS: body { background-color:#00BFF3; } Nhìn qua ví dụ nhiều thấy mối tương đồng thuộc tính HTML CSS bạn học qua HTML dễ dàng tiếp thu CSS Đó chút lợi câu chuyện hành trình mà Pearl nói trước Nhưng khơng cả, nhìn vào ví dụ bạn xem có giống với cấu trúc sau không Cú pháp CSS bản: Selector { property:value; } Trong đó: + Selector: Các đối tượng mà áp dụng thuộc tính trình bày Nó tag HTML, class hay id (chúng ta học thành phần học sau) Ví dụ: body, h2, p, img, #title, #content, username,… Trong CSS viết tên selector theo tên tag, class, id Chúng ta cịn viết tên selector theo phân cấp để ảnh #entry, viết selector #entry img, thuộc tính định áp dụng riêng cho ảnh nằm #entry Khi viết tên cho class, đơi có nhiều thành phần có class đó, ví dụ thẻ img thẻ a có class tên vistors lại hai đối tượng khác nhau, ảnh người thăm, liên kết tới trang người thăm Nên Trang 10 Simple CSS Standard Edition WallPearl viết CSS ta ghi visitors { width:50 } ảnh hưởng tới hai thành phần Nên trường hợp này, bạn có ý dùng CSS riêng phần ảnh ghi img visitors thơi Một lối viết tên selector dựa tên thuộc tính có HTML Ví dụ HTML ta có đoạn mã vầy: Để áp dụng thuộc tính CSS cho riêng tìm kiếm dùng selector input[name=”Search”] Ngoài việc viết tên selector cụ thể, dùng selector đại diện * { color:red } tác động đến tất thành phần có trang web làm cho chúng có text màu đỏ + Property: Chính thuộc tính quy định cách trình bày Ví dụ: backgroundcolor, font-family, color, padding, margin,… Mỗi thuộc tính CSS phải gán giá trị Nếu có nhiều thuộc tính cho selector phải dùng dấu ; (chấm phẩy) để phân cách thuộc tính Tất thuộc tính selector đặt cặp ngoặc nhọn sau selector Ví dụ: body { background:#FFF; color:#FF0000; font-size:14pt } Để dễ đọc hơn, bạn nên viết thuộc tính CSS dịng Tuy nhiên, làm tăng dung lượng lưu trữ CSS bạn Ví dụ: body { background:#FFF; bolor:#FF0000; font-size:14pt } Đối với trang web có nhiều thành phần có số thuộc tính, thực gom gọn lại sau: h1 { color:#0000FF; text-transform:uppercase } Trang 11 Simple CSS Standard Edition WallPearl h2 { color:#0000FF; text-transform:uppercase; } h3 { color:#0000FF; text-transform:uppercase; }  h1, h2, h3 { color:#0000FF; text-transform:uppercase; } + Value: Giá trị thuộc tính Ví dụ: ví dụ value #FFF dùng để định màu trắng cho trang Đối với giá trị có khoảng trắng, bạn nên đặt tất dấu ngoặc kép Ví dụ: font-family:”Times New Roman” Đối với giá trị đơn vị đo, không nên đặt khoảng cách số đo với đơn vị Ví dụ: width:100 px Nó làm CSS bạn bị vơ hiệu Mozilla/Firefox hay Netscape Chú thích CSS: Cũng nhiều ngơn ngữ web khác Trong CSS, viết thích cho đoạn code để dễ dàng tìm, sửa chữa lần cập nhật sau Chú thích CSS viết sau /* Nội dung thích */ Ví dụ: /* Màu chữ cho trang web */ body { color:red } Trang 12 Simple CSS Standard Edition 2.2 WallPearl Đơn vị CSS: Trong CSS2 hỗ trợ loại đơn vị đơn vị đo chiều dài đơn vị đo góc, thời gian, cường độ âm màu sắc Tuy nhiên, sử dụng phổ biến đơn vị đo chiều dài màu sắc Sau bảng liệt kê đơn vị chiều dài màu sắc dùng CSS Đơn vị chiều dài Đơn vị % in cm mm Mô tả Phần trăm Inch (1 inch = 2.54 cm) Centimeter Millimeter em em tương đương kích thước font hành, font hành có kích cỡ 14px em = 14 px Đây đơn vị hữu ích việc hiển thị trang web Đơn vị Mô tả ex ex chiều cao chữ x in thường font hành Do đó, đơn vị khơng phụ thuộc kích cỡ font chữ mà phụ thuộc loại font chữ cỡ 14px chiều cao chữ x font Times font Tohama khác pt Point (1 pt = 1/72 inch) pc Pica (1 pc = 12 pt) px Pixels (điểm ảnh hình máy tính) Đơn vị màu sắc Đơn vị Color-name RGB (r,g,b) RGB (%r,%g,%b) Hexadecimal RGB Mô tả Tên màu tiếng Anh Ví dụ: black, white, red, green, blue, cyan, magenta,… Màu RGB với giá trị R, G, B có trị từ – 255 kết hợp với tạo vô số màu Màu RGB với giá trị R, G, B có trị từ – 100% kết hợp Mã màu RGB dạng hệ thập lục Ví dụ: #FFFFFF: trắng, #000000: đen, #FF00FF: đỏ tươi Trang 13 Simple CSS Standard Edition 2.3 WallPearl Vị trí đặt CSS: Ở tìm hiểu cú pháp viết CSS, cịn đặt đâu tài liệu HTML? Trong phần này, Pearl xin giới thiệu với bạn vấn đề Chúng ta có ba cách khác để nhúng CSS vào tài liệu HTML + Cách 1: Nội tuyến (kiểu thuộc tính) Đây phương pháp nguyên thủy để nhúng CSS vào tài liệu HTML cách nhúng vào thẻ HTML muốn áp dụng Và dĩ nhiên trường hợp không cần selector 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 khơng nên dùng cách Ở ví dụ sau tiến hành định màu trắng cho trang màu chữ xanh cho đoạn văn sau: Ví dụ

^_^ Welcome To WallPearl’s Blog ^_^

+ Cách 2: Bên (thẻ style) Thật nhìn kỹ nhận phương cách thay cách thứ cách rút tất thuộc tính CSS vào thẻ style (để tiện cho cơng tác bảo trì, sửa chữa mà) Trang 14 Simple CSS Standard Edition WallPearl Cũng ví dụ làm trang web có màu trắng, đoạn văn chữ xanh lá, thể sau: Ví dụ body { background-color:#FFF } p { color:#00FF00 }

^_^ Welcome To WallPearl’s Blog ^_^

Lưu ý: Thẻ style nên đặt thẻ head Đối với trình duyệt cũ, khơng thể nhận thẻ Theo mặc định, trình duyệt khơng nhận thẻ phần nội dung chứa thẻ Như ví dụ trên, trình duyệt khơng hỗ trợ thẻ style dịng CSS: body {background-color:#FFF } p { color:#00FF00 } trình duyệt Để tránh tình trạng này, bạn nên đưa vào thêm dấu sau khối code CSS Như ví dụ viết lại là: Trang 15 Simple CSS Standard Edition WallPearl + Cách 3: Bên (liên kết với file CSS bên ngoài) Tương tự cách thay đặt tất mã CSS thẻ style đưa chúng vào file CSS (có phần mở rộng css) bên ngồi liên kết vào trang web thuộc tính href thẻ link Đây cách làm khuyến cáo, đặc biệt hữu ích cho việc đồng hay bảo trì website lớn sử dụng kiểu mẫu Các ví dụ sách trình bày theo kiểu External CSS File Chỉ cần thay đổi nội dung file CSS, tất trang web cập nhật Web Pages Nào mở Notepad lên thử thực theo ví dụ sau: Đầu tiên tạo file vidu.html có nội dung sau: Trang 16 Simple CSS Standard Edition WallPearl Ví dụ

^_^ Welcome To WallPearl’s Blog ^_^

Sau tạo file style.css với nội dung: body { background-color:#FFF } p{ color:#00FF00 } Hãy đặt file vào thư mục, mở file vidu.html trình duyệt bạn xem thành Lưu ý: Để lưu file với đuôi khác txt Notepad chọn Save as type All Files Có thể chọn Encoding UTF-8, bạn thích CSS tiếng Việt Trong CSS cịn sử dụng thuộc tính @import để nhập file CSS vào CSS hành Cú pháp: @import url(link) Trang 17 Simple CSS Standard Edition WallPearl Sự ưu tiên: 2.4 Trước thực thi CSS cho trang web Trình duyệt đọc tồn CSS mà trang web áp dụng, bao gồm: CSS mặc định trình duyệt, file CSS bên liên kết vào trang web, CSS nhúng thẻ CSS nội tuyến Sau đó, trình duyệt tổng hợp tồn CSS vào CSS ảo, có thuộc tính CSS giống thuộc tính CSS nằm sau ưu tiên sử dụng (cái giống chương trình “Ai Là Triệu Phú” truyền hình vậy, câu trả lời sau chấp nhận (smile)) Theo ngun tắc trình duyệt bạn ưu tiên cho CSS nội tuyến > CSS bên > CSS bên > CSS mặc định trình duyệt Ví dụ: Trong trang web có liên kết tới file style.css có nội dung sau: p{ color:#333; text-align:left; width:500px } thẻ thẻ có đoạn CSS liên quan: p{ background-color:#FF00FF; text-align:right; width:100%; height:150px } phần nội dung trang web có sử dụng CSS nội tuyến: