Cơ bản về cascading style sheets

Cơ cascading style sheets Cơ cascading style sheets Bởi: Khoa CNTT ĐHSP KT Hưng Yên Khái niệm Cascading style sheets (CSS) CSS (Cascading 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,… 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 hoàn toà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 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 hoàn toàn đơn giản bạn có trò ma thuật Ngoài ra, CSS 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,… CSS cập nhật liên tục mang lại trình bày phức tạp tinh vi 1/11 Cơ cascading style sheets Cách sử dụng Style 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 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, 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 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 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”] 2/11 Cơ cascading style sheets 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ụ: background- color, 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 } h2 { color:#0000FF; text-transform:uppercase; } h3 { color:#0000FF; 3/11 Cơ cascading style sheets 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 } Đơ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 Mô tả vị % Phần trăm in Inch(1 inch=2.54 cm) Đơn Mô vị tả 4/11 Cơ cascading style sheets cm Centimeter mm Millimeter ex ex chiều cao chữ x in thường font hành Do đó, đơn vị 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 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 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ị Mô tả 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 giá trị R, G, B có trị từ – 255 kết hợp với tạo vô số màu RGB (%r,%g,%b) Màu RGB với giá trị R, G, B có trị từ – 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 Các loại Style ứng dụng website Ở tìm hiểu cú pháp viết CSS, đặ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 Style Sheet "ngoại" (External Style) 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 liên kết vào trang web thuộc tính href thẻ link 5/11 Cơ cascading style sheets Đâ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 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: Ví dụ ^_^ Welcome To WallPearl’s Blog ^_^ 6/11 Cơ cascading style sheets 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 sử dụng thuộc tính @import để nhập file CSS vào CSS hành Cú pháp: @import url(link) Style sheet "nội" (Internal 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à) Cũng ví dụ làm trang web có màu trắng, đoạn văn chữ xanh lá, thể sau: Ví dụ 7/11 Cơ cascading style sheets 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ũ, 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 {backgroundcolor:#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 trước > sau khối code CSS Như ví dụ viết lại là: body { background-color:#FFF } p { color:#00FF00 } > Style sheet "địa phương" (Inline Style) Đâ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 8/11 Cơ cascading style sheets Ở 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 ^_^ Sự ưu tiên: Trước thực thi CSS cho trang web Trình duyệt đọc toà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 toà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 nguyên 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 } Trong thẻ thẻ có đoạn CSS liên quan: p{ 9/11 Cơ cascading style sheets background-color:#FF00FF; text-align:right; width:100%; height:150px } Trong phần nội dung trang web có sử dụng CSS nội tuyến: [...].. .Cơ bản về cascading style sheets text-align:left !important; color:#333 !important background-color:#FF00FF; width:100%; height:150px !important; text-align:right; ... dụ

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

6/11 Cơ cascading style sheets Sau tạo file style. css với... (External Style) 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 liên kết vào trang web thuộc tính href thẻ link 5/11 Cơ cascading style sheets Đây... sau: Ví dụ 7/11 Cơ cascading style sheets body { background-color:#FFF } p { color:#00FF00 } < /style>

^_^ Welcome To WallPearl’s