CSS là một biểu định kiểu xếp tầng, là một ngôn ngữ để mô tả sự xuất hiện của các trang web. Một trong những ưu điểm chính của CSS là khả năng thay thế bố cục bảng bằng bố cục khối.
Nó là cần thiết
Trình chỉnh sửa mã HTML
Hướng dẫn
Bước 1
Tạo khối đầu tiên. Ở dạng HTML, nó sẽ giống như một thẻ div với id 'block01'. Ở đây, mã định danh block01 chỉ ra rằng trong mô tả CSS, tất cả các thuộc tính của khối này được chỉ định cho bộ chọn # block01.
Bước 2
Mô tả khối trong CSS. Trong các kiểu CSS, chỉ định tên của số nhận dạng (# block01) và trong dấu ngoặc nhọn mô tả các tham số của nó - chiều rộng, vị trí, độ lệch, màu nền, v.v. Ví dụ: nó có thể giống như sau: # block01 {width: 150px; chiều cao: 150px; vị trí: tuyệt đối; đầu trang: 0px; trái: 0px; background-color: pink}. Mô tả này giả định rằng hộp sẽ dài 150 pixel và rộng 150 pixel, nó sẽ được đặt cố định ở góc trên bên trái của tài liệu và nền của nó sẽ có màu hồng.
Bước 3
Cung cấp cho khối một vị trí tương đối. Nếu bạn sử dụng định vị không phải tuyệt đối, nhưng tương đối trong mô tả CSS, thì bạn có thể đặt các khối không phải bằng cách gắn chặt vào lưới tọa độ, mà là so với các khối khác đã tồn tại. Để làm điều này, hãy thay đổi vị trí mã: tuyệt đối; đầu trang: 0px; left: 0px theo vị trí: tương đối; đầu trang: 200px; trái: 100px.
Bước 4
Làm tròn khối. Trong CSS, câu lệnh bán kính đường viền chịu trách nhiệm cho việc này. Thêm mã sau vào biểu định kiểu của bạn: border-radius: 8px. Khối bây giờ sẽ có các góc tròn. Nếu bạn chỉ muốn làm tròn một số góc, hãy mô tả bán kính riêng cho từng góc đó: border-radius: 8px 8px 0px 0px.
Bước 5
Tạo nét cho khối. Để làm nổi bật đường viền của một khối bằng một đường kẻ mảnh, hãy thêm mã sau vào mô tả CSS của nó: border-top: 1px gạch ngang màu đen. Hướng dẫn này có nghĩa là đường viền của khối sẽ có màu đen và có độ dày là một pixel. Trong trường hợp này, bản thân đường đồng mức sẽ được hiển thị dưới dạng đường đứt nét (nét đứt - đường chấm, dấu chấm - dấu chấm, nét liền - đường liền nét).
Bước 6
Đặt các thuộc tính khối còn lại. Chỉ định trong mô tả CSS kiểu chữ nào nên được sử dụng cho văn bản bên trong khối, kích thước phông chữ, căn lề và thụt lề từ các cạnh của khối. Các thuộc tính này được mô tả trong các định nghĩa font-family, font-size, text-align và padding.
Bước 7
Bạn có thể sử dụng thuộc tính float để tùy chỉnh luồng của khối này qua khối khác. Nếu bạn đặt nó thành “left”, thì các phần tử còn lại sẽ chảy xung quanh khối ở bên trái và “right” - ở bên phải. Nếu bạn đặt giá trị float là “không”, căn chỉnh khối sẽ không được đặt. Thuộc tính clear trong CSS ngăn khối chảy sang phải, trái hoặc cả hai bên và ghi đè câu lệnh float.
