Bài giảng Nhập môn HTML và thiết kế Web: Bài 8 - Các thuộc tính hay sử dụng trong thiết kế Web

Bài giảng Nhập môn HTML và thiết kế Web: Bài 8 - Các thuộc tính hay sử dụng trong thiết kế Web cung cấp cho các bạn những kiến thức về Box Model, thuộc tính Float & Clear, thuộc tính Height, Width và Position.

NHẬP MƠN HTML VÀ THIẾT KẾ WEB CÁC THUỘC TÍNH HAY SỬ DỤNG TRONG THIẾT KẾ WEB Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin NỘI DUNG Box Model, Thuộc tính Float & Clear, Thuộc tính Height, Width Position Bộ mơn Hệ thống thơng tin – Khoa Công nghệ thông tin BOX MODEL Box model: Box model 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 Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin BOX MODEL Box model: Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin CSS Thuộc tính margin: CSS dùng để canh lề cho trang web hay thành phần web margin-top: canh lề margin-bottom: canh lề margin-left: canh lề trái margin-right: canh lề phải Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin BOX MODAL Thuộc tính margin: Cơng thức rút gọn: margin: | | | hoặc: margin:|< value2> với value giá trị margin-top margin-bottom value2 giá trị margin-left margin-right Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin BOX MODAL Thuộc tính margin: Bộ mơn Hệ thống thơng tin – Khoa Cơng nghệ thơng tin BOX MODEL Thuộc tính Padding: Quy định khoảng cách phần nội dung viền đối tượng Nó khơng ảnh hưởng tới khoảng các đối tượng margin Cú pháp tương tự margin padding-top: padding-right: phải padding-bottom: padding-left: trái padding:|| | Bộ môn Hệ thống thông tin – Khoa Cơng nghệ thơng tin BOX MODAL Thuộc tính Border: Được dùng trang trí, đóng khung cho đối tượng cần nhấn mạnh, phân cách đối tượng giúp trang web trơng dễ nhìn hơn,… Thuộc tính border-width: Quy định độ rộng cho viền: thin, medium, thick , giá trị đo cụ thể pixels Thuộc tính border-color: Quy định màu viền cho đối tượng web Thuộc tính border-style: Quy định kiểu viền thể đối tượng web Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin BOX MODAL Thuộc tính Border: Cơng thức viết gọn border: | | Bộ môn Hệ thống thông tin – Khoa Công nghệ thơng tin Height & Width Thuộc tính width: Quy định chiều rộng cho thành phần web Thuộc tính max-width: Quy định chiều rộng tối đa cho thành phần web Thuộc tính min-width: Quy định chiều rộng tối thiểu cho thành phần web Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin Height & Width Thuộc tính height: Quy định chiều cao cho thành phần web Thuộc tính max-height: Quy định chiều cao tối đa cho thành phần web Thuộc tính min-height: Quy định chiều cao tối thiểu cho thành phần web Bộ môn Hệ thống thông tin – Khoa Công nghệ thơng tin Float & Clear Float & Clear: Thuộc tính float: Dùng để cố định thành phần web bên trái hay bên phải khơng gian bao quanh Thuộc tính float có giá trị: Left: Cố định phần tử bên trái Right: Cố định phần tử bên phải None: Bình thường Bộ mơn Hệ thống thông tin – Khoa Công nghệ thông tin Float & Clear Thuộc tính Clear: Đi với thuộc tính float, CSS cịn có thuộc tính clear Thuộc tính clear thuộc tính thường gán vào phần tử liên quan tới phần tử float để định hướng xử phần tử Gồm giá trị: left (tràn bên trái), right (tràn bên phải), both (không tràn) none Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin Float & Clear Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin Position posittion: { relaitve|absolite} position : absolute : Định vị vị trí tuyệt đối phần tử, VD: Muốn di chuyển phần tử phần tử cha Thường áp dụng để kéo phần tử đè lên phần tử khác Có thể đặt đâu trang web position:relative : Định vị vị trí tương đối phần tử, kéo phần tử nằm phần tử cha.Thường áp dụng menu Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin Position Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin Z-index CSS hoạt động chiều: cao, rộng, sâu Thuộc tính z-index cho phép định vị theo chiều sâu, cách hiển thị phần tử đè lên phần tử khác Gán cho phần tử số Theo đó, phần tử có số cao nằm trên, phần tử có số thấp nằm Bộ môn Hệ thống thông tin – Khoa Cơng nghệ thơng tin Z-index Ví dụ: Có ảnh logo #logo1 { position:absolute; top:70px; left:50px; z-index:1 } #logo2 { position:absolute; top:140px; left:100px; z-index:2 } #logo3 { position:absolute; top:210px; left:150px; z-index:3 } Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin THẢO LUẬN – CÂU HỎI Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin BÀI TẬP Thực hành ví dụ Tìm hiểu mở rộng CSS3 Nên ý tưởng thiết kế chức cho tập lớn Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin ... – Khoa Công nghệ thông tin Float & Clear Thuộc tính Clear: Đi với thuộc tính float, CSS cịn có thuộc tính clear Thuộc tính clear thuộc tính thường gán vào phần tử liên quan tới phần tử float để... chiều rộng cho thành phần web Thuộc tính max-width: Quy định chiều rộng tối đa cho thành phần web Thuộc tính min-width: Quy định chiều rộng tối thiểu cho thành phần web Bộ môn Hệ thống thông tin... nghệ thông tin Height & Width Thuộc tính height: Quy định chiều cao cho thành phần web Thuộc tính max-height: Quy định chiều cao tối đa cho thành phần web Thuộc tính min-height: Quy định chiều cao