HTML và CSS

A. HTML
1.Phần head:
-thẻ meta với “charset=UTF-8”: để hiển thị tiếng việt
-thẻ title: để đặt tiêu đề website
2. Phần body:
-thẻ h1-h6: thẻ tiêu đề
-thẻ p: thẻ đoạn văn bản
-thẻ img: thẻ chèn ảnh vào
-thẻ a: để chèn link vào
-thẻ ul,li để đưa ra một danh sách
-thẻ table: đưa ra một bảng
-thẻ input: thẻ đầu vào
-thẻ button: đưa ra cái nút
-thẻ div: là một khối
B. CSS
CSS có 3 cách:
-Inline là css ngay trong thẻ đó
-internal là css trong phần head với thẻ style
-external là css trong 1 file .css riêng.
1. Selectors:
.class: chọn tất cả thẻ có class”title”(ví dụ: .title)
.class.class1: chọn tất cả thẻ có class là title và title1 (ví dụ: .title.title1)
.class .class1: chọn tất cả thẻ có class title1 là con của 1 phần tử có class
là title (ví dụ .title .title1)
*: chọn all thẻ
element: chọn tất cả thẻ p (ví dụ p)
element.class: chọn tất cả thẻ h2 có class là box (ví dụ: h2.box)
element, element: chọn tất cả thẻ h1 và h2(ví dụ h1, h2)
element element: chọn tất cả thẻ p trong thẻ div (ví dụ: div p)
element > element: chọn tất cả thẻ p là con trực tiếp của thẻ div (div > p)
element + element: chọn thẻ p đứng liền sau thẻ div (div + p)
element ~ element: chọn tất cả thẻ p đứng sau thẻ div (div ~ p)
2. Độ ưu tiên:
-internal,external cái nào ghi sau thì ưu tiên
-inline 1000
-id 100
-class 10
-tag 1
3. Đơn vị trong CSS:
-rem: phụ thuộc vào html
-em:phụ thuộc vào font-size vào thẻ cha gần nhất
-% phụ thuộc vào kích thước thẻ cha
-vh:full chiều cao, vw full chiều ngang
4. Một số hàm CSS
-var(): sử dụng biến
-calc(): hàm tính toán
-rgb():màu
-rgba(): màu trong suốt
-attr(): hàm thuộc tính
5. Pseudo Class: Lớp giả
-:root : đặt biến giả
-:hover :kích hoạt khi di chuột vào
-:active :kích hoạt khi click chuột
-:first-child : chọn thằng con đầu tiên
-:last-child chọn thằng con cuối cùng
6. Pseudo element: Phần tử giả
-::before : phần tử đầu tiên
-::after : phần tử cuối cùng
-::first-letter :chữ cái đầu tiên
-::first-line : dòng đầu tiên
-::selection : chọn đối tượng
7. Flex Box:
- display: flex | inline-flex
- flex-direction: căn chỉnh item theo chiều main axis
- flex-wrap: xuống dòng
- flex-basis: kích thước của main size
- justify-content: căn chỉnh các item theo main axis (xét all item)
- justify-self: căn chỉnh item (xét từng item)
- align-content: căn chỉnh các item theo cross axis (xét all item)
- align-self: căn chỉnh item (xét từng item)
- flex-grow: làm nở item theo chiều main axis
- flex-shrink: làm hẹp item theo chiều main axis
- flex: cú pháp ngắn cho basis-grow-shrink
- oder: thứ tự item