Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 31 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
31
Dung lượng
570,67 KB
Nội dung
Đ Đ ị ị nh nh d d ạ ạ ng ng b b ằ ằ ng ng CSS CSS Nguy Nguy ễ ễ n n Duy Duy H H ả ả i i Khoa Khoa CNTT CNTT - - ĐHSP ĐHSP H H à à N N ộ ộ i i CSS CSS 9 CSS=Cascading Style Sheet: Mẫuquy định cách thứcthể hiệncácthẻ HTML 9 Style được đưa vào HTML 4.0 để giải quyếtmộtsố vấn đề. 9 Giúp tiếtkiệm đượcrất nhiềuthờigianvà công sứcchoviệcthiếtkế web. 9 Có thểđịnh nghĩa nhiềustyle vàomộtthẻ HTML (Cascading) C C á á c c lo lo ạ ạ i i style style 9 Có 4 loại style: – Inline Style (Style đượcqui định trong 1 thẻ HTML cụ thể) – Internal Style (Style đượcqui định trong phần <HEAD> của 1 trang HTML ) – External Style (style đượcqui định trong file .CSS ngoài) – Browser Default (thiếtlậpmặc định củatrình duyệt) 9 Thứ tựưutiên: Mức ưutiêngiảmdầntừ trên xuống C C á á ch ch ch ch è è n n CSS CSS 9 Đặt trong <head>…</head> 9 VớiInternal style: <style type=“text/css”> <! Nội dung định nghĩa style > </style> C C á á ch ch ch ch è è n n CSS ( CSS ( tt tt ) ) 9 Với External style: – Định nghĩa style trong file riêng (thường có đuôi .CSS) – Nhúng file CSS đã định nghĩa vào trang web: <link href=“địachỉ file" rel="stylesheet" type="text/css"> 9 Với Inline style: <tên_thẻ style=“tt1:gt1;tt2:gt2;…”> Khai Khai b b á á o o v v à à s s ử ử d d ụ ụ ng ng style style Ch Ch ú ú ý ý khi khi vi vi ế ế t t style style 9 Style phân biệtchữ hoa, chữ thường 9 Để ghi chú trong style sử dụng: /* Đoạn ghi chú */ Khai Khai b b á á o o style style selector { selector { Property1: Value1; Property1: Value1; Property2: Value2; Property2: Value2; } } Style Style á á p p d d ụ ụ ng ng cho cho th th ẻ ẻ c c ụ ụ th th ể ể 9 Trường hợp1 thẻ: Đặt selector là tên_thẻ p { color: red; } 9 Khai báo đồng thời nhiềuthẻ: Viếtdanh sách tên thẻ phân cách bởidấuphảy h1,h2,h3,h4,h5,h6{ font-family:arial; } T T ạ ạ o o l l ớ ớ p p 9 Gắnvớithẻ cụ thể: Đặt selector là tên_thẻ.tên_lớp p.loai1{ color:red; } p.loai2{ color:blue; } 9 Không gắnvớithẻ cụ thể: bỏ phần tên_thẻ đi, giữ lạidấuchấm: .loai3{ color:green; } [...]... trường hợp cụ thể CSS Basic 1 CSS Background 2 CSS Text 3 CSS Font 4 CSS Border 5 CSS Margin 6 CSS Padding 7 CSS List CSS Advanced 1 CSS Dimension 2 CSS Classification 3 CSS Positioning 4 CSS Pseudo-class 5 CSS Pseudo-element 6 CSS Media Types CSS cho nền CSS cho nền (tt) CSS và cho bản CSS và cho bản (tt) CSS và font CSS và font (tt) CSS và font (tt) CSS và font (tt) CSS và đường viền ... xanh Định danh Tương tự như class Thay dấu chấm (.) thành dấu thăng (#) Cho thẻ cụ thể: tên_thẻ #định_ danh{…} Tổng quát: #định_ danh{…} Ví dụ: p#doan1{ color:red; } #loai2{ color:blue; } Sử dụng định danh Mỗi định danh là duy nhất trên trang Đặt thuộc tính id của thẻ = định_ danh Ví dụ: Đoạn này màu đỏ Tiêu đề xanh Một số trường hợp cụ thể CSS . xanh</h1> M M ộ ộ t t s s ố ố trư trư ờ ờ ng ng h h ợ ợ p p c c ụ ụ th th ể ể CSS Basic CSS Basic 1. CSS Background 2. CSS Text 3. CSS Font 4. CSS Border 5. CSS Margin 6. CSS Padding 7. CSS List CSS Advanced CSS Advanced 1. CSS Dimension 2. CSS Classification 3. CSS. Positioning 4. CSS Pseudo-class 5. CSS Pseudo-element 6. CSS Media Types CSS CSS cho cho n n ề ề n n CSS CSS cho cho n n ề ề n n ( ( tt tt ) ) CSS CSS v v à à cho cho b b ả ả n n CSS CSS v v à à cho cho b b ả ả n n ( ( tt tt ) ) . Đ Đ ị ị nh nh d d ạ ạ ng ng b b ằ ằ ng ng CSS CSS Nguy Nguy ễ ễ n n Duy Duy H H ả ả i i Khoa Khoa CNTT CNTT - - ĐHSP ĐHSP H H à à N N ộ ộ i i CSS CSS 9 CSS= Cascading Style Sheet: Mẫuquy định cách thứcthể hiệncácthẻ