Ngôn ngữ HTML và CSS

Chia sẻ: Lê Bảo | Ngày: | Loại File: PDF | Số trang:32

1
945
lượt xem
371
download

Ngôn ngữ HTML và CSS

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

Với hai ngôn ngữ căn bản ngày sẽ đặt nền móng cho bạn về thiết kế website hấp dẫn

Chủ đề:
Lưu

Nội dung Text: Ngôn ngữ HTML và CSS

  1. Thi t k Web CHƯƠNG NGÔN NG HTML 2 I. Gi i thi u: HTML, vi t y là Hyper Text Markup Language – Ngôn ng ánh d u siêu vă b n, là ngôn ng n n t ng c a Web. HTML ư c thi t k b i các nhà v t lý h c t i vi n CERN. Cùng v i trình duy t Mosaic và World Wide Web, HTML ã giúp mang n m t b m t m i cho Internet. Internet ã tr nên d s d ng hơn và có th n v i ông o ngư i dùng trên toàn th gi i thông qua các trang web. HTML mô t cách th c d li u ư c hi n th trên trình duy t thông qua các t p ký hi u ánh d u, thư ng g i là tag, ho c “th HTML”. Khi m t trang web ư c t i v trình duy t, trình duy t s căn c trên các tag HTML nh d ng n i dung hi n th . Ví d : Welcome to HTML My first HTML document II. Các khái ni m chung: 1. Tài li u HTML: Tài li u HTML, hay còn g i là văn b n HTML, là m t t p tin có ph n ki u là .htm ho c .html, ch a n i dung c n hi n th và các tag báo cho trình duy t web bi t cách hi n th n i dung ó. Tài li u HTML có th ư c so n th o trên nh ng trình so n th o văn b n ơn gi n như Notepad hay TextPad. 2. C u trúc c a m t tài li u HTML: Tài li u HTML ư c chia làm 3 ph n, c th như sau: a.HTML section ư c b t u b i tag và k t thúc b i tag C p tag này nh nghĩa ph m vi c a văn b n HTML. b. Header section ư c b t u b i tag và k t thúc b i tag Biên so n: Đ ng Thanh Bình Trang 1
  2. Thi t k Web Ph n này ch a thông tin mô t trang web, ch ng h n như tiêu trang web, các t khóa dùng tìm ki m và nh n di n trang web, …. Nh ng thông tin này không ư c hi n th trên trang web. c.Body section ư c b t u b i tag và k t thúc b i tag Ph n này ch a n i dung c a trang web và các tag quy nh nh d ng c a n i dung ó. 3. Thành ph n HTML (HTML elements): H u h t các thành ph n HTML u có tag b t u và tag k t thúc tương ng. Dư i ây là c u trúc chung c a m t thành ph n HTML: string of text Trong ó là tag b t u, string of text là n i dung c a thành ph n HTML và là tag k t thúc. Các tag HTML có th ư c nh p li u không phân bi t ch hoa ho c ch thư ng. Tuy nhiên, cũng c n lưu ý là t ch c W3C ngh dùng ch thư ng trong phiên b n HTML 4, và XHTML (HTML th h k ti p) b t bu c ph i dùng ch thư ng cho tag. 4. Thu c tính c a tag HTML Các th HTML có th có thu c tính. Thu c tính cung c p thêm thông tin cho m t thành ph n HTML. Ch ng h n, tag HTML sau ây nh nghĩa m t b ng: . V i m t thu c tính thêm vào, chúng ta có th yêu c u trình duy t hi th b ng mà không có khung : Thu c tính luôn i theo c p tên thu c tính/giá tr như sau: name="value". Thu c tính luôn ư c ch nh th b t u c a m t thành ph n HTML. Thu c tính và giá tr c a thu c tính cũng không phân bi t ch hoa và ch thư ng. Lưu ý: Giá tr c a thu c tính nên ư c t trong c p d u nháy. Thông thư ng ngư i ta s d ng c p d y nháy kép nhưng các d u nháy ơn cũng ư c ch p nh n. III. Các tag HTML cơ b n: 1. Heading: Các c p heading ư c nh nghĩa v i các th t n . nh nghĩa heading l n nh t. nh nghĩa heading nh nh t. HTML t ng thêm vào các dòng tr ng trên và dư i heading. Ví d : Introduction to HTML Biên so n: Đ ng Thanh Bình Trang 2
  3. Thi t k Web Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML 2. Paragraph: o n văn b n ư c nh nghĩa b i th . HTML t ng thêm vào các dòng tr ng trên và dư i o n. Ví d : Welcome to HTML This is a paragraph This is another paragraph 3. Ng t dòng (line break): Th ư c s d ng khi ta mu n k t thúc m t dòng nhưng không mu n b t u m t o n m i. Th s ng t dòng t i nơi ta t nó trong văn b n HTML. là m t th r ng. Nó không có th óng. Ví d : Welcome to HTML This is a paragraph with line breaks 4. ư ng k ngang (Horizontal Rule): Th ư c s d ng khi ta mu n t o m t ư ng k ngang trong trang web. Trong HTML, th không có th óng. Dư i ây là nh ng thu c tính c a th này: Thu c tính Giá tr Ý nghĩa align center Ch nh tr ng thái canh l ư ng k left ngang. right noshade noshade Khi ư c set, thu c tính này quy nh ư ng k ngang s ư c v b ng 1 màu Biên so n: Đ ng Thanh Bình Trang 3
  4. Thi t k Web Thu c tính Giá tr Ý nghĩa duy nh t. Khi không ư c set, ư ng k ngang s ư c ph i b ng 2 màu size pixels Chi u cao c a ư ng k ngang % width pixels r ng c a ư ng k ngang % Ví d : Welcome to HTML My first HTML document This is going to be real fun Using another heading Another paragraph element 5. Chú thích trong HTML Chúng ta dùng th comment thêm các o n chú thích vào HTML source code. Trình duy t web s b qua dòng chú thích này. Cú pháp: 6. M t s lưu ý Khi vi t văn b n HTML, chúng ta không th oan ch c văn b n ó s ư c hi n th th nào trong m t trình duy t khác. M t khác, văn b n s ư c nh d ng l i m i khi ngư i dùng thay i kích thư c c a s trình duy t. ng nh d ng văn b n b ng cách thêm vào các kho ng tr ng ho c nh ng dòng tr ng vào văn b n web. HTML s xóa b t nh ng kho ng tr ng ư c nó coi là dư. M t dãy kho ng tr ng liên ti p b t kỳ s ư c coi là m t kho ng tr ng duy nh t. Ngoài ra, trong HTML, m t dòng m i s ư c coi là m t kho ng tr ng. Vi c s d ng các th thêm vào các dòng tr ng cũng là m t thói quen x u. Thay vào ó, hãy dùng th . Th có th ư c s d ng mà không có th k t thúc . Tuy nhiên, phiên b n HTML k ti p s không cho phép b qua b t kỳ th k t thúc nào. IV. Các tag HTML nh d ng: 1. Các tag nh d ng văn b n: Tag Ý nghĩa Tô m văn b n nh nghĩa văn b n có size l n hơn bình thư ng nh nghĩa văn b n ư c nh n m nh (emphasized) Biên so n: Đ ng Thanh Bình Trang 4
  5. Thi t k Web Tag Ý nghĩa Làm cho văn b n nghiêng nh nghĩa văn b n có size nh hơn bình thư ng Tô m văn b n nh nghĩa ch s dư i nh nghĩa ch s trên nh nghĩa văn b n ư c “thêm vào” nh nghĩa văn b n ã b xóa nh nghĩa văn b n ã b xóa. Nên dùng thay cho tag này. nh nghĩa văn b n ã b xóa. Nên dùng thay cho tag này. G ch dư i văn b n Ví d : K t qu : This text is bold This text is strong This text is big This text is emphasized This text is italic This text is small This text containssubscript This text containssuperscript This text contains inserted text This text contains deleted text This text contains deleted text This text contains deleted text This text contains underlined text 2. M t s tag khác: Tag Ý nghĩa nh nghĩa văn b n ư c nh d ng s n T o vùng chú thích dài T o vùng chú thích ng n Ví d : K t qu : This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code: for i = 1 to 10 print i next i Ví d : K t qu : Biên so n: Đ ng Thanh Bình Trang 5
  6. Thi t k Web Here comes a long quotation: This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. Here comes a short quotation: This is a short quotation With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special. V. Các ký t c bi t: M t s ký t có ý nghĩa c bi t trong HTML, ch ng h n như d u nh hơn (
  7. Thi t k Web 1. Cú pháp: Text to be displayed Th ư c dùng t o m t i m neo (anchor) t o liên k t, thu c tính href ư c dùng xác nh a ch c a tài li u ư c liên k t n, và o n văn b n n m gi a th và s ư c hi n th thành m t hyperlink. Ví d : Welcome to HTML Visit World Wide Web Consortium! 2. Thu c tính target: Thu c tính target xác nh liên k t s ư c m ra âu. Ví d sau ây s m trang Vietnamnet trong m t c a s trình duy t m i Visit Vietnamnet! 3. Thu c tính name: Thu c tính name ư c s d ng t o m t i m d ng trong trang web. Khi s d ng i m d ng chúng ta có th nh y t i m t v trí c th trên trang web thay vì ngư i dùng ph i cu n trang và tìm n i dung mình mu n xem. Dư i ây là cú pháp t o nên m t i m d ng: Text to be displayed V i label là tên c a i m d ng mu n t o. i m d ng s ư c t o t i v trí t tag . Ch ng h n, t o m t i m d ng có tê là Chapter1, ta th c hi n như sau: Chapter 1 liên k t n i m d ng này, ta t o o n mã HTML như sau: - Trư ng h p i m t siêu liên k t n m trên cùng trang web ch a i m d ng: Go to Chapter 1 - Trư ng h p i m t siêu liên k t n m trên m t trang khác v i trang web ch a i m d ng: Go to Chapter 1 V i URL là a ch c a trang web ch a i m d ng. 4. Liên k t n a ch email: Ví d : Biên so n: Đ ng Thanh Bình Trang 7
  8. Thi t k Web This is a mail link: Send Mail Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly. Ví d : This is another mailto link: Send mail! Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly. VII. B ng bi u: 1. Quy nh chung: B ng trong HTML ư c nh nghĩa b i th . M t b ng ư c chia thành các dòng (v i th ), và m i dòng l i ư c chia thành các data cell ( ư c nh nghĩa b i th ). Ch td thay th cho c m t "table data". M t data cell có th ch a text, image, list, paragraph, form, horizontal rule, table, … Ví d : row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 2. M t s thu c tính c a b ng: - BORDER=“x” : kích thư c vi n - BGCOLOR: màu n n - ALIGN: canh ch nh Biên so n: Đ ng Thanh Bình Trang 8
  9. Thi t k Web - WIDTH, HEIGHT : kích thư c - CELLPADDING: kho ng cách t vi n c a ô n n i dung trong ô - CELLSPACING: kho ng cách gi a các ô trong b ng - ROWSPAN, COLSPAN: tr n các dòng ho c c t - : dòng, c t, : heading - : tiêu mô t b ng Hình 4: Bi u di n thu c tính c a table VIII. T o danh sách: Ví d : Nh ng ki n th c căn b n v HTML C u trúc t p tin HTML C u trúc t p tin HTML Các Tag HTML Các Tag cơ b n nh d ng văn b n nh d ng hình nh Biên so n: Đ ng Thanh Bình Trang 9
  10. Thi t k Web nh d ng liên k t Ví d Code Minh h a Dư i ây là k t qu c a o n code trên: IX. Chèn hình nh: 1. Quy nh chung: Trong HTML, hình nh ư c nh nghĩa b i th . Th là m t th r ng. i u này có nghĩa là th ch ch a các thu c tính và không có th k t thúc. hi n th hình nh trên trang web, chúng ta s d ng thu c tính src. Src là vi t t t c a ch "source". Giá tr c a thu c tính src là URL c a hình nh chúng ta mu n hi n th trên trang. Cú pháp chung như sau: 2. Thu c tính ALT: Thu c tính "alt" báo cho ngư i c trang web bi t n i dung c a hình nh trong trư ng h p trình duy t không th hi n th hình nh ó. Trình duy t s hi n th “alternate text” tha vì hi n th hình nh. Cú pháp chung: 3. Ví d : Biên so n: Đ ng Thanh Bình Trang 10
  11. Thi t k Web Ví d 1: K t qu : An image from another folder: An image from W3Schools: Ví d 2: K t qu : Look: A background image! Both gif and jpg files can be used as HTML backgrounds. If the image is smaller than the page, the image will repeat itself. Ví d 3: K t qu : You can also use an image as a link: Ví d 4: Click on one of the planets to watch it closer: Biên so n: Đ ng Thanh Bình Trang 11
  12. Thi t k Web Note: The "usemap" attribute in the img element refers to the "id" or "name" (browser dependant) attribute in the map element, therefore we have added both the "id" and "name" attributes to the map element. X. Frame: Khi s d ng frame, chúng ta có th hi n th nhi u hơn m t tài li u HTML trong m t c a s trình duy t. M i tài li u HTML ư c g i là m t frame, và m i frame thì c l p v i nh ng frame còn l i. Hình 10: M t s d ng frame 1. Th Frameset: Th nh nghĩa cách th c chia c a s trình duy t thành các frame. - Thu c tính ROWS và COLS quy nh kích c các frame trong t p h p frame. - M i thu c tính ch a m t danh sách các i s quy nh r ng ngăn cách nhau b ng d u ph y. i s này có th là pixels, là %, ho c là r ng tương i. - r ng tương i ư c th hi n dư i d ng i* v i i là s nguyên Ch ng h n: ROWS="3*,*" (* ư c hi u là 1*) s cho k t qu là dòng u có cao g p 3 l n so v i dòng th hai. - ROWS quy nh chi u cao c a dòng, tính t trên xu ng. - COLS quy nh r ng c a c t, tính t trái qua ph i. - N u ROWS ho c COLS b b qua (không khai báo), giá tr m c nh s là 100% - N u c hai thu c tính u ư c ch nh, m t lư i s ư c thi t l p t trái qua ph i - và sau ó là t trên xu ng. 2. Th Frame: Th ch nh tài li u HTML nào s ư c t vào frame. Biên so n: Đ ng Thanh Bình Trang 12
  13. Thi t k Web Ví d : Thu c tính c a : - NAME=“tên_frame”: t tên cho frame - SRC=“URL” : a ch trang web ư c hi n th - TARGET: xác nh frame m c nh cho các hyperlink trong frame này - BORDER=“x” : xác nh kích thư c ư ng vi n - SCROLLING=“yes/no/auto” : xác nh thu c tính hi n th scrollbar - NORESIZE: không cho phép hi u ch nh kích thư c frame window 3. Ví d chung: Table of Contents Photo 1 Photo 2 Photo 3 XI. Form: 1. Gi i thi u: M t HTML form là m t vùng trên văn b n HTML có ch a các i tư ng c bi t g i là control (ch ng h n như checkbox, radio button, menu, ...) và nhãn c a các control ó. Ngư i dùng "hoàn t t" n i dung trên form b ng cách thay i giá tr c a các control này (nh p văn b n, ch n các m c trình ơn, …). Sau ó, ngư i dùng submit form t i m t i tư ng có ch c năng x lý nh ng d li u này (ch ng h n như m t Web server, mail server, ...). M i form ph i ư c b t u b ng 1 tag . Tag có th ư c t b t kỳ âu trong ph n body c a văn b n HTML. Form ph i ư c k t thúc b ng tag . Biên so n: Đ ng Thanh Bình Trang 13
  14. Thi t k Web Dư i ây là m t ví d ơn gi n v form. Trên form này có các nhãn (label), radio button, và push button. First name: Last name: email: Male Female 2. Các thu c tính c a form: - NAME: tên form - METHOD: phương th c truy n d li u (GET/POST) - ACTION: chương trình/trang web x lý d li u c a form. 3. Các thành ph n nh p li u (Control): Ngư i dùng tương tác v i form thông qua các control. M i control có m t tên, ư c xác nh b i thu c tính name c a control ó. Tên c a m t i tư ng trên form có ph m vi hi u l c ch trong form ó. M i control u có “giá tr ban u” và “giá tr hi n th i”. Nh ng giá tr này u ư c lưu dư i d ng chu i. Ban u, giá tr hi n th i c a control ư c thi t l p b ng v i giá tr ban u. Sau ó, giá tr hi n th i có th s b thay i do ch nh s a c a ngư i dùng ho c do các o n script. Khi form ư c “reset”, giá tr c a các control l i ư c set v giá tr ban u. N u m t control không có giá tr ban u, tác ng c a vi c reset form trên control ó là không xác nh. yêu c u ngư i dùng nh p li u trên form, ta s d ng tag 4. Thu c tính c a các thành ph n nh p li u trên form: - TYPE : lo i INPUT - NAME: tên - VALUE: giá tr c a INPUT - SIZE: kích c - MAXLENGTH: dài t i a c a chu i ư c nh p vào - CHECKED: có check s n 5. Các thành ph n nh p li u trên form: a.Text và Password: Ví d : Biên so n: Đ ng Thanh Bình Trang 14
  15. Thi t k Web K t qu : Username: Password: b. Radio Button: Ví d : K t qu : Male Female c.Checkbox: Ví d : K t qu : I have a bike: I have a car: I have an airplane: d. Dropdown Listbox: Ví d : Occupation: Other Engineer Teacher Doctor Worker e.Text Area: Ví d : K t qu : The cat was playing in the garden. Biên so n: Đ ng Thanh Bình Trang 15
  16. Thi t k Web f. Push Button: Ngoài button thông thư ng, form còn h tr 2 button c bi t: Submit và Reset. Button Submit có ch c năng chuy n d li u i còn button Reset giúp thi t l p các i tư ng nh p li u trên form v tr ng thái m c nh. Ví d : K t qu :         XII. M t s thi t l p khác: 1. Background Sound: thi t l p nh c n n cho trang web, t dòng code sau ph n head c a văn b n HTML: Thu c tính loop có giá tr là -1 cho bi t b n nh c s ư c l p vô h n. Ch p nh n các nh d ng MID, WAV, RAM, RA, AIF, … 2. Chuy n hư ng trang web t ng: cho phép t ng chuy n sang trang web khác, t dòng code sau ph n head c a văn b n HTML: V i x là s giây delay trư c khi chuy n sang trang m i, URL ch a a ch trang web mu n chuy n t i. 3. Thi t l p encoding cho trang web: thi t l p encoding d ng Unicode cho trang, t dòng code sau ph n head c a văn b n HTML: Biên so n: Đ ng Thanh Bình Trang 16
  17. Thi t k Web CHƯƠNG CASCADING STYLE SHEETS 3 I. Gi i thi u: 1. Gi i thi u chung Khi Cascading Style Sheets (CSS) ư c gi i thi u l n u tiên vào cu i năm 1996, công ngh này ã em n m t v n h i m i cho nh ng ngư i phát tri n web. CSS cho phép thi t k trang tinh x o hơn, p hơn t t c nh ng gì h ã t ng bi t, cũng như giúp cho vi c phát tri n và b o trì nh ng site l n, ph c t p tr nên d dàng hơn. CSS cũng ơn gi n hóa vi c làm cho trang web có th ư c truy c p b i càng nhi u ngư i càng t t, b t k h dùng thi t b gì c trang web, b t k công ngh gì h s d ng. K t ó, web ã có nhi u thay i. Trình duy t web ã ư c tích h vào n tho i di ng, và ngư i ta duy t web c t vô tuy n truy n hình cũng như máy chơi game. HTML ã tr thành chu n ư c ch p nh n r ng rãi. CSS cũng ã tr thành m t công ngh v ng m nh, ư c h tr t t và d s d ng t o l p giao di n cho trang web. Nói m t cách ng n g n, CSS cung c p m t phương cách h u hi u ngư i thi t k web có th tách bi t giao di n c a trang web ra kh i n i dung c a trang web ó. Chúng ta s cùng tìm hi u cách th c làm i u này như th nào, và t i sao nên làm như th . 2. CSS là gì? Cascading Style Sheets (CSS) là m t ngôn ng làm vi c v i các văn b n HTML xác nh cách th c n i dung ư c hi n th . Cách th c hi n th ư c xác nh b i các style ư c t tr c ti p trong các tag HTML, ho c trong ph n head c a văn b n HTML, ho c lưu trên m t file có ph n ki u là .css. Trong style sheet ch a các style rule. M i rule ch th cách th c nh d ng m t thành ph n c th trên văn b n HTML, ch ng h n paragraph, h1, … Nhi u file HTML có th liên k t n cùng m t file CSS. 3. Cascading có nghĩa gì? Có ba d ng style sheet có th tác ng n vi c hi n th n i dung c a văn b n HTML trên trình duy t. ó là: • Browser style sheet: Trình duy t á d ng style sheet lê t t c văn b n web. M c dù nh ng style sheet này có th có khác bi t nhau tùy theo trình duy t, chúng v ncó nh ng i m chung, ch ng h n như quy nh text có màu en, siêu liên k t có màu xanh, và liên k t ã ư c nh n Biên so n: Đ ng Thanh Bình Trang 17
  18. Thi t k Web vào thì có màu tía. T t c nh ng quy nh này ư c g i chung là browser style sheet m c nh. • User style sheet: Ngư i dùng là b t kỳ ai ó ghé thăm web site. H u h t trình duy hi n nay u cho phép ngư i dùng thi t l p style sheet c a riêng h trong trình duy t. Nh ng style sheet này s có m c ưu tiên s d ng cao hơn browser style sheet m c nh. • Author style sheet: Là style sheet do ngư i phát tri n web site t o l p. Khi chúng ta áp d ng m t style sheet lên m t trang web, chúng ta ã s d ng author style sheet. Nh ng style sheet này s có m c ưu tiên s d ng cao hơn user style sheet. Vi c phân t ng ưu tiên s d ng style sheet này chính là ý nghĩa c a cascading (phân t ng). browser user author Web page style sheet style sheet style sheet 4. Ưu i m c a CSS: S d ng CSS có m t s l i i m sau: • D b o trì: S c m nh c a CSS n m ch m t file CSS có th ư c s d ng i u khi n cách th c hi n th c a nhi u vă b n HTML khác nhau. Vi c thay i gia di n c a site gi ây ch ơn gi n là s a i m t file CSS duy nh t thay vì ph i ch nh s a nhi u file HTML như trư c kia. • Kích c file nh hơn: CSS cho phép ngư i thi t k lo i b toàn b ph n nh d ng kh i văn b n HTML, k c layout table, spacer image, nhưng hình nh trang trí, font, màu s c, r ng, chi u cao, hình n n. Vi c hi n th ư c i u khi n b i các CSS file. i u này có th làm gi m rõ r t kích thư c c a các t p tin HTML. • Tăng cư ng kh năng truy c p: CSS bu c ngư i phát tri n web ph i chú ý n c u trúc, k t qu là trang web s ư c d ch d dàng hơn trên trình duy t, i u này hi u qu nh t là i v i nh ng ngư i dùng có th l c kém. Nh ng ngư i dùng như v y có th d dàng ch nh style sheet c a riêng h cho c site, ch ng h n v i size ch l n hơn và màu s c có tương ph n cao hơn. Thêm vào ó, CSS có th nh nghĩa nh ng style sheet có th xác nh âm lư ng và ng i u c a văn b n s ư c c cho ngư i mù b ng trình duy t text-to-speech.. • Kh năng nh d ng phong phú hơn: CSS cho phép ch nh nhi u nh d ng văn b n phong phú hơn so v i HTML, ch ng n r ng c a l , kho ng cách gi a các ký t , chi u cao dòng, ... Biên so n: Đ ng Thanh Bình Trang 18
  19. Thi t k Web • H tr in n t t hơn: CSS có th ư c nh nghĩa cho nhi u i tư ng k t xu t khác nhau. Chúng ta có th t o m t b CSS rule ngư i dùng xem trang web online, và m t b khác t o b n dùng in. 5. Style sheet làm vi c như th nào? Style sheet là m t t p h p các ch th ngh cách th c web browser hi n th n i dung c a trang. Lưu ý là " ngh " ch không ph i "yêu c u", vì CSS không b t bu c trình duy t ph i hi n th trang web theo m t cách c th nào ó, nó ch ngh trình duy t cách th c hi n th n i dung mà thôi. Hình 11: S d ng style sheet tách bi t ph n n i dung v i ph n hi n th II. S d ng style rule M i Cascading Style Sheet, k c dư i d ng .css file hay ư c nhúng trong văn b n HTML, là m t t p h p các ch th g i là style rule. 1. C u trúc c a style rule M i style rule bao g m: - M t selector, dùng xác nh các i tư ng ư c áp d ng style ư c quy nh b i style rule - M t danh sách các thu c tính (property) và giá tr c a thu c tính ó. 2. Khai báo style rule M t khai báo style rule thư ng có d ng sau: Hình 12: Rule set structure Chúng ta cũng có th khai báo style rule trên cùng m t dòng, ví d như sau: h2 { font-style: italic; text-align: center; color: navy; } Biên so n: Đ ng Thanh Bình Trang 19
  20. Thi t k Web Dư i ây là ví d v m t o n CSS có nhi u khai báo: h1 { text-align: center; color: navy; } h2 { font-style: italic; text-align: center; color: navy; } p { color: maroon; } Ngoài ra, cũng có th k t h p nhi u selector v i nhau trong cùng m t khai báo, như trong trư ng h p dư i ây h1, h2 { text-align: center; color: navy; } Lưu ý: Chúng ta có th thêm các o n chú thích vào CSS. Ph n chú thích ph i ư c b t u b ng c p d u /* và k t thúc b ng c p d u */ 3. S d ng shorthand property: Shorthand property cho phép giá tr c a nhi u thu c tính có th ư c ch nh trên m t thu c tính duy nh t. Shorthand property cũng d vi t và b o trì hơn. Chúng còn làm cho t p tin CSS ng n g n và súc tích hơn. Ví d , m t th HTML là có th ư c nh d ng b ng các thu c tính font- style, font-variant, font-weight, font-size, line-height, and font-family. Thay vào ó, chúng ta có th dùng m t shorthand property duy nh t là font. Hai khai báo dư i ây là tương ương nhau: h2 { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 100%; line-height: 120%; font-family: arial, helvetica, sans-serif; } h2 { font: italic small-caps bold 100%/120% arial, helvetica, sans-serif; Biên so n: Đ ng Thanh Bình Trang 20
Đồng bộ tài khoản