CSS là gì?

Chia sẻ: Trinh Khac Thanh | Ngày: | Loại File: DOC | Số trang:43

Thêm vào BST

Báo xấu

396
lượt xem 107
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Thiết kế web chuyên nghiệp với CSS. 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..

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: CSS là gì?

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