Scribd
Upload
12 views

cssthuongdung

Uploaded by

Nguyen Man Nghii
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views

cssthuongdung

Uploaded by

Nguyen Man Nghii
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

D�?i ��y l� m?t s? thu?c t�nh CSS th�?ng d�ng v� c�ch s? d?ng c� b?n c?

a ch�ng,
gi�p b?n d? d�ng n?m b?t khi h?c CSS:

1. �?nh d?ng v�n b?n


font-family: Ch?n ki?u ch?.
css
Sao ch�p m?
font-family: Arial, sans-serif;
font-size: �?t k�ch th�?c ch?.
css
Sao ch�p m?
font-size: 16px;
font-weight: �?t �? �?m c?a ch?.
css
Sao ch�p m?
font-weight: bold;
font-style: �?t ki?u ch? (nghi�ng ho?c b?nh th�?ng).
css
Sao ch�p m?
font-style: italic;
line-height: �i?u ch?nh kho?ng c�ch gi?a c�c d?ng v�n b?n.
css
Sao ch�p m?
line-height: 1.5;
text-align: Canh ch?nh v�n b?n (tr�i, ph?i, gi?a, �?u).
css
Sao ch�p m?
text-align: center;
text-transform: Chuy?n �?i ch? (vi?t hoa, vi?t th�?ng).
css
Sao ch�p m?
text-transform: uppercase;
2. �?nh d?ng m�u s?c
color: �?t m�u ch?.
css
Sao ch�p m?
color: red;
background-color: �?t m�u n?n.
css
Sao ch�p m?
background-color: #f0f0f0;
border-color: �?t m�u cho ��?ng vi?n.
css
Sao ch�p m?
border-color: #333;
3. K�ch th�?c v� Kho?ng c�ch
width: �?t chi?u r?ng c?a ph?n t?.
css
Sao ch�p m?
width: 200px;
height: �?t chi?u cao c?a ph?n t?.
css
Sao ch�p m?
height: 100px;
margin: Kho?ng c�ch b�n ngo�i ph?n t?.
css
Sao ch�p m?
margin: 20px;
padding: Kho?ng c�ch b�n trong ph?n t? (gi?a n?i dung v� vi?n).
css
Sao ch�p m?
padding: 15px;
4. ��?ng vi?n
border: �?t ki?u, �? d�y, m�u s?c c?a ��?ng vi?n.
css
Sao ch�p m?
border: 1px solid black;
border-radius: L�m bo g�c ph?n t?.
css
Sao ch�p m?
border-radius: 10px;
5. Hi?u ?ng
box-shadow: Th�m b�ng cho ph?n t?.
css
Sao ch�p m?
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
text-shadow: Th�m b�ng cho v�n b?n.
css
Sao ch�p m?
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
6. Hi?n th? v� �?nh v?
display: X�c �?nh c�ch ph?n t? ��?c hi?n th? (block, inline, inline-block).
css
Sao ch�p m?
display: block;
position: X�c �?nh ki?u �?nh v? (static, relative, absolute, fixed).
css
Sao ch�p m?
position: relative;
top, right, bottom, left: �?t v? tr� c?a ph?n t? khi s? d?ng position.
css
Sao ch�p m?
top: 20px;
left: 10px;
z-index: �?t th? t? l?p c?a ph?n t? (ph?n t? c� gi� tr? z-index cao h�n s? hi?n th?
tr�n c�c ph?n t? c� gi� tr? th?p h�n).
css
Sao ch�p m?
z-index: 1;
7. Danh s�ch v� B?ng
list-style: X�c �?nh ki?u c?a danh s�ch (s?, ch?m, hay b? qua).
css
Sao ch�p m?
list-style: none;
border-collapse: X? l? c�c ��?ng vi?n trong b?ng.
css
Sao ch�p m?
border-collapse: collapse;
text-decoration: Th�m ho?c lo?i b? g?ch d�?i, g?ch ch�o, v.v.
css
Sao ch�p m?
text-decoration: underline;
8. Flexbox
display: flex: Thi?t l?p ph?n t? th�nh m?t container flexbox.
css
Sao ch�p m?
display: flex;
justify-content: Canh ch?nh c�c ph?n t? b�n trong theo chi?u ngang.
css
Sao ch�p m?
justify-content: space-between;
align-items: Canh ch?nh c�c ph?n t? b�n trong theo chi?u d?c.
css
Sao ch�p m?
align-items: center;
flex-direction: X�c �?nh h�?ng c?a c�c ph?n t? trong flex container.
css
Sao ch�p m?
flex-direction: row;
9. Grid Layout
display: grid: Thi?t l?p ph?n t? th�nh m?t container grid.
css
Sao ch�p m?
display: grid;
grid-template-columns: �?nh ngh?a s? l�?ng v� k�ch th�?c c�c c?t.
css
Sao ch�p m?
grid-template-columns: 1fr 1fr 1fr;
grid-gap: Kho?ng c�ch gi?a c�c � trong grid.
css
Sao ch�p m?
grid-gap: 20px;
10. Media Queries (Ph?n h?i thi?t b?)
@media: �?nh ngh?a c�c quy t?c CSS cho c�c thi?t b? kh�c nhau (responsive design).
css
Sao ch�p m?
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
11. Transition v� Animation
transition: T?o hi?u ?ng chuy?n ti?p cho c�c thu?c t�nh CSS.
css
Sao ch�p m?
transition: all 0.3s ease-in-out;
animation: Th�m hi?u ?ng �?ng cho ph?n t?.
css
Sao ch�p m?
animation: fadeIn 2s ease-in-out;
�?nh ngh?a c�c keyframes cho animation.
css
Sao ch�p m?
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
��y ch? l� m?t s? thu?c t�nh c� b?n v� th�?ng d�ng trong CSS. Khi h?c CSS, b?n c�
th? th? k?t h?p c�c thu?c t�nh n�y �? t?o ra c�c ki?u d�ng v� hi?u ?ng phong ph�
h�n

You might also like