Tạo css cho file base.css để lưu trữ thuộc tính css cho phần chung của website. Đây là phần được dùng nhiều lần trong quá trình lập trình trang web.
Khai báo biến dùng chung
:root{
--white-color: #fff;
--black-color: #000;
--text-color: #333;
}Khai báo thuộc tính kế thừa từ thẻ chứa nó
*{
box-sizing: inherit;
}Khai báo mặt định trong thẻ html
Mặt định trình duyệt font-size: 100% có giá trị tương đương 16px. Nếu ta khai báo font-size: 1rem thì 1 rem này tương đương 16px. Như vậy 15px bằng 0.9375rem. Do đó là con số lẻ mất thời gian tính toán nên ta quy ước font-size: 62.5% sẽ có giá trị tương tương là 10px. Vậy 1rem có giá trị là 10px, lúc này 15px có giá trị là 1.5rem.
Đặt chiều cao mặt định cho mỗi dòng trong website. Thông thường giá trị này là 1.6rem
Link file font vào index.html để khai báo font chuẩn cho website, lấy url tại đây sao đó dán vào file index. Tiếp theo khai báo font đó trong file base.css, thêm vào “sans-serif” là font không chân có tác dụng thay thế hoặc font mặc định chưa được tải.
Khai báo tất cả các element trong website sẽ được kế thừa box-sizing là border-box vì ta đã khai báo thuộc tính kế thừa bên trên.
html{
font-size: 62.5%;
line-height: 1.6rem;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}Khai báo thuộc tính tạo linh động hiển thị với mọi trình duyệt
Ta khai báo nếu kích thướt màn hình lớn hơn 1200px thì nó chỉ hiển thị tối đa là 1200px thôi. Còn nếu màn hình nhỏ hơn 1200px thì nó sẽ hiển thị đúng 100% tương ứng với màn hình đó.
Tiếp theo khai báo canh giữa mặt định khối này khi nằm trong khối khác
.grid{
width: 1200px;
max-width: 100%;
margin: 0 auto;
}Nếu không muốn sử dụng giá trị 1200px ta khai báo thêm giá trị 100% cho chiều rộng cho đối tượng.
.grid__full-width{
width: 100%;
}Khai báo những đối tượng nằm trong class
Các phần tử trong class đều nằm theo hàng ngang, nếu tổng độ dài phần tử con vượt quá chiều rộng class này thì phần tử sẽ được đẩy xuống dòng.
.grid__row{
display: flex;
flex-wrap: wrap;
}
