CSS + HTML Note 1

*****BODY - HEADER*****
* Reset css: *{ margin: 0; pading:0; box-sizing: border-box;}
* Thẻ body:
- Font (family; size; weight)
- Line-height: vd 1.7 --> 1.7 lần tiêu chuẩn
- color:
- padding: để cach vào bên trong xo với viền
*Thẻ header:
- height: 95vh; //95vh = 95% chiều cao của lớp bao bọc(body)
- background-image:

1. Có thuộc tính url('...')
2. Sử dụng linear-gradient(to right bottom, màu 1, màu 2) - to right bottom là hướng trài sang phải, trên xuống dưới
3. Kích vào màu 1, màu 2 để có thể set Opacity của nó. rgba(x,y,z,opacity).
4. clip-path: polygon(0 0, 100% 0, 100% 75vh , 0 100%) - Tạo hình cho background - tứ giác theo tọa độ ; tham khảo trang bennettfeely.com/clippy.

- bachground-size: cover // bao hết khu vực header.
- background-position: top // co giãn nhưng luôn giữ theo vị trí top.
*Logo: Dùng class "logo-box"
- logo-box: postion: absolute -- Cần phải set header về position: relative// tương đối dựa theo div bảo (header); top: 40px; left: 40px; // vị trí của logo box.
- Hình ảnh logo : class "logo"
- logo: height: 35px;
* Tiêu đề: Dùng class "heading-primary". Có 2 span con cho 2 dòng tiêu đề nằm trong một "text-box".
- "heading-primary": color; text-tranform: Uppercase;
- span "heading-primary-main":

1. display: block; // để hiển thị cho riêng một dòng dễ cho css
2. font-size/weight;
3. letter-spacing: cách chữ

- span "heading-primary-sub":

1. display: block; // để hiển thị cho riêng một dòng dễ cho css
2. font-size/weight;
3. letter-spacing: cách chữ

* "text-box": Định vị trí cho 2 span con. Bao gồm: (con của header ngang hàng với logo và heading-primary)

1. position: absolute;
2. top/left: 50%; set góc trái bên trên nằm ở chính giữa của div bao bọc (header)
3. transform: translate(-50%, -50%) - set cho tâm của khối text về bên trái và lên trên một nửa khối text, tâm khối text nằm chính giữa div header

*****CSS ANIMATION*****
- Sử dụng @keyframes tên_hiệu_ừng{..}
- Gọi hiệu ứng trong các thành phần bằng:

1. animation-name: tên_hiệu_ứng;
2. animation-duration: 2s;
3. animation-delay: nếu cần.
4. animation-iteration-count: lập lại số lần.
5. animation-time-function: set cho lúc đầu nhanh chậm, lúc sau nhanh chậm ra sao...

- Sử dụng backface-visibility: hidden vào class cha nếu sau hiệu ứng chữ không quay về bt.

- Có thể kết hợp cả với "logo" để tạo ra hiệu ứng cho logo.
.logo:hover{animation: moveInRight 1s ease-out;}

*****COMPLEX ANIMATION BUTTOM*****

**3 YẾU TÔ QUAN TRỌNG KHI VIẾT CSS**

**LOAD TRANG VÀ TÍNH ƯU TIÊN TRONG CSS**

** TRIỂN KHAI CÁC GIÁ TRỊ KÍCH THƯỚC TRONG CSS**

** THỪA HƯỞNG GIÁ TRỊ CSS**

** CHUYỂN PX SANG REM**
1 rem = kích thước gốc mặc định (thường của browser là 16px; hoặc được khai báo trong thẻ html).
- Do đó, để dễ dàng sử dụng rem mà ko cần tính lại nhiều lần, ta khai báo kích thước gốc trong thẻ html (thường là 10px cho dễ tính). Sau đó ta dễ dàng sử dụng kích thước tương đối rem.

- Sử dụng rem rất phù hợp cho việc làm responsive.
- Khi khai báo kích thước gốc trong thẻ html ta có thể dễ dàng thay đổi tất cả kích thước css nếu chúng sử dụng rem.
*Tính thừa hưởng css:

**CSS RENDER**

**CSS ARCHITECTURE**

 ** ĐẶT TÊN THEO BEM**