Bài giảng Lập trình Web (Nguyễn Hoàng Tùng) Chương 3

Nhóm thuộc tính đường viền Border [1/5] Hỗ trợ hầu hết các trình duyệt, không sử dụng tiếp đầu ngữ... Nhóm thuộc tính đường viền Border [2/5] Hỗ trợ hầu hết các trình duyệt, không sử dụn

Trang 2

Nội dung chính của slide này

Trang 3

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

Trang 4

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

Trang 5

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 # RR GG BB

• #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,…

Trang 6

Đơn vị đo lường trong lập trình web

Danh sách các đơn vị đo hỗ trợ:

Trang 7

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)

Trang 8

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

Trang 9

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

Trang 10

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: http://www.w3schools.com/cssref/css3_browsersupport.asp

Trình duyệt hỗ trợ

Trang 11

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

Trang 12

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

Trang 13

Phân loại

Internal style:

Đặt trong phần <head> </head>,

Dùng thẻ <style> để thể hiện

Trang 14

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:

(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

Trang 15

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 */

Trang 17

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

Trang 20

Sử dụng định danh

Ví dụ:

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

Tập tin CSS

Tập tin HTML

Trang 21

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]

Trang 22

Áp dụng cho hậu duệ (con, cháu, chắt,…) [descendant]

Trang 23

Áp dụng cho con [child]

Trang 24

Áp dụng cho 1 anh chị em liền kề [adjacent sibling]

Trang 25

Áp dụng cho tất cả các anh chị em [general sibling]

Trang 26

Áp dụng CSS dùng thuộc tính của thẻ HTML

Trang 27

Áp dụng CSS dùng thuộc tính của thẻ HTML

Trang 28

Phân loại các thuộc tính CSS theo chức năng

Generated content Pseudo-classes

Pseudo-elements

Trang 29

Nhóm thuộc tính màu sắc (Color)

( Hỗ trợ hầu hết các trình duyệt, không sử dụng tiếp đầu ngữ)

Trang 30

Nhóm thuộc tính nền (Background) [1/2]

( Sử dụng tiếp đầu ngữ đối với background-size)

Trang 31

Nhóm thuộc tính nền (Background) [2/2]

( Hỗ trợ hầu hết các trình duyệt, không sử dụng tiếp đầu ngữ)

Trang 32

Nhóm thuộc tính đường viền (Border) [1/5]

(Hỗ trợ hầu hết các trình duyệt, không sử dụng tiếp đầu ngữ)

Trang 33

Trang 34

Trang 35

(Sử dụng tiếp đầu ngữ đối với tất cả các thuộc tính trên)

Trang 36

Trang 37

Nhóm thuộc tính khung cơ bản (Basic box) [1/4]

Trang 38

Trang 39

Trang 40

Trang 41

Nhóm thuộc tính khung nâng cao (Flexible box) [1/2]

Trang 42

Nhóm thuộc tính khung nâng cao (Flexible box) [2/2]

Trang 43

Nhóm thuộc tính văn bản (Text) [1/2]

(Sử dụng tiếp đầu ngữ đối với tab-size)

Trang 44

Nhóm thuộc tính văn bản (Text) [1/2]

Trang 45

(text-decoration-color, text-decoration-line, text-decoration-style

chỉ áp dụng cho Firefox, sử dụng tiếp đầu ngữ -moz-) Nhóm thuộc tính trang trí văn bản (Text decoration)

Trang 46

Nhóm thuộc tính font chữ (Font)

(Hỗ trợ hầu hết các trình duyệt, không sử dụng tiếp đầu ngữ, @font-face chỉ hỗ

trợ định dạng TTF/OTF và WOFF)

Trang 47

Nhóm thuộc tính bảng biểu (Table)

Trang 48

Nhóm thuộc tính danh sách (Lists)

Trang 49

Nhóm thuộc tính chuyển động (Animation) [1/2]

Trang 50

Nhóm thuộc tính chuyển động (Animation) [2/2]

Trang 51

Nhóm thuộc tính chuyển đổi (Transform) [1/2]

Trang 52

Nhóm thuộc tính chuyển đổi (Transform) [1/2]

Danh sách miền giá trị đầy đủ của tranform:

Trang 53

Nhóm thuộc tính quá trình chuyển đổi (Transition)

Trang 54

Nhóm thuộc tính giao diện cơ bản (Basic UI) [1/2]

đối với các trình duyệt còn lại)

Trang 55

Nhóm thuộc tính giao diện cơ bản (Basic UI) [1/2]

không sử dụng tiếp đầu ngữ)

Trang 56

Nhóm thuộc tính chia cột văn bản (Multi-column)

Trang 57

Nhóm thuộc tính tạo nội dung (Generated content)

Trang 58

Nhóm thuộc tính giả (Pseudo-classes / Pseudo-elements)

Trang 59

Giải đáp thắc mắc

Định dạng
Số trang	59
Dung lượng	4,67 MB