Giới thiệu CSS, một số quy ước về cách viết CSS

Simple CSS Standard Edition WallPearl Bài 1: Giới Thiệu  1.1 CSS gì? Trong lĩnh vực xây dựng, có trang trí nội thất; lĩnh vực thẩm mỹ - làm đẹp, có kỹ thuật make-up; cịn lĩnh vực thiết kế web có CSS Đây định nghĩa giàu hình ảnh Pearl thơi (nhưng thực tế (smile) Cịn CSS (Cascading Style Sheets mà Pearl tạm dịch tờ mẫu theo Style Sheets) ngôn ngữ quy định cách trình bày cho tài liệu viết HTML, XHTML, XML, SVG, hay UML,… 1.2 Tại CSS? Nếu bạn học qua HTML biết HTML hỗ trợ số thuộc tính định dạng cho text, picture, table, … khơng thật phong phú xác hệ thống CSS cung cấp cho bạn hàng trăm thuộc tính trình bày dành cho đối tượng với sáng tạo cao kết hợp thuộc tính giúp mang lại hiệu Ngoài ra, CSS hỗ trợ tất trình duyệt, nên bạn hồn tồn tự tin trang web hiển thị “như nhau” dù hệ thống sử dụng Windows, Linux hay máy Mac miễn bạn sử dụng phiên trình duyệt Sử dụng mã định dạng trực tiếp HTML tốn hao nhiều thời gian thiết kế dung lượng lưu trữ đĩa cứng Trong CSS đưa phương thức “tờ mẫu ngoại” giúp áp dụng khuôn mẫu chuẩn từ file CSS ngồi Nó thật có hiệu đồng bạn tạo website có hàng trăm trang hay bạn muốn thay đổi thuộc tính trình bày Hãy thử tưởng tượng bạn có website với hàng trăm trang bạn muốn thay đổi font chữ hay màu chữ cho thành phần Đó thật công việc buồn chán tốn nhiều thời gian Nhưng với việc sử dụng CSS việc hồn tồn đơn giản bạn có trị ma thuật Ngồi ra, CSS cịn cho phép bạn áp đặt kiểu trình bày thích hợp cho phương tiện khác hình máy tính, máy in, điện thoại,… Trang Simple CSS Standard Edition WallPearl CSS cập nhật liên tục mang lại trình bày phức tạp tinh vi 1.3 Học CSS cần gì? Thật khơng có điều kiện quy định học CSS Nhưng khía cạnh chuẩn bị cho hành trình dù dễ khơng thừa giúp bạn làm tốt Hành trang thứ mà bạn nên có kiến thức HTML, khơng thật cần thiết bạn dùng CSS để trình bày cho trang HTML có sẵn (như làm skin cho blog chẳng hạn), bạn cần biết ý nghĩa số thẻ HTML, có ích bạn viết CSS Tuy nhiên, bạn muốn tự thiết kế, trình bày trang web riêng tùy theo quy mô trang web, bạn cần phải học thêm HTML, XHMTL, Javascript số ngôn ngữ lập trình web khác Hành trang thứ hai trình soạn thảo văn để bạn viết mã CSS Ở đây, Pearl khuyên bạn nên sử dụng trình soạn thảo đơn giản Notepad, Wordpad Windows hay Pico Linux, Simple Text Mac Nó giúp bạn code bạn khơng có can thiệt từ chương trình dùng DreamWeaver, FrontPage, Golive,… Hành trang thứ ba bạn lả phiên trình duyệt mà bạn thường dùng Và điều mà Pearl muốn đề nghị bạn dành thời gian để thực hành CSS sau học thật có ích cho bạn Thực hành giúp bạn vận dụng nhuần nhuyễn học mà cịn có tác dụng explain ngược lại lý thuyết mà bạn chưa hiểu Bây bạn thật chuẩn bị chuyển qua chương để thật bước chân vào giới CSS Trang 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: