BÀI GIẢNG CSS Advanced - Trần Khải Hoàng ppt

KHOA CNTT - TUD KHOA CNTT - TUD CSS Advanced CSS Advanced Trần Khải Hoàng Khoa CNTT – TỨD. ĐH Tôn Đức Thắng Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 2 Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 3 CSS Display • Thuộc tính display qui định cách 1 element hiển thị. • Thuộc tính visibility qui định 1 element sẽ được hiển thị hay ẩn đi Ẩn element • Ta có thể ẩn 1 element bằng cách sử dụng : – display:none; – visibility :hidden; • visibility:hidden; ẩn element nhưng khoảng không tại vị trí element vẫn được giữ nguyên • display:none; element sẽ không chiếm giữ bất kỳ khoảng không nào. Trình duyệt sẽ hiển thị như không có element này. Demo ẩn element • DisplayHidden.html Block và inline element • Block element là 1 element khi hiển thị sẽ chiếm toàn bộ chiều ngang có thể và có xuống dòng phía trước và phía sau nó. – Ví dụ block element : <h1>,<h2>,<p>,<div> • Inline element là 1 element khi hiển thị chỉ chiếm đủ chiều ngang để hiển thị nội dung, và không có xuống dòng phía trước hay phía sau – Ví dụ inline element : <a>,<span> • Ta có thể thay đổi cách hiển thị mặc định của 1 element sử dụng display: – display:inline; – display:block; Demo đổi kiểu hiển thị • DisplayBlockInline.html Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 9 CSS position • Các thuộc tính CSS position cho phép : – Ta có thể đặt vị trí xuất hiện của các element. – Thậm chí đặt 1 element phía trên hay phía dưới 1 element khác. – Hoặc qui định cách hiển thị khi nội dung element lớn vượt quá kích thước của element [...]... dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 30 Demo cách tạo navigation bar ngang Demo cách tạo navigation bar dọc Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 33 Làm 1 gallery Nội dung  CSS Display  CSS Position... thị thì ta có thể sử dụng thuộc tính z-index để qui định element nào sẽ được nằm trên • Giá trị z-index là 1 số nguyên (có thể âm) • z-index càng cao thì sẽ nằm trên Demo overlap • PositionOverlap.html Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 20 CSS Float • Với CSS float, 1 element có thể trôi về bên... FloatClear.html Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 25 Align • Ta có thể align 1 block element sử dụng : – margin – position • Nếu muốn align text sử dụng thuộc tính text-align Align giữa • Ta có thể align 1 block element chính giữa bằng cách – Đặt width – Đặt margin-left và margin-right là auto • Ví... CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 33 Làm 1 gallery Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 35 Demo image sprite • ImageSprite.html ... Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 20 CSS Float • Với CSS float, 1 element có thể trôi về bên trái hoặc bên phải để cho các element khác có thể nằm bao quanh nó • CSS float rất hữu ích khi hiển thị ảnh hoặc làm layout • 1 float element sẽ trôi về bên trái hoặc phải cho đến khi đụng biên hoặc 1 element khác • Các element phía sau 1 float element sẽ nằm bao quanh . CNTT - TUD KHOA CNTT - TUD CSS Advanced CSS Advanced Trần Khải Hoàng Khoa CNTT – TỨD. ĐH Tôn Đức Thắng Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS. Gallery  CSS Image Sprite  CSS Image Opacity 2 Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 3 CSS. thị • DisplayBlockInline.html Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 9 CSS position • Các thuộc tính CSS position cho