Ngôn ngữ HTML - Chương 4: Bảng kiểu xếp chồng

-top, margin-right, margin-bottom, margin-left . Lưu ý : thuộc tính margin có tính tương đối, phụ thuộc vào thuộc tính position mà ta sẽ nghiên cứu ở dưới.
Cách sử dụng:
Xác định lề trên, phải, dưới, trái của một phần tử cùng bằng một giá trị margin : npt hoặc giá trị khác nhau : margin : n1pt n2pt n3pt n4pt.
n Các thuộc tính về việc xác định khoảng trắng giữa đường biên và phần tử: padding là thuộc tính gộp của 4 thuộc tính padding-top, padding-right, padding-bottom, padding-left. Cách sử dụng như thuộc tính margin
IV.3.4. Các thuộc tính về đường biên
n border-width : xác định độ rộng của đường viên, có thể nhận các giá trị thin, medium, thick hay những đơn vị do chuẩn như px, em và pc
n border-style : xác định kiểu đường biên, có thể nhận các giá trị none, solid, double, groove, ridge, inset và outset.
n border-color : xác định màu cho 4 cạnh của đường biên
Ta có gộp nhóm các thuộc tính đường biên bằng thuộc tính border, nhưng khi khai báo giá trị cần phải theo thứ tự trên.Các thuộc tính cho từng đường biên border-top, border-bottom, border-left và border-right chỉ được IE hỗ trợ.
Ví dụ :
Hình bên cạnh là một phần trang web của VnExpress.net. Để trình bày như vậy ta có đọan mã như sau:
Ô tô, xem máy 
	body{font: normal 11pt 
'Times New Roman'; color: black}
	.box {background-color: #F7F7F7;
 border: 3px solid blue;
 font: bold 10pt arial; color: #008080 ;
 padding: 10px; float: left; align: justify}
 	.note{ font: normal 10pt arial; color: silver}
	.emph{font-style:underline; color: black} 
	a.link{color: #008080}
 Theo dòng sự kiện
Lịch sử các nhãn hiệu xe
01/03
IV.4. Trình bày trang theo bảng kiểu
IV.4.1. Định vị hai chiều
Định vị hai chiều là một phần trong đặc tả CSS2, các thuộc tính xác định vị trí một phần tử trong trang web : position, top và left
n position : nhận hai giá trị absolute | relative, xác định các giá trị của các thuộc tính top | left là tuyệt đối hay tương đối.
 n top | left: xác định khoảng cách từ đỉnh / cạnh trái của phần tử đến một điểm gốc. Điểm gốc này phụ thuộc vào giá trị của thuộc tính position. Giá trị của thuộc tính này tính bằng các độ đo chuẩn.
Nếu position:absolute thì điểm gốc là lề trên và lề trái của trang web
Ngược lại, điểm gốc có thể là các lề của trang web hay phần tử khác đứng bên trên / bên trái của phần tử được xác định vị trí.
	Ví dụ :
Dinh vi 2 chieu
body{font: normal 11pt arial}
.sp1{background-color:silver; position:absolute; top: 2px; left:10px}
.sp2{background-color:lightgrey; position:absolute; top:15%;
 left: 5%; width: 50%}
.sp3{background-color:red; position:relative; top:3px}
.sp4{background-color:cyan; position:absolute; top:75px; 
left: 25px; width:50%}
 SPAN 1 has position set to absolute
SPAN 2 has position set to absolute. The following word
relativeis in Span 3,which has position set to relative
Span 4 is contained by Span 2 and has position set to absolute 
This is the lasted in Span 2
IV.4.2. Định vị theo chiều thứ 3
	Để có thể định vị hai phần tử trên cùng một điểm trên trang web, ta dùng thuộc tính z-index. Giá trị của thuộc tính này là một số nguyên, phần tử nào có giá trị nhỏ hơn sẽ nằm phía sau (behind), phần tử có giá trị lớn hơn sẽ nằm phía trước (in front).
Ví dụ :
Z-INDEX
.body{background-color:lightgrey; color: blue}
.img1{position:absolute; top:20px; left:150px; z-index:1;width:120;
 height:90}
.img2{position:absolute; top:20px; left:330px; z-index:-1;width:120;
 height:90;border:1px solid navy}
.sp{position:absolute; top:40px; left:60px; z-index:0;font: normal bold 11pt}
This SPAN has a z-index value between those of the two images
IV.5. Định dạng những phần tử khác của trình duyệt
IV.5.1. Thuộc tính display và visibility
	Trong các phần trên ta đã nghiên cứu cách kiểm soát vị trí một phần tử trên trang web cũng như vị trí giữa các phần tử. Các thuộc tính display và visibility cho phép ta kiểm soát phần tử có xuất hiện trên trang web không. Tuy nhiên có sự khác biệt giữa hai thuộc tính này.
	n display : xác định phần tử xuất hiện như thế nào hay không xuất hiện. Các giá trị của thuộc tính này :none (không xuất hiện); các giá trị sau là tương đương và làm xuất hiện phần tử: inline, block, list-item.
n visibility : xác định phần tử có được nhìn thấy trên trang web không. Các giá trị của thuộc tính này: visible, hidden và collapse.
Nếu display:none thì đối tượng không xuất hiện trên trang web và vùng không gian của nó chiếm chỗ được giải phóng; khác với visibility:hidden thì đối tượng không nhìn thấy trên trang web nhưng vùng không gian của nó vẫn còn nguyên. Nhiều website sử dụng tính chất này để xây dựng các menu có khả năng bung ra / thu gọn.
IV.5.2. Hiển thị từng phần
	Để kiểm soát nội dung bên trong vùng định vị có vừa vẹn với kích thước của vùng định vị , ta dùng các thuộc tính overflow, thuộc tính này có các giá trị:
n hidden : nếu muốn khung của vùng định vị cắt bỏ phần ngoài khung, không thể xem được.
n visible : nếu muốn tất cả nội dung của phần tử được thể hiện tất cả.
n scroll | auto : vùng định vị sẽ xuất hiện như một cửa sổ với các thanh trượt, để người sử dụng có thể xem tất cả nội dung của phần tử.
Ví dụ : 
OverFlow
body{font: normal italic 11pt 'Times New Roman';margin-left:20}
div{ background:silver; width:90; height: 70;margin-left:40;
	margin-top:20; float: left }
Ngày mai trong đám xuân xanh ấy Có kẻ theo chồng bỏ cuộc chơi(Hàn Mạc Tử)
 Ngày mai trong đám xuân xanh ấy Có kẻ theo chồng bỏ cuộc chơi(Hàn Mạc Tử) 
 Ngày mai trong đám xuân xanh ấy Có kẻ theo chồng bỏ cuộc chơi(Hàn Mạc Tử) 
 Ngày mai trong đám xuân xanh ấy Có kẻ theo chồng bỏ cuộc chơi(Hàn Mạc Tử) 
IV.5.3. Kiểm soát table bằng CSS
	Ta sử dụng các thuộc tính border, text, color, background, float đã nghiên cứu ở các phần trên để định dạng các phần tử của table và định vị table, trong phần này ta nghiên cứu các thuộc tính:
n border-collapse nhận một trong ba giá trị : 
collapse: không có khoảng trống giữa các ô liên tiếp
separate : thể hiện như thẻ vốn có, lúc này ta có thể sử dụng thuộc tính border-spacing.
inherit : kế thừa thuộc tính này của đối tượng cha.
n table-layout : Ta thiết lập giá trị fixed để cố định các giá trị về độ rộng của table,column; bất chấp nội dung trong một ô nào đó có thể dài hơn độ rộng của ô đó. 
Ví dụ :
CSS with Table 
table{border:thin solid red; border-collapse:collapse;
font:normal 10pt arial;width:400} 
th{border:1px solid navy;background-color:lightgrey;
text-align:center;font-style:bold;
border-bottom:thin solid red} 
tr,td{border:1px solid navy;padding:5px} 
Định dạng bảng với CSS 
TT
Họ tên
Địa Chỉ
1
Nguyễn Thanh Hùng
800 Hùng Vương,Đà Nẵng
2
Trần Vân Quang
900 Lê Lai, tp HCM
Lưu ý: Khai báo table{border:thin solid red} không hiển thị đúng trong NN và FireFox.
IV.5.4. Kiểm soát con trỏ bàng CSS
	Để kiểm soát hình dáng của con trỏ khi trỏ vào một phần tử, ta sử dụng thuộc tính cursor, các giá trị của thuộc tính này: 
n auto, hand, move, text, wait, help, default và crosshair. (tương tự như thiết lập kiểu pointer cho con chuột trong Control Panel)
n w-resize, nw-resize, n-resize, ne-resize, e-resize, se-resize, s-resize và sw-resize.
Ví dụ:
HELP
.d1{cursor:help;background-color:lightgrey; 
	color: navy; padding:10;
	font: normal 10pt verdana; border:thin solid red } 
HELP
IV.5.5. Kiểm soát danh sách bằng CSS
	Các thuộc tính CSS để kiểm sóat danh sách : list-style-type, list-style-image và list-style-position (thuộc tính gộp là list-style).
n list-style-type : nhận một trong 9 giá trị disc, circle, square, none, decimal, lower-roman, upper-roman, lower-alpha và upper-alpha.
n list-style-image : dùng hình ảnh để đánh dấu đề mục.
n list-style-position : dùng
V. TỔNG KẾT CHƯƠNG
	Để giữ tính trong sáng và phổ dụng của HTML, W3C đã không phát triển ngôn ngữ HTML kể từ phiên bản 4.01, thay vào đó W3C đã tập trung phát triển CSS như là một sự mở rộng của HTML dùng để định dạng trang web và hỗ trợ XML.
	Với CSS ta có thể định dạng các trang web theo cùng một phong cách, tách biệt giữa phần nội dung và phần định dạng. CSS là một phần của mô hình đối tượng tư liệu DOM (nghiên cứu ở chương 6), để đảm bảo áp dụng CSS trên các trang web cần nghiên cứu sự khác biệt giữa hai mô hình đối tượng tư liệu của trình duyệt Internet Explore và Netscape Navigator.
	Với CSS cần phải phân biệt hai vấn đề :
- Sử dụng cú pháp của CSS để xây dựng bảng kiểu (liên kết, nhúng, tại chỗ)
- Sử dụng thuộc tính style để áp dụng trong các script khác với cú pháp của bảng kiểu, ví dụ CSS viết background-color còn sử dụng JavaScript viết backgoundColor (không có dấu gạch ngang, theo phong cách của JavaScript, ký tự đầu tiên của các từ thứ hai trở đi viết hoa)
Phân biệt Class selector và ID selector
Một ID selector có thể áp dụng cho hai hoặc nhiều phần tử trên cùng một trang web được không? Giải thích.
Nếu một phần tử HTML không bao gồm trong một bảng kiểu dưới dạng một selector thì nó sẽ được kế thừa (inherit) các thuộc tính của phần tử cha?
Một bảng kiểu dạng nhúng hoặc liên kết sẽ chồng (override) lên kiểu tại chỗ (inline style) được áp dụng cho một phần tử HTML?
Xây dựng một Class selector áp dụng cho thẻ để có thể họat động như một frame nằm bên trái cửa sổ trang web, có kích thước 100px, viền đơn màu xanh đậm, nền màu xám bạc. Toàn bộ nội dung trang web nằm bên trái "frame" do thẻ DIV tạo ra. (Đây là kỹ thuật xây dựng trang web có menu điều hướng được ưa thích, thay cho kỹ thuật dùng Frame. Xem trang web của Khoa CNTT – Trường Đại học KHTN, ĐHQG tp HCM hoặc 
Xây dựng Class selector để áp dụng cho thẻ thỏa yêu cầu: các đường kẻ đơn, màu xám, cellpadding = 2px, cellspacing=0.
Xây dựng Class selector để định dạng một nút lệnh thỏa yêu cầu: mầu nền, màu chữ (label), màu các đường viền theo một tông màu phù hợp. (Thẻ của HTML không thể thực hiện đươc điều này)
Nghiên cứu các tệp CSS của website Đại học Đà Nẵng.
J. Allsopp, M.Sherrin; CSS tutorial;  adcademy/css_tutorial, last updated 2004
Cascading style sheets;  last updated 2004