Lập trình và Thiếtkế Web 1 – Bài 4 :CSS – Casscading Styte Sheet © 2007 Khoa CNTT - ĐHKHTN S S ử ử d d ụ ụ ng ng v v à à Phân Phân lo lo ạ ạ i i CSS CSS - - Inline Style Sheet Inline Style Sheet Định nghĩa style trong thuộc tính style củatừng tag HTML. Theo cú pháp kiểu1. <tag style = “property1:value1;…propertyN:valueN;”> …. </tag> Không sử dụng lại được. Ví dụ: <H1 STYLE="color: yellow">This is yellow</H1> Lập trình và Thiếtkế Web 1 – Bài 4 :CSS – Casscading Styte Sheet © 2007 Khoa CNTT - ĐHKHTN S S ử ử d d ụ ụ ng ng v v à à Phân Phân lo lo ạ ạ i i CSS CSS - - Embedding Style Sheet Embedding Style Sheet Còn gọilàInternal Style Sheet hoặc Document-Wide Style Sheet Mọi định nghĩastyle được đặt trong tag <style> của trang HTML. Định nghĩa style theo cú pháp kiểu2. Trang HTML có nội dung như sau: <head> <style type=“text/css” > <! SelectorName { property1:value1; property2:value2; ……… propertyN:valueN;} > </style> </head> Lập trình và Thiếtkế Web 1 – Bài 4 :CSS – Casscading Styte Sheet © 2007 Khoa CNTT - ĐHKHTN S S ử ử d d ụ ụ ng ng v v à à Phân Phân lo lo ạ ạ i i CSS CSS - - Embedding Style Sheet Embedding Style Sheet Lập trình và Thiếtkế Web 1 – Bài 4 :CSS – Casscading Styte Sheet © 2007 Khoa CNTT - ĐHKHTN S S ử ử d d ụ ụ ng ng v v à à Phân Phân lo lo ạ ạ i i CSS CSS - - External Style Sheet External Style Sheet Mọistyle đềulưu trong file có phầnmở rộng là *.CSS. File CSS: lưutrữ nhiều style theo cú pháp kiểu2. Trong file HTML: liên kếtbằng tag link. Cú pháp: <head> <link rel=“stylesheet” href=“URL” type="text/css"> </head> Trang HTML : Liên kếtbằng tag style với @import url. Cú pháp <head> <style type=“text/css” media="all | print | screen" > @import url(URL); </style> </head> Lập trình và Thiếtkế Web 1 – Bài 4 :CSS – Casscading Styte Sheet © 2007 Khoa CNTT - ĐHKHTN S S ử ử d d ụ ụ ng ng v v à à Phân Phân lo lo ạ ạ i i CSS CSS - - External Style Sheet External Style Sheet Trong tậptin MyStyle.CSS H2 { FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; font-color: white } Trong trang Web : demo.htm <html> <head> <title>Cass………</title> <link HREF="MyStyle.css" REL="stylesheet" > </head> <body> <h2>This is an H2 </h2> </body> </html> . “property1:value1;…propertyN:valueN;”> …. </tag> Không sử dụng lại được. Ví dụ: <H1 STYLE="color: yellow">This is yellow</H1> Lập trình và Thiếtkế Web 1 – Bài 4 :CSS – Casscading Styte Sheet ©. Lập trình và Thiếtkế Web 1 – Bài 4 :CSS – Casscading Styte Sheet © 2007 Khoa CNTT - ĐHKHTN S S ử ử d d ụ ụ ng ng v v à à Phân Phân lo lo ạ ạ i i CSS. { property1:value1; property2:value2; ……… propertyN:valueN;} > </style> </head> Lập trình và Thiếtkế Web 1 – Bài 4 :CSS – Casscading Styte Sheet © 2007 Khoa CNTT - ĐHKHTN S S ử ử d d ụ ụ ng ng v v à à Phân Phân lo lo ạ ạ i i CSS