Tìm hiểu để cải thiện giao diện trang web của bạn
Học cách tạo biểu mẫu với CSS là một cách tuyệt vời để cải thiện giao diện trang web của bạn. Các dạng HTML được cho là một trong những điều xấu nhất trên hầu hết các trang web. Họ thường nhàm chán và tiện dụng và không cung cấp nhiều trong phong cách.
Với CSS, điều đó có thể thay đổi. Kết hợp CSS với các thẻ biểu mẫu nâng cao hơn có thể cung cấp một số biểu mẫu đẹp mắt.
Thay đổi màu sắc
Cũng giống như với văn bản, bạn có thể thay đổi màu nền trước và nền của các phần tử biểu mẫu.
Một cách dễ dàng để thay đổi màu nền của hầu hết mọi phần tử biểu mẫu là sử dụng thuộc tính màu nền trên thẻ đầu vào. Ví dụ, mã này áp dụng một màu nền màu xanh (# 9cf) trên tất cả các phần tử.
đầu vào {
màu nền: # 9cf;
màu: # 000;
}
Để thay đổi màu nền của chỉ các phần tử biểu mẫu nhất định, chỉ cần thêm văn bản và chọn kiểu. Ví dụ:
đầu vào, văn bản, chọn {
màu nền: # 9cf;
màu: # 000;
}
Hãy chắc chắn thay đổi màu văn bản nếu bạn làm cho màu nền của bạn tối. Các màu tương phản giúp làm cho các phần tử biểu mẫu dễ đọc hơn. Ví dụ: văn bản trên màu nền đỏ đậm dễ đọc hơn nhiều nếu màu văn bản có màu trắng. Ví dụ: mã này đặt văn bản màu trắng trên nền đỏ.
đầu vào, văn bản, chọn {
màu nền: # c00;
màu: #fff;
}
Bạn thậm chí có thể đặt màu nền trên thẻ biểu mẫu. Hãy nhớ rằng thẻ biểu mẫu là một phần tử khối , do đó, màu lấp đầy trong toàn bộ hình chữ nhật, không chỉ là vị trí của các phần tử.
Bạn có thể thêm nền màu vàng vào phần tử khối để làm cho khu vực nổi bật, như sau:
hình thức {
màu nền: #ffc;
}
Thêm đường viền
Cũng giống như màu sắc, bạn có thể thay đổi đường viền của các phần tử biểu mẫu khác nhau. Bạn có thể thêm một đường viền duy nhất xung quanh toàn bộ biểu mẫu. Hãy chắc chắn để thêm đệm, hoặc các yếu tố hình thức của bạn sẽ bị kẹt ngay bên cạnh biên giới.
Dưới đây là ví dụ về mã cho đường viền màu đen 1 pixel với 5 pixel đệm:
hình thức {
border: 1px solid # 000;
đệm: 5px;
}
Bạn có thể đặt các đường viền xung quanh nhiều hơn chỉ là biểu mẫu. Thay đổi đường viền của các mục nhập để làm nổi bật chúng:
đầu vào {
border: 2px dashed # c00;
}
Hãy cẩn thận khi bạn đặt đường viền trên hộp nhập liệu vì chúng trông giống như hộp nhập liệu, và một số người có thể không nhận ra rằng họ có thể điền vào biểu mẫu.
Kết hợp các tính năng kiểu
Bằng cách tập hợp các phần tử biểu mẫu của bạn với suy nghĩ và một số CSS, bạn có thể thiết lập một biểu mẫu tìm kiếm đẹp bổ sung cho thiết kế và bố cục của trang web của bạn.