b) Thuộc tính height, max-height, min-height
6.5.1.Thuộc tính float
Float là một thuộc tính CSS dùng để cố định một thành phần HTML về bên trái hay bên phải không gian bao quanh nó. Đây là một thuộc tính rất cần thiết khi dàn trang, hiển thị văn bản thành cột hay thực hiện việc định vị trí ảnh và text.
Thuộc tính float có 3 giá trị cơ bản:
o left : Cho "nổi" lên và cố định phần tử về bên trái.
o right : Cho "nổi" lên và cố định phần tử về bên phải.
o none : Bình thường (mặc định)
Ví dụ:
Xét mã HTML sau với 2 thẻ <h1> được định dạng chưa có thuộc tính float
6.5.2.Thuộc tính clear
Đi cùng với thuộc tính float, trong CSS còn có một thuộc tính là clear. Thuộc tính clear là một thuộc tính thường được gán vào các phần tử liên quan tới phần tử đã được float để quyết định hướng xử sự của phần tử này.
Thuộc tính clear có 4 giá trị cơ bản:
o left : Chỉ cho phép phần tử tràn về bên trái.
o right : Chỉ cho phép phần tử tràn về bên phải.
o both : Không cho phép tràn
o none : Cho phép tràn cả 2 phía (mặc định)
Ví dụ:
Xét mã HTML sau
6.6.Position
Khi thể hiện các thành phần HTML, cửa sổ trình duyệt được coi như một hệ tọa độ và với thuộc tính position ta có thể đặt một đối tượng HTML ở bất cứ vị trí nào trên hệ tọa độ này. Các đối tượng được định vị sẽ dùng kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ.
Thuộc tính position có các giá trị cơ bản sau
o static : Đối tượng xuất hiện bình thường, không bị ảnh hưởng bởi các thuộc tính định vị (mặc định).
o fixed : Định vị với hệ tọa độ của màn hình trình duyệt.
o absolute : Định vị với hệ tọa độ của đối tượng gốc đầu tiên (ví dụ: <body>)
o relative : Định vị với hệ tọa độ của đối tượng cấp cao hơn gần nhất (đối tượng "cha")
Ví dụ: 50px 30px 30px 50px
6.7.Lớp (Layers)
Khi thực hiện định vị các thành phần HTML trên trang web (bằng thuộc tính position) sẽ xảy ra hiện tượng các thành phần đó bị xếp chồng lên nhau. Để có thể sắp xếp các thành phần HTML theo đúng thứ tự xếp lớp, ta sử dụng thuộc tính z-index
Thuộc tính z-index được gán giá trị nguyên, giá trị nào lớn hơn thì phần tử HTML tương ứng sẽ được xếp trên.
Ví dụ:
Xét định dạng CSS của 2 thành phần HTML sau
#img1 { position : absolute; top : 20px; left : 50px; z-index : -1; } #img2 { position : absolute; top : 30px; left : 40px; z-index : 2; }
7.Giới thiệu CSS3 (adsbygoogle = window.adsbygoogle || []).push({});
CSS3 là phiên bản mới nhất của CSS nhưng hoàn toàn tương thích với các phiên bản trước. Với CSS3, chúng ta có thể
o Tạo ra 1 số hiệu ứng đẹp và phong cách như transparent backgrounds, shadows và gradients mà không sử dụng ảnh.
o Tạo các hiệu ứng (animation) mà không sử dụng flash.
o Tùy chỉnh layout và thiết kế trang web sao cho phù hợp với thiết bị của người dùng (mobile, iPad hoặc Desktop) mà không sử dụng Javascript.
CSS3 được chia thành các module, các thành phần cũ (thuộc CSS1, CSS2) được chia nhỏ và bổ sung các thành phần mới.
Một số module chủ yếu trong CSS3
Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
Ví dụ:
img[src*="NTU"] { /* selector mới chọn thuộc tính src chứa chuỗi "NTU" */
border :2px #A1A1A1 solid; padding :10px 40px;
background :#DDDDDD; width :300px;
border-radius :25px; /* Tạo góc tròn cho đường viền */ }
Tương tự như HTML5, mặc dù CSS3 cung cấp nhiều thuộc tính mới giúp định dạng trang web dễ dàng và có hiệu ứng sinh động hơn nhưng vẫn chỉ là phiên bản đang được phát triển. Các tổ chức quản lý Internet, đặc biệt là W3C vẫn chưa công nhận CSS3 là phiên bản chính thức.
CHƯƠNG 3: JAVASCRIPT
Chương này giới thiệu ngôn ngữ lập trình JavaScript, một ngôn ngữ kịch bản phía client dùng để hỗ trợ người dùng tương tác với trang web, thay đổi nội dung động, xử lý các sự kiện khi trang web hiển thị.