Xem mẫu
CƠ BẢN VỀ CSS
Nguyễn Hoàng Tùng
Bộ môn Kỹ thuật phần mềm
nhoangtung@agu.edu.vn
www.nhtung.com
Nội dung chính của slide này
Mở đầu: Font chữ
Mở đầu: Màu sắc
Mở đầu: Đơn vị đo lường
CSS là gì?
Trình duyệt hỗ trợ
Các loại CSS
Khai báo và sử dụng CSS
Các mối quan hệ trong CSS
Áp dụng CSS dùng thuộc tính của thẻ HTML
Phân loại các thuộc tính CSS theo chức năng.
16/08/2014
Lập trình Web
2
Font chữ trong lập trình web
Sử dụng bộ mã font chuẩn (Web safe font) cho phép trang
web tương thích và hiển thị tốt ở tất cả các trình duyệt cho
dù nó cài đặt ở hệ điều hành nào.
Có 03 bộ mã font chuẩn thường dùng:
Bộ font chữ có chân (serif), với các font chuẩn:
• Georgia, Palatino Linotype, Book Antiqua, Palatino, Times New Roman.
Bộ font chữ không chân (sans-serif), với các font chuẩn:
• Arial, Helvetica, Lucida Sans Unicode, Tahoma, Trebuchet MS, Verdana.
Bộ font chữ monospace, với các font chuẩn:
• Courier New, Courier, Lucida Console.
Chỉ nên sử dụng 1 bộ font trong 1 trang web.
16/08/2014
Lập trình Web
3
Màu sắc trong lập trình web
Trong trang web, màu sắc tạo nên sức hút, tâm lý và phong
cách. Người ta có thể dùng nghệ thuật phối màu để nói lên ý
tưởng của mình mà không cần đến lời nói hay câu văn.
Trong trang web, màu sắc nên nằm trong giới hạn từ 2 đến 6
màu. Ngoài ra cần chú ý đến màu sắc thương hiệu khi thiết
kế website cho khách hàng.
Có 140 màu thường dùng trong lập trình web (gồm 17 màu
chuẩn và 123 màu khác), các màu này hiển thị tốt trên tất cả
các trình duyệt.
16/08/2014
Lập trình Web
4
Màu sắc trong lập trình web
Màu trong CSS thường được dùng thông qua các dạng:
Sử dụng trực tiếp tên màu
• black, seagreen, aquamarine, … , white
Sử dụng mã màu (HEX) theo cú pháp #RRGGBB
• #000000, #2E8B57, #7FFFD4, … , #FFFFFF
Sử dụng hệ màu RGB theo cú pháp rgb(red, green, blue)
• rgb(0, 0, 0); rgb(46,139,87); rgb(127,255,212); … ; rgb(255,255,255)
Để lấy tên màu, mã màu ta thường dùng một phần mềm xử
lý ảnh hoặc tra danh sách màu trên w3schools,…
16/08/2014
Lập trình Web
5
nguon tai.lieu . vn
Nguyễn Hoàng Tùng
Bộ môn Kỹ thuật phần mềm
nhoangtung@agu.edu.vn
www.nhtung.com
Nội dung chính của slide này
Mở đầu: Font chữ
Mở đầu: Màu sắc
Mở đầu: Đơn vị đo lường
CSS là gì?
Trình duyệt hỗ trợ
Các loại CSS
Khai báo và sử dụng CSS
Các mối quan hệ trong CSS
Áp dụng CSS dùng thuộc tính của thẻ HTML
Phân loại các thuộc tính CSS theo chức năng.
16/08/2014
Lập trình Web
2
Font chữ trong lập trình web
Sử dụng bộ mã font chuẩn (Web safe font) cho phép trang
web tương thích và hiển thị tốt ở tất cả các trình duyệt cho
dù nó cài đặt ở hệ điều hành nào.
Có 03 bộ mã font chuẩn thường dùng:
Bộ font chữ có chân (serif), với các font chuẩn:
• Georgia, Palatino Linotype, Book Antiqua, Palatino, Times New Roman.
Bộ font chữ không chân (sans-serif), với các font chuẩn:
• Arial, Helvetica, Lucida Sans Unicode, Tahoma, Trebuchet MS, Verdana.
Bộ font chữ monospace, với các font chuẩn:
• Courier New, Courier, Lucida Console.
Chỉ nên sử dụng 1 bộ font trong 1 trang web.
16/08/2014
Lập trình Web
3
Màu sắc trong lập trình web
Trong trang web, màu sắc tạo nên sức hút, tâm lý và phong
cách. Người ta có thể dùng nghệ thuật phối màu để nói lên ý
tưởng của mình mà không cần đến lời nói hay câu văn.
Trong trang web, màu sắc nên nằm trong giới hạn từ 2 đến 6
màu. Ngoài ra cần chú ý đến màu sắc thương hiệu khi thiết
kế website cho khách hàng.
Có 140 màu thường dùng trong lập trình web (gồm 17 màu
chuẩn và 123 màu khác), các màu này hiển thị tốt trên tất cả
các trình duyệt.
16/08/2014
Lập trình Web
4
Màu sắc trong lập trình web
Màu trong CSS thường được dùng thông qua các dạng:
Sử dụng trực tiếp tên màu
• black, seagreen, aquamarine, … , white
Sử dụng mã màu (HEX) theo cú pháp #RRGGBB
• #000000, #2E8B57, #7FFFD4, … , #FFFFFF
Sử dụng hệ màu RGB theo cú pháp rgb(red, green, blue)
• rgb(0, 0, 0); rgb(46,139,87); rgb(127,255,212); … ; rgb(255,255,255)
Để lấy tên màu, mã màu ta thường dùng một phần mềm xử
lý ảnh hoặc tra danh sách màu trên w3schools,…
16/08/2014
Lập trình Web
5