Bảng kiểu

Style Sheets (Bang kiêu)̉ ̉ Session 5 Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 2 of 20 Muc tiêu ba i hoc̣̀ ̣  Mô tả Dynamic HTML  Dùng Bảng kiểu (Style Sheet) Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 3 of 20 DHTML la gi ?(1)̀ ̀  “HTML động” có thể được định nghĩa như là một phần mềm được sử dụng cho việc mô tả sự kết hợp giữa HTML, các bảng kiểu (stylesheet) và ngôn ngữ script làm cho tài liệu trở nên sinh động.  Khả năng viết được kịch bản (script) cho phép đưa thêm các tính năng sinh động cho trang Web.  Microsoft và Netscape có những cách tiếp cận khác nhau để thực thi DHTML. Microsoft tập trung vào việc sử dụng kiểu mẫu tầng (Cascading Style Sheets hay CSS). Các đoạn code kịch bản được sử dụng để tương tác các nguyên tố của CSS. Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 4 of 20 DHTML la gi ?(2)̀ ̀  Netscape cũng sử dụng Bảng kiểu. Nhưng chủ yếu DHTML được thực hiện thông qua các lớp (layer). Thẻ gán LAYER được sử dụng để cung cấp phần lớn các tính năng của DHTML. Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 5 of 20 Nh ng ti nh năng cua HTML Đông ̃ ́ư ̉ ̣ (DHTML)  Những kiểu động(Dynamic Styles)  Nội dung động(Dynamic Content)  Định vị động(Positioning)  Liên kết dữ liệu(Data binding )  Font có thể tải được(Downloadable Fonts)  Thực hiện Scripting  Cấu trúc của đối tượng(Object Structure) Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 6 of 20 Gi i thiêu vê Bang kiêu (Style ́ ̀ơ ̣ ̉ ̉ Sheets)  Bảng kiểu là nơi mà chúng ta có thể quản lý và điều khiển các kiểu “style”  Style sheet mô tả sự xuất hiện và trình diễn của một tài liệu HTML như khi nó được biểu diễn trên màn hình, thậm chí là khi in.  Bạn cũng có thể chỉ chính xác vị trí và sự xuất hiện của các phần tử trên trang và tạo các hiệu ứng đặc biệt Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 7 of 20 Nh ng ca ch th c thay đôi kiêu ̃ ́ ́ư ư ̉ ̉ cua trang web̉  Kiểu nội tuyến(Inline style )  Thông tin về kiểu được sử dụng nội tuyến(inline).  Bạn có thể nhúng vào trong thẻ của một phần tử HTML.  Thuộc tính STYLE áp dụng style sheet tới từng phần tử riêng lẻ.  Sử dụng thuộc tính Style, bạn có thể bỏ qua Style Element và đưa phần khai báo vào các thẻ bắt đầu. <H2 style="color: green; font-family: Arial"> </H2>  Viết Script  Dùng kiểu đối tượng (Uses Style Object)  Kiểu đối tượng hỗ trợ cho mọi đặt tính của CSS( pStyle Object supports every property of CSS) Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 8 of 20 L i i ch cua bang kiêu “Style sheet”́ợ ̉ ̉ ̉  Nạp chồng trình duyệt(Override the browser )  Bố trí trang(Page layout )  Bảng kiểu có thể sử dụng lại (Style sheets can be re-used )  Chỉ cần một lần thật tốt(One time effort ) Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 9 of 20 Thuât ng bang kiêụ̃ ư ̉ ̉  Qui tắc Kiểu(Style Rule)  Bảng kiểu(Style Sheet )  Tập hợp các qui tắc(Rules ) Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 10 of 20 Ca c bô chon (Selectors)́ ̣ ̣  Bộ chọn(selector) là một chuỗi ký tự để nhận ra phần tử mà quy tắc áp dụng cho. Có hai kiểu selector cơ bản:  Bộ chọn đơn(Simple selectors)  Bộ chọn phần tử HTML (HTML element selectors)  Bộ chọn Class (Class selectors)  Bộ chọnID (ID selectors)  Bộ chọn ngữ cảnh (Contextual selector) [...]... phần tử HTML  Bộ chọn ID được dùng để áp dụng một kiểu vào riêng một phần tử nào đó trên trang Web  Bộ chọn ID được bắt đầu Page Programming with Web bằng dấu thăng HTML,DHTML & (#) JavaScript/Session 5/ 14 of 20 Bộ chon ngữ canh ̣ ̉  Bộ chọn theo ngữ cảnh chỉ đến ngữ cảnh của phần tử  Điều này dựa trên khái niệm kế thừa, phần tử con kế thừa kiểu được gán cho thẻ cha  Một ví dụ điển hình là... bên trong sẽ kế thừa các kiểu của Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 15 of 20 Các cách kết hợp bang kiêu vào ̉ ̉ trong HTML    Phần tử STYLE (STYLE element ) Thuộc tính Style(Style Attribute ) Phần tử Link(Link element ) Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 16 of 20 Các phần STYLE  Bạn có thể nhúng thông tin kiểu cần thiết bên trong . nghĩa như là một phần mềm được sử dụng cho việc mô tả sự kết hợp giữa HTML, các bảng kiểu (stylesheet) và ngôn ngữ script làm cho tài liệu trở nên sinh động tiếp cận khác nhau để thực thi DHTML. Microsoft tập trung vào việc sử dụng kiểu mẫu tầng (Cascading Style Sheets hay CSS). Các đoạn code kịch bản được