Phụ lục 1

- Các thuộc tính áp dụng cho Font chữ

Thuộc tính	Các giá trị hợp lệ	Ví dụ
font-family	[Tờn font hoặc kiểu]	font-family: Verdana, Arial;
font-style	normal hoặc italic	font-style:italic;
font-variant	normal hoặc small-caps	font-variant:small-caps;
font-weight	normal ho bold	font-weight:bold;
font-size	[ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | phần trăm hoặc length	font-size:12pt;
Font	[ font-style || font-variant || font-weight ] ? font-size [ / line-height ] ? font-family	font: bold 12pt Arial;

- Các thuộc tính màu và nền (Color and background properties)

Thuộc tính	Các giá trị hợp lệ	Ví dụ
Color	Màu	color: red
background-color	Màu hoặc transparent	background-color: yellow
background-image	Địa chỉ (url) hoặc Không đặt gỡ	background-image: url(house.jpg)
background-repeat	repeat | repeat-x | repeat-y | no-repeat	background-repeat: no-repeat
background-attachment	scroll hoặc fixed	background-attachment: fixed
background-position	[ position | length ] | {1,2} | [ top | center | bottom ] || [ left | center | right ]	background-position: top center
background	transparent | color || url || repeat || scroll || position	background: silver url(house.jpg) repeat-y

* Lưu ý: Các giá trị in nghiêng khi sử dụng bạn phải thay bằng giá trị cụ thể, vớ dụ viết phần trăm hay lenght bạn phải thay các giá trị dạng phần trăm, ví dụ 50% đối với thuộc tính phần trăm (percentage) và 10, 20 .... cho thuộc tính length.

- Các thuộc tính áp dụng cho Text

Thuộc tính	Giá trị hợp lệ	Ví dụ
Letter-spacing	normal | length	letter-spacing:5pt
text-decoration	none | underline | overline | line-through	text-decoration:underline
vertical-align	Sub | super |	vertical-align:sub
text-transform	capitalize | uppercase | lowercase | none	text-transform:lowercase
text-align	left | right | center | justify	text-align:center
text-indent	length | percentage	text-indent:25px
line-height	normal | number | length | percentage	line-height:15pt

- Các thuộc tính áp dụng cho công cụ trong một bảng

Thuộc tính	Giỏ trị hợp lệ	Ví dụ
margin-top	length | percentage | auto	margin-top:5px
margin-right	length | percentage | auto	margin-right:5px
margin-bottom	length | percentage | auto	margin-bottom:1em
margin-left	length | percentage | auto	margin-left:5pt
Margin	length | percentage | auto {1,4}	margin: 10px 5px 10px 5px
padding-top	length | percentage	padding-top:10%
padding-right	length | percentage	padding-right:15px
padding-bottom	length | percentage	padding-bottom:1.2em
padding-left	length | percentage	padding-left:10pt; }
Padding	length | percentage {1,4}	padding: 10px 10px 10px 15px
border-top-awidth	thin | medium | thick | length	border-top-awidth:thin
border-right-awidth	thin | medium | thick | length	border-right-awidth:medium
border-bottom-awidth	thin | medium | thick | length	border-bottom-awidth:thick
border-left-awidth	thin | medium | thick | length	border-left-awidth:15px
border-awidth	thin | medium | thick | length {1,4}	border-awidth: 3px 5px 3px 5px
border-top-color	color	border-top-color:navajowhite
border-right-color	Color	border-right-color:whitesmoke
border-bottom-color	Color	border-bottom-color:black
border-left-color	Color	border-left-color:#C0C0C0
border-color	color {1,4}	border-color: green red white blue; }
border-top-style	none | solid | double | groove | ridge | inset | outset	border-top-style:solid
border-right-style	none | solid | double | groove | ridge | inset | outset	border-right-style:double
border-bottom-style	none | solid | double | groove | ridge | inset | outset	border-bottom-style:groove
border-left-style	none | solid | double | groove | ridge | inset | outset	border-left-style:none
border-style	none | solid | double | groove | ridge | inset | outset	border-style:ridge; }
border-top	border-awidth | border-style | border-color	border-top: medium outset red
border-right	border-awidth | border-style | border-color	border-right: thick inset maroon
border-bottom	border-awidth | border-style | border-color	border-bottom: 10px ridge gray
border-left	border-awidth | border-style | border-color	border-left: 1px groove red
Border	border-awidth | border-style | border-color	border: thin solid blue
Float	none | left | right	float:none
clear	none | left | right | both	clear:left

- Các thuộc tính phân loại - classification Properties

Thuộc tính	Giá trị hợp lệ	Ví dụ
Display	none | block | inline | list-item	display:none
list-style-type	disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none	list-style-type:upper-alpha
list-style-image	url | none	list-style-image:url(icFile.gif)
list-style-position	inside | outside	list-style-position:inside
list-style	keyword || position || url	list-style: square outside url(icFolder.gif)

- Các thuộc tính định vị trí cho các phần tử

Thuộc tính	Giá trị hợp lệ	Ví dụ	Có thể áp dụng cho
Clip	Toạ độ của một hỡnh chữ nhật| auto	clip:rect(0px 200px 200px 0px)	tất cả cỏc phần tử (all elements)
Height	length | auto	height:200px	DIV, SPAN và các ptử bị thay thế
Left	length | percentage | auto	left:0px	Các phần tử được định vị tuyệt đối và tương đối
Overflow	visible | hidden | scroll | auto	overflow:scroll	tất cả cỏc phần tử
position	absolute| relative | static	position:absolute	tất cả cỏc phần tử
Top	length | percentage | auto	top:0px	Các phần tử được định vị tuyệt đối và tương đối
Visibility	visible | hidden | inherit	visibility:visible	tất cả cỏc phần tử
Width	length | percentage | auto	awidth:80%	DIV, SPAN and replaced elements
z-index	auto | integer	z-index:-1	Các phần tử được định vị tuyệt đối và tương đối

- Thuộc tính liên quan đến in ấn - Printing Properties

Thuộc tính	Giỏ trị hợp lệ	Ví dụ
page-break-before	auto | always || left | right	page-break-before:always
page-break-after	auto | always || left | right	page-break-before:auto

-Pseudo Classes

Thuộc tính	Giá trị hợp lệ	Ví dụ
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	{ cursor:hand; }
Active, hover, link, visited	n/a	a:hover { color:red; }
first-letter, first-line	any font manipulating declaration	p:first-letter{float:left;color:blue}

Một số vớ dụ áp dụng:

Vớ dụ 1: Tạo một dòng văn bản “Welcome to CSS” có font chữ là Arial, in nghiêng và kích thước font chữ là 16 point.

<HTML>

<HEAD> </HEADS>

<BODY>

<P style=“font-family:arial; font-style:italic; font-size:16pt”>Welcome to </P>

</BODY>

</HTML>

<Xem kết quả>

Vớ dụ 2: Tạo một textbox với màu nền là màu tớm (magenta).

<HTML>

<HEAD> </HEADS>

<BODY>

<Input type = text style = “background-color:magenta”>

</BODY>

</HTML>

<Xem kết quả>

Vớ dụ 3: Đặt 3 file ảnh nền tương ứng vào tài liệu, vào textbox và vào textarea

<HTML>

<HEAD> </HEAD>

<BODY style="background-image:url('anh1.jpg');background-repeat:no-repeat">

<Input style = "background-image:url('anh2.jpg');background-repeat:repeat-x; awidth:100%">

<P>

<textarea style = "background-image:url('anh3.jpg');background-repeat:repeat-y" cols = 80 rows = 25>

</textarea>

</BODY>

</HTML>

<Xem kết quả>

*Ghi chỳ:

-Khi ta đặt là repeat-x thì ta có một dãy ảnh được xếp liên tiếp theo chiều ngang

-Khi ta đặt là repeat-y thì ta có một dãy ảnh được xếp liên tiếp theo chiều dọc

Vớ dụ 4: Tạo một dũng văn bản, chứa xâu: "Trang chu cua HY-Aptech", trong đó từ "Trang chu" có màu xanh (blue) và khi người dùng di chuyển chuột đến chữ "Trang chu" thỡ chuột chuyển thành hình bàn tay, và khi chuột click lờn chữ này thì trang http://www.aptech.ute sẽ được mở.

<HTML>

<HEAD> </HEAD>

<BODY>

<TITLE>Tạo liờn kết và xử lý sự kiện</TITLE>

<font style ="cursor:hand;color:blue" onclick="window.open('http://www.aptech.ute');">Trang chu</font>cua HY-Aptech

</BODY>

</HTML> ===> Xem kết quả

Ghi chỳ: Khi muốn áp dụng các kiểu cho một số phần tử các bạn chỉ cần viết : style="Toàn_Thuộc_tính : Giá_Trị;" trong định nghĩa thẻ. Trong đó cặp "Tên_Thuộc_tính : Giá_Trị;" có thể viết như cột ví dụ đó chỉ ra ở các bảng trên.