Các loại style trong ứng dụng website

Các loại Style ứng dụng website Các loại Style ứng dụng website Bởi: Khoa CNTT ĐHSP KT Hưng Yên Ở tìm hiểu cú pháp viết CSS, đặt đâu tài liệu HTML? Trong phần này, Pearl xin giới thiệu với bạn vấn đề Chúng ta có ba cách khác để nhúng CSS vào tài liệu HTML Style Sheet "ngoại" (External Style) Tương tự cách thay đặt tất mã CSS thẻ style đưa chúng vào file CSS (có phần mở rộng css) bên liên kết vào trang web thuộc tính href thẻ link Đây cách làm khuyến cáo, đặc biệt hữu ích cho việc đồng hay bảo trì website lớn sử dụng kiểu mẫu Các ví dụ sách trình bày theo kiểu 1/7 Các loại Style ứng dụng website Nào mở Notepad lên thử thực theo ví dụ sau: Đầu tiên tạo file vidu.html có nội dung sau: Ví dụ ^_^ Welcome To WallPearl’s Blog ^_^ 2/7 Các loại Style ứng dụng website Sau tạo file style.css với nội dung: body { background-color:#FFF } p{ color:#00FF00 } Hãy đặt file vào thư mục, mở file vidu.html trình duyệt bạn xem thành Lưu ý: Để lưu file với đuôi khác txt Notepad chọn Save as type All Files Có thể chọn Encoding UTF-8, bạn thích CSS tiếng Việt Trong CSS sử dụng thuộc tính @import để nhập file CSS vào CSS hành Cú pháp: @import url(link) Style sheet "nội" (Internal Style) Thật nhìn kỹ nhận phương cách thay cách thứ cách rút tất thuộc tính CSS vào thẻ style (để tiện cho công tác bảo trì, sửa chữa mà) Cũng ví dụ làm trang web có màu trắng, đoạn văn chữ xanh lá, thể sau: Ví dụ body { background-color:#FFF } 3/7 Các loại Style ứng dụng website p { color:#00FF00 } ^_^ Welcome To WallPearl’s Blog ^_^ Lưu ý:Thẻ style nên đặt thẻ head Đối với trình duyệt cũ, nhận thẻ Theo mặc định, trình duyệt không nhận thẻ phần nội dung chứa thẻ Như ví dụ trên, trình duyệt không hỗ trợ thẻ style dòng CSS: body {backgroundcolor:#FFF } p { color:#00FF00 } 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 > sau khối code CSS Như ví dụ viết lại là: body { background-color:#FFF } p { color:#00FF00 } > Style sheet "địa phương" (Inline Style) Đây phương pháp nguyên thủy để nhúng CSS vào tài liệu HTML cách nhúng vào thẻ HTML muốn áp dụng Và dĩ nhiên trường hợp không cần selector 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 không nên dùng cách Ở ví dụ sau tiến hành định màu trắng cho trang màu chữ xanh cho đoạn văn sau: 4/7 Các loại Style ứng dụng website Ví dụ ^_^ Welcome To WallPearl’s Blog ^_^ Sự ưu tiên: Trước thực thi CSS cho trang web Trình duyệt đọc toàn CSS mà trang web áp dụng, bao gồm: CSS mặc định trình duyệt, file CSS bên liên kết vào trang web, CSS nhúng thẻ CSS nội tuyến Sau đó, trình duyệt tổng hợp toàn CSS vào CSS ảo, có thuộc tính CSS giống thuộc tính CSS nằm sau ưu tiên sử dụng (cái giống chương trình “Ai Là Triệu Phú” truyền hình vậy, câu trả lời sau chấp nhận (smile)) Theo nguyên tắc trình duyệt bạn ưu tiên cho CSS nội tuyến > CSS bên > CSS bên > CSS mặc định trình duyệt Ví dụ: Trong trang web có liên kết tới file style.css có nội dung sau: p{ color:#333; text-align:left; width:500px } Trong thẻ thẻ có đoạn CSS liên quan: p{ background-color:#FF00FF; text-align:right; width:100%; height:150px } 5/7 Các loại Style ứng dụng website Trong phần nội dung trang web có sử dụng CSS nội tuyến: ... background-color:#FF00FF; text-align:right; width:100%; height:150px } 5/7 Các loại Style ứng dụng website Trong phần nội dung trang web có sử dụng CSS nội tuyến:

^_^ Welcome To WallPearl’s Blog ^_^

Lưu ý:Thẻ style nên đặt thẻ head... màu chữ xanh cho đoạn văn sau: 4/7 Các loại Style ứng dụng website Ví dụ

^_^ Welcome To WallPearl’s