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