Thành phần Block và Inline
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á.
Vertical-align trong CSS
Tính năng Vertical-align trong CSS được kế thừa từ “thời đại” sử dụng bảng để thiết kế giao diện. Hiện tại tính năng valign trong table đã bị “đào thải” và không còn được sử dụng đúng chuẩn web nữa. Nhưng thay vào đó CSS lại giới thiệu một tính năng khác nghe tên hoàn toàn giống với valign là Vertical-align. Chính vì điều này nên đã gây ra một số hiểu lầm về nó. Trong bài này chúng ta sẽ xem xét cách sử dụng vertical-align trong CSS.
Absolute Position trong thiết kế giao diện
Có một thực tế rằng Absolute Position tuy rất hay và mạnh nhưng lại chưa được sử dụng đúng với “thực lực” của nó. Đa phần người ta thường sử dụng Float và dùng Padding hoặc Margin để căn chỉnh các thành phần trong giao diện với nhau. Nhưng như bạn cũng đã biết, giao diện với Float rất mong manh. Chỉ cần sai chút xíu là cả giao diện có thể bị vỡ.
Những cách trình bày CSS
Trong bài này chúng ta sẽ không bàn đến những tính năng thông thường của CSS mà trong bài này chúng ta sẽ xem xét đến những cách trình bày code CSS. Có rất nhiều cách bạn có thể chọn để trình bày trong CSS, nhưng chọn ra cách nào phù hợp với mình và luôn sử dụng nó là tốt nhất.
Cách sử dụng div đúng cách
Div là thẻ rất quan trọng trong thiết kế giao diện. Nó được sử dụng để thay thế hoàn toạn định dạng bảng trước đây. Tuy nhiên khi mới bắt đầu làm việc với CSS, chúng ta có xu hướng lạm dụng thẻ Div. Đôi khi vì muốn tạo được một thành phần nào đó mà bạn có thể sử dụng thẻ div nhiều hơn mức cần thiết. Trong bài này sẽ hướng dẫn bạn cách sử dụng thẻ div đúng cách và “tiết kiệm” nhất.
Tìm hiểu về Z-index trong CSS
Z-index là một tính năng khá hay trong CSS và có thể giúp bạn khắc phục nhiều thành phần khó trong thiết kế giao diện và nó cũng có thể tạo ra những hiệu ứng thú vị cho giao diện. Tuy nhiên Z-index nếu không hiểu rõ nguyên lý của nó thì cũng hơi khó sử dụng. Sau khi học xong video tutorial này, bạn có thể tự tin hơn với Z-index
Clear và Float (video)
Clear và Float là một khái niệm rất quan trọng trong CSS và sử dụng rất nhiều trong thiết kế giao diện với CSS. Tôi đã có bài viết về Clear và Float, nhưng vì đây là một khái niệm quan trọng, do vậy tôi muốn làm một video tutorial để giải thích những khía cạnh khác của Clear và Float. Hy vọng qua video này, bạn sẽ hiểu thêm ra về clear và float
Display Property
Ở bài trước bạn đã biết rằng tất cả các thành phần xhtml đều có Position Property. Cũng tương tự như vậy tất cả các thành phần xhtml đều có Display Property. Thực tế có khá nhiều giá trị Display Property, nhưng những thành phần hay được sử dụng nhất thường có một giá trị Display Property mặc định là Inline hoặc Block. Video sau đây sẽ minh hoạ cho 2 ví dụ vế sử dụng Display Property kết hợp với Position Property để tạo ra pop up và tool tip











