Học HTML - basic

Tiêu đề của H1

Tiêu đề của H2

Tiêu đề của H3

Tiêu đề của H4

Tiêu đề của h5

Tiêu đề của H6

Đây là Thẻ Small- Để Sub tiêu đề

HTML Paragraphs

Đây là đoạn văn bản bằng Paragraphs - thẻ p

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Đây là HTML STYLES

Đây là HTML IMAGE

Đây là thẻ img

src: là nguồn của ảnh - alt: là tên của ảnh.
Cả hai đều là thuộc tính của thẻ img

Đây là HTML A - anchor

Mỏ neo - Đặt liên kết lại với nhau.

Trở lại!
Tới liên kết React

Thẻ a có thuộc tính href

Đây là HTML ul - unordered list

Đây là HTML li - list items

List Item 1
List Item 2
List Item 3

Đây là HTML table - bảng

Mỗi <-tr-> là một dòng trong <-table->

Đây là đầu bảng - tiêu đề!	Thuộc tính th trong thead
Đây là phần thân bảng	Thuộc tính tr trong tbody và td trong tr
Đây là phần thân bảng 2	Bảng 2 nè

Đây là HTML input

Male
Female
LGBT

có các kiểu type - Checkbox - Radio

Đây là HTML button

Đây là HTML Thẻ Div dùng để bao quanh và bọc khối

Attribute là một thuộc tính trong các thẻ

Sử dụng CSS trong HTML

Có 3 cách sử dụng:

Internal - Sử dụng cặp thẻ style đặt trong file HTML đó.
External - Sử dụng file CSS bên ngoài để nhúng vô CSS.
inline - Sử dụng "Attribute - style" để viết trong thẻ.

Sử dụng ID và CLAS trong HTML

Có 3 cách sử dụng:

Thẻ này dùng attribute ID

Id chỉ được được đặt tên một lần - không thể trùng tên id

Thẻ này dùng attribute class

Class có thể được đặt trùng tên

Sử dụng CSS Selector HTML

Xem chi tiết tại đây!

Nhắc qua!

.nameClass - .intro - Chọn tất cả thẻ có class=".intro"
.nameClass1.nameClass1 - .intro1.intro2 - Chọn tất cả thẻ có cả nameClass1 và nameClass2.
Ví dụ:
Class này có 2 name: title và heading
.title.heading { color: red } -> Thay đổi
Class này có 2 name: title và heading
.nameClass1 .nameClass1 - .intro1 .intro2 - Class 2 là con của class 1. (Lưu ý có dấu cách giữa 2 class)
Ví dụ:
Class này được bọc bởi class cha là box
.box .title { color: red } -> Thay đổi
Class này được bọc bởi class cha là box
Kí tự " * " đại diện cho tất cả các thẻ
CSS qua tên thẻ
Kí tự " > " phải trực tiếp là cái thẻ con của class cha
Kí tự " + " Chọn các anh em liền kề phía sau - Đứng phía sau .classĐầu + .classSau.
Kí tự " ~ " Chọn tất cả class phía sau nó.

Mức độ ưu tiên trong CSS

internal và external - Ai được gọi sau (mới) thì sẽ được ưu tiên cái sau (mới)

Ưu tiên theo số điểm:
Inline - 1000
#Id - 100
class - 10
tag - 1

Equal specificity - các selector giống nhau

Universal selector and inherited - Phổ cập chung

CSS UNITS - Các đơn vị trong CSS

Absolute units - Các đơn vị tuyệt đối (absolute) - Không bị thay đổi khi response

px
pt
cm
mm
inch
pc

Relative units - Các đơn vị tương đối (relative) - Bị thay đổi khi response

% - Phụ thuộc vào thẻ chứa nó.
rem - Phụ thuộc vào thẻ HTML
em - Phụ thuộc vào thẻ gần nhất chứa nó.
vw - Chiều ngang trình duyệt - viewport-width
vh - Chiều dọc trình duyệt - viewport-height
vmin
vmax
ex
ch

Function in CSS

Các hàm trong css

var()
linear-gradient()
rgba()
rgb() - rgb(0, 0, 255,)
calc() - Tính toán - calc(120px)
attr()

Pseudo Classes trong CSS

Lớp giả trong CSS

:root - Dùng toàn cục - Global

:hover - Dùng kích hoạt khi di chuột lên

:active - Dùng kích hoạt khi bấm và giữ chuột

:first-child - Phần tử đầu

:last-child - Phần tử cuối

Pseudo Elements trong CSS

Lớp giả trong CSS

::before

::after

::first-letter

::first-line

::selection

Thuộc tính Padding - Đệm

Đây là mô tả - không sử dụng đúng!
Padding - top và bottom - 10px
Padding - right và left - 5px

Đây là thẻ chứa Padding

Thuộc tính Border - Đường Viền

Đây là mô tả - không sử dụng đúng!
Border-width: 10px

Đây là thẻ chứa Border

Thuộc tính Margin - Khoảng cách lề

Đây là mô tả - không sử dụng đúng!
margin: 10px 0; - Làm tăng khoảng cách thôi ní 🙃

Đây là thẻ chứa Margin

Thuộc tính Box-sizing - Kích thước hộp

Thuộc tính box-sizing dùng để quy định cách tính kích thước tổng thể của một phần tử (box).
- Mặc định là content-box: chỉ tính phần nội dung, còn padding và border sẽ làm hộp lớn hơn.
- Dùng border-box: phần tử giữ nguyên kích thước tổng thể (width/height không thay đổi), padding và border nằm gọn bên trong.

Ở dây dùng Box-sizing

Thuộc tính Background Images - Hình ảnh nền

Đây là thẻ dùng background Image, có 2 thuộc tính CSS chung:
background-size: x y px; -- Size của hình ảnh
background-repeat: no-repeat; -- repeat (lặp theo chiều dọc và ngang - x, y) -- no-repeat (không lặp lại) -- repeat x hoặc y (chỉ lặp lại theo chiều ngang (x-axis) hoặc theo chiều dọc (y-axis)) -- space (ảnh nền lặp lại nhưng cách đều ra) -- round (ảnh nền sẽ bị co giãn để lặp lại đủ)

Đây sử dụng các gradient và images để làm ảnh chuyển
linear-gradient(0deg, rgba(1), rgba(2)) -- Dùng gradient

Cái nào khai báo trước thì nó sẽ nằm trên cái khai báo sau! Tìm CSS có tên "backgr-img-gradient" để xem và hiểu rõ!

Thuộc tính Background Size - Kích thước nền

contain -- Lấy chiều dài nhất của bức ảnh, bức ảnh sẽ ko bị cắt và bóp méo
cover -- Lấy chiều dài nhất của bức ảnh, chấp nhận che khuất bức ảnh

Thuộc tính Background Origin - Đi kèm với background Image

padding-box -- mặc định. Đổ từ padding ra tới box
border-box -- Đổ từ border vào
content-box -- Đổ từ lớp content vào

Thuộc tính Background Position - Tuỳ chỉnh vị trí của Background Image

center -- giữa
top -- trên
right -- phải
left -- trái
bottom -- dưới

Có thể kết hợp tuỳ chỉnh
background-position: top right;
background-position: top 20px right 20px;
background-position: x y; (x là dọc và y là ngang)
vân vân mây mây :))

Thuộc tính Position relative - Vị trí tương đối

relative -- Vị trí tương đối - không phụ thuộc vào đối tượng nào khác
absolute -- Vị trí tuyệt đối - Phụ thuộc vào thẻ cha chứa nó có chứa Position (không phân biệt thuộc tính của position)
fixed -- Vị trí phụ thuộc vào khung Browser
sticky -- Vị trí bám dính - Không khuyến cáo sử dụng

Ví dụ về relative --

Ví dụ về absolute -- Nếu sử dụng cả 4 top, bottom, left right thì nó sẽ ưu tiên -- top - left -- nhưng đối với thẻ ko chiếm hết màn hình.

Thẻ này đang chứa Position Relative - nói thẻ div to nhé 🙃

Đây chứa absolute

Ví dụ về fixed -- Cái nào đứng yên á

Thẻ này đứng yên - vì sài fixed

Ví dụ về sticky --

Thẻ này dùng Sticky 👇🏼 Cuộn sẽ thấy

Thuộc tính FlexBox - Xây dựng theo Flex-box

Flexbox có 2 trục chính - Main axis và Cross Axis

display: flex; (hoặc inline-flex) - Quyết đinh có sài flexbox hay không!
flex-direction: column; (hoặc row - mặc định,...) - Quyết định hướng của flexbox - row, column, row-reverse, column-reverse
flex-wrap: wrap; (hoặc nowrap - mặc định, wrap-reverse) - Quyết định có xuốnng dòng hay không!
flex-basic: length; Quyết định kích thước main-axis
justify-content: center; (hoặc flex-start, flex-end, space-between, space-around, space-evenly) - Quyết định căn chỉnh các phần tử con theo trục chính (main axis = y) - dành cho cha
justify-self: center; (hoặc flex-start, flex-end) - Quyết định căn chỉnh các phần tử con theo trục chính (main axis) - dành cho con - nếu có justify-content thì bỏ
align-content: center; (hoặc flex-start, flex-end,...) - Quyết định căn chỉnh các phần tử con theo trục phụ (cross axis = x) - dành cho cha

Xem chi tiết hơn tại đây

Ví dụ về Flexbox --

Chuyển hướng qua Ví dụ Flex-box - Click me! 👈🏼

Đặt tên theo tiêu chuẩn BEM - Block Element Modifier

Ví dụ về BEM - Basic

Lever 1 của BEM - Nhớ xem CSS của Trang nhé 👈🏼