WEB1013 slide2 gi i thi u CSS

BÀI 2: GIỚI THIỆU CSS XÂY DỰNG TRANG WEB GIỚI THIỆU CSS MỤC TIÊU BÀI HỌC  HIỂU VAI TRÒ CỦA CSS  HIỂU VÀ XÂY DỰNG SELECTOR  SỬ DỤNG CÁC THUỘC TÍNH ĐỊNH DẠNG VĂN BẢN  ĐỊNH DẠNG LIÊN KẾT VỚI CSS  HIỂU QUI LUẬT NẠP CHỒNG CSS TÌM HIỂU VÀ TỔ CHỨC CSS CSS LÀ GÌ  CSS (Cascading Style Sheet) tạm dịch bảng định kiểu xếp chồng  Vai trò CSS định dạng thành phần giao diện thực bố cục trang web  Qui luật định dạng CSS vô phong phú: màu sắc, đường kẻ, bo góc, làm bóng… VÍ DỤ CSS CÚ PHÁP CSS  sử dụng để định nghĩa CSS  h1{…}, h6{…} chứa tập thuộc tính CSS áp dụng cho thẻ h1, h6 trang web  font-size, color: thuộc tính CSS  10px, 30px, red: giá trị thuộc tính CSS  Kết thúc cặp name: value dấu ; VỊ TRÍ ĐẶT MÃ CSS  Inline style (css nội tuyến) • Đặt thuộc tính CSS thuộc tính @style thẻ HTML • Ví dụ: …  Embed style (nhúng css) • Đặt thẻ • Ví dụ: h1{color:red;}  External (liên kết ngồi) • Đặt file css sau liên kết vào trang web với thẻ • styles.css h1{ color:red; } INLINE STYLE  Phương pháp phù hợp với trường hợp • Chỉ áp dụng CSS cho thẻ • Một vài thuộc tính CSS đơn giản EMBED STYLE Phương pháp áp dụng nhiều thẻ trang web EXTERNAL STYLE Phương pháp phù hợp với cho việc áp dụng css cho nhiều thẻ nhiều trang khác  Định dạng văn  Sử dụng màu ĐỊNH DẠNG LIÊN KẾT  CSS cung cấp dạng selector để chọn liên kết trang thái khác • a{} • Chọn tất thẻ a • a:link{} • Chọn tất liên kết trạng thái bình thường (chưa click) • a:visited{} • Chọn tất liên kết trạng thái thăm (đã click) • a:active{} • Chọn tất liên kết trạng thái tích cực (đang chọn) • a:hover{} • Chọn tất liên kết trạng thái có chuột (đang đưa chuột lên) ĐỊNH DẠNG LIÊN KẾT Bình thường Đưa chuột lên Đã thăm  Định dạng liên kết TRẮC NGHIỆM LUẬT NẠP CHỒNG CSS VẤN ĐỀ CỦA QUI LUẬT NẠP CHỒNG CSS  Thẻ chọn selector Hợp tất CSS lại có thuộc tính CSS • font-variant: khơng trùng • color: trùng font-variant: small-caps; color: brown; QUI LUẬT NẠP CHỒNG  Khi có nhiều selector chọn phần tử xảy nạp chồng css  Việc nạp chồng xảy hình thức cộng hợp ghi đè • Cộng hợp • Các thuộc tính css khác từ nhiều selector áp dụng cho phần tử • Ghi đè • Các thuộc css giống từ nhiều selector bị ghi đè theo thứ tự ưu tiên  Thứ tự ưu tiên tăng dần từ trái sang phải • Inline -> Id selector -> Class selector -> HTML Selector -> Mặc định • Định nghĩa sau -> định nghĩa trước • Sử dụng !important sau thuộc tính css để thay đổi thứ tự ưu tiên thành cao GIẢI THÍCH QUI LUẬT NẠP CHỒNG CSS  Thứ tự ưu tiên sau • #h13->.h12->.h11->h1->mặc định font-variant: small-caps; color: brown; GIẢI THÍCH QUI LUẬT NẠP CHỒNG CSS  Thứ tự ưu tiên • h12->h11->h1->mặc định font-variant: small-caps; color: green; GIẢI THÍCH QUI LUẬT NẠP CHỒNG CSS  Thứ tự ưu tiên • !important -> * font-variant: small-caps; color: red;  Nạp chồng CSS TRẮC NGHIỆM TÓM TẮT BÀI HỌC  CSS VÀ VAI TRỊ CỦA NĨ  SELECTOR  SELECTOR CƠ BẢN  SELECTOR PHÂN VÙNG  SELECTOR LIÊN KẾT  NHIỀU SELECTOR  CÁC THUỘC TÍNH CSS ĐỊNH DẠNG VĂN BẢN  QUI LUẬT NẠP CHỒNG CỦA CSS ... phân vùng  Nhi u selector TRẮC NGHIỆM B I (PHẦN II): GI I THI U CSS XÂY DỰNG TRANG WEB GI I THI U CSS CÁC THUỘC TÍNH CSS ĐỊNH DẠNG VĂN BẢN CSS ĐỊNH DẠNG VĂN BẢN  CSS cung cấp nhi u thuộc tính định... TI U B I HỌC  HI U VAI TRÒ CỦA CSS  HI U VÀ XÂY DỰNG SELECTOR  SỬ DỤNG CÁC THUỘC TÍNH ĐỊNH DẠNG VĂN BẢN  ĐỊNH DẠNG LIÊN KẾT V I CSS  HI U QUI LUẬT NẠP CHỒNG CSS TÌM HI U VÀ TỔ CHỨC CSS CSS... u tiên từ tr i sang ph i • font-size:14px; đặt kích thước font 14 pixel  font-variant: xác định ki u chữ hoa in nhỏ • font-variant:small-caps; KI U CHỮ HOA NHỎ  font-style: xác định ki u in