Sử dụng các thuộc tính văn bản thụt lề và các Selling kề nhau
Thiết kế web tốt thường là về kiểu chữ tốt. Vì quá nhiều nội dung của một trang web được trình bày dưới dạng văn bản, có thể tạo kiểu cho văn bản vừa hấp dẫn vừa hiệu quả là một kỹ năng quan trọng để sở hữu như một nhà thiết kế web. Thật không may, chúng tôi không có cùng một mức độ kiểm soát typographic trực tuyến mà chúng tôi làm trong in ấn. Điều này có nghĩa là chúng tôi không thể luôn luôn tạo kiểu văn bản đáng tin cậy trên một trang web giống như cách chúng tôi có thể làm như vậy trong một bản in.
Một kiểu đoạn văn phổ biến mà bạn thường thấy trong bản in (và chúng ta có thể tạo lại trực tuyến) là nơi dòng đầu tiên của đoạn văn đó thụt vào một không gian tab . Điều này cho phép người đọc xem một đoạn bắt đầu từ đâu và một đoạn khác kết thúc.
Bạn không thấy phong cách trực quan này nhiều trong các trang web bởi vì các trình duyệt, theo mặc định, hiển thị các đoạn văn với khoảng trống bên dưới chúng như một cách để hiển thị nơi kết thúc và phần khác bắt đầu, nhưng nếu bạn muốn tạo kiểu cho trang đó lấy cảm hứng từ phong cách thụt lề trên các đoạn văn, bạn có thể làm như vậy với thuộc tính kiểu chữ thụt lề .
Cú pháp cho thuộc tính này rất đơn giản. Đây là cách bạn sẽ thêm một thụt lề văn bản vào tất cả các đoạn văn trong một tài liệu.
p {text-indent: 2em; }Tùy chỉnh Indents
Một cách bạn có thể chỉ định chính xác các đoạn văn để thụt lề, bạn có thể thêm một lớp vào các đoạn mà bạn muốn thụt vào, nhưng điều đó đòi hỏi bạn phải sửa từng đoạn để thêm một lớp vào nó. Điều đó không hiệu quả và không tuân theo các phương pháp hay nhất về mã HTML .
Thay vào đó, bạn nên cân nhắc khi bạn thụt lề đoạn văn. Bạn thụt lề các đoạn văn đang trực tiếp theo một đoạn khác. Để làm điều này, bạn có thể sử dụng bộ chọn anh chị em liền kề. Với bộ chọn này, bạn đang chọn mọi đoạn văn ngay trước một đoạn văn khác.
p + p {text-indent: 2em; }Vì bạn đang thụt lề dòng đầu tiên, bạn cũng nên đảm bảo rằng các đoạn văn của bạn không có thêm khoảng trống nào giữa chúng (mặc định là trình duyệt). Theo phong cách, bạn nên có khoảng trống giữa các đoạn văn hoặc thụt lề dòng đầu tiên, nhưng không phải cả hai.
p {margin-bottom: 0; padding-bottom: 0; } p + p {margin-top: 0; padding-top: 0; }Thụt lề âm
Bạn cũng có thể sử dụng thuộc tính thụt lề văn bản , cùng với một giá trị âm, làm cho sự bắt đầu của một dòng đi sang trái trái ngược với bên phải giống như một thụt lề thông thường. Bạn có thể làm điều này nếu một dòng bắt đầu bằng dấu ngoặc kép sao cho ký tự trích dẫn xuất hiện ở lề nhỏ bên trái của đoạn văn và các chữ cái tự vẫn tạo thành một căn chỉnh trái.
Ví dụ, giả sử rằng bạn có một đoạn văn là hậu duệ của một blockquote và bạn muốn nó được thụt lề âm. Bạn có thể viết CSS này:
blockquote p {text-indent: -.5em; }Điều này sẽ cung cấp cho sự bắt đầu của đoạn văn, có lẽ bao gồm các ký tự trích dẫn mở, được di chuyển một chút sang bên trái để tạo dấu chấm câu.
Về lề và đệm
Thông thường trong thiết kế web, bạn sử dụng các giá trị lề hoặc đệm để di chuyển các phần tử và tạo khoảng trắng. Tuy nhiên, những thuộc tính này sẽ không hoạt động để đạt được hiệu ứng đoạn thụt lề. Nếu bạn áp dụng một trong hai giá trị này cho đoạn văn, toàn bộ văn bản của đoạn đó, bao gồm mọi dòng, sẽ được đặt cách nhau thay vì chỉ dòng đầu tiên.