Tổng quan về các trang kiểu xếp tầng với bảng kiểu mẫu
Khi bạn xây dựng một trang web từ đầu, bạn nên bắt đầu với các kiểu cơ bản được xác định. Nó giống như bắt đầu với một vải sạch và bàn chải tươi. Một trong những vấn đề đầu tiên mà các nhà thiết kế web phải đối mặt là tất cả các trình duyệt web đều khác nhau. Kích thước phông chữ mặc định là khác nhau từ nền tảng đến nền tảng, họ phông chữ mặc định là khác nhau, một số trình duyệt xác định lề và đệm trên thẻ body trong khi các trình duyệt khác thì không, v.v. Nhận xung quanh những mâu thuẫn này bằng cách xác định các kiểu mặc định cho các trang web của bạn.
CSS và bộ ký tự
Trước tiên, hãy đặt bộ ký tự của tài liệu CSS của bạn thành utf-8 . Mặc dù có thể hầu hết các trang bạn thiết kế được viết bằng tiếng Anh, một số trang có thể được bản địa hóa - thích nghi với ngữ cảnh văn hóa và ngôn ngữ khác nhau. Khi đó, utf-8 đơn giản hóa quy trình. Việc đặt bộ ký tự trong trang kiểu bên ngoài sẽ không được ưu tiên hơn tiêu đề HTTP , nhưng trong tất cả các tình huống khác, nó sẽ xuất hiện.
Thật dễ dàng để thiết lập bộ ký tự. Đối với dòng đầu tiên của tài liệu CSS viết:
@charset "utf-8";Bằng cách này, nếu bạn sử dụng ký tự quốc tế trong thuộc tính nội dung hoặc dưới dạng tên lớp và ID, biểu định kiểu sẽ vẫn hoạt động chính xác.
Tạo kiểu cho trang
Điều tiếp theo mà một kiểu sheet mặc định là các kiểu để không có lề, đệm và đường viền. Điều này đảm bảo rằng tất cả các trình duyệt đều đặt nội dung ở cùng một nơi và không có bất kỳ khoảng trống nào giữa trình duyệt và nội dung. Đối với hầu hết các trang web, điều này quá gần với cạnh của văn bản, nhưng điều quan trọng là phải bắt đầu ở đó để hình ảnh nền và phân đoạn bố cục được xếp hàng chính xác.
html, body {margin: 0px; padding: 0px; đường viền: 0px; }Đặt màu nền trước hoặc phông chữ mặc định thành màu đen và màu nền mặc định thành màu trắng. Mặc dù điều này rất có thể sẽ thay đổi đối với hầu hết các thiết kế trang web, nhưng trước tiên, các màu chuẩn này được đặt trên thẻ và thẻ HTML sẽ giúp trang dễ đọc và hoạt động hơn.
html, body {color: # 000; nền: #fff; }Kiểu phông mặc định
Kích thước phông chữ và họ phông chữ là điều chắc chắn sẽ thay đổi khi thiết kế được giữ nhưng bắt đầu với kích thước phông chữ mặc định là 1 em và họ phông chữ mặc định của Arial, Geneva hoặc một số phông chữ sans-serif khác. Việc sử dụng ems giữ cho trang càng dễ tiếp cận càng tốt và phông chữ sans-serif dễ đọc hơn trên màn hình.
html, body, p, th, td, li, đ, dt {phông chữ: 1em Arial, Helvetica, sans-serif; }Có thể có những nơi khác mà bạn có thể tìm thấy văn bản, nhưng p , th , td , li , dd và dt là một khởi đầu tốt để xác định phông chữ cơ bản. Bao gồm HTML và nội dung chỉ trong trường hợp, nhưng nhiều trình duyệt ghi đè các lựa chọn phông chữ nếu bạn chỉ xác định phông chữ cho HTML hoặc nội dung.
Tiêu đề
Tiêu đề HTML rất quan trọng để sử dụng để giúp trang web của bạn phác thảo và cho phép các công cụ tìm kiếm thâm nhập sâu hơn vào trang web của bạn. Không có kiểu, tất cả chúng đều khá xấu, do đó, đặt kiểu mặc định trên tất cả chúng và xác định họ phông chữ và kích thước phông chữ cho mỗi kiểu.
h1, h2, h3, h4, h5, h6 {họ phông chữ: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }Không Quên Liên kết
Việc tạo kiểu cho các màu liên kết hầu như luôn là một phần quan trọng trong thiết kế, nhưng nếu bạn không định nghĩa chúng theo kiểu mặc định, rất có thể bạn sẽ quên ít nhất một trong các lớp giả. Xác định chúng với một số biến thể nhỏ trên màu xanh và sau đó thay đổi chúng khi bạn có bảng màu cho trang web được xác định.
Để thiết lập các liên kết trong sắc thái xanh dương, hãy đặt:
- liên kết màu lam
- đã truy cập các liên kết dưới dạng màu xanh đậm
- các liên kết di chuột dưới dạng màu lam nhạt
- các liên kết hoạt động thậm chí còn xanh hơn
như trong ví dụ này:
a: link {color: # 00f; } a: đã truy cập {color: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; } Bằng cách tạo kiểu cho các liên kết với một sơ đồ màu khá vô hại, nó đảm bảo rằng tôi sẽ không quên bất kỳ lớp nào, và cũng làm cho chúng ít ồn hơn màu xanh, đỏ và tím mặc định.Full Style Sheet
Dưới đây là bảng kiểu đầy đủ:
@charset "utf-8"; html, body {margin: 0px; padding: 0px; đường viền: 0px; màu: # 000; nền: #fff; } html, body, p, th, td, li, đ, dt {phông chữ: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {họ phông chữ: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: link {color: # 00f; } a: đã truy cập {color: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; }