Nếu nói về các thuộc tính CSS cho việc trang trí văn bản thì cũng chỉ có các thuộc tính mà bạn đã xem ở hai phần trước. Nhưng một cái khó nhất trong CSS đó là sử dụng kỹ thuật CSS Layout như thế nào cho chính xác để lên bố cục giao diện website của mình, và đây là bài quan trọng nên đọc trước khi tìm hiểu kỹ thuật CSS Layout mà mình sẽ hướng dẫn sau này.

CSS Layout là thuật ngữ chỉ chung về việc dựng bố cục cho website dựa trên việc sử dụng và tùy biến các khối, phần tử.

Để dễ dàng hơn để sau này khi tìm hiểu về các kỹ thuật nâng cao, thì việc bạn cần làm bây giờ là nên hiểu thế nào là Block, thế nào là Inline. Đây là hai thuật ngữ rất thường sử dụng trong CSS, từ việc đọc các bài hướng dẫn đến việc tìm kiếm giải pháp trên Internet.

See the Pen jEjzJQ by Thach Pham (@thachpham92) on CodePen.

Block là gì?

Phần tử khối (Block Elements) là thuật ngữ chỉ chung các thẻ HTML có chức năng tạo một khu vực hay nói dễ nghe xíu là một khối. Khối này có nghĩa là một thẻ khi mà bạn khai báo thì nó sẽ được hiển thị ở mỗi dòng riêng biệt bao gồm các nội dung nằm bên trong. Ở các bài học HTML cơ bản bạn có thể đã biết qua một số thẻ block cơ bản như

,

,
,

,…

Và khi bạn học tới CSS, bạn sẽ dùng một thẻ rất quan trọng nữa đó là

 và đây là một thẻ được dùng để tạo các block hay một khu vực nào đó để dễ dàng viết CSS sau này.

Inline là gì?

Phần tử nội dòng (Inline Elements) là thuật ngữ chỉ chung các thẻ HTML khi mà khai báo vào nội dung thì nó vẫn sẽ nằm chung một dòng với các văn bản khác. Một số thẻ inline rất hay dùng đó là , , , ,…và đặc biệt là  nếu bạn cần gộp nhóm các phần tử nào đó mà không ảnh hưởng đến các văn bản chung một hàng, thẻ  này có ý nghĩa và cách sử dụng giống như

 nhưng nó được dùng trong inline.

Có thể thay đổi từ Inline sang Block và ngược lại không?

Câu trả lời là có, chúng ta có thể đổi kiểu hiển thị một phần tử bất kỳ từ inline sang block và ngược lại, hay chuyển qua kiểu hiển thị khác là table với thuộc tính display trong CSS. Nhưng vấn đề này mình sẽ nói kỹ hơn ở một phần hướng dẫn riêng cho thuộc tính này sẽ kỹ hơn.

Tại sao việc hiểu Block và Inline lại quan trọng?

Khi sử dụng CSS để dựng bố cục website mà bạn chưa hiểu rõ về Block và Inline thì có thể sẽ gặp một số khó khăn nếu đụng tới một số phần khó. Chẳng hạn như bạn sẽ không biết sử dụng

 và  thế nào cho hợp lý, không thể sửa kiểu hiển thị một số phần tử theo ý muốn,…và đây là vấn đề khá quan trọng sau này mà chỉ khi tiến hành thực hành nhiều với CSS bạn mới thấy được.

Lời kết

Trong bài này thì mình chỉ muốn giải thích cho các bạn hiểu thế nào là block và inline thôi vì hai thuật ngữ này mình sẽ sử dụng khá nhiều từ bài này. Trong bài này mình cũng có nói qua về thẻ

 nhưng ở ngay bài kế tiếp, mình sẽ nói kỹ hơn về thẻ này và cách sử dụng nó.

Xem tiếp bài trong serie

Phần trước: [Học CSS] Trang trí font chữ cho văn bảnPhần kế tiếp: [Học CSS] Thẻ div và tạo bố cục trên website

Bài liên quan

• [Học CSS] Thẻ div và tạo bố cục trên website
• [Học CSS] Các thuộc tính cho Text (văn bản)
• [Học CSS] Position và Absolute – Relative
• [Học CSS] Nhúng CSS vào website
• [Học CSS] Tùy biến loại phần tử với “display”
• [Học CSS] Chia cột với float và clear float




Content retrieved from:
https://thachpham.com/web-development/html-css/phan-tu-block-va-inline.html.

Tags:



Phạm Văn Siêng 24/09/2019, Cập nhật: 5 năm trước

Chia sẻ:

0

Ý KIẾN THÀNH VIÊN



Đăng nhập để bình luận

Chưa có bình luận