Ngôn ngữ css

NGễN NGỮ CSS CS201-Web Programming Lương Vĩ Minh – lvminh@fit.hcmus.edu.vn đ 2012 - International Training & Education Center (ITEC) University of Science - Ho Chi Minh City 227 Nguyen Van Cu, HCM city Nội dung • Giới thiệu CSS • Định nghĩa Style • Sử dụng và Phõn loại CSS • Selector trong CSS và phạm vi ảnh hưởng 212/9/2013 GIỚI THIỂU CSS 12/9/2013 3 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) 412/9/2013 GIỚI THIỂU CSS 12/9/2013 5 Nội dung • Giới thiệu CSS • Định nghĩa Style • Sử dụng và Phõn loại CSS • Selector trong CSS và phạm vi ảnh hưởng 612/9/2013 Định nghĩa Style Kiểu 1 <tag style = “property1:value1; property2:value2; propertyN:valueN;”> Kiểu 2 SelectorName { property1:value1; property2:value2; propertyN:valueN;} 7 Vớ dụ: <h1 style=“ color : blue; font-family : Arial;” > DHKHTN Vớ dụ: .TieuDe1 { color: red; font-family: Verdana, sans-serif; } DHKHTN 12/9/2013 Ghi chỳ • Giống Ghi chỳ trong C++ • Sử dung /*Ghi chỳ*/ • Vớ dụ : • SelectorName { property1:value1; /*Ghi chu 1*/ property2:value2; /*Ghi chu 2*/ propertyN:valueN;} 812/9/2013 Định nghĩa Style – Lưu ý 912/9/2013 Nội dung • Giới thiệu CSS • Định nghĩa Style • Sử dụng và Phõn loại CSS • Selector trong CSS và phạm vi ảnh hưởng 1012/9/2013 Sử dụng và Phõn loại CSS – Phõn loại • Gồm 3 loại CSS • Inline Style Sheet (Nhỳng CSS vào tag HTML) • Embedding Style Sheet (Nhỳng CSS vào trang web) • External Style Sheet (Liờn kết CSS với trang web) 1112/9/2013 Inline Style Sheet • Định nghĩa style trong thuộc tớnh style của từng tag HTML. • Theo cỳ phỏp kiểu 1. . • Khụng sử dụng lại được. • Vớ dụ: This is yellow 1212/9/2013 Embedding Style Sheet • Cũn gọi là Internal Style Sheet hoặc Document-Wide Style Sheet • Mọi định nghĩa type nằm trong tag của trang HTML. • Định nghĩa style theo cỳ phỏp kiểu 2. • Trang HTML cú nội dung như sau: <!-- SelectorName { property1:value1; property2:value2; propertyN:valueN;} --> 1312/9/2013 Embedding Style Sheet Embedded Style Sheet <!-- P {color: red; font-size: 12pt; font-family: Arial;} H2 {color: green;} --> This is green This is red, 12 pt. and Garamond. 1412/9/2013 External Style Sheet • Mọi style đều lưu trong file cú phần mở rộng là *.CSS. • File CSS: lưu trữ nhiều style theo cỳ phỏp kiểu 2. • Trong file HTML: liờn kết bằng tag link. Cỳ phỏp: • Trang HTML : Liờn kết bằng tag style với @import url. Cỳ phỏp @import url(URL); 1512/9/2013 External Style Sheet 16 Trong tập tin 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 Cass <link HREF="MyStyle.css" REL="stylesheet" > This is an H2 12/9/2013 So sỏnh, Đỏnh giỏ Inline Style Sheet Embedding Style Sheet External Style Sheet Khai bỏo Kiểu 1 Kiểu 2 Kiểu 2 Cỳ phỏp Test .TieuDe1{color: red;} Test <link rel=“stylesheet “ href=“main.css” /> Test Ưu điểm • Dễ dàng quản lý Style theo từng tag của tài liệu web. • Cú độ ưu tiờn cao nhất • Dễ dàng quản lý Style theo từng tài liệu web. • Khụng cần tải thờm cỏc trang thụng tin khỏc cho style • Cú thể thiết lập Style cho nhiều tài liệu web. • Thụng tin cỏc Style được trỡnh duyệt cache lại Khuyết điểm • Cần phải Khai bỏo lại thụng tin style trong từng tài liệu Web và cỏc tài liệu khỏc một cỏch thủ cụng. • Khú cập nhật style • Cần phải khai bỏo lại thụng tin style cho cỏc tài liệu khỏc trong mỗi lần sử dụng • Tốn thời gian download file *.css và làm chậm quỏ trỡnh biờn dịch web ở trỡnh duyệt trong lần đầu sử dụng 1712/9/2013 Sử dụng và Phõn loại CSS – Độ ưu tiờn • Thứ tự ưu tiờn ỏp dụng định dạng khi sử dụng cỏc loại CSS (độ ưu tiờn giảm dần) : 1. Inline Style Sheet 2. Embedding Style Sheet 3. External Style Sheet 4. Browser Default 1812/9/2013 1912/9/2013 SELECTOR TRONG CSS 12/9/2013 20 Selector • Là tờn 1 style tương ứng với một thành phần được ỏp dụng định dạng • Cỏc dạng selectors Đ HTML element selectors Đ Class selectors Đ ID selectors Đ .... 2112/9/2013 Selector trong CSS Loại Mụ tả phạm vi ảnh hưởng Vớ dụ element Định dạng ỏp dụng cho ND tất cả cỏc tag Element trong tài liệu Web h1 {color: red;} /* ND của thẻ bị định dạng màu chữ=đỏ */ #id Định dạng ỏp dụng cho ND tất cả cỏc tab cú thuộc tớnh id trong tà liệu Web #test {color: green;} /* ND của bất kỳ tag cú thuộc tớnh id=test đều bị định dạng màu chữ=xanh lỏ */ .class Định dạng ỏp dụng cho ND tất cả cỏc tab cú thuộc tớnh class trong tà liệu Web .note {color: yellow;} /* ND của bất kỳ tag cú thuộc tớnh class=note đều bị định dạng màu chữ=vàng*/ element . class Định dạng ỏp dụng cho ND cỏc tag Element cú thuộc tớnh class tương ứng h1.note {text-decoration: underline;} /* ND của cỏc thẻ cú thuộc tớnh class=note đều bị định dạng gạch chõn */ Grouping Định dạng ỏp dụng cho ND một nhúm cỏc tag trong tài liệu. h1,h2,h3 {background-color: orange;} /* ND của cỏc thẻ đều bị định dạng màu nền = màu cam */ Contextual Định dạng ỏp dụng cho ND cỏc thẻ được lồng trong một thẻ cha nào đú p strong {color: purple;} /* ND của cỏc thẻ nằm trong thẻ đều bị định dạng màu chữ=màu tớa */ Pseudo Class Pseudo element Định dạng được ỏp dụng dựa vào trạng thỏi của cỏc Element. (Khụng xuất hiện trong mó lệnh HTML) 2212/9/2013 Selector - Element • Cú hiệu ứng trờn tất cả element cựng loại tag • Vớ dụ : 2312/9/2013 Selector – ID rules • Cú hiệu ứng duy nhất trờn một element cú đỳng id. • Vớ dụ : 2412/9/2013 Selector – Class rules • Cú hiệu ứng trờn tất cả cỏc loại tag cú cựng giỏ trị thuộc tớnh class. • Vớ dụ : 2512/9/2013 Selector– Kết hợp Element và Class • Vớ dụ : 2612/9/2013 Selector - Contextual Selection • Định dạng được ỏp dụng cho nội dung trong chuổi tag theo đỳng thứ tự • Vớ dụ : 2712/9/2013 Selector – Pseudo Class • Định dạng dựa vào trạng thỏi của liờn kết, sự kiện chuột. • Cú thể kết hợp với Selector khỏc. 2812/9/2013 Selector – Pseudo Element • Định dạng dựa vào vị trớ đầu tiờn của ký tự, của dũng văn bản • :first-letter, :first-line • Cú thể kết hợp với Selector khỏc. 2912/9/2013 Selector – Pseudo Element 3012/9/2013 12/9/2013 31 Cõu hỏi ?