Bài giảng Lập trình Web (Nguyễn Hoàng Tùng) Chương 3
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (4.67 MB, 59 trang )
CƠ BẢN VỀ CSS
Nguyễn Hồng Tùng
Bộ mơn Kỹ thuật phần mềm
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
Đơn vị đo lường trong lập trình web
Danh sách các đơn vị đo hỗ trợ:
16/08/2014
Lập trình Web
6
CSS là gì?
CSS: Cascading Style Sheet – Được phát triển bởi Bert Bos
và Håkon Lie (thuộc nhóm nghiên cứu W3C). Mục đích của
dự án là tạo ra một "ngơn ngữ phong cách" được tích hợp
vào HTML, XHTML để giải quyết một số vấn đề về cách thức
hiển thị và định dạng dữ liệu.
CSS chỉ được xem như là một chuẩn cho tới khi màn hình
máy tính cho phép hiển thị đầy đủ các chức năng đa phương
tiện.
CSS chính thức được đưa vào HTML 4.0, kể từ ngày phát
hành phiên bản đầu tiên vào 17/12/1996.
Có thể định nghĩa nhiều CSS vào một thẻ HTML (Cascading).
16/08/2014
Lập trình Web
7
Các phiên bản CSS
12/1996: CSS1 ra đời. Hầu hết các trình duyệt hiện tại hỗ trợ
đầy đủ CSS1. W3C khơng cịn duy trì khuyến nghị CSS1.
Chỉ bao gồm trình bày văn bản, màu sắc, định dạng nền.
05/1998: CSS2 ra đời, bổ sung thêm các tính năng nâng cao
cho CSS1. Hầu hết các trình duyệt hiện tại hỗ trợ đầy đủ
CSS2. W3C cũng khơng cịn duy trì khuyến nghị CSS2.
Cho phép định vị các yếu tố trên trang, hỗ trợ in ấn,…
02/2004: CSS2.1 ra đời, sửa chữa sai sót trong CSS2, loại
bỏ các tính năng tương thích kém. Được W3C khuyến nghị
nên dùng.
16/08/2014
Lập trình Web
8
Các phiên bản CSS
06/1999: Dự thảo CSS3 đầu tiên được công bố, CSS3 được
chia thành một số tài liệu riêng biệt được gọi là "mô-đun".
Mỗi mô-đun bổ sung thêm khả năng mới hoặc mở rộng các
tính năng được trình bày trong CSS2. CSS3 đang trong quá
trình phát triển, hiện tại chưa có trình duyệt nào hỗ trợ đầy
đủ CSS3.
16/08/2014
Lập trình Web
9
Trình duyệt hỗ trợ
Một số thuộc tính CSS3 cần phải thêm tiếp đầu ngữ tương
ứng với mỗi trình duyệt.
Ví dụ:
“Xem thêm: />16/08/2014
Lập trình Web
10
Phân loại
Có 3 loại CSS (gọi tắt là style):
Inline style (được quy định trong 1 thẻ HTML cụ thể),
Internal style (được quy định trong thẻ <head> của trang HTML),
External style (được quy định trong file .CSS ngoài).
Thứ tự ưu tiên:
Inline > Internal > External.
Trong 1 file CSS, mức ưu tiên tăng dần từ trên xuống.
Để đặt ưu tiên trong
CSS, ta dùng từ khóa
!important
16/08/2014
Lập trình Web
11
Phân loại
Inline style:
Chỉ có hiệu lực đối với thẻ chứa style,
Dùng thuộc tính style để thể hiện style trong thẻ liên quan.
16/08/2014
Lập trình Web
12
Phân loại
Internal style:
Đặt trong phần <head>...</head>,
Dùng thẻ <style> để thể hiện.
16/08/2014
Lập trình Web
13
Phân loại
External style:
Định nghĩa style trong file riêng (thường có đuôi .CSS).
Nhúng file CSS đã định nghĩa vào trang web:
<link rel="stylesheet" type="text/css" href="mystyle.css" />
(Thẻ này phải nằm trong phần <head>...</head>)
Tập tin
mystyle.css
Mã nhúng
mystyle.css
vào HTML
16/08/2014
Lập trình Web
14
Khai báo và sử dụng style
Style phân biệt chữ hoa và chữ thường.
Cú pháp chung:
Các Declaration ngăn cách nhau bởi dấu chấm phẩy (;).
Trong mỗi Declaration có 2 phần Property và Value, ngăn nhau
bởi dấu hai chấm (:).
Chú thích trong style: /* Dịng chú thích */
16/08/2014
Lập trình Web
15
Áp dụng cho thẻ cụ thể
Áp dụng cho 1 thẻ: Đặt selector là tên_thẻ.
p {
color: red;
}
Khai báo đồng thời nhiều thẻ: Viết danh sách tên thẻ phân
cách bởi dấu phẩy.
h1, h2, h3, h4, h5, h6 {
font-family: Arial;
}
16/08/2014
Lập trình Web
16
Lớp
Gắn với thẻ cụ thể: Đặt selector là tên_thẻ.tên_lớp
p.loai1 {
color: red;
}
p.loai2 {
color: blue;
}
Không gắn với thẻ cụ thể: Bỏ tên_thẻ đi, giữ lại dấu chấm
.loai3 {
color: green;
}
Sử dụng lớp với cú pháp: <tên_thẻ class="tên_lớp">
Tên lớp phải đảm bảo quy tắc giống như tên biến của ngơn
ngữ lập trình.
16/08/2014
Lập trình Web
17
Sử dụng lớp
Ví dụ:
Tập tin CSS
Tập tin
HTML
Có thể sử dụng nhiều lần tên lớp trong tập tin HTML.
16/08/2014
Lập trình Web
18
Định danh
Tương tự như lớp. Thay dấu chấm (.) bằng dấu thăng (#).
Cho thẻ cụ thể: tên_thẻ#định_danh
Trường hợp tổng quát: #định_danh
Ví dụ:
p#loai1 {
color: red;
}
#loai2 {
color: blue;
}
Sử dụng định danh với cú pháp: <tên_thẻ id="định_danh">
16/08/2014
Lập trình Web
19
Sử dụng định danh
Ví dụ:
Tập tin CSS
Tập tin
HTML
Mỗi định danh là duy nhất trên trang (chỉ sử dụng 1 lần).
Tên định danh đặt giống như cách đặt tên lớp.
16/08/2014
Lập trình Web
20
Các mối quan hệ trong CSS
Áp dụng cho hậu duệ (con, cháu, chắt,…) [descendant].
Áp dụng cho con [child].
Áp dụng cho 1 anh chị em liền kề [adjacent sibling].
Áp dụng cho tất cả các anh chị em [general sibling].
16/08/2014
Lập trình Web
21
Các mối quan hệ trong CSS
Áp dụng cho hậu duệ (con, cháu, chắt,…) [descendant].
16/08/2014
Lập trình Web
22
Các mối quan hệ trong CSS
Áp dụng cho con [child].
16/08/2014
Lập trình Web
23
Các mối quan hệ trong CSS
Áp dụng cho 1 anh chị em liền kề [adjacent sibling].
16/08/2014
Lập trình Web
24
Các mối quan hệ trong CSS
Áp dụng cho tất cả các anh chị em [general sibling].
16/08/2014
Lập trình Web
25
