box model _ học thiết kế web theo chuẩn.

7 332 1
box model _ học thiết kế web theo chuẩn.

Đang tải... (xem toàn văn)

Thông tin tài liệu

Box Model | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/css-box-model/[8/10/2010 2:59:51 PM] NAVIGATION Những điều nên tránh khi thiết kế trang web Phần mềm FTP miễn phí – FileZilla Giới thiệu về CSS3 jQuery Image Hover Nguồn icon miễn phí Đừng làm nửa chừng rồi ngưng Giao diện mới cho Izwebz Lĩnh vực trung tâm Cách chọn domain Những điều nên tránh khi tối ưu hoá công cụ tìm kiếm 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 Box Model October 8, 2008 7 comments 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. Dòng chữ với đường viền và màu nền Nhung với CSS bạn có thể cho hiển thị đuờng viền cũng nhu màu nền của bất cứ đối tuợng nào trong trang mà bạn muốn. Ở ví dụ duới đây tôi cho hiển thị đuờ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 1 p {border: solid 1px red; background-color:#bbeeff;} 2 h1 {border: solid 1px red; background-color:#bbeeff;} 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 Box Model | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/css-box-model/[8/10/2010 2:59:51 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 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…? 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 Box Model | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/css-box-model/[8/10/2010 2:59:51 PM] 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 Your Ad Here! BIDVERTISER ADS Ở 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: hoặc gộp chung vào một như sau 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. 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 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à: 1 p {border-style: dashed; border-width: 3px; border-color: yellow;} 1 p {border: 3px dashed yellow;} 1 * {margin: 0; padding: 0;} 1 p {border: 1px solid red; margin: 50px 0px 30px 0px;} 1 {margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px;} Box Model | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/css-box-model/[8/10/2010 2:59:51 PM] 7 Comments ( Comment bài này ) « Độ lớn thực sự của Box Class và ID » Những bài viết có liên quan Độ lớn thực sự của Box Pseudo Class Clear và Float Thứ bậc trong XHTML Contextual Position 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ị: 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ó. 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 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ị. 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. 1 {margin:5px 10px 15px 20px;} 1 {margin:12px 10px 6px;} 1 {margin:12px;} 1 {border:0px 0px 2px 4px;} Compatible Implant Trilobe Compatible Implant The $145.00 Alternative www.BlueSkyBio.com Tran says: October 18, 2009 at 6:56 am Em gặp rắc rối với margin, ở dưới đây, em cho margin vào 1 class, rồi trong file html em đã chèn class đó vào thì margin không chạy. Em thật sự không hiểu sai ở đâu, Reply Box Model | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/css-box-model/[8/10/2010 2:59:51 PM] đây là CSS của em : @charset "utf-8"; /* CSS Document */ tieude, cth1, date, time, match {font-family:Tahoma, Geneva, sans-serif; } tieude {font-size:36px; color:#F00; border-style:solid; border-width:thin; border-color:#F00; padding:5px; } cth1 {font-size:14px; color:#9C9; } date {font-size:24px; color:#C66; } time {font-size:18px; color:#F96; } Demon Warlock says: October 18, 2009 at 7:41 am Thuộc tính margin đâu cần phải sử dụng class em? nếu em muốn thành phần nào có margin thì em sử dụng selector để chọn nó thôi. Ví dụ em muốn tieude có margin thì em làm thế này Nên sử dụng cách viết tắt trong CSS cho tiết kiệm thời gian em. tieude {margin: 20px 0px;} Reply NickB says: October 18, 2009 at 11:43 pm Đơn giản không chạy là do sai cú pháp nếu là class thì . còn id thì # VD .tieude {margin: 20px 0px;} Kiểm tra lại hen Reply mrlonganh says: December 29, 2009 at 7:05 am khá hay và chi tiết Reply Ngọc Việt says: May 2, 2010 at 10:17 am anh ơi cho em hỏi padding:inherit là sao ạ? em không hiểu inherit là sao hết. Reply thoandien says: Reply Box Model | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/css-box-model/[8/10/2010 2:59:51 PM] Leave a comment ( Chọn hình đại diện ) July 20, 2010 at 11:45 pm Chào anh DW. Em có một thắc mắc đó là tại sao lại để margin-top: 50px và margin-bottom: 30px, dù đã biết được tính bù của nó khi chúng chọn cái giá trị lớn nhất áp dụng vào thẻ html. Theo tính bù của margin thì chọn giá trị là 50px, vậy còn giá trị 30px khi nào thì áp dụng vào hả anh? nó có ảnh hưởng ntn? có cần thiết để giá trị margin-bottom: 30px hay là margin-bottom: 0px; Clackken Smith says: July 21, 2010 at 6:27 pm Có vẻ bạn chưa hiểu về giá trị Margin. Hệ thống margin bao gồm 4 kiểu. margin-top : Khoảng cách phía trên. margin-bottom : Khoảng cách phía dưới. margin-left : Khoảng cách bên trái. margin-right : Khoảng cách bên phải. Các giá trị trên sẽ độc lập với nhau, nếu bạn chỉ muốn box của mình có khoảng cách phía trên mà thôi, còn lại các khoảng cách khác thì không thay đổi thì bạn chỉ sử dụng mỗi margin-top. - Trường hợp bạn muốn khoảng cách đều thì chỉ sử dụng giá trị margin mà thôi, không cần các giá trị top, bottom… Reply Tên bạn Email Website Comment Submit Box Model | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/css-box-model/[8/10/2010 2:59:51 PM] Chọn kiểu gõ: Tự động TELEX VNI Tắt 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. . Box Model | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/css -box- model/ [8/10/2010 2:59:51 PM] NAVIGATION Những điều nên tránh khi thiết kế trang web Phần mềm FTP miễn. margin-left: 20px;} Box Model | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/css -box- model/ [8/10/2010 2:59:51 PM] 7 Comments ( Comment bài này ) « Độ lớn thực sự của Box Class và ID » Những. cần các giá trị top, bottom… Reply Tên bạn Email Website Comment Submit Box Model | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/css -box- model/ [8/10/2010 2:59:51 PM] Chọn kiểu gõ: Tự động

Ngày đăng: 28/04/2014, 15:36

Từ khóa liên quan

Mục lục

  • izwebz.com

    • Box Model | Học thiết kế web theo chuẩn.

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan