KHÁI NIỆM VỀ CSS:
 |
| CSS, NGÔN NGỮ CSS |
CSS là chữ viết tắt của cụm từ tiếng
anh (Cascading Style Sheet), CSS được tổ chức World Wide Web (W3C) giới thiệu
vào năm 1996. CSS chỉ đơn thuần là một file có phần mở rộng là .css, trong file
này chứa những câu lệnh CSS, mỗi câu lệnh css sẽ định dạng một thành phần nhất
định của tài liệu HTML như màu sắc, font chữ, . . ..
CSS- THẾ MẠNH CỦA CSS
- Tách
riêng phần định dạng ra khỏi nội dung trang web.
- CSS
giúp người thiết kế kiểm soát toàn bộ giao diện nhanh nhất và hiệu quả nhất. Nó
giúp bạn tiết kiệm công sức rất nhiều trong việc thiết kế giao diện.
- Do được
tách rời khỏi nội dung của trang web, nên các mã HTML sẽ gọn gàng hơn, giúp bạn
thuận tiện hơn trong việc chỉnh sửa giao diện. Kích thước của file .html cũng
được giảm đáng kể. Hơn thế nữa sẽ được trình duyệt tải một lần và dùng nhiều
lần (cache), do đó giúp trang web được load nhanh hơn.
Cách
khai báo CSS trong tài liệu HTML.
Chúng ta
có 3 cách để khai báo CSS trong tài liệu HTML là CSS cục bộ, CSS nội tuyến và CSS
ngoại tuyến:
1. CSS cục bộ
Viết mã
CSS trực tiếp trong thẻ HTML, cụ thể là trong thuộc tính style, CSS cục bộ chỉ
có tác dụng trong thẻ HTML được khai báo.
Ví dụ
1
|
<p style="font-size:
16pt; color: blue">Đoạn văn bạn sẽ bị ảnh hưởng khi khai báo CSS cục
bộ.</p>
|
2. CSS nội tuyến
CSS nội
tuyến là phần mã CSS được khai báo trong cặp thẻ <style> và đặt trong
phần <head> của tài liệu HTML.
Khi sử dụng CSS nội tuyến nó sẽ có tác dụng lên file html được khai báo nhưng không ảnh hưởng đến các file khác trong cùng một website.
Khi sử dụng CSS nội tuyến nó sẽ có tác dụng lên file html được khai báo nhưng không ảnh hưởng đến các file khác trong cùng một website.
1
|
<style>
|
|
2
|
h1,h2,h3
{font-size: 14px;}
|
|
3
|
p
{color:blue;}
|
|
4
|
</style>
|
|
3. CSS ngoại tuyến
Đây là
cách khai báo CSS được sử dụng nhiều nhất trong thực tế. và cách khai báo này
mới tận dụng được hết thế mạnh mà CSS mang lại, tách biệt hoàn toàn khỏi tài
liệu HTML, người thiết kế chỉ cần viết một file CSS duy nhất mà sử dụng nhiều
lần trong ứng dụng của họ.
Nó có phạm vi ảnh hưởng toàn bộ đến toàn bộ website chứ không chỉ một file .html riêng biệt. Do đó mỗi khi muốn thay đổi thuộc tính hiển thị của một thành phần nào đó trong website thì chỉ cần chỉnh sửa file CSS này thay vì phải chỉnh sửa tất cả các file .html trong ứng dụng. Đến đây chúng ta thấy được sự cần thiết và hiệu quả mà CSS đem lại.
Để khai báo css ngoại tuyến, ta chỉ cần tạo một file style.css chẳng hạn, sau đó chèn đoạn code sau trong phần <head></head> của trang web.
Nó có phạm vi ảnh hưởng toàn bộ đến toàn bộ website chứ không chỉ một file .html riêng biệt. Do đó mỗi khi muốn thay đổi thuộc tính hiển thị của một thành phần nào đó trong website thì chỉ cần chỉnh sửa file CSS này thay vì phải chỉnh sửa tất cả các file .html trong ứng dụng. Đến đây chúng ta thấy được sự cần thiết và hiệu quả mà CSS đem lại.
Để khai báo css ngoại tuyến, ta chỉ cần tạo một file style.css chẳng hạn, sau đó chèn đoạn code sau trong phần <head></head> của trang web.
1
|
<link
href="style.css" rel="stylesheet" type="text/css"
media="screen" />
|
Thứ tự ưu tiên trong CSS
Thứ tự ưu
tiên trong CSS như sau:
CSS cục
bộ » CSS nội tuyến » CSS ngoại tuyến » CSS mặc định của trình duyệt.
Để hiểu
hơn về thự tự ưu tiên của CSS ta xét ví dụ sau:
Giả sử
trong tài liệu HTML ta có mã HTML như sau
1
|
<p>Nội
dung sẽ được hiển thị theo khai báo của CSS</p>
|
Và khai
báo CSS như sau
CSS cục
bộ
1
|
<p style="color="red">...</p>
|
CSS nội
tuyến có mã như sau
1
|
p{
color: green }
|
CSS ngoại
tuyến như sau
1
|
p{
color: black }
|
Thì lúc
này đoạn văn bản được hiện thị với màu đỏ. Bởi vì ta thấy thành phần
được khai
báo CSS cục bộ lên sẽ được ưu tiên hơn CSS nội tuyến và CSS ngoại tuyến.
Tương tự
như thế, khi ở ví dụ trên nếu ta không khai báo CSS cục bộ thì đoạn văn bản sẽ
được hiện thị là màu xanh. Bởi vì CSS nội tuyến được ưu tiên hơn, tiếp theo nếu
CSS nội tuyến không được khai báo thì CSS ngoại tuyến mới có tác dụng.
Không có nhận xét nào:
Đăng nhận xét