Xem mẫu
- CSS là gì?
CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một
dạng file text với phần tên mở rộng là .css. Trong Style Sheet này chứa
những câu lệnh CSS. Mỗi một lệnh của CSS sẽ định dạng một phần nhất
định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh
hình ảnh v.v..
Trước đây khi chưa có CSS, những người thiết kế web phải trộn lẫn giữa
các thành phần trình bày và nội dung với nhau. Nhưng với sự xuất hiện
của CSS, người ta có thể tách rời hoàn toàn phần trình bày và nội dung.
Giúp cho phần code của trang web cũng gọn hơn và quan trọng hơn cả là
dễ chỉnh sửa hơn.
Trước khi bắt đầu tìm hiểu thêm về CSS tôi muốn bạn biết một chút về
thế mạnh của nó trong việc thiết kế web. Ví dụ nếu làm việc với HTML
và bạn muốn font chữ của toàn bộ trang web là Arial. Bạn sẽ phải làm đi
làm lại như thế cho tất cả các file .html mà bạn có. Nhưng nếu bạn sử
dụng CSS, thì bạn chỉ cần làm một lần và tất cà các trang khác sẽ tự động
được thay đổi.
Ba cách để định dạng trang web
Có ba cách bạn có thể sử dụng để định dạng trang web là: cục bộ, nhúng
vào trang và liên kết đến một file CSS riêng biệt. Trong thực tế thì cách
cuối cùng là liên kết đến một file riêng biệt được sử dụng phổ biến nhất.
Nhưng bạn cũng nên biết về hai cách còn lại vì đôi khi bạn cũng phải sử
dụng đến nó tuy không nhiều
.
1. Cục bộ – code CSS được chèn trực tiếp vào trong thẻ HTML
Cách định dạng cục bộ là bạn sử dụng code CSS chèn trực tiếp vào thẻ
HTML và chỉ có tác động lên thẻ đó.
Ví dụ
view source
print?
1
- color:blue;”>
Nếu bạn thêm code CSS vào trong thẻ này nó sẽ thay
2
đổi cách hiển thị trên trình duyệt
3
2. Nhúng vào trang web
Cách thứ hai là bạn khai báo code CSS nằm trong cặp thẻ
được đặt ở phần của tài liệu. Về cơ bản nó cũng chỉ có
tác động cục bộ lên file mà bạn chèn đoạn code CSS này. Nó có phạm vi
ảnh hưởng lớn hơn là cách chèn cục bộ được nói ở trên, nhưng nó không
có ảnh hưởng đến các file khác trong cùng một trang web.
view source
print?
1
2 Nhúng vào trang
4
5 h1 {font-size: 16px;}
6 p {color:blue;}
7
8
3. Liên kết đến một file biệt lập
Thực tế cách cuối cùng này mới là thế mạnh thực sự của CSS bởi vì bạn
chỉ cần tạo ra một file CSS và viết code chỉ một lần. Nó sẽ ảnh hưởng
đến toàn bộ trang web chứ không chỉ ảnh hưởng đến một file .html đơn lẻ
hoặc chỉ một thẻ trong hàng ngàn thẻ mà bạn có. Bằng cách này chúng ta
có thể tách rời hoàn toàn những thành phần trình bày và nội dung ra khỏi
nhau. Nếu bạn viết toàn bộ code CSS trong một file và liên kết nó đến
những trang còn lại, thì việc thay đổi sửa chữa trang web trở nên cực kỳ
đơn giản.
Để liên kết file CSS đến tất cả các file .html của bạn, bạn chỉ cần chèn
đoạn code sau vào giữa thẻ của tài liệu:
view source
- print?
Và trình duyệt sẽ tự động dùng file style_sheet.css để định dạng cho trang
web của bạn. Tất nhiên trong file style_sheet.css bạn đã viết code CSS rồi.
Điều cuối cùng bạn cần biết về 3 loại hình sử dụng CSS là
Cục bộ > Nhúng vào trang > Liên kết đến một file biệt lập
Công thức trên có nghĩa là cách Cục bộ “đánh bại” cách Nhúng vào trang
và Liên kết đến một file riêng biệt. Hoặc nói theo cách khác thì cách
nhúng cục bộ là mạnh nhất, sau đó đến Nhúng vào trang và cuối cùng là
liên kết đến một file biệt lập.
Cú pháp của CSS
Dưới đây là một ví dụ rất đơn giản của CSS, nó được viết để định dạng
thẻ h3 của tài liệu sẽ có màu xanh dương
view source
print?
1 h3 {color: blue;}
Do vậy nếu bạn có code HTML như sau
view source
print?
Đoạn văn bản này sẽ có màu xanh trong trình
1
duyệt
Về cơ bản cú pháp của CSS bao gồm 2 phần chính: Selector và
Declaration. Selector dùng để xác định đối tượng nào sẽ chịu ảnh hưởng
và Declaration sẽ quyết định đối tượng đó bị ảnh hưởng như thế nào. Ở
ví dụ trên, thẻ h3 là Selector và phần {color: blue;} là Declaration.
Trong Declaration cũng có 2 phần là: Property và Value. Property quyết
định cái gì sẽ chịu ảnh hưởng và Value quyết định nó sẽ bị ảnh hưởng
- như thế nào. Ở ví dụ trên color là Property nó quyết định sẽ tác động đến
màu của h3 và blue là Value, nó quyết định màu sẽ là màu xanh.
Đoạn chữ này sẽ có màu xanh
Bạn có thể sử dụng những cách sau đây khi viết CSS
Nhóm nhiều Declaration vào một dòng
view source
print?
1 p {color:blue; font-size:12px; line-height:15px;}
và nếu bạn có một đoạn văn bản như sau trong code html
view source
print?
Đoạn văn bản này sẽ chịu ảnh hưởng của tất cả các
1
Declaration ở trên
nó sẽ có màu xanh, cỡ chữ là 12px và độ cao giữa các dòng là 15px.
Lưu ý: Mỗi Declaration được ngăn cách bởi dấu chấm phẩy ; dấu chấm
phẩy ở cuối cùng không bắt buộc, nhưng bạn nên cho vào để sau này nếu
có thêm Declaration sẽ không bị quên
Nhóm nhiều Selector vào một dòng
Ví dụ nếu bạn muốn chữ từ h1 đến h6 có màu đỏ và được in nghiêng bạn
có thể viết
view source
print?
1 h1 {color:red; font-style:italic;}
2 h2 {color:red; font-style:italic;}
3 ...
4 h6 {color:red; font-style:italic;}
Hoặc bạn có thể nhóm tất cả lại để đỡ tốn công hơn
view source
- print?
h1, h2, h3, h4, h5, h6 {color:red; font-
1
style:italic;}
Mỗi Selector được ngăn cách bằng dấu phẩy (,)
Một Selector có thể chịu ảnh hưởng bời nhiều luật
Ở ví dụ trên nếu bạn muốn thẻ h2 vừa được tô đậm và in nghiêng, bạn có
thể thêm dòng sau
view source
print?
h1, h2, h3, h4, h5, h6 {color:red; font-
1
style:italic;}
2 h2 {font-style:bold;}
Class và ID
Cho đến bây giờ bạn đã thấy được CSS có thể thay đổi các đối tượng
html như thế nào. Ví dụ khi bạn viết code CSS cho thẻ h1 hoặc p, thì bạn
sẽ thấy nó được áp dụng cho tất cả các thẻ trong html. Nhưng không phải
lúc nào bạn cũng muốn tất cả các thẻ p trong phần code của bạn đều bị
ảnh hưởng. Có thể bạn muốn đoạn này chữ màu xanh, đoạn kia chữ màu
đỏ và đậm. Chính vì thế Class và ID được thêm vào thẻ html để bạn có
thể hướng tới một đối tượng cụ thể hơn trong code HTML của bạn. Do
đó cho bạn thêm một lựa chọn nữa để thiết kế trang web.
Cách sử dụng Class
Dưới đây là đoạn code chỉ cho bạn thấy cách sử dụng class
view source
print?
Đoạn văn này có cùng class
1
với đoạn văn thứ 3
2 Đoạn văn bản này xuất hiện bình thường
3 Khi chúng ta gắn class cho
- thẻ html
chúng ta có thể hướng tới đối tượng dễ dàng hơn
4
cho dù
5 nó có ở cấp bậc nào đi chăng nữa
Ở đoạn code trên bạn thấy sự xuất hiện của class=”classtext”, đây chính
là class mà tôi thêm vào cho thẻ h1 và thẻ p. Bây giờ chúng ta sẽ tô đậm
nó
view source
print?
1 p {font-family: helvetica; sans-serif;}
2 .classtext {font-weight: bold;}
Lưu ý: đoạn code trên bạn phải chèn vào phần head của tài liệu vì ở đây
chúng ta sử dụng phương pháp nhúng CSS vào trong phần đầu của tài liệu
HTML.
Kết quả là 2 đoạn văn bản có thẻ p sẽ được hiển thị với font Helvetica
(hoặc nếu máy của bạn không có font này, nó sẽ cho hiển thị dòng font
San Serif) nhưng đoạn văn có class=”classtext” sẽ được hiển thị vừa font
Helvetica và in đậm. Đoạn văn bản nằm trong thẻ h1 thì có font là font
mặc định của trình duyệt, nhưng nó cũng được in đậm bởi vì nó bị gắn
với class=”classtext”. Thẻ span là cặp thẻ trắng sẽ không gây tác động gì
cho đối tượng nằm trong nó vì chúng ta chưa định dạng gì cho nó hết.
Contextual Class Selector
Nếu bây giờ bạn chỉ muốn đoạn văn bản cuối cùng có màu đỏ thì phải
làm sao? bởi vì nếu bạn thêm
view source
print?
1 .classtext {font-weight:bold; color:red'}
thì đoạn văn bản nằm trong thẻ h1 cũng sẽ có màu đỏ và như thế không
phải điều bạn muốn. Do vậy bạn có thể kết hợp thẻ đối tượng và tên
class vào để tạo thành Selector.
view source
- print?
1 p {font-family: helvetica; sans-serif;}
2 .classtext {font-weight: bold;}
3 p.classtext {color:red;}
như thế thì chỉ có đoạn văn bản thứ 3 là sẽ có màu đỏ
hoặc bạn có thể làm cho 4 chữ chúng ta có thể được in nghiêng bằng cách
sử dụng kết hợp
view source
print?
1 p.classtext span {font-style:italic;}
nếu bạn muốn bạn cũng có thể làm cho chữ cùng class nằm trong thẻ h1
in nghiêng bằng cách viết
view source
print?
1 .classtext span {font-style:italic;}
Tránh lạm dung Class
Một trong những lỗi phổ biến nhất của những người mới bắt tay vào CSS
là sử dụng quá nhiều class. Họ dùng class cho hầu hết các thẻ HTML và
khai báo CSS cho từng class một. Làm như vậy thì cũng chẳng khác gì sử
dụng thẻ HTML cả, vì nó cũng khó quản lý và thay đổi cũng rất khó khăn.
Cách sử dụng Class đúng cách là cho thẻ div bao quanh toàn bộ phần code
mà bạn muốn hướng tới. Nếu bạn muốn hướng tới đối tượng nào nằm
trong class đó, bạn luôn có thể kết hợp với phương pháp Contextual Class
Selector để hướng tới nó.
Cách sử dụng IDs
ID được viết giống y như khi bạn viết code cho Class, chỉ có khác một
điểm là bạn dùng ký hiệu dấu thăng (#) để thay cho dấu chấm . Nếu một
đoạn văn bản được viết như sau
Đây là đoạn văn bản bất kỳ
- thì trong phần CSS code của nó sẽ như sau
view source
print?
1 p#classtext {color:red;}
Còn lại ID được sử dụng y như Class, những gì bạn biết về Class ở trên
bạn đều có thể áp dụng được với ID. Vậy chúng khác nhau ở điểm gì?
Sự khác biệt giữa Class và ID
Nói ngắn gọn thì ID là duy nhất và Class được sử dụng nhiều lần. Ví dụ
trên trang web các thành phần duy nhất như là Logo, Menu, Footer …
những cái này nó chỉ xuất hiện một lần duy nhất trên trang chứ nó không
lặp đi lặp lại trên cùng một trang. Còn khi sử dụng Class thì áp dụng cho
những thành phần xuất hiện nhiều lần trên cùng một trang.
Ví dụ bạn thấy ở trên izwebz thì mỗi một bài post đều được định dạng
giống hệt nhau và nó xuất hiện 10 lần trên một trang vì có 10 bài post trên
một trang. Nếu bạn đặt ID cho từng post một thì bạn phải định dạng từng
post một trong CSS. Còn nếu bạn đặt cho chúng có cùng class thì bạn chỉ
việc định dạng một lần cho tất cả.
Một điểm khác biệt thứ 2 nữa đó là Class không phân biệt IN HOA hay in
thường nhưng ID lại phân biệt IN HOA và in thường. Ví dụ
id=”containerWraper” khác với id=”containerwraper”
Cuối cùng bạn có thể sử dụng nhiều class cho cùng một thành phần
nhưng chỉ có duy nhất một ID. Ví dụ bạn có thể đặt class như dưới đây
và các class này hoàn toàn độc lập với nhau.
view source
print?
1
Box Model
Bất cứ thành phần nào bạn tạo ra trong code XHTML đều được bao
quanh bởi một hộp kể cả dòng chữ bạn gõ ra cũng có một hộp bao quanh
- nó. Ở giá trị mặc định đường viền cũng như màu sắc của hộp là trong
suốt do vậy bạn không thấy được. Nhưng với CSS bạn có thể cho hiển
thị đường viền cũng như màu nền của bất cứ đối tượng nào trong trang
mà bạn muốn. Ở ví dụ dưới đây tôi cho hiển thị đường viền của thẻ p và
thẻ h1 và màu nền là màu #EEE để bạn thấy được khái niệm hộp bao
quanh đối tượng.
vi ew sour ce
pr in t ?
p {border: solid 1px red; background-
1
color:#bbeeff;}
h1 {border: solid 1px red; background-
2
color:#bbeeff;}
Dòng chữ với đường viền và màu nền
Nhưng với CSS bạn có thể cho hiển thị đường viền cũng như
màu nền của bất cứ đối tượng nào trong trang mà bạn
muốn. Ở ví dụ dưới đây tôi cho hiển thị đường viền của thẻ
Box Model
Box Model là khái niệm rất cơ bản và cũng là quan trọng nhất của CSS.
Bởi vì nó quyết định các thành phần trên trang web sẽ được xuất hiện như
thế nào và chúng tương tác với nhau ra làm sao. Dưới đây là hình minh
hoạ cho bạn thấy rõ được những thành phần của hộp và chúng ta có thể
tác động đến nó như thế nào
- Padding: là vùng nằm giữa đường viền và nội dung. Padding thường
được sử dụng để tạo ra khoảng trống giữa đường biên và chữ như 2 ví
dụ dưới đây.
Đoạn văn này có đường viền mà không có padding
Đoạn văn này có đường viền và giá trị padding là 5px.
Rõ ràng bạn thấy ở đoạn văn thứ 2 dễ đọc hơn và nhìn nó cũng “dễ thở”
hơn. Ở đoạn văn thứ 2 khi giá trị border-style được khai báo, nó sẽ tạo ra
một đường viền bao quanh lấy vùng padding.
Border
Khi khai báo đường viền, bạn nên nhớ luôn phải khai báo giá trị border-
style. Nếu giá trị này không được khai báo, tất cả những giá trị như màu
sắc, độ dày sẽ không được hiển thị. Đơn giản là vì khi giá trị border-style
không được khai báo, trình duyệt sẽ cho rằng nó bằng 0. Một khi đã bằng
0 rồi thì màu sắc cũng như độ dày không được xuất hiện là điều tất nhiên.
Ở ví dụ dưới đây bạn thấy các thành phần sẽ được hiển thị như thế nào
khi bạn tác động đến đường viền của nó
Hiển thị đường viền với giá trị là solid
- Hiển thị đường viền với giá trị là dotted
Hiển thị đường viền với giá trị là dashed
Hiển thị đường viền với giá trị là double
Hiển thị đường viền với giá trị là groove
Hiển thị đường viền với giá trị là ridge
Hiển thị đường viền với giá trị là inset
Hiển thị đường viền với giá trị là outset
Ở những ví dụ trên mỗi một loại đều có 3 giá trị tương ứng và theo thứ tự
là: border-style, border-width và border-color. Bạn có thể khai báo chúng
riêng biệt như sau:
view source
print ?
p {border-style: dashed; border-width: 3px;
1
border-color: yellow;}
hoặc gộp chung vào một như sau
view source
print ?
p {border: 3px dashed
1
yellow;}
Margin
Bên ngoài border là margin, nó được dùng để tạo khoảng cách giữa các
thành phần. Các thành phần margin, border và padding đều được mặc định
là 0. Nhưng mỗi trình duyệt lại mặc định một kiểu, do vậy khi viết code
CSS bạn nên luôn reset các giá trị này lại thành 0 để tránh phiền phức sau
này.
- view source
print ?
1 * {margin: 0; padding: 0;}
Tính bù của Margin
Tính năng cuối cùng của Margin mà bạn cần biết là tính bù của nó. Ví dụ
ở hình dưới đây tôi có ba đoạn văn bản và đều có margin-top: 50px và
margin-bottom: 30px được xếp chồng lên nhau. Có thể bạn nghĩ vì
margin-bottom của đoạn văn bản trên là 30px và margin-top của đoạn văn
bản kế tiếp là 50px thì tổng cộng 2 đoạn văn này sẽ phải cách nhau một
khoảng là 80 px. Nhưng trong thực tế lại không phải vậy. Khi có hai giá
trị margin được thiết lập, thì margin lớn sẽ “nuốt” margin bé hay nó bù
vào nhau. Do vậy ở ví dụ dưới, nó chỉ cách nhau 50 px và khoảng cách
giữa chúng là khoảng cách của margin được thiết lập lớn hơn.
Đoạn văn thứ nhất
Đoạn văn thứ hai
Đoạn văn thứ ba
Code CSS
view source
print ?
p {border: 1px solid red; margin: 50px 0px 30px
1
0px;}
Cách viết rút gọn
Trong ví dụ trên bạn thấy tôi dùng {margin: 50px 0px 30px 0px;} đây
chính là cách viết tắt trong CSS khi bạn phải làm việc với Border, Padding
và Margin. Thứ tự của nó luôn theo chiều kim đồng hồ Top, Right, Bottom
và Left. Bạn có thể nhớ như kiểu 12 giờ, 3 giờ, 6 giờ và 9 giờ.
- Ví dụ khi bạn muốn tác động đến Margin của một thành phần bất kỳ bạn
có thể viết đầy đủ là:
view source
print ?
{margin-top: 5px; margin-right: 10px; margin-
1
bottom: 15px; margin-left: 20px;}
hoặc bạn có thể giản lược nó đơn giản như sau để tiết kiệm thời gian và
công sức, bạn chỉ cần dấu cách giữa các giá trị:
view source
print ?
{margin:5px 10px 15px
1
20px;}
Bạn không cần phải viết hết toàn bộ 4 giá trị, nếu một trong 4 giá trị ở
trên bị thiếu, thì nó sẽ lấy giá trị của cạnh đối diện với nó.
view source
print ?
{margin:12px 10px
1
6px;}
Trong ví dụ này, bởi vì cạnh bên trái không có do vậy giá trị của cạnh bên
phải được sử dụng và nó có độ dày là 10 px. Còn nếu như chỉ có duy nhất
một giá trị như sau
view source
print ?
1 {margin:12px;}
Thì cả 4 cạnh sẽ có độ dày là 12px. Chính vì thế bạn không thể bỏ trống
giá trị nào cả. Nếu bạn muốn một cạnh nào đó không hiển thị, bạn phải
khai báo nó với giá trị là 0. Tuy nhiên, khi giá trị đó là 0 bạn không cần
phải khai báo đơn vị.
view source
print ?
{border:0px 0px 2px
1
4px;}
- Nếu bạn khai báo giá trị bằng 0, bạn không bắt buộc phải thêm đơn vị đo
vào đằng sau. Nhưng để tránh nhầm lẫn và sau này có phải chỉnh sửa sẽ
tiết kiệm thời gian hơn.
Clear và Float
Clear và Float là kỹ thuật dùng rất nhiều trong thiết kế giao diện bằng
CSS với hai tính năng cùng tên là Clear và Float. Float dùng để tách một
thành phần bất kỳ khỏi cách hiển thị thông thường của nó để tạo chỗ cho
những thành phần ở sau di chuyển lên và phủ đầy chỗ trống nếu có. Clear
dùng để ngăn không cho thành phần ở dưới di chuyển lên trên đề lấp vào
chỗ trống.
Ví dụ bạn có 2 đoạn văn bản, bạn chỉ muốn đoạn văn thứ nhất bao quanh
hình ảnh và đoạn văn thứ hai thì vẫn nằm ở dưới. Theo luật trên thì cữ có
chỗ là đoạn văn thứ 2 cũng sẽ tràn lên để lấp chỗ trống. Nếu bạn không
muốn điều này xảy ra bạn có thể sử dụng Clear để nó không tràn lên
được.
1. Float
Float chủ yếu dùng để căn chỉnh hình ảnh sao cho chữ sẽ bao quanh hình
ảnh. Nhưng nó cũng được áp dụng nhiều trong việc thiết kế giao diện sử
dụng CSS. Ở ví dụ dưới đây sẽ bao gồm một hình logo của izwebz và
một đoạn văn bản. Tôi sẽ cho hình được float: left và đoạn văn bản được
giữ nguyên.
view source
print?
1 img {float: left;}
Để tạo được hiệu ứng này bạn cần có một thẻ và
view source
print?
1
2
3 Box Model
4 Tạo thẻ div bao quanh là cách để bạn quản lý
- độ rộng thực
sự của box. cho dù khi tôi thêm giá trị padding
5
bằng 5px vào
mỗi bên trái phải, nó cũng không làm tăng độ lớn.
6
Mà ngược lại,
7 nó sẽ bị đầy lùi vào biên là 5px .
8
Tóm lại khi bạn cho tấm hình float: left bạn khiến nó bị dịch chuyển sang
phía tận cùng bên trái (hoặc phải nếu float: right) so với thẻ mẹ của nó là
div id=”bao_quanh”. Đoạn văn bản cũng sẽ di chuyển tương tự so với thẻ
mẹ của nó, do đó tạo ra hiệu ứng bao quanh lấy hình ảnh. Cho nên nếu
bây giờ bạn không muốn chữ bao quanh hình nữa mà muốn nó tạo ra 2 cột
song song với nhau, bạn chỉ cần tăng giá trị margin-left cho đoặn văn thành
150px.
view source
print?
1 p {margin-left: 150px;background: #faf3c7;}
2 img {float: left;}
- Khi bạn cho tấm hình float sang bên trái và đoạn văn bản có lề trái bằng
với độ lớn của tấm hình, thì hiệu ứng bao xung quanh hình sẽ mất đi mà
thay vào đó bạn được 2 cột song song với nhau. Đây là nguyên lý cơ bản
nhất để tạo ra giao diện có nhiều cột sử dụng float. Miễn là mỗi thành
phần khi được float đều có một giá trị độ rộng nhất định thì nó sẽ xếp
song song với nhau và tạo ra cột (nếu diện tích đủ rộng). Nếu bạn làm
như vậy với 3 thẻ float: left và có độ rộng nhất định, bạn sẽ được 3
cột song song. Sau đó bạn có thể thêm các thành phần vào từng cột để tạo
nên giao diện.
2. Clear
Luôn đi chung với Float là Clear. Clear thực chất chỉ là một tính năng
chống không cho đoạn văn ở dưới tràn lên trên để lấp vào chỗ trống. Như
đã nói ở trên, khi bạn dùng float bạn có thể tạo ra hiệu ứng chữ bao xung
quanh hình. Nhưng đôi khi vì dư chỗ, cho nên đoạn văn ở dưới di chuyển
lên trên và lấp vào chỗ trống. Tất nhiên đó không phải là điều bạn muốn,
do vậy bạn cần sử dụng Clear để “dọn sạch” nó đi.
Ở ví dụ dưới đây tôi có 2 đoạn văn và 2 tấm hình. Nếu bạn cho tất cả các
thành phần đều float: left bạn sẽ thấy nó bị như hình dưới đây.
- Lý do là vì tất cả các thành phần đều được float: left do vậy hình và đoạn
văn ở dưới nó sẽ cố phủ đầy chỗ trống mà tấm hình và đoạn văn thứ
nhất để lại khi bị float: left. Và cũng chính vì lẽ đó mà tạo ra hiệu ứng ta
không mong đợi. Có nhiều cách xử lý vấn đề này, tôi sẽ hướng dẫn bạn
cụ thể hơn trong video tutorial về Clear và Float. Còn bây giờ đây là cách
phổ biến nhất và cũng gây ra nhiều tranh cãi nhất.
Để đạt được mục đích sao cho tấm hình và đoạn văn thứ 2 “ngoan ngoãn”
chịu chui xuống dưới, chúng ta sẽ thêm một thẻ div trống vào dưới đoạn
văn thứ nhất.
view source
print?
01
02
03 Clear và Float
04
05
07
08
09
- 10
Sau đó ở trong CSS, bạn chỉ việc thêm đoạn code sau:
view source
print?
1 .clear {clear: both;}
Với một thẻ và một class dùng để clear, bây giờ thì nó sẽ xuất hiện
như ý rồi
Sở dĩ biện pháp này gây tranh cãi là vì chúng ta thêm một thành phần
không phải là nội dung vào phần nội dung cốt để đạt được mục đích.
Điều này đi ngược lại với nguyên lý của CSS là tách rời nội dung khỏi
cách trình bày. Cho nên nếu bạn không muốn có một thẻ div trống trong
code HTML của mình bạn cũng có thể làm theo cách dưới đây.
Sử dụng clearfix
Bạn copy đoạn code sau và cho vào stylesheet
- view source
print?
01 .clearfix:after {
02 visibility: hidden;
03 display: block;
04 font-size: 0;
05 content: " ";
06 clear: both;
07 height: 0;
08 }
* html .clearfix { zoom: 1; } /* IE6
09
*/
*:first-child+html .clearfix { zoom: 1; } /* IE7
10
*/
Bây giờ nếu bạn muốn clear nó thì bạn không phải tạo một thẻ div trống
nữa mà chỉ việc khai báo class=”clearfix” vào thẻ mẹ chưa các thành phần
float. Trong ví dụ ở trên bạn thêm vào phần sau
view source
print?
1
Với cách này bạn không cần phải thêm một thẻ div nữa mà vẫn hiện ngon
lành. Cho đến bây giờ cách này cũng rất phổ biến vì nó hiển thị tốt trên
mọi trình duyệt.
Tôi cũng có làm một Video tutorial về chủ đề này, bạn có thể tham khảo
thêm.
Cá nhân tôi vẫn luôn sử dụng phương pháp này bởi vì nó đơn giản, gọn
nhẹ và không cầu kỳ. Chỉ có một thẻ div trống thêm vào phần nội dung
cũng chẳng chết ai >”
- chi phối mối tương quan giữa các thành phần của trang web. Có tất cả 4
giá trị cho Position property là: Static, Absolute, Fixed và Relative. Trong
đó Static là giá trị mặc định khi không có giá trị nào được gán. Trong ví dụ
dưới đây bạn sẽ thấy có 4 đoạn văn ngắn. Đoạn văn thứ 1, 2 và 4 tôi để
giá trị mặc định là Static và đoạn văn thứ 3 được gán id để chúng ta có thể
thay đổi nó mà không ảnh hưởng đến các đoạn khác.
Static Position
Trước hết là chế độ Static mặc định khi không có giá trị nào được gán,
bạn sẽ thấy 4 đoạn văn xếp chồng lên nhau
Với giá trị Static (giá trị mặc định) các thành phần chỉ đơn thuần được sắp
xếp theo thứ tự xuất hiện và được phân cách bởi các giá trị margin mặc
định. Để thay đổi cách sắp xếp này, bạn cần sử dụng một trong những
cách sau đây.
Relative Position
nguon tai.lieu . vn