Slide bài giảng CSS của vietpro (buổi 02)

TRUNG TÂM ĐÀO TẠO LẬP TRÌNH WEB & ĐỒ HỌA VIETPRO EDUATION BÀI GIẢNG CSS (BUỔI 2) CÁC THUỘC TÍNH TRONG CSS Giảng viên: Hồng Minh Tuấn THUỘC TÍNH ID TRONG CSS Ý nghĩa ID CSS - ID thuộc tính có tính HTML Tag văn HTML - CSS dựa vào thuộc tính ID để nhận biết quy định khác Style cho thành phần Khai báo thuộc tính ID HTML Tag - id = “Tên ID” - Tên ID phải viết liền, chứa chữ số, chữ cái, dấu _, - không chứa khoảng trắng ký tự đặc biệt Cú pháp triệu gọi ID CSS - #id_name{Property1: Value1; PropertyN: ValueN;} - Chú ý: Có thể đặt trùng tên ID văn HTML không gây lỗi ns làm chất thuộc tính ID THUỘC TÍNH CLASS TRONG CSS Ý nghĩa Class CSS - Class nhóm phần tử có thuộc tính, Class sử dụng nhiều lần cho nhiều HTML Tag khác - CSS dựa phần tử có Class để nhận biết quy định giống Style cho phần tử Khai báo thuộc tính Class HTML Tag - class = “class1 class2 classN” - Cách đặt tên Class tương tự ID Cú pháp triệu gọi Class CSS - class_name{Property1: Value1; PropertyN: ValueN;} ĐIỀU KHIỂN TRONG CSS Điều khiển cho Liên kết (Link) - link: Trạng thái liên kết chưa có Click - a:link{Property1: Value1; PropertyN: ValueN;} - hover: Trang thái liên kết hơ chuột a:hover{Property1: Value1; PropertyN: ValueN;} - active: Trạng thái liên kết giữ Click a:active{Property1: Value1; PropertyN: ValueN;} - visited: Trạng thái liên kết Cllick a:visited{Property1: Value1; PropertyN: ValueN;} Điều khiển cho HTML Tag - HTML Tag:hover: BOX MODEL TRONG CSS Mơ hình “Hộp BOX MODEL” - Trong CSS, box model (mơ hình hộp) mơ tả cách mà CSS định dạng khối khơng gian bao quanh thành phần Nó bao gồm padding (vùng đệm), border (viền) margin (canh lề) tùy chọn Hình mơ tả cấu trúc minh họa mơ hình hộp cho thành phần web Các thuộc tính Box Model - Padding - Border - Margin CÁC THUỘC TÍNH PADDING Khai báo thuộc tính Padding - Padding-left: Value; - Padding-right: Value; - Padding-top: Value; - Padding-bottom: Value; Cách viết rút gọn để khai báo Padding - Padding: Value1 Value2 Value3 Value4 - Value1: Vùng đệm phía - Value2: Vùng đệm phía phải - Value3: Vùng đệm phía - Value4: Vùng đệm phía trái - Padding: Value1 Value2 Value1: Vùng đệm trên-dưới Value2: Vùng đệm trái-phải - Padding: Value Value: Vùng đệm trên-dưới-trái-phải CÁC THUỘC TÍNH BORDER Border-width - border-width: Độ dầy đường viền với giá trị đơn vị độ dài Border-color - border-color: Mầu đường viền, với giá trị tên mầu mã mầu CÁC THUỘC TÍNH BORDER Border-style - border-style: Kiểu hiển thị đường viền với giá trị sau Cách viết rút gọn để khai báo Border - border: Value1 Value2 Value3; - Value1: Độ dầy đường viền - Value2: Mầu đường viền - Value3: Kiểu hiển thị đường viền CÁC THUỘC TÍNH MARGIN Khai báo thuộc tính Margin - Margin-left: Value; - Margin-right: Value; - Margin-top: Value; - Margin-bottom: Value; Cách viết rút gọn để khai báo Margin - Margin: Value1 Value2 Value3 Value4 - Value1: Canh lề trên - Value2: Canh lề phải - Value3: Canh lề - Value4: Canh lề trái - Margin: Value1 Value2 Value1: Canh lề trên-dưới Value2: Canh lề trái-phải - Margin: Value Value: Canh lề trên-dưới-trái-phải THỰC HÀNH I – BÀI TẬP THỰC HÀNH Bài Bài II – BÀI TẬP VỀ NHÀ Bài Bài ... trái-phải - Margin: Value Value: Canh lề trên-dưới-trái-phải THỰC HÀNH I – BÀI TẬP THỰC HÀNH Bài Bài II – BÀI TẬP VỀ NHÀ Bài Bài ... gọi ID CSS - #id_name{Property1: Value1; PropertyN: ValueN;} - Chú ý: Có thể đặt trùng tên ID văn HTML không gây lỗi ns làm chất thuộc tính ID THUỘC TÍNH CLASS TRONG CSS Ý nghĩa Class CSS -... Điều khiển cho HTML Tag - HTML Tag:hover: BOX MODEL TRONG CSS Mơ hình “Hộp BOX MODEL” - Trong CSS, box model (mơ hình hộp) mơ tả cách mà CSS định dạng khối không gian bao quanh thành phần Nó bao