Mục lục:
Video: Học lập trình Web A-Z - CSS - Bài 9 - Sử dụng CSS Layout để bố trí nội dung tài liệu HTML 2025
Bảng điều khiển văn bản của Dreamweaver có một bộ sưu tập các tùy chọn điều khiển hiển thị văn bản trong các trang của bạn. Bạn có thể truy cập các tùy chọn Bảng văn bản bằng cách di chuyển bảng điều khiển thuộc tính cho đến khi bạn nhận được dưới các tùy chọn Giao diện, hoặc bằng cách nhấp vào biểu tượng T ở đầu bảng điều khiển.
Bảng điều khiển văn bản bao gồm các tùy chọn định dạng sau:
-
Màu sắc: Thiết lập màu văn bản. Bạn có thể nhấp vào màu sắc tốt và chọn màu sắc, sử dụng eyedropper để lấy mẫu bất kỳ màu nào trên màn hình hoặc nhập mã màu thập lục phân vào trường màu. Nếu bạn nhập mã màu thập lục phân, hãy bao gồm dấu bắt đầu (#).
-
Phông-gia đình: Xác định một gia đình phông chữ hoặc một loạt các gia đình. Bạn có thể thêm phông chữ từ ổ cứng cục bộ hoặc từ Adobe TypeKit bằng cách chọn Manage Fonts ở cuối danh sách thả xuống và khởi chạy hộp thoại Manage Fonts.
-
Font-Style: Nhập bình thường, nghiêng, hoặc xiên. Tuy nhiên, chữ nghiêng và nghiêng hiếm khi khác trong một trình duyệt web, vì vậy hãy gắn với chữ nghiêng trừ khi bạn có một lý do cụ thể.
-
Phông chữ-Variant: Thay đổi văn bản thành chữ nhỏ. Kiểm tra thiết kế của bạn một cách cẩn thận vì thuộc tính này không được hỗ trợ bởi tất cả các trình duyệt.
-
Font-Weight: Làm cho văn bản xuất hiện đậm bằng cách chọn Bold hoặc Bolder từ danh sách thả xuống. Bạn cũng có thể nhập một số từ 100 đến 900 để điều khiển chính xác hơn cách in đậm văn bản xuất hiện. Để loại bỏ định dạng đậm, chọn Normal hoặc Lighter.
-
Font-Size: Xác định kích thước của văn bản. Bạn có thể chọn một số cụ thể kích thước hoặc kích thước tương đối. Các tùy chọn kích thước là pixel (px), điểm (pt), pica (pc), phần trăm (%), em, rem, cũ, và ch. Pixel, ems, và phần trăm là những lựa chọn phổ biến nhất cho kích thước văn bản.
-
Chiều cao dòng: Chỉ định độ cao của dòng mà văn bản được đặt. Giống như kích thước văn bản, bạn có thể chỉ định chiều cao dòng theo nhiều cách khác nhau, bao gồm pixel, ems và phần trăm. Đó là cách thực hành tốt trên web để thêm chiều cao dòng vì không gian xung quanh văn bản của bạn làm cho việc đọc trên màn hình máy tính dễ dàng hơn.
-
Căn chỉnh văn bản: Căn lề trái, canh phải, căn giữa hoặc căn chỉnh văn bản của bạn bằng cách nhấp vào biểu tượng tương ứng. Biểu tượng đầu tiên, đối với Inherit, là mặc định. Ví dụ: bạn có thể căn giữa văn bản ở cuối trang web của mình bằng cách đặt công cụ Text-Align thành Center trong định nghĩa của một phong cách mà bạn áp dụng cho thẻ ở cuối trang.
-
Văn bản-trang trí: Chỉ định văn bản được gạch dưới, overlined, hiển thị với một gạch ngang, hoặc hiển thị với hiệu ứng chớp mắt.Bạn cũng có thể chọn Không có gì, thường được sử dụng để loại bỏ gạch chân từ văn bản liên kết.
-
Text-Indent: Chỉ định số tiền văn bản sẽ được thụt lề từ phía bên trái của trang bằng cách nhập một số vào một trong các tùy chọn kích thước, chẳng hạn như pixel, ems, hoặc phần trăm.
Tại sao lại có nhiều phông chữ?
Có thể bạn đã nghe nói rằng bây giờ bạn có thể sử dụng bất kỳ phông chữ nào bạn muốn trên các trang web của bạn, nhờ vào phiên bản mới nhất của Cascading Style Sheets, CSS3. Bản tuyên bố này là đúng nhưng với một số hạn chế: Bạn phải có quyền hợp pháp để xuất bản phông chữ và phông chữ phải được lưu trữ trên một máy chủ web.
Để đảm bảo rằng văn bản của bạn xuất hiện theo ý định, Dreamweaver bao gồm các bộ phông phổ biến nhất trên các máy tính Windows và Macintosh. Các phông chữ này được nhóm trong các gia đình, chẳng hạn như
-
Gotham, Helvetica Nue, Helvetica, Arial, sans serif
-
Cambria, Hoefler Text, Serif Giải phóng, Times, Times New Roman, Times và serif
Bạn có thể tạo bộ sưu tập phông chữ của bạn bằng cách sử dụng hộp thoại Manage Fonts, có thể truy cập bằng cách chọn tùy chọn Manage Fonts ở cuối danh sách thả xuống Font-Family trong bảng Text trong bảng điều khiển CSS Designer.
Phần văn bản-bóng của bảng điều khiển văn bản
Phần Chữ-Đĩa của bảng Tóm tắt cung cấp công cụ để thêm bóng đổ văn bản, một trong những thuộc tính CSS mới nhất được bao gồm trong định nghĩa CSS3. Các tùy chọn phổ biến nhất là:
-
H-shadow: Thêm bóng vào văn bản của bạn trên trục ngang. Đầu tiên chọn một tùy chọn kích thước, và sau đó nhập một số trong lĩnh vực này. Ví dụ: nhập 2px, để thêm một bóng ngang rộng 2 pixel.
-
V-shadow: Thêm bóng vào văn bản của bạn trên trục dọc. Đầu tiên chọn một tùy chọn kích thước, và sau đó nhập một số trong lĩnh vực này.
-
Độ mờ: Kiểm soát lượng mờ trong bóng tối. Số càng lớn, càng có nhiều bóng đổ ra, hoặc mờ.
-
Màu sắc: Nhập mã màu thập lục phân để xác định màu sắc của bóng, hoặc sử dụng eyedropper để lấy mẫu bất kỳ màu nào trên màn hình.
Các tính năng ở cuối bảng điều khiển Văn bản, không phổ biến như các tuỳ chọn Bảng văn bản khác, như sau:
-
Chuyển đổi văn bản: Thay đổi trường hợp văn bản của bạn. Tùy chọn là Viết hoa, Chữ hoa và Chữ thường. Nhấp vào biểu tượng tương ứng để đặt thuộc tính này.
-
Khoảng cách chữ: Xác định khoảng trắng được chèn giữa các chữ cái. Các tùy chọn kích thước là pixel (px), điểm (pt), pica (pc), phần trăm (%), em, rem, cũ, và ch.
-
Word-Spacing: Định nghĩa khoảng trắng giữa các từ. Các tùy chọn kích thước là pixel (px), điểm (pt), pica (pc), phần trăm (%), em, rem, cũ, và ch. (Xem thanh bên cạnh "So sánh các tùy chọn kích cỡ CSS.")
-
Khoảng trắng: Cho trình duyệt biết xử lý các ngắt dòng và không gian trong một khối văn bản. Các tùy chọn của bạn là Thừa kế, Bình thường, Hiện hành, Trước, Pre-line, hoặc Pre-wrap. Nowrap đặc biệt hữu ích bởi vì nó ngăn không cho các phần tử bị tách ra nếu chúng phải bọc để phù hợp trong một cửa sổ trình duyệt hoặc một vùng chứa khác.
-
Vertical-Align: Căn chỉnh các phần tử nội tuyến, chẳng hạn như văn bản và hình ảnh, liên quan đến các phần tử bao quanh chúng. Bạn có thể đặt một giá trị số hoặc chọn Dòng đầu, phụ, Siêu, Top, Văn bản-Trên, Trung, Dưới và Văn bản dưới cùng.