Gốc > Thủ thuật > Web - Blog >
Nào bây giờ chúng ta hãy mở Notepad lên và thử thực hiện theo ví dụ sau:
Đầu tiên chúng ta sẽ tạo ra một file vidu.html có nội dung như sau:
01.<html>
02.<head>
03.<title>Ví dụ</title>
04.<link rel=”stylesheet” type=”text/<b style="color: white; background-color: rgb(0, 170, 0);">css</b>” href=”style.<b style="color: white; background-color: rgb(0, 170, 0);">css</b>” />
05.</head>
06.<body>
07.<p>^_^ Welcome To My Blog ^_^</p>
08.</body>
09.</html>
10.Sau đó hãy tạo một file style.<b style="color: white; background-color: rgb(0, 170, 0);">css</b> với nội dung:
11.body {
12.background-color:#FFF
13.}
14.p {
15.color:#00FF00
16.}
Hãy đặt 2 tập tin này vào cùng một thư mục, mở file vidu.html trong trình duyệt của bạn và xem thành quả.
Lưu ý:
Để lưu 1 file với 1 đuôi khác .txt trong Notepad chúng ta chọn Save as type là All Files. Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng Việt.
Trong CSS chúng ta còn có thể sử dụng thuộc tính @import để nhập một tập tin CSS vào CSS hiện hành. Cú pháp: @import url(link)
Theo wordpressvn
Trần Quốc Tuấn @ 10:21 24/12/2009
Số lượt xem: 615
Vị trí đặt code CSS
Chúng ta đã tìm hiểu về cú pháp viết CSS, nhưng còn đặt nó ở đâu trong tài liệu HTML?
Chúng ta có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML
Nội tuyến (kiểu thuộc tính)
Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng. Và dĩ nhiên trong trường hợp này chúng ta sẽ không cần selector trong cú pháp.
Lưu ý: Nếu bạn muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì không nên dùng cách này.
Ở ví dụ sau chúng ta sẽ tiến hành định nền màu trắng cho trang và màu chữ xanh lá cho đoạn văn bản như sau:
1.<html>
2.<head>
3.<title>Ví dụ</title>
4.</head>
5.<body style=”background-color=#FFF;”>
6.<p style=”color:green”>^_^ Welcome To My Blog ^_^</p>
7.</body>
8.</html>
Bên trong (thẻ style)
Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay thế cách thứ nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style (để tiện cho công tác bảo trì, sửa chữa ấy mà).
Cũng ví dụ làm trang web có màu nền trắng, đoạn văn bản chữ xanh lá, chúng ta sẽ thể hiện như sau:
01.<html>
02.<head>
03.<title>Ví dụ</title>
04.<style type=”text/<b style="color: white; background-color: rgb(0, 170, 0);">css</b>”>
05.body { background-color:#FFF }
06.p { color:#00FF00 }
07.</style>
08.</head>
09.<body>
10.<p>^_^ Welcome To My Blog ^_^</p>
11.</body>
12.</html>
Lưu ý: Thẻ style nên đặt trong thẻ head.
Đối với những trình duyệt cũ, không thể nhận ra thẻ <style>. Theo mặc định, thì khi một trình duyệt không nhận ra một thẻ thì nó sẽ hiện ra phần nội dung chứa trong thẻ. Như ở ví dụ trên, nếu trình duyệt không hỗ trợ thẻ style thì 2 dòng CSS:
body {background-color:#FFF } p { color:#00FF00 } sẽ hiện ra trên trình duyệt.
Để tránh tình trạng này, bạn nên đưa vào thêm dấu <!– ở trước và –> ở sau khối code CSS. Như ví dụ trên sẽ viết lại là:
1.<style type=”text/<b style="color: white; background-color: rgb(0, 170, 0);">css</b>”>
2.<!-- body { background-color:#FFF }
3.p { color:#00FF00 } -->
4.</style>
Bên ngoài (liên kết với một file CSS bên ngoài)
Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link. Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu. Các ví dụ trong sách này cũng được trình bày theo kiểu này.
Nào bây giờ chúng ta hãy mở Notepad lên và thử thực hiện theo ví dụ sau:
Đầu tiên chúng ta sẽ tạo ra một file vidu.html có nội dung như sau:
01.<html>
02.<head>
03.<title>Ví dụ</title>
04.<link rel=”stylesheet” type=”text/<b style="color: white; background-color: rgb(0, 170, 0);">css</b>” href=”style.<b style="color: white; background-color: rgb(0, 170, 0);">css</b>” />
05.</head>
06.<body>
07.<p>^_^ Welcome To My Blog ^_^</p>
08.</body>
09.</html>
10.Sau đó hãy tạo một file style.<b style="color: white; background-color: rgb(0, 170, 0);">css</b> với nội dung:
11.body {
12.background-color:#FFF
13.}
14.p {
15.color:#00FF00
16.}
Hãy đặt 2 tập tin này vào cùng một thư mục, mở file vidu.html trong trình duyệt của bạn và xem thành quả.
Lưu ý:
Để lưu 1 file với 1 đuôi khác .txt trong Notepad chúng ta chọn Save as type là All Files. Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng Việt.
Trong CSS chúng ta còn có thể sử dụng thuộc tính @import để nhập một tập tin CSS vào CSS hiện hành. Cú pháp: @import url(link)
Theo wordpressvn
Trần Quốc Tuấn @ 10:21 24/12/2009
Số lượt xem: 615
Số lượt thích:
0 người
- Những điều cần biết khi viết mã CSS (24/12/09)
- Hướng dẫn làm trang web (24/12/09)
- Hướng dẫn tạo List nhạc và đưa nhạc lên Y!Plus (24/12/09)
- Module tạo bảo đồ theo dõi người truy cập Blog (24/12/09)
- Bài 1: Hướng dẫn Plus "Đăng ký Plus và giới thiệu giao diện" (24/12/09)
Anh vào địa chỉ trang quản trị: http://violet.vn/newpro19/admin/index (sau khi đã đăng nhập xong) anh xóa bỏ đi đoạn code có chứa những flash hình con chuồn chuồn bay lượn trong trang web là hết thôi.
Nếu làm không được đưa tên đăng nhập và mật khẩu cho em để em khắc phụ cho nếu không được em sẽ nhờ trang Bạch Kim.