code CSS internal và CSS external

code nằm bên dưới sẽ có độ ưu tiên hơn code nằm ở trên

độ ưu tiên
Inline CSS
internal CSS
external CSS
browser default

Các đơn vị cơ bản

Px
kích thước thay đổi theo
Rem,em kích thước chuẩn của
html(root)
chiều
rộng
khung
nhìn
vw viewport width màn
hình
1vw=1
% độ
rộng

chiều
cao
khung
nhìn
vh viewport height màn
hình
1vh=1
% độ
cao
là đơn vị phụ thuộc font-
em size của chính nó hoặc
phần tử chứa nó
 là đơn vị phụ thuộc vào
thuộc tính font-size của
Rem
thẻ html, xét font size của
thẻ html

Kích thước
height hiển thị chiều cao
weight hiển thị độ rộng
overflow:hidden khi tràn ra ngoài sẽ bị ẩn đi, bị lố ra vùng thẻ cha thường đặt ở thẻ cha
min-height chiều cao tối thiểu
max-height chiều cao tối đa
overflow-y chiều cao xuất hiện thanh scroll kéo dọc

PSEUDO
.pseudo:hover hover khi rê chuột sẽ đổi màu, có hiệu ứng
.pseudo:active nhấn vào nó sẽ đổi màu
.pseudo:visited hiện màu khi đã nhấn vào rồi
:selection bôi đen sẽ css
class active .activmục muốn cho ng dùng biết họ đang ở mục đó thì thêm 1 class active

Trasition 1 thuộc tính CSS3 giúp thấy rõ thay đổi thuộc tính CSS

cursor khi rê chuột sẽ hiện icon của con chuột để ng dùng nhấn vào

Flexbox dàn layout khi muốn các item con nằm cùng 1 hàng
justify-content được dùng để tạo khoảng cách khi flex vẫn còn khoảng trống, nếu không còn thì dùn

line-height canh theo chiều dọc chỉnh các khoảng cách các dòng chữ với nhau, canh
không bị rớt hàng 1 hàng chữ xét gần bằng vs chiều cao giúp chữ đó canh giữa theo chiều

!important ưu tiên
Grid Dùng để dàn layout item chia theo nhìu hàng nhìu cột gôm cột
dùng để xét khoảng cách
giữa các cột và hàng
grap không xét khoảng cách
giữa các thẻ con grip với
các thuộc tính cha

::before thêm phía trc cho thẻ

::after thêm vào phía sau cho thẻ

box-shadow tạo bóng cho thẻ

outline viền

Transform
translateX() di chuyển theo chiều ngang
translateY() di chuyển theo chiều dọc
z-index khi dùng position để đè các position khác
scroll-behavior:smooth giúp trượt thanh trượt mượt mà hơn

linear-grandient màu chuyển

onerror Dùng để thay thế hình ảnh bị lỗi

margin-left:auto Dùng để đẩy thẻ sang phải

BOOTSTRAP
container
container-
fluid
rgba(0,0,0,0.5) độ mờ giảm đi 1 nửa
box-sizing: border-box

Background CSS
Background-color
Background-image
Background-repeat
Background-position
background-size:cover
background-size:contain
background-attachment: fixed
background-origin

background-attachment: fixed;
 Text CSS
Color
Text-decoration
Text-align
ùng thẻ cha thường đặt ở thẻ cha Line-height: 1.5
Word-spacing
Letter-spacing: 1
Text-indent
text-transform

Font CSS
font-size
font-weight
font-style
ở mục đó thì thêm 1 class active font-family

Padding CSS
top,right,bottom,left
ổi thuộc tính CSS
Margin CSS
ột để ng dùng nhấn vào margin:auto

Display CSS
Block
các item con nằm cùng 1 hàng Inline
òn khoảng trống, nếu không còn thì dùng padding None
display:inline thì width,height,margin-top,margin

g cách các dòng chữ với nhau, canh giữa Ẩn phần tử

ao giúp chữ đó canh giữa theo chiều dọc visibility: hidden
Opacity: 0

List-style
list-style-image
list-style-position
 list-style: circle | disc | square | decimal | none
heo nhìu hàng nhìu cột gôm cột

Border

Border-style
border-width
trc cho thẻ border-color
phía sau cho thẻ border: 2px solid black

image
object-fit:cover
object-position:top

Position

Relative

cần di chuyển thẻ cha nào, đè lên thẻ cha

thì khai báo position:absolute Absolute
Fixed
Các thuộc tính đi kèm

Fixed khác absolute ở chỗ khi

dùng fixed thì dù scroll xuống
dưới thì phần tử vẫn nằm cố
định tại vị trí đó trên màn hình

relative
kĩ thuật canh giữa cho position: absolute ::

theo chiều ngang

theo chiều dọc
nằm trong thẻ html

BOOTSTRAP
dùng đặt class khi nội dung chữ ở giữa có khoảng giữa cách đều 2 bên trái phải

dcung cấp khi có độ rộng 100%

kích thước không bị cộng dồn padding

Thiết lập màu nền transparent: màu trong suốt

Thiết lập hình nền
Thiết lập xem hình nền có bị lặp lại hay không no-repeat
Thiết lập vị trí hình nền center
Kéo dãn hình phủ hết thẻ chả phủ cả 2 chiều
Kéo dãn khi đủ hàng width or height sẽ dừng
Khi scroll cái hình vẫn đứng yên, luôn cố định
chỉ định khu vực định vị nền

giữ cho hình cố định khi lăn chuột kh đi theo

 Xét màu cho đoạn text
Kiểu gạch chân cho text none | underline(gạch chân) | overline(gạch t
Căn lề cho text
Xét chiều cao cho các dòng
Khoảng cách giữa các từ trong đoạn văn
Khoảng cách giữa các kí tự trong 1 từ
Thụt đầu dòng
in hoa chữ

thiết lập kích cỡ chữ

thiết lập sự tô đậm của chữ normal | bold
thiết lập sự in nghiêng của chữ normal | italic
thiết lập kiểu chữ

Padding là khoảng cách từ đường viền của phần tử tới nội dung bên trong nó
padding: 20 30 | top,bottom:20 | right,left: 30

Thuộc tính margin dùng để canh lề cho phần tử, là khoảng cách thẻ này so với thẻ khác
nó sẽ đẩy về giữa vs dki width<100%

Thuộc tính display chỉ định phần tử phải hiển thị như thế nào
hiển thị thành một khối,mối khối 1 dòng
Hiển thị nội tuyến, các phần từ nằm trên 1 dòng
Ẩn phần tử
,height,margin-top,margin-bottom sẽ không hoạt động

Giúp ẩn về mặt hình thức nhưng vẫn chiếm chỗ trên giao diện kh thể focus dc
chỉnh độ mờ của màu

dùng để thay đổi đánh dấu cho danh sách

sử dụng hình ảnh cho kiểu đánh dấu
vị trí đánh dấu danh sách
square | decimal | none

dùng để định dạng đường viền cho phần tử HTML

dotted | dashed | solid | double
thiết lập đường viền
thiết lập độ dày của đường viền
thiết lập màu của đường viền

làm cho hình thu nhỏ kh bị méo

lấy hình theo chiều dài

di chuyển phần tử theo vị trí tương đối hiện

tại, di chuyển phần tử từ vị trí hiện tại của nó
di chuyển phần tử theo phần cha chứa nó,
thẻ cha phải có thuộc tính position nếu không
thì di chuyển theo thẻ body
cố định phần tử trên trang web
top, right, bottom, left, z-index

thường ở thẻ cha

position: absolute ::
2 bên trái phải
hân) | overline(gạch trên) | line-through(gạch bỏ)

ày so với thẻ khác

kh thể focus dc