V� d?:
Styling HTML with CSS
- CSS l� vi?t t?t c?a Cascading Style Sheets
- Styling c� th? ��?c th�m v�o HTML b?ng 3 c�ch:
+ Inline - s? d?ng m?t thu?c t�nh phong c�ch trong c�c y?u t? HTML
C�ch ph? bi?n nh?t l� s? d?ng file css ri�ng bi?t. Tuy nhi�n trong tut n�y ch�ng t�i s? d?ng phong c�ch n?i b? (Internal) �? ti?n cho vi?c th?c h�nh.
C� ph�p CSS
CSS c� c� ph�p nh� sau
- property: Thu?c t�nh css
- value: Gi� tr? CSS
- M?i phong c�ch ��?c ph�n c�ch b?ng d?u ch?m ph?y.
Inline Styling (Inline CSS)
- Inline CSS r?t h?u �ch cho vi?c �p d?ng m?t phong c�ch �?c ��o v?i m?t ph?n t? HTML duy nh?t:- Inline CSS s? thay �?i m�u s?c v�n b?n c?a m?t �? m?c duy nh?t:
Internal Styling (Internal CSS)
- M?t phong c�ch trang n?i b? c� th? ��?c s? d?ng �? x�c �?nh m?t phong c�ch ph? bi?n cho t?t c? c�c y?u t? HTML tr�n m?t trang.
- Phong c�ch n?i b? ��?c �?nh ngh?a trong th? <head> c?a trang HTML, b?ng c�ch s? d?ng th? <style> :
External Styling (External CSS)
- S? d?ng file css ri�ng l� l? t�?ng khi c�c phong c�ch ��?c �p d?ng cho nhi?u trang.
- B?ng c�ch s? d?ng file css ri�ng b?n c� th? thay �?i giao di?n c?a to�n b? trang web b?ng c�ch thay �?i m?t t?p tin.
- External Styling s? d?ng file css ri�ng v� sau �� li�n k?t �?n trong ph?n <head> c?a trang HTML
CSS Fonts
- C�c thu?c t�nh CSS color m�u v�n b?n ��?c s? d?ng cho c�c ph?n t? HTML.
- C�c thu?c t�nh CSS font-family �?nh ngh?a c�c font ch? ��?c s? d?ng cho c�c ph?n t? HTML.
- C�c thu?c t�nh CSS font-size x�c �?nh k�ch th�?c v�n b?n �? ��?c s? d?ng cho c�c ph?n t? HTML.
The CSS Box Model
- M?i ph?n t? HTML c� m?t h?p xung quanh n�, ngay c? khi b?n kh�ng nh?n th?y n�.
- border d�ng �? ��ng khung xung quanh m?t ph?n t? HTML.
- padding x�c �?nh kho?ng tr?ng (space) b�n trong khung (border)
- margin x�c �?nh m?t bi�n �? (kh�ng gian) ? b�n ngo�i khung
Ch� ?: C�c v� d? tr�n s? d?ng pixels (px) �? x�c �?nh k�ch th�?c
Thu?c t�nh id
T?t c? c�c v� d? tr�n s? d?ng CSS �? �?nh d?ng c�c ph?n t? HTML trong m?t c�ch t?ng qu�t.
�? x�c �?nh m?t phong c�ch �?c bi?t cho m?t y?u t? �?c bi?t, h?y th�m thu?c t�nh id cho ph?n t?:
Thu?c t�nh class
�? x�c �?nh m?t phong c�ch cho c�c ph?n t? �?c bi?t, h?y th�m m?t thu?c t�nh class
* Ch� ?: S? d?ng id cho m?t y?u t? duy nh?t, s? d?ng class cho m?t nh�m y?u t?
Deprecated Tags and Attributes in HTML5
In older HTML versions, several tags and attributes were used to style documents.
These tags and attributes are not supported in HTML5!
Avoid using the <font>, <center>, and <strike> elements.
Avoid using the color and bgcolor attributes.
D?ch v� bi�n t?p t? w3schools b?i Qu? L?
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Styling HTML with CSS
- CSS l� vi?t t?t c?a Cascading Style Sheets
- Styling c� th? ��?c th�m v�o HTML b?ng 3 c�ch:
+ Inline - s? d?ng m?t thu?c t�nh phong c�ch trong c�c y?u t? HTML
<h1 style="color:blue">This is a Blue Heading</h1>+ Internal - s? d?ng th? <style> trong th? <head>
<head>+ External - s? d?ng m?t ho?c nhi?u file CSS b�n ngo�i
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
C�ch ph? bi?n nh?t l� s? d?ng file css ri�ng bi?t. Tuy nhi�n trong tut n�y ch�ng t�i s? d?ng phong c�ch n?i b? (Internal) �? ti?n cho vi?c th?c h�nh.
C� ph�p CSS
CSS c� c� ph�p nh� sau
element { property:value; property:value }- element: ph?n t? HTML
- property: Thu?c t�nh css
- value: Gi� tr? CSS
- M?i phong c�ch ��?c ph�n c�ch b?ng d?u ch?m ph?y.
Inline Styling (Inline CSS)
- Inline CSS r?t h?u �ch cho vi?c �p d?ng m?t phong c�ch �?c ��o v?i m?t ph?n t? HTML duy nh?t:- Inline CSS s? thay �?i m�u s?c v�n b?n c?a m?t �? m?c duy nh?t:
<h1 style="color:blue">This is a Blue Heading</h1>
Internal Styling (Internal CSS)
- M?t phong c�ch trang n?i b? c� th? ��?c s? d?ng �? x�c �?nh m?t phong c�ch ph? bi?n cho t?t c? c�c y?u t? HTML tr�n m?t trang.
- Phong c�ch n?i b? ��?c �?nh ngh?a trong th? <head> c?a trang HTML, b?ng c�ch s? d?ng th? <style> :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External Styling (External CSS)
- S? d?ng file css ri�ng l� l? t�?ng khi c�c phong c�ch ��?c �p d?ng cho nhi?u trang.
- B?ng c�ch s? d?ng file css ri�ng b?n c� th? thay �?i giao di?n c?a to�n b? trang web b?ng c�ch thay �?i m?t t?p tin.
- External Styling s? d?ng file css ri�ng v� sau �� li�n k?t �?n trong ph?n <head> c?a trang HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Fonts
- C�c thu?c t�nh CSS color m�u v�n b?n ��?c s? d?ng cho c�c ph?n t? HTML.
- C�c thu?c t�nh CSS font-family �?nh ngh?a c�c font ch? ��?c s? d?ng cho c�c ph?n t? HTML.
- C�c thu?c t�nh CSS font-size x�c �?nh k�ch th�?c v�n b?n �? ��?c s? d?ng cho c�c ph?n t? HTML.
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
The CSS Box Model
- M?i ph?n t? HTML c� m?t h?p xung quanh n�, ngay c? khi b?n kh�ng nh?n th?y n�.
- border d�ng �? ��ng khung xung quanh m?t ph?n t? HTML.
p {
border:1px solid black;
}
- padding x�c �?nh kho?ng tr?ng (space) b�n trong khung (border)
p {
border:1px solid black;
padding:10px;
}
- margin x�c �?nh m?t bi�n �? (kh�ng gian) ? b�n ngo�i khung
p {
border:1px solid black;
padding:10px;
margin:30px;
}
Ch� ?: C�c v� d? tr�n s? d?ng pixels (px) �? x�c �?nh k�ch th�?c
Thu?c t�nh id
T?t c? c�c v� d? tr�n s? d?ng CSS �? �?nh d?ng c�c ph?n t? HTML trong m?t c�ch t?ng qu�t.
�? x�c �?nh m?t phong c�ch �?c bi?t cho m?t y?u t? �?c bi?t, h?y th�m thu?c t�nh id cho ph?n t?:
<p id="p01">I am different</p>v� d?:
<!DOCTYPE html>
<html>
<head>
<style>
p#p01 {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>
</body>
</html>
Thu?c t�nh class
�? x�c �?nh m?t phong c�ch cho c�c ph?n t? �?c bi?t, h?y th�m m?t thu?c t�nh class
<!DOCTYPE html>
<html>
<head>
<style>
p.error {
color:red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>
</body>
</html>
* Ch� ?: S? d?ng id cho m?t y?u t? duy nh?t, s? d?ng class cho m?t nh�m y?u t?
Deprecated Tags and Attributes in HTML5
In older HTML versions, several tags and attributes were used to style documents.
These tags and attributes are not supported in HTML5!
Avoid using the <font>, <center>, and <strike> elements.
Avoid using the color and bgcolor attributes.
D?ch v� bi�n t?p t? w3schools b?i Qu? L?
HTML 13 - HTML Styles - CSS
4/
5
Oleh
Unknown
