HTML & CSS Lập trình web

Định dạng CSS – Phần 3 Block group

Block Group là một thành phần cũng khá là quan trọng, và nó liên quan tới nhiều vấn đề như là văn bản, vị trí của các phần tử trong một khối, phần này cũng khá là quan trọng và Aki nghĩ rằng sẽ rất là thiếu sót nếu bạn bỏ qua nó.

Danh sách các thuộc tính trong nhóm Block group

STT Số thứ tự Ý nghĩa
1 letter-spacing Khoảng cách giữ các ký tự
2 word-spacing Khoảng cách giữa các từ trong đoạn văn bản
3 text-align Vị trí của của đoạn văn bản
4 text-indent Khoảng cách thụt vào đầu dòng của một đoạn văn bản
5 white-space Định dạng cho khoảng trắng trong đoạn văn bản
6 vertical-align Vị trí của một phần tử
7 display Các kiểu hiện thị theo kiểu block, inline…

Cấu trúc HTML cần chuẩn bị

Trong bài này Aki sẽ không trình bày kết quả như bài trước nữa, bởi vì cách trình bày này sẽ làm các bạn không chịu thực hành lại. Do đó kể từ bài này Aki sẽ trình bày code và các nội dung chính, còn việc hiển thị kết quả như thế nào các bạn sẽ tự demo và quan sát. Việc làm này sẽ giúp các bạn học tập tốt hơn nên các bạn cố gắng nhé!

1/ Thuộc tính letter-spacing

Trường hợp sử dụng: thiết lập khoảng cách giữa các ký tự

Code mẫu

2/ Thuộc tính word-spacing

Trường hợp sử dụng: thiết lập khoảng cách giữa các từ trong đoạn văn bản

Code mẫu

3/ Thuộc tính text-align

Trường hợp sử dụng: Vị trí của của đoạn văn bản

Code mẫu

4/ Thuộc tính text-indent

Trường hợp sử dụng: Khoảng cách thụt vào đầu dòng của một đoạn văn bản

Code mẫu

5/ Thuộc tính white-space

Trường hợp sử dụng:  Định dạng cho khoảng trắng trong đoạn văn bản

Code mẫu

6/ Thuộc tính vertical-align

Trường hợp sử dụng: Vị trí của một phần tử

Code mẫu

7/ Thuộc tính display

Trường hợp sử dụng: Các kiểu hiện thị theo kiểu block, inline…

Code mẫu

Vỡi việc Aki chỉ cung cấp code mẫu chứ không trình bày kết quả thì việc này sẽ giúp các bạn bỏ đi thói quen không thực hành lại, mà chỉ nhìn vào demo rồi đoán kết quả, hành trình học CSS còn rất gian nan, mỗi một bài là một kiến thức khác nhau, tuy nhiên các kiến thức lại có những mối liên kết cố định với nhau, các bạn chỉ cần bỏ một bài bất kì, rồi khi xem đến các bài thực hành nâng cao thì Aki bảo đảm rằng các bạn sẽ đuối và không tiếp thu được nửa.

Series Navigation<< Định dạng CSS – Phần 2 Background groupĐịnh dạng CSS – Phần 4: Border Group >>
Nguồn: laptrinhweb.org