Khi bạn muốn điều chỉnh style cho trang web, bạn có thể sử dụng một trong 3 cách sau, hoặc kết hợp cả 3 cách, tùy tình huống cụ thể. Ba cách đó là: nội tuyến - inline; nhúng - embedded và liên kết tới một stylesheet bên ngoài.
Thông thường chúng ta sử dụng cách thứ ba nghĩa là liên kết tới một stylesheet bên ngoài - bởi vì cách này cho phép cập nhật những thay đổi ngay lập tức cho toàn bộ trang web một cách thống nhất.
Style nội tuyến
Còn được gọi là style cục bộ, nó được thêm vào thẻ bằng thuộc tính style như ví dụ dưới đây:<h2 style="font-size:30px; color: white">Mạng Lưới Toàn Cầu</h2>
Với lệnh trên thì thẻ h2 này sẽ cho chữ có kích thước 30px và có màu trắng.
Style nhúng
Chính là đoạn code CSS được đưa vào giữa thẻ style - và đặt trong thẻ head của trang html, cụ thể nó sẽ giống như thế này:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
h2 {font-size:50px; color:red;}
</style>
</head>
<body>
<h2>www.mangluoitoancau.com</h2>
</body>
</html>
Đoạn code trên sẽ làm cho thẻ h2 có kích thước 50px và có màu đỏ.
Style Liên Kết
Cũng giống như style nhúng là được đặt trong thẻ head nhưng khác là style liên kết nó là một liên kết đến style mà bạn viết ở bên ngoài trang html đó.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href="css/home.css" type="text/css" rel="stylesheet" />
<title>Home</title>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href="css/home.css" type="text/css" rel="stylesheet" />
<title>Home</title>
</head>
href="css/style.css" chính là đường dẫn đến file css, chính nơi đây bạn sẽ định kiểu cho trang.
OK, giờ chúng ta tiếp tục phân tích xem ưu và nhược điểm của từng loại:
- Style cục bộ chỉ ảnh hưởng tới thẻ mà nó được định kiểu. Việc sử dụng tràn lan style cục bộ làm cho việc sửa chữa trang trở nên khó khăn.
- Style cục bộ là cách mà ngày xưa các trang web sử dụng - chính sự bất cập của nó làm người ta phát triển Style Liên Kết
- Style cục bộ sẽ ghi đè các thuộc tính bà bạn đã điều chỉnh trong Style Liên Kết và Style Nhúng, điều này có nghĩa là thuộc tính ở style cục bộ sẽ là thuộc tính cuối cùng được áp dụng, ví dụ, bạn để thẻ h2 có kích thước 50px ở Style Liên Kết, 40px ở Style Nhúng và 30px ở Style Cục Bộ, thế thì cuối cùng trình duyệt sẽ hiển thị thẻ h2 đó với kích thước 30px.
- Có thể loại bỏ hoàn toàn việc sử dụng style cục bộ bằng cách tạo một ID cho thẻ đó rồi viết style trong stylesheet.
- Style Nhúng chỉ tác động lên trang có chứa style đó (Phạm vi tác động rộng hơn Style cục bộ nhưng nhỏ hơn Style Liên Kết)
- Style Nhúng ghi đè lên Style Liên Kết, nhưng bản thân Style Nhúng lại bị Style Cục Bộ ghi đè.
- Style Nhúng là một cách hay để bạn nhanh chóng thực hiện điều chỉnh style cho trang, sau khi ưng í bạn copy đoạn CSS trong Style Nhúng vào Style Liên Kết.
- Style Liên Kết vẫn là cách định kiểu chuyên nghiệp và có lợi ích nhất.
No comments:
Post a Comment