SlideShare a Scribd company logo
Style Sheets (Bang kiêu)
                ̉     ̉

          Session 5
Muc tiêu bai hoc
  ̣        ̀ ̣
   Mô tả Dynamic HTML
   Dùng Bảng kiểu (Style Sheet)




                              Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 2 of 20
DHTML là 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/ 3 of 20
DHTML là 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/ 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)
   Đị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/ 5 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/ 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.
     <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/ 7 of 20
Lợi ich 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/ 8 of 20
Thuât ngữ bang kiêu
    ̣        ̉     ̉
   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/ 9 of 20
Cac 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)


                                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 <P> 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.
   Chúng ta có thể gán bộ nhận dạng lớp cho nhiều phần tử
    của 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ử <BODY>. Khi
    thêm một phần tử vào thẻ <BODY>, thì mỗi
    phần tử bên trong sẽ kế thừa các kiểu của
    <BODY>.

                            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 tính 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ử
    <HEAD> 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 tính STYLE được dùng cho những bảng
    kiểu riêng lẽ của những phần tử.
   Việc dùng thuộc tính Style chúng ta có thể bỏ
    qua kiểu phần tử và đặt khai báo trực tiếp
    bên trong cá nhân của thẻ đó



                               Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 18 of 20
Liên kêt cac bang kiêu
           ́ ́     ̉     ̉
   Bảng kiểu “Style sheet” được tạo ra như các tài liệu
    và được liên kết đến tài liệu được yêu cầu.
   Phần tử liên kết được dùng để bao gồm một tham
    chiếu đến một bảng kiểu “style sheet” được yêu cầu.
    <LINK REL = stylesheet
        HREF = “stylesmine.css"
        Type = "text/css">




                                    Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 19 of 20
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
                          left
                          top
                          z-index
                                           Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 20 of 20

More Related Content

PPT
Session 04 Final Sua
PDF
Nhập môn Css
PDF
Nhập môn HTML 1
PPTX
Powerpoint fonctions
PPT
Session 10 Final
PPT
Session 09 Final
PDF
Hangman Game
PPT
Session 08 Final
Session 04 Final Sua
Nhập môn Css
Nhập môn HTML 1
Powerpoint fonctions
Session 10 Final
Session 09 Final
Hangman Game
Session 08 Final

Similar to Session 05 Final (20)

PPT
Session 01 Final
PPT
Session 03 Final
PPT
Session 07 Final
PDF
Chuong4 css-091030202240-phpapp02 (1)
PDF
Chuong4 css-091030202240-phpapp02
PDF
Lập trình web - HTML cơ bản
PDF
Html coban
DOCX
Bài 2 - Trang Web Giới Thiệu (2).docx
PDF
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
DOC
Tai lieu html
PDF
TKW03 - CSS Part 1 study about css in html.pdf
DOC
Tailieu.vncty.com huong dan nhap mon html
DOC
Tai Lieu Html
DOC
Tai Lieu Html
PDF
[Kienthuc.name.vn]html can ban
PDF
[Kienthuc.name.vn]html can ban
PDF
Tai lieu co ban html
PDF
Slide 1 - Thiết kế Web cơ bản
PDF
tai lieu thiet ke website
Session 01 Final
Session 03 Final
Session 07 Final
Chuong4 css-091030202240-phpapp02 (1)
Chuong4 css-091030202240-phpapp02
Lập trình web - HTML cơ bản
Html coban
Bài 2 - Trang Web Giới Thiệu (2).docx
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
Tai lieu html
TKW03 - CSS Part 1 study about css in html.pdf
Tailieu.vncty.com huong dan nhap mon html
Tai Lieu Html
Tai Lieu Html
[Kienthuc.name.vn]html can ban
[Kienthuc.name.vn]html can ban
Tai lieu co ban html
Slide 1 - Thiết kế Web cơ bản
tai lieu thiet ke website
Ad

More from SamQuiDaiBo (20)

PDF
PDF
Bai Tap Thuc Hanh Javascript
PPT
Session 06 Final
PPT
Session 02 Final
PDF
Html overview
DOC
Ittlgc2
DOC
Ittlgc3
DOC
Ittlgc1
DOC
Ittlgc
DOC
Baitap C
DOC
Epc Assigment2
DOC
Epc Assignment1
DOC
Epc Assignment1 Vn
DOC
Epc Assignment2 Vn
DOC
Epc Assignment4 Vn
DOC
Epc Assignment6 Vn
DOC
DOC
Bai Tap Thuc Hanh Javascript
Session 06 Final
Session 02 Final
Html overview
Ittlgc2
Ittlgc3
Ittlgc1
Ittlgc
Baitap C
Epc Assigment2
Epc Assignment1
Epc Assignment1 Vn
Epc Assignment2 Vn
Epc Assignment4 Vn
Epc Assignment6 Vn
Ad

Session 05 Final

  • 1. Style Sheets (Bang kiêu) ̉ ̉ Session 5
  • 2. Muc tiêu bai hoc ̣ ̀ ̣  Mô tả Dynamic HTML  Dùng Bảng kiểu (Style Sheet) Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 2 of 20
  • 3. DHTML là 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/ 3 of 20
  • 4. DHTML là 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/ 4 of 20
  • 5. Những tinh 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/ 5 of 20
  • 6. 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/ 6 of 20
  • 7. 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. <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/ 7 of 20
  • 8. Lợi ich 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/ 8 of 20
  • 9. Thuât ngữ bang kiêu ̣ ̉ ̉  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/ 9 of 20
  • 10. Cac 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) Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 10 of 20
  • 11. 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
  • 12. 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 <P> trở thành P. Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 12 of 20
  • 13. Bộ chon Class ̣  Những selector này sử dụng thuộc tính CLASS của các phần tử HTML.  Chúng ta có thể gán bộ nhận dạng lớp cho nhiều phần tử của 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
  • 14. 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
  • 15. 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ử <BODY>. Khi thêm một phần tử vào thẻ <BODY>, thì mỗi phần tử bên trong sẽ kế thừa các kiểu của <BODY>. Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 15 of 20
  • 16. Cac cach kêt hợp bang kiêu vao 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
  • 17. 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ử <HEAD> 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
  • 18. Thuôc tinh Style ̣ ́  Thuộc tính STYLE được dùng cho những bảng kiểu riêng lẽ của những phần tử.  Việc dùng thuộc tính Style chúng ta có thể bỏ qua kiểu phần tử và đặt khai báo trực tiếp bên trong cá nhân của thẻ đó Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 18 of 20
  • 19. Liên kêt cac bang kiêu ́ ́ ̉ ̉  Bảng kiểu “Style sheet” được tạo ra như các tài liệu và được liên kết đến tài liệu được yêu cầu.  Phần tử liên kết được dùng để bao gồm một tham chiếu đến một bảng kiểu “style sheet” được yêu cầu. <LINK REL = stylesheet HREF = “stylesmine.css" Type = "text/css"> Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 19 of 20
  • 20. 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 left top z-index Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 20 of 20