Có ba cách để chèn một đoạn code css vào trong html
1. Sử dụng file .css2. Code trực tiếp vào cùng file HTML
3. Chèn trực tiếp vào thẻ HTML.
Sau đây chúng tôi sẽ giới thiệu từng cách một. Mỗi cách sẽ có những đặc điểm và tiện ích khác nhau. Người lập trình viên sẽ tự chọn cho mình cách phù hợp nhất.
1. Sử dụng file .css bên ngoài
Đây là cách áp dụng rất lý tưởng cho nhiều trang web có yêu cầu hệ thống lớn và hay thay đổi về mặt giao diện. Với cách phát triển file .css bên ngoài như vậy thì bạn có thể thay đổi toàn bộ giao diện của trang web chỉ với việc sửa đổi một file duy nhất. Với cách này thì việc chèn file .css sẽ sử dụng cú pháp bắt đầu bằng thẻ <link>...</link>. 1<head> 2<link rel="stylesheet" type="text/css" href="mystyle.css"> 3</head> |
File CSS có thể được soạn thảo bằng một số trình duyệt khác nhau. Trong file không được chứa mã HTML, khi ghi lại chúng ta bắt buộc phải ghi lại với phần mở rộng là .css. Giả sử chúng trong file mystyle.css ở trên chứa đoạn mã sau:
1 hr {color:sienna;}2 p {margin-left:20px;}3 body {background-image:url("images/back40.gif");} |
Không bao giờ sử dụng khoảng trắng trong nhãn, giả sử rằng nếu bạn dùng margin-left: 20 px; thay cho margin-left: 20px; thì IE6 sẽ hiểu còn các trình duyệt như Firefox, Opera sẽ không hiểu
2. Chèn CSS trong tài liệu HTML
Phong cách này áp dụng để tạo ra một file HTML có một thiết kế đặc biệt không phụ thuộc vào file HTML ở cách một đã trình bày. Bạn định dạng và xác định các thuộc tính css trong file HTML bằng thẻ<style>...</style>
1<head>2<style>3hr {color:sienna;}4p {margin-left:20px;}5body {background-image:url("images/back40.gif");}6</style>7</head> |
Có một số trình duyệt cũ sẽ không hiểu thẻ ‹style›, nó sẽ bỏ qua thẻ này. Tuy nhiên thì nội dung trong thẻ ‹style› vẫn hiển thị ra trang HTML. Vì vậy mà chúng ta sẽ phải dùng định dạng chú thích trong HTML để chứa phần nội dung của thẻ ‹style›.
1
2
3
4
5
6
7
8
9
10
| <head><style><!--hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}--></style></head> |
3. Chèn trực tiếp vào thẻ HTML
Phong cách này áp dụng cho việc người lập trình viên sẽ định dạng thẻ html đó theo một cách đặc biệt. Đây cũng là một phương pháp mang tới sự tiết kiệm về code. Các thẻ thuộc tính của html có thể hỗ trợ để chèn thêm code css vào bên trong.Dưới đây là code thay đổi lề và màu sắc của một đoạn văn.
1
2
| <p style="color:sienna;margin-left:20px;">This is a paragraph.</p> |
4. Nhiều style sheet khác nhau.
Trong trường hợp mà có một số thẻ có cùng định dạng, chúng ta có thể gộp chúng lại với nhau. Giả sử như sau:File .css bên ngoài có thẻ h3 như sau:
1
2
3
4
5
6
7
| h3{color:red;text-align:left;font-size:8pt;} |
Sau đó bên trong thẻ HTML lại có thẻ h3 như sau:
1
2
3
4
5
6
| h3{text-align:right;font-size:20pt;} |
Thì trang nội bộ liên kết với file .css bên ngoài sẽ có code là:
1
2
3
4
| color:red;text-align:right;font-size:20pt; |
Có thể kết luận màu sắc sẽ được quyết định bởi file .css bên ngoài trong khi thuộc tính lại được tuân theo cách viết css trong file html hiện tại.
No comments:
Post a Comment