Nội dung

THIẾT KẾ WEBSITE THƯƠNG MẠI ĐIỆN TỬ Chương 3: Giới thiệu các ngôn ngữ và kỹ thuật trong phát triển website GV. Huỳnh Đỗ Bảo Châu 1 4. Cascading Style Sheets (CSS) • CSS là một chuẩn để định dạng trang Web. – CSS mở rộng ngôn ngữ HTML truyền thống với gần 200 thuộc tính về kiểu dáng có thể áp dụng cho các thẻ HTML. – Lập trình Web có thêm nhiều lựa chọn về màu sắc, khoảng cách, vị trí, biên, lề, con trỏ, … – CSS phá bỏ rào cản HTML bằng cách cho phép có thêm nhiều đặc tả thuộc tính chuẩn để phục vụ cho việc dàn trang và định dạng. – Những thuộc tính này được áp dụng vào trong tài liệu mà không phá vỡ cấu trúc HTML đã có sẵn. 2 Tích hợp CSS vào trang HTML • Có có 3 cách: – Dùng inline style – Nhúng các style sheet – Liên kết với một style sheet 3 Tích hợp CSS vào trang HTML Cách 1: Nội tuyến (kiểu thuộc tính). - Đây là 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. - Lưu ý: Nếu 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. Ví dụ:

…

4 Tích hợp CSS vào trang HTML Cách 2: Bên trong (thẻ style) - Bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style - Thuận tiện cho công tác bảo trì, sửa chữa về sau. - Lưu ý: Thẻ style nên đặt trong thẻ head. 5 Tích hợp CSS vào trang HTML Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài) - 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). - Đặ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. - Đặt trong thẻ head - Cú pháp để chèn file css vào trang là: Hoặc 6 Tích hợp CSS vào trang HTML Cách 3 (tt) 7 Cú pháp CSS Selector {property:value;} Trong đó: • Selector: đối tượng áp dụng thuộc tính trình bày. • Property: thuộc tính quy định cách trình bày (color, background-color, font-family, padding, margin,…) • Value: giá trị của thuộc tính. Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một thuộc tính cho một selector thì phải dùng một dấu “;” để phân cách các thuộc tính. Tất cả các thuộc tính trong một selector sẽ được đặt trong một cặp ngoặc nhọn sau selector. Đối với một giá trị có khoảng trắng, đặt tất cả trong một dấu ngoặc kép. Đối với giá trị là đơn vị đo, không đặt khoảng cách giữa số đo với đơn vị. 8 Selector – Ví dụ Selector Kết thúc một thuộc tính body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; } Khối khai báo Giá trị cho thuộc tính Tên thuộc tính Slide 9 9 Chú thích trong CSS • Cách viết chú thích cho đoạn code: /* Nội dung chú thích */ • Ví dụ: /* Màu chữ cho trang web là màu đỏ */ body { color:red } .name { background-color:#339; font-weight:bold; } 10