Ngay khi bạn bắt đầu xây dựng trang web bằng HTML, bạn sẽ bắt đầu làm việc với định cỡ. Để làm cho trang web của bạn trông giống như cách bạn muốn, trông giống như thiết kế bạn hoặc một nhà thiết kế khác đã tạo, bạn sẽ muốn thay đổi kích thước của văn bản trên trang web đó, cũng như các thành phần khác trên trang. Để làm điều này, bạn có thể bắt đầu tìm kiếm một thẻ "kích thước" HTML, nhưng bạn sẽ nhanh chóng tìm thấy nó thiếu.
Thẻ kích thước HTML không tồn tại trong HTML. Thay vào đó, để đặt kích thước phông chữ, hình ảnh hoặc bố cục của bạn, bạn nên sử dụng Trang tính kiểu xếp tầng. Trong thực tế, bất kỳ thay đổi trực quan nào bạn cần thực hiện đối với văn bản của trang web hoặc phần tử khác sẽ được xử lý bởi CSS! HTML chỉ dành cho cấu trúc.
Thẻ gần nhất với thẻ kích thước HTML là thẻ phông chữ cũ, thẻ này thực sự bao gồm thuộc tính kích thước. Được cảnh báo rằng thẻ này đã không được chấp nhận trong các phiên bản HTML hiện tại và có thể không được trình duyệt hỗ trợ trong tương lai! Bạn không muốn sử dụng thẻ phông chữ trong HTML của mình! Thay vào đó, bạn nên tìm hiểu CSS để kích thước các phần tử HTML của bạn và tạo kiểu cho trang web của bạn cho phù hợp.
Kích thước phông chữ
Phông chữ được cho là thứ dễ nhất để kích thước với CSS. Moreso hơn là kích thước văn bản đó, với CSS bạn có thể cụ thể hơn về kiểu chữ trang web của bạn. Bạn có thể xác định kích thước phông chữ, màu sắc, vỏ, trọng lượng, hàng đầu và hơn thế nữa. Với thẻ phông chữ, bạn chỉ có thể xác định kích thước và sau đó chỉ là số tương ứng với kích thước phông chữ mặc định của trình duyệt khác với mọi khách hàng.
Để đặt đoạn văn của bạn có kích thước phông chữ là 12pt, hãy sử dụng thuộc tính kiểu phông chữ:
h3 {font-size = 24px; }Kiểu này sẽ đặt kích thước phông chữ của các phần tử headiing3 24 pixel. Bạn có thể thêm điều này vào một bảng định kiểu bên ngoài và tất cả các H3 của trang web của bạn sẽ sử dụng kiểu này.
Nếu bạn muốn thêm các kiểu typographic bổ sung vào văn bản của mình, bạn có thể thêm chúng vào quy tắc CSS này:
h3 {font-size: 24px; màu: # 000; font-weight: bình thường; }Điều này sẽ không chỉ đặt kích thước phông chữ cho H3, nó cũng sẽ đặt màu thành màu đen (đó là mã hex của # 000 có nghĩa là) và nó sẽ đặt trọng số thành "bình thường". Theo mặc định, các trình duyệt hiển thị tiêu đề 1-6 dưới dạng văn bản in đậm, do đó, kiểu này sẽ ghi đè văn bản mặc định đó và về cơ bản là "không in đậm".
Kích thước hình ảnh
Hình ảnh có thể khó xác định kích thước vì bạn thực sự có thể sử dụng trình duyệt để thay đổi kích thước hình ảnh. Tất nhiên, việc thay đổi kích thước hình ảnh bằng trình duyệt là một ý tưởng tồi vì nó khiến các trang tải chậm hơn và trình duyệt thường làm một việc thay đổi kích thước kém, làm cho hình ảnh trông xấu. Thay vào đó, bạn nên sử dụng phần mềm đồ họa để thay đổi kích thước hình ảnh và sau đó viết kích thước thực tế của chúng trong HTML trang web của bạn.
Không giống như phông chữ, hình ảnh có thể sử dụng HTML hoặc CSS để xác định kích thước. Bạn xác định chiều rộng của hình ảnh và chiều cao. Khi bạn sử dụng HTML, bạn chỉ có thể xác định kích thước hình ảnh theo pixel. Nếu bạn sử dụng CSS, bạn có thể sử dụng các phép đo khác bao gồm inch, centimét và phần trăm. Giá trị cuối cùng này, tỷ lệ phần trăm, rất hữu ích khi hình ảnh của bạn cần phải là chất lỏng, như trong một trang web đáp ứng.
Để xác định kích thước hình ảnh của bạn bằng cách sử dụng HTML, hãy sử dụng các thuộc tính chiều cao và chiều rộng của thẻ img. Ví dụ: hình ảnh này sẽ là hình vuông 400x400 pixel:
chiều cao = "400" chiều rộng = "400" alt = "hình ảnh" />Để xác định kích thước hình ảnh của bạn bằng cách sử dụng CSS, hãy sử dụng các thuộc tính chiều cao và chiều rộng. Dưới đây là cùng một hình ảnh, sử dụng CSS để xác định kích thước:
style = "height: 400px; chiều rộng: 400px;" alt = "hình ảnh" />Kích thước bố cục
Kích thước phổ biến nhất mà bạn xác định trong bố cục là chiều rộng và điều đầu tiên bạn cần quyết định là có sử dụng bố cục chiều rộng cố định hoặc trang web đáp ứng hay không. Nói cách khác, bạn định xác định chiều rộng là số pixel, inch hoặc điểm chính xác? Hoặc bạn sẽ thiết lập chiều rộng bố trí của bạn để linh hoạt bằng cách sử dụng ems hoặc tỷ lệ phần trăm? Để xác định kích thước bố cục của bạn, bạn sử dụng các thuộc tính CSS chiều rộng và chiều cao giống như bạn làm trong một hình ảnh.
Chiều rộng cố định:
style = "width: 600px;">Chiều rộng chất lỏng:
style = "width: 80%;">Khi bạn quyết định độ rộng cho bố cục của mình, bạn nên nhớ các chiều rộng trình duyệt khác nhau mà người đọc của bạn có thể đang sử dụng và các thiết bị khác nhau mà họ cũng sẽ sử dụng. Đây là lý do tại sao các trang web đáp ứng , có thể thay đổi bố cục và kích thước của chúng dựa trên các thiết bị và kích thước màn hình khác nhau, là tiêu chuẩn thực hành tốt nhất hiện nay.