thành phần block và inline _ học thiết kế web theo chuẩn.

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

Trang 1

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

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

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>

<div>: Là thành phần trắng dùng để làm “hộp” chứa

<h1> ….<h6>: Các headings

: 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

Trang 2

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

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 ạ:

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

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

<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: ; padding: 0px 10px ;

6 }

đ ây là inline element button

Trang 3

9 Comments ( Comment bài này )

« WordPress Theme – Comment và Custom Comment Tạo WordPress Theme – Content Slider »

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

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:

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

Reply

Trang 4

Ẹ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

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

Trang 5

Leave a comment ( Chọn hình đại diện )

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)

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

Định dạng
Số trang	6
Dung lượng	292,62 KB