Tự học CSS - Bài 34 - Website layout

Website Layout

01 trang web thường được chia thành các phần như: header, menus, phần chứa nội dung và footer.

Có rất nhiều kiểu thiết kế layout khác nhau. Nhưng nhìn chung, cấu trúc trang web như trên rất dễ gặp. Chúng ta hãy cùng xem xét kỹ cấu trúc này.

Header

01 header thường nằm ở đỉnh trang web (hoặc bên phải ngay dưới menu điều hướng top). Nó thường chứa 01 logo hoặc tên trang web.

Ví dụ:

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Navigation Bar

01 thanh điều hướng chứa danh sách các liên kết để giúp người dùng di chuyển xuyên suốt trang web.

Ví dụ:

/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Tự học CSS - Bài 33 - Định dạng số đếm thẻ TIÊU ĐỀ

 CSS counters là “các biến” được lưu giữ bởi CSS, trong đó các giá trị này có thể tăng lên bởi các qui tắc thiết lập của CSS (để lưu lại số lần chúng được dùng). Counters cho phép bạn tùy biến giao diện nội dung dựa vào những thay thế của nó trên văn bản.

Số tự động với counters

CSS counters giống như “các biến” vậy.

Giá trị biến có thể tăng bởi các qui tắc thiết lập trong CSS (chúng sẽ ghi lại bao nhiêu lần đã được dùng).

Để làm việc với CSS counters, chúng ta sẽ dùng các thuộc tính sau:

·         counter-reset – tạo hoặc resets lại 01 counter

·         counter-increment – tăng 01 giá trị counter

·         content – chèn nội dung phát sinh

Hàm counter() hoặc counters() – thêm giá trị của 01 counter vào 01 phần tử.

Để dùng 01 CSS counter, ban đầu ta phải tạo ra bằng counter-reset

Ví dụ sau tạo ra 01 counter cho trang (trong phần chọn qua body), sau đó tăng giá trị counter sau mỗi thẻ <h2> và thêm “Section <giá trị của counter>:” vào đầu mỗi thẻ <h2>

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Tự học CSS - Bài 32 - Định dạng biểu mẫu

Định dạng INPUT

Sử dụng thuộc tính width để khai báo bề ngang của input.

input {
  width: 100%;
}

Ví dụ trên áp dụng cho tất cả phần tử <input>. Nếu bạn chỉ muốn định dạng 01 input nhất định, bạn có thể dùng cách chọn qua thuộc tính.

input[type=text] – chỉ chọn text fields

input[type=password] – chỉ chọn các password fields

input[type=number] – chỉ chọn các number fields

và còn nhiều trường khác nữa.

Padded Inputs

Dùng thuộc tính padding để thêm khoảng trắng bên trong text field.

Mẹo: khi bạn có nhiều inputs xen kẽ nhau, bạn cũng sẽ muốn thêm vào margin để thêm khoảng cách giữa chúng.

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Chú ý rằng chúng ta thiết lập thuộc tính box-sizing cho border-box. Điều này đảm bảo rằng padding và ngay cả các đường viền được bao gồm trong kích thước tổng chiều cao và bề rộng của các phần tử.