Video: Bài 2. Thiết kế giao diện Website bằng HTML và CSS trên Visual Studio 2015 2025
Nhiều vấn đề bố cục trang dường như yêu cầu bảng. Một số sử dụng thông minh của float CSS3 có thể giúp các phần tử với nhiều cột mà không có trên không của bảng. Các hình thức gây ra một nhức đầu đặc biệt vì một hình thức thường liên quan đến nhãn trong cột bên trái theo sau là các phần tử đầu vào trong cột bên phải.
Bạn có lẽ sẽ bị cám dỗ để đặt một hình thức như vậy trong một bảng. Thêm thẻ bảng làm cho HTML phức tạp hơn nhiều và không bắt buộc. Sử dụng CSS để quản lý bố cục tốt hơn.
Bạn có thể nổi các phần tử để tạo ra các hình thức hấp dẫn mà không yêu cầu bảng.
Vì thiết kế trang tham gia nhiều hơn, nên nghĩ đến HTML và CSS một cách riêng biệt. HTML sẽ cho bạn ý thức về mục đích chung của trang và CSS có thể được sửa đổi riêng. Sử dụng CSS bên ngoài là một phần mở rộng tự nhiên của triết lý này. Bắt đầu bằng cách nhìn vào floatForm. html và tập trung vào cấu trúc HTML trước khi lo lắng về phong cách:
floatForm. html Tên địa chỉ Điện thoại gửi yêu cầu
Trong khi bạn xem qua mã này, hãy lưu ý một vài điều thú vị về cách trang được thiết kế:
-
CSS là bên ngoài. CSS được định nghĩa trong một tài liệu bên ngoài. Điều này giúp bạn dễ dàng thay đổi kiểu dáng và giúp bạn tập trung vào tài liệu HTML một cách độc lập.
-
Mã HTML là tối thiểu. Mã này rất sạch sẽ. Nó bao gồm một hình thức với một. Các nhãn chứa, các phần tử, và một.
-
Không có bảng. Không cần thêm bảng như là một sơ đồ tổ chức nhân tạo. Một bảng sẽ không thêm vào sự rõ ràng của trang. Các thành phần biểu mẫu tự cung cấp cấu trúc đủ để cho phép tất cả định dạng bạn cần.
-
Nhãn là một phần của thiết kế. Bạn có thể sử dụng phần tử nhãn trong suốt biểu mẫu, cho bạn một phần tử có thể được tạo kiểu bất kể bạn muốn.
-
Mọi thứ đều có thể lựa chọn. Bạn sẽ muốn áp dụng một phong cách CSS cho các nhãn, một cho các yếu tố đầu vào, và một phong cách thứ ba cho nút. Bạn có thể thiết lập HTML để bạn có thể sử dụng bộ chọn CSS mà không yêu cầu bất kỳ thuộc tính id hay lớp.
-
Có nút. Bạn có thể sử dụng nút thay vì mục đích. Bằng cách này, bạn có thể áp dụng một phong cách cho tất cả các phần tử nút và một phong cách khác cho phần tử.
Thiết kế một trang như thế này để cơ cấu nội bộ của nó cung cấp tất cả các bộ chọn bạn cần là tuyệt vời. Điều này giúp trang này rất sạch sẽ và dễ đọc. Tuy nhiên, đừng ngại thêm các lớp học hoặc ID nếu bạn cần chúng.
Thường nên xem trang của bạn với HTML chính xác trước khi bạn bắt đầu phiền phức với CSS.
Nếu bạn có trang có phong cách và bạn muốn xem nó trông như thế nào nếu không có các quy tắc về kiểu dáng, hãy sử dụng công cụ dành cho nhà phát triển Chrome hoặc Firebug. Bạn có thể tạm thời vô hiệu một số hoặc tất cả các quy tắc kiểu CSS để xem nội dung mặc định bên dưới. Điều này đôi khi rất hữu ích.
