Chương 3 - CSS
- 0 / 0
-
(Tài liệu chưa được thẩm định)
Nguồn: Lý Sỹ Ngọc Lầu
Người gửi: Lý Sỹ Ngọc Lầu
Ngày gửi: 11h:01' 07-04-2012
Dung lượng: 9.0 MB
Số lượt tải: 46
Nguồn: Lý Sỹ Ngọc Lầu
Người gửi: Lý Sỹ Ngọc Lầu
Ngày gửi: 11h:01' 07-04-2012
Dung lượng: 9.0 MB
Số lượt tải: 46
Số lượt thích:
0 người
Cascading Style Sheet
GV: Lý Sỹ Ngọc Lầu
1
CSS
Trang trí nội thất
Trang điểm
CSS
2
CSS
CSS là mẫu định dạng phân tầng
CSS là một chuẩn để định dạng các tài liệu HTML, XHTML và XML.
CSS mở rộng ngôn ngữ HTML truyền thống với hơn 70 thuộc tính về kiểu dáng có thể áp dụng cho các thẻ HTML.
Giúp các nhà thiết kế web có thêm lựa chọn về màu sắc, khoảng cách, vị trí, biên, lề…
3
CSS
CSS phá bỏ rào cản HTML bằng cách cho phép có nhiều đặc tả thuộc tính chuẩn để phục vụ cho việc dàn trang và định dạng.
Thuộc tính CSS được bổ sung vào HTML và không phá vỡ cấu trúc của HTML sẵn có.
CSS làm tăng sự nhất quán về định dạng và hiệu năng tải trang web.
Tập tin CSS chỉ được tải ở lần đầu tiên khi truy cập trang web
4
CSS
Ba cách áp dụng CSS trong tài liệu
Inline style
Sử dụng thuộc tính style của thẻ để định dạng
Internal style sheet
Định nghĩa style bên trong của tài liệu
External style sheet
Liên kết đến một tập tin *.css chứa toàn bộ style sử dụng trong tài liệu
5
CSS
Inline style: là cách dùng style ngay trong câu lệnh, bổ sung thêm thuộc tính style vào sau một phần tử HTML
Áp dụng CSS vào trang HTML
6
Nội dung
Màu xanh nước biển.
Một inline style áp dụng cho bất cứ thẻ nào và chỉ có tác dụng trên chính thẻ đó!
Dùng inline style làm cho tài liệu rõ ràng hơn, nhưng cũng có thể dẫn đến việc viết mã quá nhiều và thiếu sự nhất quán trên toàn site!
Làm cho mã nguồn bị dư thừa, khó bảo trì!
7
Áp dụng CSS vào trang HTML
Internal style sheet:
Áp dụng thống nhất cho toàn trang web
Định nghĩa riêng một khối, phân biệt bởi thẻ
9
Áp dụng CSS vào trang HTML
External style sheet
Áp dụng cho toàn site
Tạo một tập tin có phần mở rộng là *.css bên ngoài HTML, sử dụng thẻ trong phần để liên kết tập tin này trong HTML.
Các style rule chứa riêng biệt trong file *.css và hoạt động tương tự như internal style sheet.
10
Áp dụng CSS vào trang HTML
Áp dụng CSS vào trang HTML
External CSS File
Chỉ cần thay đổi nội dung file CSS, toàn bộ các trang web sẽ được cập nhật
Website
11
Gồm 3 thành phần
Cú pháp
Bộ chọn (Selector)
Thuộc tính (Property)
Giá trị (Value)
Dấu chấm phẩy dùng để phân cách thuộc tính
12
Cú pháp CSS
Selector thường là tên thẻ HTML
Mỗi thuộc tính cần có giá trị
Một thuộc tính và giá trị phân cách dấu ":"
Hai cặp thuộc tính – giá trị phân cách nhau bởi dấu ";"
Toàn bộ các cặp thuộc tính – giá trị của thẻ HTML được đặt trong cặp dấu ngoặc nhọn.
13
Cú pháp CSS
VD
p
{
text-align: center;
color:black;
font-family: "sans serif"
}
14
Cú pháp CSS
CSS cung cấp cú pháp cho phép gom nhóm nhiều bộ chọn cùng lúc
Giúp thiết lập các giá trị cho các thuộc tính chung giống nhau của nhiều bộ chọn khác nhau cùng lúc
Giúp giảm kích thước tập tin CSS, giảm thời gian tải web
H1, h2, h3, h4, h5, h6
{
color: green
}
15
Gom nhóm các bộ chọn
Các selector trong HTML
HTML selector
Class selector
Identity selector
Descendant selector
Child selector
Attribute selector
Pseudo class selector
16
Selector
Bộ chọn đơn giản nhất, dùng các thẻ HTML
VD: định dạng tất cả các siêu liên kết trong toàn bộ trang web không có đường gạch chân
a
{
/*Bỏ gạch chân cho các hyperlink*/
text-decoration: none;
}
17
HTML Selector
Việc tạo các lớp, cho phép định nghĩa nhiều kiểu thể hiện khác nhau cho cùng một thẻ HTML và áp dụng các lớp này vào các vị trí cần thiết trên trang web.
Có 2 cách định nghĩa bộ chọn lớp
Định nghĩa bộ chọn lớp cho thẻ cụ thể
Định nghĩa bộ chọn lớp không xác định thẻ cụ thể
Áp dụng một lớp cho nhiều thẻ khác nhau.
18
Class Selector
Bộ chọn lớp cho thẻ cụ thể
VD: trên trang web có 3 loại văn bản
Đoạn canh lề trái
Đoạn canh lề giữa
Đoạn canh lề phải
Khi đó có thể định nghĩa 3 lớp riêng biệt cho thẻ p
p.trai {text-align: left}
p.right {text-align: right}
p.giua {text-align: center}
19
Class Selector
Áp dụng vào trang HTML
Áp dụng không hợp lệ
áp dụng sai thẻ
20
Class Selector
Bộ chọn lớp không xác định thẻ
Cho phép tạo lớp có thể gắn vào nhiều thẻ (các thẻ phải chấp nhận thuộc tính này) bằng cách bỏ tên thẻ ở đầu và giữ lại dấu "."
VD định nghĩa lớp canh giữa
.giua {text-align: "center"}
nội dung cột canh giữa
21
Class Selector
Sử dụng nhiều lớp
Một thẻ có thể gán nhiều lớp bằng cách chỉ ra các lớp, phân cách nhau bằng khoảng trắng
VD:
.warning {color: red}
.highlight {background-color: yellow}
22
Class Selector
Định danh ID cho phép chia thẻ thành nhiều loại khác nhau
Một bộ chọn lớp có thể áp dụng nhiều lần ở các vị trí khác nhau
Định danh chỉ có thể áp dụng duy nhất cho 1 thẻ và tên của định danh phải là duy nhất trên trang web
Cú pháp ID selector
[Tên thẻ]# { property: value ; …}
23
ID Selector
VD: đoạn mã sau có thể áp dụng cho thẻ
24
ID Selector
VD: đoạn mã sau đây có thể hiệu lực cho thẻ đầu tiên có id là "xyz".
Khi sử dụng
#xyz {color: red}
đoạn văn bản không có hiệu lực
25
ID Selector
Dùng để chọn một thành phần/thẻ nằm bên trong thành phần/thẻ khác
VD: chỉ áp dụng style cho thẻ p nằm trong thẻ
26
Descendant Selector
Dùng để chọn thành phần/ thẻ con của một thành phần/thẻ khác
Cú pháp: thẻ > thẻ > thẻ …
Ví dụ 1: chọn các thẻ p là con thẻ div
div > p { color: red }
Ví dụ 2: chọn các thẻ b là con thẻ p và thẻ p là con div
div > p > b { color:red }
27
Child Selector
Cho phép chọn các phần tử/thẻ dựa vào thuộc tính của các phần tử thẻ
28
Attribute Selector
VD 1: chọn thẻ p có chứa thuộc tính title
VD2: chọn thẻ có định nghĩa thuộc tính title là “xyz”
29
Attribute Selector
VD3: chọn thẻ h3 nếu trong danh sách các giá trị thuộc tính class có chứa giá trị class2
VD4: chọn thẻ a có giá trị thuộc tính href kết thúc là ".html“
VD5: chọn thẻ p có thuộc tính foo có dạng “bar-?”
30
Attribute Selector
Cho phép định dạng các phần tử không nằm trong document tree.
Định dạng trạng thái liên kết, định dạng cho ký tự đầu tiên trong văn bản
Khái niệm lớp giả, hay phần tử giả cho phép định dạng các phần tử thẻ dựa trên thông tin chứa bên ngoài document tree.
31
Pseudo Class Selector
Pseudo class: dùng để thêm vào các hiệu ứng đặc biệt cho các bộ chọn.
Cho phép bộ chọn chọn các phần tử mà không quan tâm đến tên, thuộc tính hay nội dung
Cú pháp
32
Pseudo Class Selector
:first-child: lớp ảo cho phép chọn phần tử đầu tiên của một phần tử khác
VD: chọn phần tử p đầu tiên nằm trong phần tử div, quy định khoản thụt đầu dòng và in đậm cho phần tử p này
33
Pseudo Class Selector – first-child
34
Pseudo Class Selector – first-child
Anchor pseudo class: lớp ảo định nghĩa style cho các trạng thái link
Có 4 trạng thái link
link: link chưa được mở (unvisited link)
visited: link đã được mở (visited link)
hover: link đang rê chuột bên trên (mouse over link)
active: link đã được chọn (selected link)
35
Pseudo Class Selector – Anchor
36
Pseudo Class Selector – Anchor
Kết hợp css class và pseudo class
37
Pseudo Class Selector – Anchor
:focus pseudo class: lớp ảo định nghĩa style của phần tử khi phần tử đang focus
Link sẽ chuyển sang màu xanh lá cây khi focus
38
Pseudo Class Selector – focus
:lang pseudo class: cho phép định nghĩa style ngôn ngữ khác nhau trong tài liệu
39
Pseudo Class Selector – lang
Bổ sung một số hiệu ứng đặc biệt cho bộ chọn. Cho phép chọn và định dạng cho các phần văn bản đặc biệt trong tài liệu
Cú pháp
Cú pháp của pseudo-element
Kết hợp CSS class với pseudo element
40
Pseudo Element
:first-letter pseudo element: phần tử mô tả cho ký tự đầu tiên của paragraph.
41
Pseudo Element – first-letter
Các thuộc tính của first-letter
42
Pseudo Element – first-letter
Quy định định style cho dòng đầu tiên
43
Pseudo Element – first-line
Các thuộc tính của first-line
44
Pseudo Element – first-line
Chèn nội dung phía trước nội dung của một thành phần
45
Pseudo Element – before
Chèn nội dung phía sau nội dung của một thành phần
46
Pseudo Element – after
47
Đơn vị đo lường CSS
Đơn vị màu sắc
48
Đơn vị đo lường CSS
Tài liệu HTML được biểu diễn theo cấu trúc cây (document tree)
Các phần tử con sẽ kế thừa một số thuộc tính từ phần tử cha. Hay có thể nói phần tử cha truyền một số thuộc tính xuống phần tử con.
Một số thuộc tính kế thừa như
Màu sắc
Font
Canh lề
Kế thừa thuộc tính
49
Kế thừa thuộc tính
50
Các style có thể kế thừa từ phần tử cha
Kế thừa thuộc tính
51
Không kế thừa border & padding
Ghi đè (over-ride) thuộc tính của phần tử cha (over-rule)
Kế thừa thuộc tính
52
Thuộc tính định dạng font chữ, văn bản (font, text)
Thuộc tính định dạng nền (background)
Mô hình hộp (box model)
Các thuộc tính định margin, padding, border
Thuộc tính định dạng cách hiển thị (display)
Thuộc tính xác định vị trí (position)
Các nhóm thuộc tính trong CSS
53
Các loại font chữ
Font chữ có chân và font chữ không chân
Font chữ tỷ lệ hay font chữ đều
Font chữ
54
Font chữ dạng viết tay
Font chữ trang trí
55
Thông tin định dạng font chữ
56
Thông tin định dạng font chữ
57
Thông tin định dạng font chữ
58
Thông tin định dạng font chữ
59
Thông tin định dạng văn bản
60
Thông tin định dạng văn bản
61
Thông tin định dạng văn bản
62
Thông tin định dạng nền
63
Thông tin định dạng nền
64
Thông tin định dạng nền
65
Thông tin định dạng nền
66
Demo
Thông tin định dạng nền
67
Tài liệu (X)HTML, XML gồm các phần tử chứa trong phần tử khác theo document tree
Mỗi phần tử được xem như box, chứa các thành phần nội dung, border, margin, padding…
Tài liệu HTML chính là tập các box lồng nhau, mỗi box có thể chứa các box con khác và có box lớn ngoài cùng.
Mô hình hộp (box model)
68
Mô hình hộp (box model)
69
Mô hình hộp (box model)
70
Các thông tin định dạng lề
71
Các thông tin định dạng lề
72
Thông tin định dạng vùng đệm
73
Khi khai báo rút gọn giá trị margin, padding thì các giá trị tính theo chiều kim đồng hồ tính từ top
Thông tin định dạng lề + vùng đệm
74
Thông tin định dạng biên
75
Thông tin định dạng biên
76
Thông tin định dạng biên
77
Thông tin định dạng biên
78
Thông tin định dạng biên
79
Thông tin định dạng biên
80
Demo
Thông tin định dạng biên
81
Kết quả
Thông tin định dạng biên
82
Giá trị thuộc tính Display
Định dạng cách hiển thị
83
Định dạng cách hiển thị
84
Định dạng cách hiển thị
85
Sử dụng block-level
Định dạng cách hiển thị
86
Sử dụng inline
Định dạng cách hiển thị
87
Sử dụng none để ẩn thành phần
Định dạng cách hiển thị
88
Sử dụng inline-block
Định dạng cách hiển thị
89
Sử dụng list-item
Định dạng cách hiển thị
90
Thông tin xác định vị trí
91
Giá trị thuộc tính postion
Thông tin xác định vị trí
92
Thiết lập vị trí thành phần theo vị trí tương đối
Thông tin xác định vị trí
93
Thiết lập vị trí thành phần theo vị trí tuyệt đối
Thông tin xác định vị trí
94
Giá trị thuộc tính clip
Thông tin xác định vị trí
95
Giá trị thuộc tính overflow
Thông tin xác định vị trí
96
Thông tin xác định vị trí
97
Sử dụng overflow để bật thanh cuộn khi nội dung vượt quá kích thước thành phần
Thông tin xác định vị trí
98
Giá trị thuộc tính vertical-align
Thông tin xác định vị trí
99
Giá trị thuộc tính vertical-align
Thông tin xác định vị trí
100
Sử dụng vertical-align
Thông tin xác định vị trí
101
Giá trị thuộc tính z-order
Thông tin xác định vị trí
102
Canh theo chiều ngang
Văn bản dùng text-align
Thành phần không phải văn bản dùng margin
Canh giữa với CSS
103
Margin-left: auto và margin-right:auto
Thành phần sẽ được canh giữa các cạnh trong khối chứa
Canh giữa một layout
Canh giữa với CSS
104
.layout_container
{
margin: 0 auto;
width : 960px;
background-color: cyan
}
Canh giữa một image
Canh giữa với CSS
105
img.center
{
margin: 0 auto;
display: block;
}
Canh giữa theo chiều dọc
sử dụng phương pháp tọa độ absolute
để dùng kỹ thuật này phải biết chính xác kích thước của thành phần cần canh chỉnh.
Canh giữa với CSS
106
W
H
position: absolute
top: 50% /* top là vị trí giữa của chiều cao*/
margin: -h/2 0 0 0
Canh giữa với CSS
107
top-margin: -h/2
top:50%
h
Canh giữa theo ngang, dọc.
Canh giữa với CSS
108
Canh giữa ngang dọc
Canh giữa với CSS
109
top-margin: -h/2
top:50%
h
left-margin: -w/2
GV: Lý Sỹ Ngọc Lầu
1
CSS
Trang trí nội thất
Trang điểm
CSS
2
CSS
CSS là mẫu định dạng phân tầng
CSS là một chuẩn để định dạng các tài liệu HTML, XHTML và XML.
CSS mở rộng ngôn ngữ HTML truyền thống với hơn 70 thuộc tính về kiểu dáng có thể áp dụng cho các thẻ HTML.
Giúp các nhà thiết kế web có thêm lựa chọn về màu sắc, khoảng cách, vị trí, biên, lề…
3
CSS
CSS phá bỏ rào cản HTML bằng cách cho phép có nhiều đặc tả thuộc tính chuẩn để phục vụ cho việc dàn trang và định dạng.
Thuộc tính CSS được bổ sung vào HTML và không phá vỡ cấu trúc của HTML sẵn có.
CSS làm tăng sự nhất quán về định dạng và hiệu năng tải trang web.
Tập tin CSS chỉ được tải ở lần đầu tiên khi truy cập trang web
4
CSS
Ba cách áp dụng CSS trong tài liệu
Inline style
Sử dụng thuộc tính style của thẻ để định dạng
Internal style sheet
Định nghĩa style bên trong của tài liệu
External style sheet
Liên kết đến một tập tin *.css chứa toàn bộ style sử dụng trong tài liệu
5
CSS
Inline style: là cách dùng style ngay trong câu lệnh, bổ sung thêm thuộc tính style vào sau một phần tử HTML
Áp dụng CSS vào trang HTML
6
Nội dung
Màu xanh nước biển.
Một inline style áp dụng cho bất cứ thẻ nào và chỉ có tác dụng trên chính thẻ đó!
Dùng inline style làm cho tài liệu rõ ràng hơn, nhưng cũng có thể dẫn đến việc viết mã quá nhiều và thiếu sự nhất quán trên toàn site!
Làm cho mã nguồn bị dư thừa, khó bảo trì!
7
Áp dụng CSS vào trang HTML
Internal style sheet:
Áp dụng thống nhất cho toàn trang web
Định nghĩa riêng một khối, phân biệt bởi thẻ
đoạn văn bản có viền màu bạc - CHữ THường đậM
9
Áp dụng CSS vào trang HTML
External style sheet
Áp dụng cho toàn site
Tạo một tập tin có phần mở rộng là *.css bên ngoài HTML, sử dụng thẻ trong phần để liên kết tập tin này trong HTML.
Các style rule chứa riêng biệt trong file *.css và hoạt động tương tự như internal style sheet.
10
Áp dụng CSS vào trang HTML
Áp dụng CSS vào trang HTML
External CSS File
Chỉ cần thay đổi nội dung file CSS, toàn bộ các trang web sẽ được cập nhật
Website
11
Gồm 3 thành phần
Cú pháp
Bộ chọn (Selector)
Thuộc tính (Property)
Giá trị (Value)
Dấu chấm phẩy dùng để phân cách thuộc tính
12
Cú pháp CSS
Selector thường là tên thẻ HTML
Mỗi thuộc tính cần có giá trị
Một thuộc tính và giá trị phân cách dấu ":"
Hai cặp thuộc tính – giá trị phân cách nhau bởi dấu ";"
Toàn bộ các cặp thuộc tính – giá trị của thẻ HTML được đặt trong cặp dấu ngoặc nhọn.
13
Cú pháp CSS
VD
p
{
text-align: center;
color:black;
font-family: "sans serif"
}
14
Cú pháp CSS
CSS cung cấp cú pháp cho phép gom nhóm nhiều bộ chọn cùng lúc
Giúp thiết lập các giá trị cho các thuộc tính chung giống nhau của nhiều bộ chọn khác nhau cùng lúc
Giúp giảm kích thước tập tin CSS, giảm thời gian tải web
H1, h2, h3, h4, h5, h6
{
color: green
}
15
Gom nhóm các bộ chọn
Các selector trong HTML
HTML selector
Class selector
Identity selector
Descendant selector
Child selector
Attribute selector
Pseudo class selector
16
Selector
Bộ chọn đơn giản nhất, dùng các thẻ HTML
VD: định dạng tất cả các siêu liên kết trong toàn bộ trang web không có đường gạch chân
a
{
/*Bỏ gạch chân cho các hyperlink*/
text-decoration: none;
}
17
HTML Selector
Việc tạo các lớp, cho phép định nghĩa nhiều kiểu thể hiện khác nhau cho cùng một thẻ HTML và áp dụng các lớp này vào các vị trí cần thiết trên trang web.
Có 2 cách định nghĩa bộ chọn lớp
Định nghĩa bộ chọn lớp cho thẻ cụ thể
Định nghĩa bộ chọn lớp không xác định thẻ cụ thể
Áp dụng một lớp cho nhiều thẻ khác nhau.
18
Class Selector
Bộ chọn lớp cho thẻ cụ thể
VD: trên trang web có 3 loại văn bản
Đoạn canh lề trái
Đoạn canh lề giữa
Đoạn canh lề phải
Khi đó có thể định nghĩa 3 lớp riêng biệt cho thẻ p
p.trai {text-align: left}
p.right {text-align: right}
p.giua {text-align: center}
19
Class Selector
Áp dụng vào trang HTML
Áp dụng không hợp lệ
đoạn văn bản canh lề trái
đoạn văn bản canh lề giữa
đoạn văn bản canh lề phải
đoạn văn bản canh lề trái
20
Class Selector
Bộ chọn lớp không xác định thẻ
Cho phép tạo lớp có thể gắn vào nhiều thẻ (các thẻ phải chấp nhận thuộc tính này) bằng cách bỏ tên thẻ ở đầu và giữ lại dấu "."
VD định nghĩa lớp canh giữa
.giua {text-align: "center"}
đoạn này canh lề giữa
21
Class Selector
Sử dụng nhiều lớp
Một thẻ có thể gán nhiều lớp bằng cách chỉ ra các lớp, phân cách nhau bằng khoảng trắng
VD:
.warning {color: red}
.highlight {background-color: yellow}
Danger
An important point
22
Class Selector
Định danh ID cho phép chia thẻ thành nhiều loại khác nhau
Một bộ chọn lớp có thể áp dụng nhiều lần ở các vị trí khác nhau
Định danh chỉ có thể áp dụng duy nhất cho 1 thẻ và tên của định danh phải là duy nhất trên trang web
Cú pháp ID selector
[Tên thẻ]#
23
ID Selector
VD: đoạn mã sau có thể áp dụng cho thẻ
có id là para1
p#para1
{
text-align: center;
color: red
}
đoạn văn bản
24
ID Selector
VD: đoạn mã sau đây có thể hiệu lực cho thẻ đầu tiên có id là "xyz".
Khi sử dụng
#xyz {color: red}
đoạn văn bản có hiệu lực
đoạn văn bản không có hiệu lực
25
ID Selector
Dùng để chọn một thành phần/thẻ nằm bên trong thành phần/thẻ khác
VD: chỉ áp dụng style cho thẻ p nằm trong thẻ
26
Descendant Selector
Dùng để chọn thành phần/ thẻ con của một thành phần/thẻ khác
Cú pháp: thẻ > thẻ > thẻ …
Ví dụ 1: chọn các thẻ p là con thẻ div
div > p { color: red }
Ví dụ 2: chọn các thẻ b là con thẻ p và thẻ p là con div
div > p > b { color:red }
27
Child Selector
Cho phép chọn các phần tử/thẻ dựa vào thuộc tính của các phần tử thẻ
28
Attribute Selector
VD 1: chọn thẻ p có chứa thuộc tính title
VD2: chọn thẻ có định nghĩa thuộc tính title là “xyz”
29
Attribute Selector
VD3: chọn thẻ h3 nếu trong danh sách các giá trị thuộc tính class có chứa giá trị class2
VD4: chọn thẻ a có giá trị thuộc tính href kết thúc là ".html“
VD5: chọn thẻ p có thuộc tính foo có dạng “bar-?”
30
Attribute Selector
Cho phép định dạng các phần tử không nằm trong document tree.
Định dạng trạng thái liên kết, định dạng cho ký tự đầu tiên trong văn bản
Khái niệm lớp giả, hay phần tử giả cho phép định dạng các phần tử thẻ dựa trên thông tin chứa bên ngoài document tree.
31
Pseudo Class Selector
Pseudo class: dùng để thêm vào các hiệu ứng đặc biệt cho các bộ chọn.
Cho phép bộ chọn chọn các phần tử mà không quan tâm đến tên, thuộc tính hay nội dung
Cú pháp
32
Pseudo Class Selector
:first-child: lớp ảo cho phép chọn phần tử đầu tiên của một phần tử khác
VD: chọn phần tử p đầu tiên nằm trong phần tử div, quy định khoản thụt đầu dòng và in đậm cho phần tử p này
33
Pseudo Class Selector – first-child
34
Pseudo Class Selector – first-child
Anchor pseudo class: lớp ảo định nghĩa style cho các trạng thái link
Có 4 trạng thái link
link: link chưa được mở (unvisited link)
visited: link đã được mở (visited link)
hover: link đang rê chuột bên trên (mouse over link)
active: link đã được chọn (selected link)
35
Pseudo Class Selector – Anchor
36
Pseudo Class Selector – Anchor
Kết hợp css class và pseudo class
37
Pseudo Class Selector – Anchor
:focus pseudo class: lớp ảo định nghĩa style của phần tử khi phần tử đang focus
Link sẽ chuyển sang màu xanh lá cây khi focus
38
Pseudo Class Selector – focus
:lang pseudo class: cho phép định nghĩa style ngôn ngữ khác nhau trong tài liệu
39
Pseudo Class Selector – lang
Bổ sung một số hiệu ứng đặc biệt cho bộ chọn. Cho phép chọn và định dạng cho các phần văn bản đặc biệt trong tài liệu
Cú pháp
Cú pháp của pseudo-element
Kết hợp CSS class với pseudo element
40
Pseudo Element
:first-letter pseudo element: phần tử mô tả cho ký tự đầu tiên của paragraph.
41
Pseudo Element – first-letter
Các thuộc tính của first-letter
42
Pseudo Element – first-letter
Quy định định style cho dòng đầu tiên
43
Pseudo Element – first-line
Các thuộc tính của first-line
44
Pseudo Element – first-line
Chèn nội dung phía trước nội dung của một thành phần
45
Pseudo Element – before
Chèn nội dung phía sau nội dung của một thành phần
46
Pseudo Element – after
47
Đơn vị đo lường CSS
Đơn vị màu sắc
48
Đơn vị đo lường CSS
Tài liệu HTML được biểu diễn theo cấu trúc cây (document tree)
Các phần tử con sẽ kế thừa một số thuộc tính từ phần tử cha. Hay có thể nói phần tử cha truyền một số thuộc tính xuống phần tử con.
Một số thuộc tính kế thừa như
Màu sắc
Font
Canh lề
Kế thừa thuộc tính
49
Kế thừa thuộc tính
50
Các style có thể kế thừa từ phần tử cha
Kế thừa thuộc tính
51
Không kế thừa border & padding
Ghi đè (over-ride) thuộc tính của phần tử cha (over-rule)
Kế thừa thuộc tính
52
Thuộc tính định dạng font chữ, văn bản (font, text)
Thuộc tính định dạng nền (background)
Mô hình hộp (box model)
Các thuộc tính định margin, padding, border
Thuộc tính định dạng cách hiển thị (display)
Thuộc tính xác định vị trí (position)
Các nhóm thuộc tính trong CSS
53
Các loại font chữ
Font chữ có chân và font chữ không chân
Font chữ tỷ lệ hay font chữ đều
Font chữ
54
Font chữ dạng viết tay
Font chữ trang trí
55
Thông tin định dạng font chữ
56
Thông tin định dạng font chữ
57
Thông tin định dạng font chữ
58
Thông tin định dạng font chữ
59
Thông tin định dạng văn bản
60
Thông tin định dạng văn bản
61
Thông tin định dạng văn bản
62
Thông tin định dạng nền
63
Thông tin định dạng nền
64
Thông tin định dạng nền
65
Thông tin định dạng nền
66
Demo
Thông tin định dạng nền
67
Tài liệu (X)HTML, XML gồm các phần tử chứa trong phần tử khác theo document tree
Mỗi phần tử được xem như box, chứa các thành phần nội dung, border, margin, padding…
Tài liệu HTML chính là tập các box lồng nhau, mỗi box có thể chứa các box con khác và có box lớn ngoài cùng.
Mô hình hộp (box model)
68
Mô hình hộp (box model)
69
Mô hình hộp (box model)
70
Các thông tin định dạng lề
71
Các thông tin định dạng lề
72
Thông tin định dạng vùng đệm
73
Khi khai báo rút gọn giá trị margin, padding thì các giá trị tính theo chiều kim đồng hồ tính từ top
Thông tin định dạng lề + vùng đệm
74
Thông tin định dạng biên
75
Thông tin định dạng biên
76
Thông tin định dạng biên
77
Thông tin định dạng biên
78
Thông tin định dạng biên
79
Thông tin định dạng biên
80
Demo
Thông tin định dạng biên
81
Kết quả
Thông tin định dạng biên
82
Giá trị thuộc tính Display
Định dạng cách hiển thị
83
Định dạng cách hiển thị
84
Định dạng cách hiển thị
85
Sử dụng block-level
Định dạng cách hiển thị
86
Sử dụng inline
Định dạng cách hiển thị
87
Sử dụng none để ẩn thành phần
Định dạng cách hiển thị
88
Sử dụng inline-block
Định dạng cách hiển thị
89
Sử dụng list-item
Định dạng cách hiển thị
90
Thông tin xác định vị trí
91
Giá trị thuộc tính postion
Thông tin xác định vị trí
92
Thiết lập vị trí thành phần theo vị trí tương đối
Thông tin xác định vị trí
93
Thiết lập vị trí thành phần theo vị trí tuyệt đối
Thông tin xác định vị trí
94
Giá trị thuộc tính clip
Thông tin xác định vị trí
95
Giá trị thuộc tính overflow
Thông tin xác định vị trí
96
Thông tin xác định vị trí
97
Sử dụng overflow để bật thanh cuộn khi nội dung vượt quá kích thước thành phần
Thông tin xác định vị trí
98
Giá trị thuộc tính vertical-align
Thông tin xác định vị trí
99
Giá trị thuộc tính vertical-align
Thông tin xác định vị trí
100
Sử dụng vertical-align
Thông tin xác định vị trí
101
Giá trị thuộc tính z-order
Thông tin xác định vị trí
102
Canh theo chiều ngang
Văn bản dùng text-align
Thành phần không phải văn bản dùng margin
Canh giữa với CSS
103
Margin-left: auto và margin-right:auto
Thành phần sẽ được canh giữa các cạnh trong khối chứa
Canh giữa một layout
Canh giữa với CSS
104
.layout_container
{
margin: 0 auto;
width : 960px;
background-color: cyan
}
Canh giữa một image
Canh giữa với CSS
105
img.center
{
margin: 0 auto;
display: block;
}
Canh giữa theo chiều dọc
sử dụng phương pháp tọa độ absolute
để dùng kỹ thuật này phải biết chính xác kích thước của thành phần cần canh chỉnh.
Canh giữa với CSS
106
W
H
position: absolute
top: 50% /* top là vị trí giữa của chiều cao*/
margin: -h/2 0 0 0
Canh giữa với CSS
107
top-margin: -h/2
top:50%
h
Canh giữa theo ngang, dọc.
Canh giữa với CSS
108
Canh giữa ngang dọc
Canh giữa với CSS
109
top-margin: -h/2
top:50%
h
left-margin: -w/2
Các ý kiến mới nhất