C?ng nh? Javascript hay c�c ?ng d?ng Nh�ng kh�c, CSS cung c?p 3 ph??ng ph�p nh�ng ??an m� v�o trang HTML ?? ??nh d?ng c�c th�nh ph?n, thu?c t�nh nh? sau: ??an Code n�y ph?i ??t trong ph?n <head></head> c?a trang HTML. Trong ?�: file default.css l� file ???c vi?t b?ng c� ph�p Cascading Style Sheet v� ???c l?u v?i t�n l� default, ph?n m? r?ng l� .css. Khi vi?t file n�y kh�ng c?n khai b�o <style></style> b?t ??u v� k?t th�c t?p tin. Xem v� d? b�n d??i:
I-Ph??ng ph�p 1: G?i m?t file t? ng�ai v�o-External Embedded.
C� ph�p:
<link rel="STYLESHEET" href="default.css" charset="UTF-8" type="text/css"> p {font-family: tahoma,verdana, arial; color:black; font-size:14px; text-align:justify;}
b {color: blue; font-weight: bold;}
blockquote {color:red; font-size:14; font-style:italic;}
h1 {font-family:verdana; font-size: 22px; color:#0000FF; text-align:center;}
h2 {font-family:verdana; font-size: 20px; color:#FF0000; text-align:center;}
h3 {font-family:verdana; font-size: 18px; color:blue; text-align:center;}
h4 {font-family:verdana; font-size: 16px; color:blue; text-align:justify;}
h5 {font-family:verdana; font-size: 14px; color:blue; text-align:justify;}
h6 {font-family:verdana; font-size: 12px; color:blue; text-align:justify;}
Ch�p ??an code tr�n v� d�n v�o Notepad, l?u v?i t�n l� default.css. Sau ?� ch�n ??an code n�y v�o trong th�nh ph?n <head></head> c?a trang HTML:
<LINK REL="STYLESHEET" HREF="default.css" CHARSET="UTF-8" TYPE="text/css">
Khi ?� c�c thu?c t�nh khai b�o cho th�nh ph?n <P>, <H>, <B> s? ?nh h??ng v�o trang HTML. Ch?ng h?n khi b?n g� m?t ??an v?n b?n b?t ??u b?ng: <P> th� ??an v?n b?n n�y s? d�ng font: tahoma;(font-family:tahoma) m�u: ?en(color:black;), k�ch th??c: 14px(font-size:14px;), v� ch?: ???c canh ??u 2 bi�n(text-align:justify;).
Ph??ng ph�p n�y ???c d�ng r?t ph? bi?n trong thi?t k? c�c trang web c�ng m?t phong c�ch (ch?ng h?n trang tin t?c). Ch�ng ta ch? c?n vi?t m?t file .css v� d�ng file n�y ?? ??nh d?ng t�an b? Website.
?? thi?t k? m?i trang v?i m?t phong c�ch ri�ng, ng�ai vi?c d�ng ph??ng 1, ch�ng ta c� th? ch�n <style> v�o trong ph?n <head></head> c?a trang HTML. B?n ph?i b?t ??u ph?n khai b�o b?ng <style>, v� k?t th�c b?ng </style>. N?u b?n b? s�t ph?n khai b�o n�y, trang c?a b?n s? kh�ng hi?n th? ho?c c�c thu?c t�nh v� gi� tr? khai b�o s? kh�ng ?nh h??ng l�n th�nh ph?n.
C� ph�p:
<style>
th�nh ph?n {khai b�o;}
th�nh ph?n {khai b�o;}
.......................
</style>
V� d?:<style>
p {font-family:tahoma; font-size:13px;color:blue;text-align:justify; text-indent:30px;}
blockquote {color:blue; font-size:14px; font-style:italic; text-align:justify;}
i {color: fuchsia; font-size:12px;}
</style>
Copy v� d�n ??an code n�y v�o ph?n <head></head> c?a trang HTML. Khi ?� c�c th�nh ph?n trong <style></style> s? b? ?nh h??ng b?i c�c thu?c t�nh v� gi� tr? khai b�o trong ?�. Ch?ng h?n, n?u b?n d�ng tag : <blockquote> th� m�u ch? l�: xanh; c? ch?:14px; ki?u tr�nh di?n l� ch? nghi�ng (font-style:italic;) v� ch? ???c canh ??u 2 bi�n.
Ng�ai 2 ph??ng ph�p tr�n, ?? thay ??i thu?c t�nh c?a th�nh ph?n, ch�ng ta c� th? ch�n <style> v�o trong t?ng th�nh ph?n. Khi khai b�o nh? v?y, ch? c?n khai b�o style= "khai b�o;" ngay trong th�nh ph?n. Kh�ng c?n tag </style> ?? ?�ng.
C� ph�p:
<th�nh ph?n style="khai b�o">
V� d?:<p style="font-family:tahoma; font-size:13px;color:blue;text-align:justify; text-indent:30px;">
<blockquote style="color:blue; font-size:14px; text-align:justify;">
<i style="color: fuchsia; font-size:12px;text-transform: capitalize;">
Ch?ng h?n, khi vi?t <i style="color:fuchsia; font-size:12; text-transform:capitalize;">, th� ch? s? l� ch? nghi�ng m�u h?ng, c?:12 v� c�c ch? c�i ??u s? ???c vi?t Hoa. (text-transform:capitalize;).
II-Ph??ng ph�p 2: Nh�ng v�o ??u m?i trang-Head Embedded.
III-Ph??ng ph�p 3: Nh�ng ngay trong th�nh ph?n-InLine Embedded.
Đăng nhận xét