tailieunhanh - Bài giảng Thiết kế Web: Chương 7 - Từ Thị Xuân Hiền

Cascading Style Sheet (CSS) là một ngôn ngữ quy định cách trình bày của các thẻ html trên trang web. Là ngôn ngữ đang được sử dụng rất nhiều trong thiết kế web hiện nay. Nói nôm na thì CSS được dùng để xây dựng bố cục giao diện của trang web, trình bày cho các thẻ html như tô màu chữ, chữ in đậm in nghiêng, qui định chiều dài chiều rộng cho thẻ html. Chương này sẽ hướng dẫn cách sử dụng CSS trong trang web, . | CASCADING STYLE SHEET-CSS CHƯƠNG VII GIỚI THIỆU Bảng kiểu (style sheet) nhằm thoả mản nhu cầu Thẩm mỹ Giữ tính thống nhất cho trang HTML. Định dang một số tính chất thông thường cùng một lúc cho tất cả các đối tượng trên trang Tiện ích của CSS : Tiết kiệm thời gian Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang khác sẽ tự động cập nhật sự thay đổi đó Có thể dùng các CSS cùng với JavaScript để tạo các hiệu ứng đặc biệt Bất lợi của CSS: Không một trình duyệt nào chấp nhận nó hoàn toàn Phải mất thời gian để học cách sử dụng PHÂN LOẠI-CÁCH TẠO Phân loại : Có 3 loại Inline style Internal style External style Inline style: Là kiểu được gán cho một dòng hoặc một đoạn văn bản, bằng cách sử dụng thuộc tính style bên trong tag muốn định dạng Cú pháp: Nội dung văn bản muốn định dạng Ví dụ : This paragraph has an inline style applied to it This . | CASCADING STYLE SHEET-CSS CHƯƠNG VII GIỚI THIỆU Bảng kiểu (style sheet) nhằm thoả mản nhu cầu Thẩm mỹ Giữ tính thống nhất cho trang HTML. Định dang một số tính chất thông thường cùng một lúc cho tất cả các đối tượng trên trang Tiện ích của CSS : Tiết kiệm thời gian Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang khác sẽ tự động cập nhật sự thay đổi đó Có thể dùng các CSS cùng với JavaScript để tạo các hiệu ứng đặc biệt Bất lợi của CSS: Không một trình duyệt nào chấp nhận nó hoàn toàn Phải mất thời gian để học cách sử dụng PHÂN LOẠI-CÁCH TẠO Phân loại : Có 3 loại Inline style Internal style External style Inline style: Là kiểu được gán cho một dòng hoặc một đoạn văn bản, bằng cách sử dụng thuộc tính style bên trong tag muốn định dạng Cú pháp: Nội dung văn bản muốn định dạng Ví dụ : This paragraph has an inline style applied to it This paragraph is displayed in the default style. Can you see the difference in this line Internal style : Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn bản. Cách tạo: Taọ bảng mẫu chung trên phần đầu trang trong cặp tag Sử dụng: Trong phần body, nội dung nào muốn sử dụng định dạng theo bảng mẫu trên thì đặt trong tag được định nghĩa trong phần head Cú pháp: TagName{property1:value1;property2:value 2 } (lặp lại cho mỗi tag có thuộc tính cần định dạng) H1,H2 { color: limegreen; font-family: Arial } This is the H1 element This is the H2 element This is the H3 element with its default style as displayed in the browser External style : Là một bảng kiểu được lưu trữ thành một file bên ngoài và được liên kết với trang HTML. Bảng kiểu này sẽ được áp dụng và ảnh hưởng cho tất cả các trang