Đang tải... (xem toàn văn)
Casscading Style Sheets
1CHƯƠNG 3CSS (Casscading Style Sheets) 2Nội dungGiới thiệu CSSĐịnh nghĩa StyleSử dụng và Phân loại CSSSelector trong CSS và phạm vi ảnh hưởng 3Lợi ích khi dùng CSS Thời khóa biểu quả khoa HTTT 4Giới thiệu về CSSCSS = Casscading Style SheetsDùng để mô tả cách hiển thị các thành phần trên trang WEBSử dụng tương tự như dạng TEMPLATECó thể sử dụng lại cho các trang web khácCó thể thay đổi thuộc tính từng trang hoặc cả site nhanh chóng (cascading) 5Định nghĩa Style<tag style=“property1:value1;property2:value2;………propertyN:valueN;”>…</tag>Dạng 1:Vídụ:<h1 style=“color : blue; font-family : Arial;”> ĐHCNTT</h1> 6Định nghĩa Style (tt)H2{FONT-WEIGHT: bold;FONT-SIZE: 16pt;COLOR: white;FONT-STYLE: italic;FONT-FAMILY: Arial;BACKGROUND-COLOR: red;font-color: white}Dạng 2: 7Định nghĩa StyleSelectorName{property1:value1;property2:value2;………propertyN:valueN;}<tag class = “SelectorName”>………</tag>Dạng 3:.TieuDe1 {color: red;font-family: Verdana, sans-serif; }<h1 class=“TieuDe1”> ĐHCNTT </h1> 8Ghi chú trong styleGiống Ghi chú trong C++Sử dụng /*Ghichú*/Ví dụ:SelectorName{ property1:value1;/*Ghichu1*/property2:value2;/*Ghichu2*/………propertyN:valueN;} 9Phân loại CSSGồm 3 loại CSS •1.Inline Style Sheet•2. Embedding Style Sheet•3. External Style Sheet 10Inline style Sheet Định nghĩa style trong thuộc tính style của từng tag HTMLTheo cú pháp kiểu 1Vídụ: <H1 STYLE="color: yellow">This is yellow </H1><tag style= “property1: value1; …property N:value N;”>…</tag> [...]... file style. CSS H2{ FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT -STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; font-color: white } 1 CHƯƠNG 3 CSS (Casscading Style Sheets) 6 Định nghĩa Style (tt) H2{ FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT -STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; font-color: white } Dạng 2: 13 External Style Sheet Mọi style. .. nghĩa thêm style ta quay lại bước 2 Bước 4: Lưu file css lại 4 Giới thiệu về CSS CSS = Casscading Style Sheets Dùng để mô tả cách hiển thị các thành phần trên trang WEB Sử dụng tương tự như dạng TEMPLATE Có thể sử dụng lại cho các trang web khác Có thể thay đổi thuộc tính từng trang hoặc cả site nhanh chóng (cascading) 18 Đ u tiên ộ ư 1. Inline style sheet 2. Embedding style sheet 3.... property1:value1;/*Ghichu1*/ property2:value2;/*Ghichu2*/ ……… propertyN:valueN; } 16 Ví dụ (tt) Sử dụng style. CSS <html> <head><title>Cascading Style Sheets </title> <link REL="stylesheet" HREF= style. css” type=“text/css”> </head> <body> <h2>This is an H2 </h2> </body> </html> 31 Bài 2 (tt) < /style& gt; <Script language="JavaScript"> function... class=“maunen”>Khoa HTTT</p> </body> </http> 14 External Style Sheet (tt) 2.Trong trang HTML: Liên kết bằng tag style với @import url. Cúpháp <head> < ;style type=“text/css”media="all | print | screen" > @import url(URL); < /style& gt; </head> 29 Bài 1 8 Ghi chú trong style Giống Ghi chú trong C++ Sử dụng /*Ghichú*/ Ví dụ: SelectorName {... underline; background-color:#009999; } 5 Định nghĩa Style <tag style= “property1:value1; property2:value2; ……… propertyN:valueN;”>…</tag> Dạng 1: Vídụ: <h1 style= “color : blue; font-family : Arial;”> ĐHCNTT </h1> 24 Class rules <http> <head> < ;style type=“text/css”> .maunen{background-color:red;} < /style& gt; </head> <body> <h1 class=“maunen”>... className; } </script> </head> 11 Embedding Style Sheet • Nhúng trong tag < ;style& gt;của trang HTML • Định nghĩa style theo cú pháp kiểu 2 <head> < ;style type=“text/css” media="all | print | screen" > <!– SelectorName{ property 1:value1; property 2:value2; ……… property N: valueN; } … > < /style& gt; </head> 3 Lợi ích khi dùng CSS Thời khóa... <HEAD> <TITLE>Embedded Style Sheet </TITLE>< ;STYLE TYPE="text/css"> <!— P{color: green;font-size: 12pt;font-family: Arial;} H2{color: Red;} >< /STYLE& gt; </HEAD> <BODY BGCOLOR="#FFFFFF"><H2>This is red</H2> <P>this is green, 12 pt. and Garamond.</P> </BODY> </HTML> 22 Ví dụ về element <http> <head> < ;style type=“text/css”> P{color:red} Em{color:blue} < /style& gt; </head> <body> <p>ĐHCNTT</p> <p>He... element <http> <head> < ;style type=“text/css”> P{color:red} Em{color:blue} < /style& gt; </head> <body> <p>ĐHCNTT</p> <p>He thong thong tin<em>csdl</em></p> </body> </http> 23 Ví dụ ID rules <http> <head> < ;style type=“text/css”> #id1{color:red} #id2{color:blue} < /style& gt; </head> <body> <p id=“id1”>ĐHCNTT</p> <p... (được sử dụng phổ biến) Định nghĩa style theo cú pháp kiểu2 Tạo liên kết đến file CSS • 1.Trong trang HTML: Liên kết bằng tag link. Cúpháp: <head> <link rel=“stylesheet” href=“URL” type="text/css"> </head> 30 Bài 2 Kết hợp javascript làm highline menu cho trang Web them đoạn code hướng dẫn sau <html> <head> < ;style type="text/css"> .mainmenu{ font-family:... trang hoặc cả site nhanh chóng (cascading) 18 Đ u tiên ộ ư 1. Inline style sheet 2. Embedding style sheet 3. External style sheet 4. Browser Default Thứ tự độ ưu tiên áp dụng định dạng style dùng trong các trang web (Độ ưu tiên giảm dần) 7 Định nghĩa Style SelectorName{ property1:value1; property2:value2; ……… propertyN:valueN;} <tag class = “SelectorName”> ……… </tag> Dạng . loại CSS •1.Inline Style Sheet•2. Embedding Style Sheet•3. External Style Sheet 10Inline style Sheet Định nghĩa style trong thuộc tính style của từng tag. giáInline style sheet Embedding style sheet External style sheetKhai báo Kiểu 1 Kiểu 2 Kiểu 3Cú pháp <p style= “color:red;”> ĐHCNTT</p><style