| BÀI HỌC

Phần này có thể gọi là phần mở rộng của mã HTML hay còn gọi là DHTML. Nếu bạn là người từng học lập trình hướng đối tượng (nhuư Visual Basic chẳng hạn) thì bãn đã biết mỗi đối tượng đều có các tính chất riêng của nó như width, height, background, font, border... Trong mã DHTML, bạn cũng sẽ định dạng được những tính chất đó cho từng mỗi đối tượng, thông qua Thuộc tính <STYLE>.

Trong thuộc tính STYLE, các tính chất riêng của đối tượng được đặt cách nhau bởi dấu chấm phẩy (;).

Bảng sau sẽ tổng kết cho bạn một số tính chất cơ bản hay dùng đến trong mỗi đối tượng.

Màu sắc và nền

• color: tên màu | giá trị màu: Chỉ định màu chữ

• background-color: tên màu | giá trị màu | transparent: Chỉ định màu nền, mặc định là transparent.

• background-image: url('filename') | none: Chỉ định hình nền, với filename là đường dẫn và tên file hình nền.

• background-repeat: repeat | repeat-x | repeat-y | no-repeat: Chỉ định phương pháp lặp lại hình ảnh nền.

• background-attachment: scroll | fixed: Chỉ định phương pháp vẽ lại hình ảnh nền

• background-position:"phần trăm | chiều dài" hoặc "top | center | bottom" và "left | center | right": Chỉ định khoảng cách, nơi bắt đầu (góc) của hình ảnh nền

• background:"background-color background-image background-repeat background-attachment background-position": Định nghĩa chung theo trình tự các tính chất

Canh lề

• margin-left, margin-right, margin-top, margin-bottom: chiều dài | phần trăm | auto: Định khoảng cách các lề.

• margin:"margin-top margin-right margin-bottom margin-left": Định khoảng cách các lề theo thứ tự.

• padding-left, padding-right, padding-top, padding-bottom: chiều dài | phần trăm | auto: Định khoảng cách các lề cho văn bản bên trong

• padding:"padding-top padding-right padding-bottom padding-left": Định khoảng cách các lề cho văn bản bên trong theo thứ tự.

Đường bao, khung

• border-top-width, border-right-width, border-bottom-width, border-left-width: thin | medium | thick | độ dầy (pixel): Định độ dày của các cạnh khung

• border-width: border-top-width border-right-width border-bottom-width border-left-width: Định bề dày của các cạnh khung theo thứ tự

• border-top-color, border-right-color, border-bottom-color, border-left-color: tên màu | giá trị màu: Định màu sắc của các cạnh khung

• border-width: border-top-color border-right-color border-bottom-color border-left-color: Định màu sắc của các cạnh khung theo thứ tự

• border-top-style, border-right-style, border-bottom-style, border-left-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset: Định kiểu thể hiện của các cạnh khung

• border-width: border-top-style border-right-style border-bottom-style border-left-style: Định kiểu thể hiện của các cạnh khung theo thứ tự

• border-top, border-right, border-bottom, border-left: border-width border-style border-color: Định dạng các cạnh khung theo thứ tự

Font chữ

• font-family: tên font: Chỉ định tên Font chữ

• font-style: normal | italic | oblique: Chỉ định kiểu Font

• font-variant: normal | small-caps: Chỉ định kiểu chữ thường

• font-weight: normal | bold | bolder | lighter | độ dày (pixel): Chỉ định độ dày nét chữ

• font-size: large | larger | medium | small | smaller | cỡ chữ | phần trăm: Chỉ định kích cỡ Font chữ

• font: font-style font-variant font-weight font-size font-height font-family: Chỉ định Font chữ theo thứ tự

Định dạng kiểu viết chữ

• word-spacing: normal | chiều dài: Định khoảng cách giữa các từ

• letter-spacing: normal | chiều dài: Định khoảng cách giữa các ký tự

• text-decoration: none | underline | overline | line-through | blink: Chỉ định hiệu ứng nhấn mạnh chữ

• text-transform: none | capitalize | uppercase | lowercase: Chỉ định kiểu thể hiện dạng chữ

• text-align: left | right | center | justify: Chỉ định hướng canh lề văn bản

• text-indent: chiều dài | phần trăm: Chỉ định khoảng cách thụt vào dòng đầu tiên trong đoạn

• line-height: normal | chiều dài | phần trăm: Chỉ định chiều cao một hàng văn bản

Định vị đối tượng

• top, left: chiều dài | phần trăm | auto: Định vị trí góc trên hoặc cạnh trái của đối tượng

• width, height: chiều dài | phần trăm | auto: Định chiều rộng hoặc chiều cao của đối tượng.

• float: left | right |none: Cho phép nổi trên mặt trang hay cố định theo văn bản, thường dùng làm hình ảnh trôi nổi trên trang kèm với thẻ <IMG> hay thẻ <DIV>.

• cursor: auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help: Chỉ định hình dáng con chuột khi trỏ tới.

• display: block | inline | list-item | none: Chỉ định cách hiển thị đối tượng

• overflow: visible | hidden | scroll | auto: Chỉ định cách thể hiện thanh cuộn (dùng trong thẻ <TEXTAREA> hoặc <BODY>)

• position: absolute | relative | static: Chỉ định cách xác định vị trí của đối tượng

• visibility: inherit | visible | hidden: Chỉ định cách cho thấy hay làm ẩn đối tượng

Trên đây chỉ lliệt kê một số thuộc tính thường dùng, nếu cần đầy đủ hơn bạn nên tham khảo website http://www.w3schools.com/css/default.asp.

THỰC HÀNH

Trên đây là một số tính chất của đối tượng, ta có thể thiết lập thông qua thuộc tính STYLE="". Sau đây là một số ví dụ mẫu:

Ví dụ này cho bạn thấy việc tiện lợi khi định dạng chữ Hello, vừa định dạng Font, vừa chỉ địng màu và cả con trỏ chuột hình bàn tay nếu bạn đưa chuột vào chữ Hello này.

	HTMLStudy
	File     Edit     View     Favorites     Tools     Help
	Hello
	Done

HIỆU ỨNG BỘ LỌC

Được hỗ trợ cho các phiên bản Internet Explorer 4.0 trở lên, hiệu ứng Bọ lọc (Filter) và Chuyển động (Transition) mang lại cho bạn các hiệu ứng khá độc đáo cho trang web của mình. Cách sử dụng Bộ lọc tương tự các tính chất trong thuộc tính STYLE="" của thẻ HTML. Bài này chỉ giới thiệu cho bạn một số hiệu ứng Bộ lọc thông dụng.

ALPHA: Chỉ định độ trong suốt cho đối tượng.

Trong đó:

• opacity= 0 - 100: độ trong suốt, giá trị mặc định là 0; 100 là hiển thị hoàn toàn.

• finishopacity= 0 - 100: độ trong suốt cuối

• style= uniform | linear | radial | rectangular: kiểu chuyển độ trong suốt

• startX, startY, finishX, finishY= vị trí (pixel): toạ độ điểm bắt đầu và điểm kết thúc chuyển độ trong suốt.

Ví dụ:

	HTMLStudy
	File     Edit     View     Favorites     Tools     Help
	Hình gốc Opacity=60 Opacity=30 Opacity=10
	Done

BLUR: Làm mờ đối tượng.

Trong đó:

• add= 0 | 1: chế độ chuyển bóng mờ (0 là không thiết lập)

• direction= 0 - 360: hướng làm mờ, tính theo hướng của kim đồng hồ (0 độ là hướng trên đỉnh).

• strength= pixel: độ mở rộng của bóng mờ

Ví dụ:

	HTMLStudy
	File     Edit     View     Favorites     Tools     Help
	Done

DROPSHADOW: Đổ bóng đối tượng theo hướng trái qua phải, trên xuống dưới.

Trong đó:

• color: màu của bóng đổ ở dạng #RRGGBB

• offX: động rộng của bóng đổ theo phương ngang.

• offY: độ cao của bóng đổ theo phương dọc.

• positive= true | false: nếu giá trị true (khác 0) thì sẽ đổ bóng những thành phần không trong suốt, nếu giá trị false thì đổ bóng luôn những thành phần trong suốt.

CHROMA: Chỉ định một màu làm transparent. Hiệu ứng này thướng dùng để làm trong suốt một ảnh JPEG.

Trong đó:

• color: giá trị màu ở dạng #RRGGBB.

FLIPH: lật đối xứng đối tượng theo phương ngang.

FLIPV: lật đối xứng đối tượng theo phương dọc.

Có thể kết hợp nhiều hiệu ứng lại với nhau bằng dấu chấm phẩy (;):

	HTMLStudy
	File     Edit     View     Favorites     Tools     Help
	Hình gốc Lật ngang Lật dọc Lật ngang và dọc
	Done

GRAY: chuyển ảnh màu thành đen trắng.

INVERT: hiệu ứng tạo âm bản cho hình ảnh.

GLOW: hiệu ứng tỏa sáng đối tượng. Tạo một vùng sáng chuyển màu theo mép ngoài đối tượng.

Trong đó:

• color: màu của vùng sáng.

• strength: 1 - 255: biên độ rộng của vùng sáng tính bằng pixel

MASK: tạo mặt nạ bằng một màu chỉ định.

Trong đó:

• color: là màu được chỉ định.

Đôi khi một số hiệu ứng bạn cần phải bỏ trong một vùng không gian chứa đối tượng đó bên trong, vùng không gian này có thể được tạo bởi các thẻ <DIV>, <SPAN>, <TD>...

Ví dụ:

	HTMLStudy
	File     Edit     View     Favorites     Tools     Help
	ABCDEF Gray Invert Glow
	Done

LIGHT: Hiệu ứng tạo luồng ánh sáng cho đối tượng.

Phần này không trình bày chi tiết, bạn có thể tham khảo thêm trên Internet.

SHADOW: tạo bóng đổ chuyển mờ dần

Trong đó:

• color: là màu của bóng đổ ở dạng #RRGGBB.

• direction= 0 - 360: hướng của bóng đổ tính theo hướng quay của kim đồng hồ (0 độ là hướng trên đỉnh).

WAVE: hiệu ứng gợn sóng

Trong đó:

• add= true | false: nếu giá trị true dùng hình ảnh gốc để tạo sóng.

• freg: Số lượng gợn sóng được tạo ra

• lightstrength= 0 - 100: cường độ của ánh sáng trên gợn sóng tính theo phần trăm

• phase= 0 - 100: giá trị phần trăm của cung tròn (theo kiểu hình sin), ví dụ nếu phase= 25 tức là sóng sẽ ảnh hưởng tại 90 độ.

• strength: cường độ ảnh hưởng của gợn sóng.

XRAY: thay đổi độ sâu màu để chuyển nó thành hình đen trắng như chụp X-Quang.