Bảng kiểu

Chia sẻ: Nguyễn Văn Nam | Ngày: | Loại File: PPT | Số trang:20

Thêm vào BST

Báo xấu

44
lượt xem 8
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tham khảo tài liệu 'bảng kiểu', công nghệ thông tin, quản trị web phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bảng kiểu

̉ ̉ Style Sheets (Bang kiêu) Session 5
̣ ̀ ̣ Muc tiêu bai hoc  Mô ta Dynamic HTML ̉  Dung Bang kiêu (Style Sheet) ̀ ̉ ̉ Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 2 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 tac các nguyên tố của CSS. Web Page Programming with ́ HTML,DHTML & JavaScript/Session 5/ 3 of 20
DHTML là gi?(2) ̀  Netscape cũng sử dụng Bang 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/ 4 of 20
Những tinh năng cua HTML ́ ̉ ̣ Đông (DHTML)  Nhưng kiêu đông(Dynamic Styles) ̃ ̉ ̣  Nôi dung đông(Dynamic Content) ̣ ̣  Đinh vi đông(Positioning) ̣ ̣ ̣  Liên kêt dư liêu(Data binding ) ́ ̃ ̣  Font co thê tai đươc(Downloadable Fonts) ́ ̉ ̉ ̣  Thưc hiên Scripting ̣ ̣  Câu truc cua đôi tương(Object Structure) with ́ ́ ̉ ́ ̣ Web Page Programming HTML,DHTML & JavaScript/Session 5/ 5 of 20
Giới thiêu về Bang kiêu (Style ̣ ̉ ̉ Sheets)  Bang kiêu la nơi ma chung ta co thê quan ly ̉ ̉ ̀ ̀ ́ ́ ̉ ̉ ́ va điêu khiên cac kiêu “style” ̀ ̀ ̉ ́ ̉  Style sheet mô tả sự xuất hiện và trinh 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/ 6 of 20
Những cach 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.  Viêt Script ́  Dung kiêu đôi tương (Uses Style Object) ̀ ̉ ́ ̣  Kiêu đôi tương hô trơ cho moi đăt tinh cua CSS( pStyle Object ̉ ́ ̣ ̃ ̣ ̣ ̣ ́ ̉ supports every property of CSS) Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 7 of 20
Lợi ich cua bang kiêu “Style ́ ̉ ̉ ̉ sheet”  Nap chông trinh duyêt(Override the browser ) ̣ ̀ ̀ ̣  Bô tri trang(Page layout ) ́ ́  Bang kiêu co thê sư dung lai (Style sheets ̉ ̉ ́ ̉ ̉ ̣ ̣ can be reused )  Chi cân môt lân thât tôt(One time effort ) ̉ ̀ ̣ ̀ ̣ ́ Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 8 of 20
Thuât ngữ bang kiêu ̣ ̉ ̉  Qui tăc Kiêu(Style Rule) ́ ̉  Bang kiêu(Style Sheet ) ̉ ̉  Tâp hơp cac qui tăc(Rules ) ̣ ̣ ́ ́ Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 9 of 20
Cac bộ chon (Selectors) ́ ̣  Bô chon(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ô chon đơn(Simple selectors) ̣ ̣  Bô chon phân tư HTML (HTML element ̣ ̣ ̀ ̉ selectors)  Bô chon Class (Class selectors) ̣ ̣  Bô chonID (ID selectors) ̣ ̣  Bô chon ngư canh (Contextual selector) ̣ ̣ ̃ ̉ Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 10 of 20
Bộ chon đơn ̣  Một selector đơn giản mô tả một phần tử bất kể vị trí của nó trong cấu trúc tài liệu. Từ định danh cho tựa đề H1 là một selector đơn giản H1 { color: blue } Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 11 of 20
Bộ chon HTML ̣  Selector loại này sử dụng tên của các phần tử HTML.  Sự khác biệt duy nhất là bạn loại bỏ dấu ngoặc nhọn. Vì vậy thẻ HTML trở thành P. Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 12 of 20
Bộ chon Class ̣  Những selector này sử dụng thuộc tính CLASS của các phần tử HTML.  Chung ta có thể gán bộ nhận dạng lớp cho nhiều phần tử ́ cua môt kiêu đơn khi ta muốn hiển thị các trạng thái khác ̉ ̣ ̉ nhau so với dạng chuẩn.  Bộ chọn CLASS có dấu chấm (.) đứng trước gọi là ký tự cờ, theo sau là tên lớp do chúng ta chọn Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 13 of 20
Bộ chon ID ̣  Bộ chọn ID sử dụng thuộc tính ID của 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 bằng dấu thăng (#). Web Page Programming with 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à phần tử . Khi thêm một phần tử vào thẻ , thì mỗi phần tử 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
Cac cach kêt hợp bang kiêu vao ́ ́ ́ ̉ ̉ ̀ trong HTML  Phần tử STYLE (STYLE element )  Thuôc tinh Style(Style Attribute ) ̣ ́  Phân tư Link(Link element ) ̀ ̉ Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 16 of 20
́ ̀ Cac phân STYLE  Bạn có thể nhúng thông tin kiểu cần thiết bên trong tài liệu HTML..  Sử dụng phần tử STYLE để nhúng thông tin.  Phần tử STYLE được chèn vào trong phần tử của một tài liệu cùng với tất cả các quy tắc, được đặt giữa thẻ mở và thẻ đóng. Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 17 of 20
̣ ́ Thuôc tinh Style  Thuôc tinh STYLE đươc dung cho nhưng ̣ ́ ̣ ̀ ̃ bang kiêu riêng le cua nhưng phân tư. ̉ ̉ ̃ ̉ ̃ ̀ ̉  Viêc dung thuôc tinh Style chung ta co thê bo ̣ ̀ ̣ ́ ́ ́ ̉ ̉ qua kiêu phân tư va đăt khai bao trưc tiêp bên ̉ ̀ ̉ ̀ ̣ ́ ̣ ́ trong ca nhân cua the đo ́ ̉ ̉ ́ Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 18 of 20
́ ́ ̉ ̉ Liên kêt cac bang kiêu  Bang kiêu “Style sheet” đươc tao ra như cac tai liêu ̉ ̉ ̣ ̣ ́ ̀ ̣ va đươc liên kêt đên tai liêu đươc yêu câu. ̀ ̣ ́ ́ ̀ ̣ ̣ ̀  Phân tư liên kêt đươc dung đê bao gôm môt tham ̀ ̉ ́ ̣ ̀ ̉ ̀ ̣ chiêu đên môt bang kiêu “style sheet” đươc yêu câu. ́ ́ ̣ ̉ ̉ ̣ ̀
́ ̣ ́ ̉ Cac thuôc tinh trong bang kiêu ̉ Attribute CSS name Font properties font font-size font-style Text properties text-align text-indent vertical-align Box properties border border-width border-bottom border-color Positioning properties clip height Web Page Programming with left HTML,DHTML & top z-index JavaScript/Session 5/ 20 of 20