Thành phần Block và Inline | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/thanh-phần-block-va-inline/[8/10/2010 3:04:15 PM] NAVIGATION Câu Đố Trong Tuần 1 Giới thiệu về CSS Giới thiệu Google webmaster Cách chọn domain Giao diện liquid với CSS – Phần 2 Thiết lập Mail Server Localhost Luôn đọc lại bài viết của mình HTML cơ bản – Phần 2 Đặt tên cho hình ảnh thế nào cho có lợi Tạo kiểu chữ đổ bóng PHP CO BẢN – NÂNG CAO tìm hiểu cú pháp và phương thức PHP Phép toán và phát biểu có điều kiện trong php $_POST và $_GET Làm quen đối tượng Session Khai báo hàm, chèn tập tin và tập tin dùng chun Cách xử lý chuỗi, mảng, kiểu DataTime Thao tác trên cơ sở dữ liệu MySQL PHP và Database Phân trang với PHP Xóa, Cập nhật dữ liệu dạng mảng Tạo Mailing List: PHP & Mysql RECENT COMMENTS Random News Popular EMAIL ARTICLES Thành phần Block và Inline January 14, 2010 9 comments Khái niệm về Inline và Block là một khái niệm hết sức cơ bản nhưng cũng cực kỳ quan trọng trong CSS. Hiểu được từng đặc điểm của mỗi thành phần là chìa khóa quan trọng để bạn có thể vận hành CSS theo ý muốn. Trong bài này tôi sẽ nói về chức năng của từng thành phần. Tuy nhiên tôi sẽ vẫn giữ nguyên từ chuyên ngành là Block và Inline mà không dịch ra tiếng Việt là “khối” và “trong dòng” nghe cùi quá. Khi các thành phần HTML được hiển thị trên trình duyệt nó thường có 2 cách hiển thị là theo Block và Inline. Nói hình tượng để bạn dễ hiểu thì các thành phần Block giống như một bàn cờ và các thành phần Inline là quân cờ. Các quân cờ nằm trong bàn cờ và bàn cờ thì không bao giờ nằm trong quân cờ. Đây cũng là một nguyên tắc cơ bản nhất của Inline và Block. Thành phần inline có thể nằm trong thành phần Block, nhưng Block không thể nằm trong thành phần Inline. Lý thuyết thì là vậy nhưng hơi mơ hồ khó hiểu, cách tốt nhất là chúng ta học từ ví dụ ở dưới. Ví dụ về Block Thẻ <p> và <div> là hai thành phần mặc định Block phổ biến nhất. Chỉ khi bạn khai báo trong CSS và muốn biến nó thành inline với Property là Display: inline thì nó mới thành inline. Ví dụ tôi có một thẻ <div> như sau: Bạn sẽ thấy dòng chữ này chiếm hết độ rộng của thành phần mẹ chứa nó và tự động xuống hàng mới Nếu tôi viết tiếp thì dòng mới sẽ bị đẩy xuống dưới dù cho nó được viết cùng hàng với dòng ở trên nằm trong thẻ <div> Các thành phần Block bao gồm <div>: Là thành phần trắng dùng để làm “hộp” chứa. <h1> ….<h6>: Các headings <p>: Thẻ này dùng để mở đầu và kết thúc một đoạn văn bản. CSS CSS Cơ bản jQuery jQuery Cơ bản Phát triển Web Bài viết, kinh nghiệm Videos Các thể loại WordPress Tutorials, Hacks HOME CÂU HỎI THƯỜNG GẶP LIÊN HỆ TÁC GIẢ BẢN QUYỀN Thành phần Block và Inline | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/thanh-phần-block-va-inline/[8/10/2010 3:04:15 PM] QUẢNG CÁO Your Ad Here for Free $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Your Ad Here for Free $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Your Ad Here for Free $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Tạo WordPress Theme – Dựng xHTML (16) chicken_roll: hahaha hay quá hết chổ trê (thanks you very much much…) nghe anh nói đây ko Tạo WordPress Theme – Slice hình (22) chicken_roll: ui ui hay quá cảm ỏn nhiều học rất nhiều từ anh và Anh CS thanks phát cho có Tạo WordPress Theme – Search form và Random Posts (15) DiVIVu: @ajimoto & tuyen: Làm thế này là được bạn ạ: <script type="text/javascript& PHP Căn Bản – Bài 9 (40) pham duy: Vang ban angelthao_0984884679 da noi dung do chung t con chan chu gi nua ma khong giup doan: ai muốn xem bằng file swf thì down KMP về mà dùng cái này còn hay hơn media của win nhiều Lập trình web và sự Lười nhác (23) kien: Không còn gì để nói :-s Tạo trang web đầu tiên (41) ho nga: ? ho nga: huhu sao làm web mệt dzữ vậy a hai ui…? <li>, <dt>, <dd>: hiển thị danh sách. <table>, <blockquote>, <pre> và <form> Ví dụ về thành phần Inline Ví dụ tôi có một đoạn văn như sau, và trong đó tôi có một cặp thẻ <strong>, nó không bắt thành phần nằm trong nó phải xuống hàng mà nó chỉ “nhẹ nhàng” chui vào giữa và sống hạnh phúc trong đó. Cũng giống như quân cờ nằm trong bàn cờ vậy. Các thành phần inline bao gồm <span>, <a>, <em>, <br /> <img> Ví dụ hình mặt cười này sẽ xuất hiện ở trong dòng mà không ép chữ xuống hàng mới. Nó chỉ chiếm khoảng không gian tối thiểu mà nó cần. Giống như quân cờ chỉ chiếm một khoảng không gian nhất định của nó mà thôi. Chứ nó không ảnh hưởng đến bàn cờ. <input> Display Property Cái hay của CSS là bạn không chỉ bị ép buộc sử dụng giá trị mặc định của từng thành phần. Mà bạn có thể thay đổi cách hiển thị của nó theo ý mình. Ví dụ một thành phần <li> theo mặc định là dạng Inline nhưng bạn có thể biến nó thành block với CSS tương ứng là Display: block. Đây chính là một phần rất quan trọng trong thiết kế giao diện. Nó mở ra một chân trời mới với các cách sắp xếp thành phần mà chỉ bị giới hạn bằng khả năng thiết kế của bạn. Được áp dụng nhiều nhất là khi bạn sử dụng <li> làm menu như rất nhiều trang web. Ở mặc định nếu bạn có một list như sau: Nó sẽ xuất hiện như sau ở trình duyệt Home About Services FAQs Contact Nếu bạn muốn nó xuất hiện trong cùng một hàng thì bạn có thể khai bao CSS như sau: 1 <ul> 2 <li><a href="#">Home</a></li> 3 <li><a href="#">About</a></li> 4 <li><a href="#">Services</a></li> 5 <li><a href="#">FAQs</a></li> 6 <li><a href="#">Contact</a></li> 7 </ul> 1 .menuNav li { 2 display:inline; 3 background-color:#eee; 4 border:1px solid red; 5 margin:0; padding:0px 10px; 6 } đây là inline element button Thành phần Block và Inline | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/thanh-phần-block-va-inline/[8/10/2010 3:04:15 PM] 9 Comments ( Comment bài này ) « WordPress Theme – Comment và Custom Comment Tạo WordPress Theme – Content Slider » Những bài viết có liên quan Display Property Phần 1: Chuyển PSD thành xHTML Tạo thanh Navigation với Photoshop Những cách trình bày CSS Tránh lạm dụng thẻ Div Your Ad Here for Free $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Your Ad Here! BIDVERTISER ADS Bạn cũng có thể tham khảo thêm video tutorial tôi đã làm về Display Property trong CSS để hiểu thêm chi tiết. Compatible Implant Trilobe Compatible Implant The $145.00 Alternative www.BlueSkyBio.com nhtera says: January 14, 2010 at 9:32 pm Câu này anh DW gõ nhầm chút “Ví dụ một thành phần theo mặc định là dạng Block nhưng bạn có thể biến nó thành block với CSS tương ứng là Display: block.” Reply Demon Warlock says: January 15, 2010 at 7:04 am Oh, hehe, sorry nhé! Reply CuongNguyen says: January 15, 2010 at 8:51 am Hay thật ! Cái này rất bổ ích cho mình đây ! Hôm nọ vừa xem người ta sử dụng cái inline này trên video mà không hiểu để làm gì, cám ơn anh DW nhé ! Em đang rất muốn làm cái comments mà anh DW chưa ra TUT. Mong anh sẽ ra cái TUT làm comment để em và mọi người học tập ! Reply Thành phần Block và Inline | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/thanh-phần-block-va-inline/[8/10/2010 3:04:15 PM] Demon Warlock says: January 19, 2010 at 7:21 am Ẹc! Video Comment to vật vã ngay trên trang chủ mà chú bảo chưa có . Thiệt tình. Reply kimsangyoo says: January 19, 2010 at 12:57 am Ah Hình như em hiểu vấn đề rùi! Cho em hỏi một câu nữa thui nha. Kết luận cuối cùng là , …, , , mặc định của nó là Block phải không ạ? Tức là mình không cần khai báo thì trình duyệt sẽ tự hiểu là Block đúng không ạ! Rất …rất Cám ơn Bác DW về bài viết này. P/S:Ngay khi em đọc thấy Title của bài viết là em biết Bác đã cố tình dành cho em rùi Reply kimsangyoo says: January 19, 2010 at 12:59 am Éc! Sorrry em chèn sai thẻ html: Sửa lại chỗ …( hàng thứ hai ) là , , …, , Reply Demon Warlock says: January 19, 2010 at 7:22 am chèn code vào giữa hai dấu ` dấu nằm trên phím tab đó. Reply newbie_it says: March 28, 2010 at 2:21 pm hi!,anh cho em hỏi 1 câu ngoài lề 1 chút,hiện tại em đang tập tành thiết kế web và code CSS,em có 1 chỗ vướng mắc thế này,trang web em viết khi zoom in hoặc zoom out thì các thành phần trong trang co giãn không đồng đều,và không giữ nguyên vị trí như cũ nữa,không giống như các trang trên mạng dù phóng to hay thu nhỏ thì các thành phần vẫn giữ nguyên vị trí cũ.anh có thể giúp em giải quyết được không! Reply Phoebe says: July 17, 2010 at 11:19 am “Ví dụ một thành phần theo mặc định là dạng Inline nhưng bạn có thể biến nó thành block với CSS tương ứng là Display: block.” anh mixed up chữ inline và block rồi Reply Thành phần Block và Inline | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/thanh-phần-block-va-inline/[8/10/2010 3:04:15 PM] Leave a comment ( Chọn hình đại diện ) Chọn kiểu gõ: Tự động TELEX VNI Tắt Tên bạn Email Website Comment Luu ý khi post comment: Không "bóc tem" topic Dùng lời lẽ có văn hoá và lịch sự Xem trang FAQs trước khi hỏi Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a> Wrap code trong dấu `backtick` (dấu trên phím Tab) © 2008-2010 izwebz, All Rights Reserved. BACK TO TOP Powered by WordPress | Hand coded and designed by Demon Warlock Izwebz is solemnly hand coded and designed from scratch by Demon Warlock. It is also very proud of being powered by WordPress, which is an exceptionally well written and beautiful CMS Rules are not made to be broken at Izwebz Bạn không được tự ý copy và phát hành lại nội dung của izwebz nếu chưa được sự đồng ý của tôi. Biết tôn trọng và cư xử hòa nhã với mọi người Không "bóc tem" bài viết. Izwebz được quyền xóa những comment nào không phù hợp với nội dung của trang web Câu hỏi thường gặp Liên hệ Tác giả Bản quyền Trang web vẫn đang trong quá trình phát triển về nội dung. Do vậy nếu bạn có khả năng hãy đóng góp bài viết hoặc bạn có thể quảng cáo trang web đến những người mà bạn biết. Được vậy tôi sẽ rất biết ơn bạn. Submit Thành phần Block và Inline | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/thanh-phần-block-va-inline/[8/10/2010 3:04:15 PM] . nó thành block với CSS tương ứng là Display: block. ” anh mixed up chữ inline và block rồi Reply Thành phần Block và Inline | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/thanh -phần- block- va -inline/ [8/10/2010. comment để em và mọi người học tập ! Reply Thành phần Block và Inline | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/thanh -phần- block- va -inline/ [8/10/2010 3:04:15 PM] Demon Warlock. Thành phần Block và Inline | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/thanh -phần- block- va -inline/ [8/10/2010 3:04:15 PM] NAVIGATION Câu