Scribd
Upload
12 views

cssthuongdung

Uploaded by

Nguyen Man Nghii
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views

cssthuongdung

Uploaded by

Nguyen Man Nghii
Copyright
© © All Rights Reserved
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