Tags: HTML-CSS / Lập trình web / Tin học

Tìm hiểu về CSS absolute position

- Saturday, December 7, 2013 No Comments

Absolute position là gì?

Nói dễ hiểu nhất, Absolute position là cách định vị trí của một thành phần bên trong không gian thành phần chứa chúng (thành phần mẹ), mà không phụ thuộc vào margin hay float. Và khi sử dụng absolute position, bạn có thể xếp các thành phần chồng lên nhau (Ví dụ: bạn có thể chồng một đoạn văn bản lên trên một ảnh).
Điểm lưu ý: Để sử dụng được absolute position, thành phần mẹ phải được gán position là relative, nếu thành phần mẹ không được gán relative, thì mặc định thành phần <body> sẽ được coi là thành phần relative.

Cách căn chỉnh vị trí của một thành phần như thế nào?

Absolute position dựa vào 4 vị trí: top, right, bottom, left cùng với các đơn vị đo như: px, cm, em, %… để canh chỉnh vị so với thành phần chứa nó. Trong thực thế bạn chỉ dựa vào một trong các cặp ví trí sau: top-left, top-right, bottom-left và bottom-right là có thể canh chỉnh vị trị của một thành phần:
Lý thuyết xong » Thực hành thôi…
Bây giờ chúng ta sẽ cùng ứng dụng để hiểu rõ hơn về Absolute position, ví dụ bên dưới chúng ta sẽ căn chỉnh vị trí của các thành phần div: box1, box2, box3 và box4 tại các ví trí khác nhau trong thành phần div mẹ (id=”wrapper”):
Mã HTML:

1<div id="wrapper">

2      <div class="box1"></div>

3      <div class="box2"></div>

4      <div class="box3"></div>

5      <div class="box4"></div>

6</div>

Trước tiên: gán thuộc tính position: relative cho thành phần wrapper, tạo border và gán kích thước để dễ phân biệt

1#wrapper{position: relative;width: 500px; height: 400px; border: 1px solid #cfcfcf}

Căn chỉnh các thành phần với Absolute position:

box1, .box2, .box3, .box4{background: #777; width: 150px; height: 100px; color: white; padding: 10px}

box1{position: absolute; top: 0; left: 0}

box2{position: absolute; top: 0; right: 0}

box3{position: absolute; bottom: 0px; left: 10px}

box4{position: absolute; bottom: 70px; right: 10px}

Và đây là kết quả:

Bạn hãy thử thay đổi các giá trị khác để kiểm tra sự thay đổi.

Kết Luận:

Để sử dụng được absolute position, điểm mấu chốt quan trọng nhất đó là phải xác định được thành phần mẹ và đặt thuộc tính position: relative.
Ngoài relative, absolute, position còn có các giá trị sau:

static: (Giá trị mặc định khi không được khai báo), các thành phần sẽ được hiện thị theo vị trí mặc định trong cấu trúc của HTML
fixed: Cố định thành phần tại một vị trí và không thay đổi khi cuộn trang
inhertit: Kết thừa từ giá trị position của thành phần cha

nguồn: http://www.ewebvn.com

Tags: Học tập / HTML-CSS / Tin học

Tạo và hiệu chỉnh bảng trong HTML

- Monday, April 8, 2013 No Comments

Phần này cung cấp các hướng dẫn về cách tạo các bảng cho các tài liệu web của bạn.bạn có thể nghĩ nó là một các bảng đơn giản như :

Đây là một TABLE

A Đạo	Trúc Linh	Đại Nguyên
Thưởng	Tường	Huy

Bạn có thế quan tâm đến cách tạo trang web của bạn nhìn hấp dẫn bằng cách sử dụng các thẻ<TABLE>!để minh họa , sau là một trang tương tự có nền màu xámva bảng có các BORDER.

Tất cả có 3 thẻ :

<TABLE>

Thẻ chính.Được sử dụng để cho trình duyệt biết"đây là một bảng "cùng một số thuộc tính như kích thước,chiều rộng đường viền và một số thứ khác.

<TR>

Table Rowxác định hàng ngang của <TD>(table data)của các cell

<TD>

Ấn định khối cá biệt hoặc cell(ô)bằng một hàng của bạn.

Bảng(table)được thiết lập bằng các hàng (row)để tạo thành các ô(cell)


<--This---	----is----	-----a----	---Table--	----Row-->
			cell
	cell			cell

Đó là các bảng trong một bảng tóm tắt.bây giờ bạn sẳn sàng tạo một số bảng . Để biết cách tạo các tài liệu chất lượng , bạn cần có thời gian tìm hiểu về các thẻ .Nếu ạn chỉ dựa vào các "table wizard",bạn sẽ rất bị giới hạn và kết quả cuối cùng không thể đáp ứng nhu cầu của bạn.

BÀI 1 : BỐ CỤC BẢNG

Bạn có thể mở ngay Notepad thực ghiện.Chép và dán mã nguồn sau để bắt đầu:

<HTML> <HEAD> <TITLE>Joe's a swell guy</TITLE> </HEAD> <BODY>
</BODY>
</HTML>

Lưu nó là table1.html trong thư liệu nào đó .Tiếp tục và tạo cho nó một thư liệu riêng vì chúng ta cũng đưa một số thứ khác vào đó .Khởi động trình duyệt của bạn. sử dụng nó để mở table1.html ,để chạy trình duyệtvà Notepad cùng vời nhau.Bằng cách này có thể tạo các trang của mình và hầu như thấy ngay kết quả những gì bạn đã thực hiện. Bạn cần có 'Wizard' 9 megabyte.

Gõ nhập các thẻ về bảng của bạn.Các thẻ này có nghĩa là "Bắt đầu một bảng " và" Kết thúc một bảng "

<HTML> <HEAD> <TITLE>Joe's a swell guy</TITLE> </HEAD> <BODY>
<TABLE>
</TABLE>
</BODY>
</HTML>
Mỗi bảng cần ít nhất một hàng:
<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
và đương nhiên mỗi hàng phải có ít nhất một cell dữ liệu bảng:
<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Để cho mọi thứ được gọn gàng , chỉ viết những gì trong các thẻ bảng . Bỏ đầu mục, thân và tiêu đề,vân vân trong tài liệu của bạn

<TABLE> <TR> <TD></TD> </TR> </TABLE>

Giờ bạn cần đưa điều gì đó vào trong ô .Còn Ed? chúng ta đưa Ed vào trong ô <TD>:

<TABLE> <TR> <TD>Ed</TD> </TR> </TABLE>

bây giờ bạn có một bảng html có đủ chức năng .Mở nó bằng trình duyệt kiểm tra lại.Nếu bạn thực hiện tất cả chính xác bảng của bạn sẽ trình bày như sau

Ed

một cách đơn giản hnư thế thôi!

BÀI 2 : ĐỊNH DẠNG BẢNG

Những ì chúng ta có đuợc là

<TABLE> <TR> <TD>Ed</TD> </TR> </TABLE>

Cung cấp cho chúng ta là

Trước hết để tạo cho nó nhìn giống một bảng bằng cách tạo cho nó một đường viền.mỗi lần thay đổi và muốn cho nó được trình bày như thế nào, bạn có thể ấn nút reload trên trình duyệt của mình .nếu trình duyệt đó không có nút reload,tìm một trình duyệt khác.

<TABLE BORDER=1> <TR> <TD>Ed</TD> </TR> </TABLE>

Kích thước của đường viền bao nhiêu:

<TABLE BORDER=5> <TR> <TD>Ed</TD> </TR> </TABLE>

Đường viền HUGE bao nhiêu?

<TABLE BORDER=25> <TR> <TD>Ed</TD> </TR> </TABLE>

Không có đường viền:

<TABLE BORDER=0> <TR> <TD>Ed</TD> </TR> </TABLE>

Như bạn thấy mặc định là không có đường viền.

chúng ta hãy dùng đường viền phổ biến nhất hiện nay:

<TABLE BORDER=3> <TR> <TD>Ed</TD> </TR> </TABLE>

khi kích thước không được ấn định bảng sẽ lớn tối đa có thể

<TABLE BORDER=3> <TR> <TD>Ed, Rick and Tom</TD> </TR> </TABLE>

Ed, Rick and Tom

Tuy nhiên ấn định kích thước bảng khá đơn giản:

<TABLE BORDER=3 WIDTH=100%> <TR> <TD>Ed, Rick and Tom</TD> </TR> </TABLE>

Ed, Rick and Tom

Khi có chiều rộng 75%

<TABLE BORDER=3 WIDTH=75%> <TR> <TD>Ed, Rick and Tom</TD> </TR> </TABLE>

Ed, Rick and Tom

Bây giờ chúng ta bỏ các bạn của Ed:

<TABLE BORDER=3 WIDTH=75%> <TR> <TD>Ed</TD> </TR> </TABLE>

Chúng ta giảm kích thước bảng xuống còn 50%cửa sổ của trình duyệt:

<TABLE BORDER=3 WIDTH=50%> <TR> <TD>Ed</TD> </TR> </TABLE>

Giờ chúng ta ấn định chiều rộng là 50 thay vì 50%:

<TABLE BORDER=3 WIDTH=50> <TR> <TD>Ed</TD> </TR> </TABLE>

Bây giờ là 100:

<TABLE BORDER=3 WIDTH=100> <TR> <TD>Ed</TD> </TR> </TABLE>

như bạn thấy có 2 cách ấn định chiều rộng của bảng. Mỗi kiểu đáp ứng cách sử dụng của nó .Bây giờ kiểu sử dụng không còn quan trọng .

chúng ta có thể thay đổi chiều cao :

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD>Ed</TD> </TR> </TABLE>

chúng ta có thể điều khiển nơi ô mà dữ liệu sẽ xuất hiện:

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=CENTER>Ed</TD> </TR> </TABLE>

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=RIGHT>Ed</TD> </TR> </TABLE>

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT>Ed</TD> </TR> </TABLE>

Như bạn thấy, giá trị mặc định là ALIGN=LEFT. Có thể bạn đã biết rồi, default value là giá trị trình duyệt thừa nhân nếu như bạn không khai báo giá trị khác.

Chúng ta có thể điều khiển nơi dữ liệusẽ xuất hiện theo chiều dọc trong một ô.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=TOP>Ed</TD> </TR> </TABLE>

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=BOTTOM>Ed</TD> </TR> </TABLE>

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=MIDDLE>Ed</TD> </TR> </TABLE>

Mặc định là ở giữa.

Cũng có thể sử dụng các ảnh và điều tác nó trong một ô dữ liệu của bảng . Trong thư liệu có tài liệu nàybạn sẽ thấy một ảnh nhỏ có tên ed.gif.Chép nó vào thư liệu mà bạn đang làm việc (ảnh mà nơi bạn đưa vào tables1.html).Thay thẻ Ed bằng IMG:

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="ed.gif" WIDTH=32 HEIGHT=32></TD> </TR> </TABLE>

Bây giờ cung cấp các thuộc tíh bằng các thẻ ảnh của bạn.

BÀI 3 : HIỆU CHỈNH BẢNG

Chúng ta trở lại bảng Ed đơn thuần ban đầu.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=MIDDLE>Ed</TD> </TR> </TABLE>

Để được sáng sủa và đơn giản, chúng ta bỏ các thuộc tính cân chỉnh .Chúng ta biết những gì sẽ xảy ra vì chúng ta biết các giá trị mặc định như thế nào.TAG cho trình duyệt biết phải thực hiện điều gì.ATTRIBUTE ở vào bên trong TAG và cho trình duyệt biết cách thực hiện đó :

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD>Ed</TD> </TR> </TABLE>

Bây giờ chúng ta tạo ra một bảng lớn hơn:

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD>Ed</TD> </TR> </TABLE>

fuzz là một thuật ngữ chỉ bảng lớn và phức tạp chỉ thích hợp đối với tài liệu html cao cấp.

Tom là bạn của Ed ,anh ta muốn có một ô riêng :

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD>Ed</TD> <TD>Tom</TD> </TR> </TABLE>

Tom

khi không có các chỉ lệnh nào được cung cấp cho trình duyệt, mỗi ô có thể(nhưng không phải luôn luôn)có kíoch thước khác nhau .Tuy nhiên, tốt hơn cần ấn định kích thước của từng ô .cần phải tính tóan chính xác nếu không người xem sẽ thấy hòan tòan khác với những gì mà bạn muốn họ thấy

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=150>Ed</TD> <TD WIDTH=150>Tom</TD> </TR> </TABLE>

Tom

Các thuộc tíng Width này cũng có thể được biểu thị bằng phần trăm:

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=50%>Ed</TD> <TD WIDTH=50%>Tom</TD> </TR> </TABLE>

Tom

chúng ta tạo chop Ed một ô lớn vì anh ta ở đây từ đầu.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=80%>Ed</TD> <TD WIDTH=20%>Tom</TD> </TR> </TABLE>

Tom

Giờ Rich ở phía sau và đương nhiên anh ta cũng muốn có một ô riêng .chúng ta cần xác định của hàng chúng ta sẽ tạo cho anh ta. Giả sử bằng cặp thẻ 20%. Chắc chắn cũng điều chỉnh kích thước của Ed:

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=60%>Ed</TD> <TD WIDTH=20%>Tom</TD> <TD WIDTH=20%>Rick</TD> </TR> </TABLE>

Tom

Rick

Có ba tay yahoo băng qua phố để xem những gì xãy ra và họ muốn có mặt trong bảng của các bạn.Chúng ta cho họ một hàng riêng

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

các thuộc tính Width ở hàng thứ nhất chuyển sang hàng thứ hai

Nếu Mo bị bỏ xót, chúng ta vẫn có một bảng hòan chỉnh , nó chỉ khuyết mất một tên:

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
</TR>
</TABLE>

Ed	Tom	Rick
Larry	Curly

Chúng ta đưa Mo trở lại và xóa tất cả các thuộc tính ngọai trừ boder:

<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

Tiếp theo là hai thuộc tính được gọi là CELLPADDING và CELLSPACING. cả hai đuợc sử dụng để làm nổi bậttrong thẻ <TABLE>.CELLPADING là khỏang trống giữa các đường viền của ô và nội dung của ô đó .

<TABLE BORDER=3 CELLPADDING=12>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

Giá trị mặc định đối với thuộc tính này bằng 1 .Không ấn định thuộc tính đó bằng không để tránh văn bản trong ô sát với đường viền(Tuy nhiên, bạn có thể ấn định bằng 0 nếu muốn)

nếu chúng ta thay CELLPADING bằng CELLSPACING , chúng ta sẽ có một kết quả hơi khác

<TABLE BORDER=3 CELLSPACING=12>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

Giá trị mặ định đối với CELLSPACING là 2

Đương nhiên , chúng ta có thể kết hợp các thuộc tính này:

<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

BÀI 4 : MÀU NỀN VÀ XỬ LÝ BẢNG

Lọai bỏ các thuộc tính CELLPADDING và CELLSPACING để trở lại bảng đơn giản trước đây:

<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

Một đặc trưng cool của các trình duyệt mới hơn là khả năng ấn định các màu nền cho một ô bảng, hàng hoặc cả bảng . Bạn sử dụng BGCOLOR giống như bạn thực hiện thẻ <BODY>

<TABLE BORDER=3 BGCOLOR="#FFCC66">
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

<TABLE BORDER=3> <TR BGCOLOR="#FF9999"> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR BGCOLOR="#99CCCC"> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

<TABLE BORDER=3> <TR BGCOLOR="#FFCCFF"> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD BGCOLOR="#FF0000">Larry</TD> <TD>Curly</TD> <TD BGCOLOR="#3366FF">Mo</TD> </TR> </TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

Biểu đồ sau được sử dụng để chọn các màu nền:

BÀI 5 : TẠO DANH SÁCH

Chúng ta thử thực hiệnmột vài thứ để xem những gì xãy ra .

Sau đây là một danh sách không có thứ tự

Apples
Flour
Sugar
Cinnamon

Công thức làm bánh táo trên đã đầy đủ thành phần cần thiết rồi, nhưng giả sử chúng ta muốn đưa nó vào một bảng như sau:

Apples
Flour
Sugar
Cinnamon

Bởi vì chúng ta muốn nó ở bên một ảnh táo

Apples
Flour
Sugar
Cinnamon

Chúng ta có thể sử dụng một bảng để thực hiện điều đó !

Khi tìm hiểu hoặc thiết lập một bảng , luôn luôn dễ hơn khi có các đường viền

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

Chúng ta thực hiện từng bước , nó khá đơn giản !

Bắt đầu với Ed

<TABLE BORDER=3> <TR> <TD>Ed</TD> </TR> </TABLE>

Thay Ed bằng danh sách không có thứ tự :

<TABLE BORDER=3> <TR>
<TD>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

Nhớ là không có các chỉ lệnh khác, bảng sẽ tự tạo kích thước đủ lớn để chứa dữ liệu.Vì vậy trong trường hợp này , không cần đến thuộc tính kích thước.

Kế tiếp chúng ta sẽ mở rộng bảng có đủ kích thước của cửa sổ trình duyệt:

<TABLE BORDER=3 WIDTH=100%> <TR>
<TD>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

Giờ chúng ta cần tạo một ô thứ hai ..Chúng ta muốn ô bên trái nhỏ hơn ô bên phải:

<TABLE BORDER=3 WIDTH=100%> <TR>
<TD WIDTH=40%></TD>
<TD WIDTH=60%>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

Bây giờ là lúc thuận tiện để chép appepie.gif vào thư liệu họat động của bạn

Đưa ảnh vào ô thứ nhất:

<TABLE BORDER=3 WIDTH=100%> <TR>
<TD WIDTH=40%><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

Giờ chỉ còn căn ảnh bánh táo về bên phải ô và bỏ thuộc tính đường viền:

<TABLE BORDER=0 WIDTH=100%> <TR>
<TD WIDTH=40% ALIGN=RIGHT><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

BÀI 6 : LỒNG BẢNG

Chúng ta có thể sử dụng một bảng ở trong một bảng không ?
Chúng ta thực hiện.Bắt đầu bảng Ed thật nhỏ .
<TABLE BORDER=3> <TR> <TD>Ed</TD> </TR> </TABLE>

Tạo một bảng lớn hơn
<TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD>Ed</TD> </TR> </TABLE>

Thay Ed bằng một bảng Ed thật nhỏ :
<TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

Bảng của chúng ta có thể căn giữa rất dễ:
<CENTER> <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>

sau đây là trường hợp bảng có thể giải quyết một vấn để thường gặp .Nghĩa là bạn có ý tưởng về ảnh động gif .Nhưng ảnh bạn muốn sử dụng khá lớn .Vì bạn biết ảnh động gif về cơ bản là một lọat các ảnh gif được hiển thị nối tiếp, bạn thấy sợ về kích thước ảnh này và người xem sẽ khôn thấy hấp dẫn với ảnh (700K) của bạn .không những như thế mà còn vì còn kích thước của nó trình duyệt của họ sẽ hiển thị nó rất mệt . bạn cần cắt bớt bnó và hiển thị bằng một bảng .
<CENTER> <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>

<CENTER> <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>

Sau đây là một bảng tương tự có CELLSPACING
Chỉ một phần của ảnh (đôi mắt) là hình ảnh động

Sau đây là HTML cho bảng đó(Không nhất thiết phải sử dụng chủ hoa):

<TABLE WIDTH=591 BORDER=0 CELLSPACING=0 CELLPADDING=0> <CAPTION ALIGN=top><FONT SIZE=6><STRONG><EM>Netscape vs. Microsoft?</EM></STRONG></FONT></CAPTION>
<TR>
<TD ROWSPAN=3><IMG SRC="dragon/dragon4.gif" WIDTH=250 HEIGHT=406></TD>
<TD><IMG SRC="dragon/dragon3.gif" WIDTH=122 HEIGHT=109></TD>
<TD ROWSPAN=3><IMG SRC="dragon/dragon5.gif" WIDTH=219 HEIGHT=406></TD>
</TR>
<TR>
<TD><IMG SRC="dragon/anidrag.gif" WIDTH=122 HEIGHT=50></TD>
</TR>
<TR>
<TD><IMG SRC="dragon/dragon2.gif" WIDTH=122 HEIGHT=247></TD>
</TR>
</TABLE>
Sau đây là bố cục :

dragon4.gif

dragon3.gif

dragon5.gif

anidrag.gif

dragon2.gif

nguồn: http://www.javascriptbank.com

Tags: Học tập / HTML-CSS / Tin học

Các thuộc tính CSS

- Sunday, April 7, 2013 No Comments

Bộ chọn (selectors) được dùng để chọn các thành phần muốn định dạng css.

(http://hocwebchuan.com)

Bộ chọn	Ví dụ	Mô tả
*	*	Chọn tất cả các thành phần html.
tag	p	Chọn tất cả các thành phần cùng loại.
tag01 tag02	div p	Chọn tất cả thành phần <tag02> bên trong thành phần <tag01>.
tag01,tag02	div,p	Chọn tất cả thành phần <tag01> và <tag02>.
tag01+tag02	div+p	Chọn tất cả thành phần <tag02> được đặt kế và sau thành phần <tag01>.
tag01>tag02	div>p	Chọn tất cả thành phần <tag02> có thành phần cha là <tag01>.
.class	.className	Chọn tất cả các thành phần có cùng tên class.
#id	#idName	Chọn tất cả các thành phần có cùng tên id.
:active	a:active	Chọn các liên kết được kích hoạt.
:after	p:after	Thêm nội dung ngay phía sau thành phần.
:before	p:before	Thêm nội dung ngay phía trước thành phần.
:first-child	p:first-child	Chọn thành phần đầu tiên của thành phần cha chứa nó.
:first-letter	p:first-letter	Chọn ký tự đầu tiên của một thành phần.
:first-line	p:first-line	Chọn dòng đầu tiên của một thành phần.
:focus	input:focus	Thành phần sẽ focus khi được chọn.
:hover	a:hover	Chọn các liên kết được hover (di chuyển chuột lên thành phần).
:lang(mã ngôn ngữ)	p:lang(vi)	Chọn thành phần với thuộc tính ngôn ngữ có giá trị bắt đầu với "mã ngôn ngữ".
:link	a:link	Định dạng cho tất cả liên kết khi chưa được click.
:visited	a:visited	Định dạng cho các thành phần đã được click.
[Thuộc tính]	[target]	Chọn tất cả các thành phần có cùng thuộc tính (attribute).
[Thuộc tính\|=ngôn ngữ]	[lang\|=vi]	Được sử dụng để chọn tất cả các thành phần với thuộc tính có giá trị = "ngôn ngữ".
[attribute~=value]	[title~=myWeb]	Chọn tất cả các thành phần với thuộc tính chứa một giá trị.
[attribute=value]	[target=_blank]	Chọn tất cả các thành phần với thuộc tính bằng giá trị.

Thuộc tính CSS

Thuộc tính	Ví dụ	Mô tả
background	background: #ff0000;	Định dạng nền (background) cho thành phần.
border	border: 1px solid #ff0000;	Định dạng đường viền cho thành phần.
border-collapse	border-collapse: collapse;	Thuộc tính border-collapse xác định đường viền củatable có tách biệt ra hay không.
border-spacing	border-spacing: 10px;	Xác định khoảng cách giữa các đường viền của các cột lân cận.
bottom	bottom: 10px;	Xác định vị trí dưới cùng của thành phần được định vị trí.
caption-side	caption-side: bottom;	Xác định vị trí một chú thích của table.
clear	clear: both;	Xác định 2 bên của phần tử (left, right), nơi mà phần tử float không được cho phép.
clip	clip: rect(0,0,50px,10px);	Xác định đoạn cho thành phần khi sử dụng thuộc tính position có giá trị "absolute".
color	color: #ff0000;	Xác định màu sắc cho text.
content	content: "."	Sử dụng kèm với bộ chọn ":before", ":after" để chèn nội dung được tạo.
counter-increment	counter-increment: section;	Gia tăng một hoặc nhiều counter (sắp xếp có thứ tự, có hiển thị số)
counter-reset	counter-reset: subsection;	Tạo hoặc reset một hoặc nhiều counter.
cursor	cursor: pointer;	Xác định kiểu con trỏ chuột được hiển thị.
direction	direction: ltr;	Xác định hướng cho văn bản.
display	display: inline;	Xác định loại hiển thị của thành phần.
empty-cells	empty-cells: hide;	Xác định có hay không có đường viền và nền trong một cột rỗng của table
float	float: left;	Xác định có hay không một thành phần được float.
font	font: 12px arial,sans-serif;	Thiết lập font cho thành phần, bao gồm font chữ, độ rộng, ...
height	height: 50px;	Thiết lập chiều cao của thành phần.
left	left: 10px;	Xác định vị trí bên trái của thành phần định vị trí (như position)
letter-spacing	letter-spacing: 2px;	Tăng hoặc giảm khoảng cách giữa các ký tự trong đoạn text.
line-height	line-height: 1.5;	Thiết lập chiều cao giữa các dòng.
list-style	list-style: decimal;	Thiết lập tất cả thuộc tính cho một danh sách trong một khai báo.
margin	margin: 15px;	Thiết lập các thuộc tính margin trong một khai báo.
max-height	max-height: 200px;	Thiết lập chiều cao tối đa của thành phần.
max-width	max-width: 900px;	Thiết lập chiều rộng tối đa của thành phần.
min-height	min-height: 100px;	Thiết lập chiều cao tối thiểu của thành phần.
min-width	min-width: 600px;	Thiết lập chiều rộng tối thiểu của thành phần.
outline	outline: dotted;	Định dạng các đường viền bao ngoài
overflow	overflow: scroll;	Xác định điều gì sẽ xảy ra nếu một thành phần box tràn nội dung.
padding	padding: 15px;	Thiết lập các thuộc tính padding trong một khai báo.
page-break-after	page-break-after: alway;	Xác định các phân chia văn bản ngay sau thành phần.
page-break-before	page-break-before: alway;	Xác định các phân chia văn bản ngay trước thành phần.
page-break-inside	page-break-inside: alway;	Xác định các phân chia văn bản ngay bên trong thành phần.
position	position: absolute;	Xác định loại của phương pháp định vị trí cho thành phần.
quotes	"‘" "’"	Thiết lập các loại dấu ngoặc bao ngoài khi nhúng một trích dẫn.
right	right: 10px;	Xác định vị trí bên phải của thành phần định vị trí (như position)
table-layout	table-layout: fixed;	Thiết lập các thuật toán layout được sử dụng cho table.
text-align	text-align: center;	Sắp xếp các nội dung theo chiều ngang.
text-decoration	text-decoration: underline;	Xác định các trang trí thêm cho text.
text-indent	text-indent: 10px;	Ghi rõ thụt đầu dòng của dòng đầu tiên trong một khối văn bản.
text-transform	text-transform: uppercase;	Thiết lập các ký tự viết hoa cho văn bản.
top	top: 10px;	Xác định vị trí bên trên của thành phần định vị trí (như position)
vertical-align	vertical-align: middle;	Sắp xếp các nội dung theo chiều dọc.
visibility	visibility: visible;	Xác định thành phần có được nhìn thấy hay không.
white-space	white-space: nowrap;	Xác định khoảng trắng có bên trong thành phần được xử lý như thế nào.
width	width: 800px;	Thiết lập chiều rộng của thành Thành phần
word-spacing	word-spacing: 5px;	Tăng hoặc giảm không gian giữa các từ trong đoạn văn bản.
z-index	z-index: 100;	Thiết lập thứ tự xếp chồng nhau của một thành phần vị trí.

Tìm hiểu về CSS absolute position

Absolute position là gì?

Cách căn chỉnh vị trí của một thành phần như thế nào?

Kết Luận:

Tạo và hiệu chỉnh bảng trong HTML

Các thuộc tính CSS

Thuộc tính CSS

Ví dụ về thuộc tính font

Ví dụ về background

Ví dụ về thuộc tính border

Ví dụ về thuộc tính display

Ví dụ về thuộc tính text-align

Ví dụ về thuộc tính vertical-align

Ví dụ về thuộc tính list-style

Ví dụ về thuộc tính margin

Ví dụ về thuộc tính padding

Ví dụ về thuộc tính float

Ví dụ về thuộc tính overflow

Ví dụ về thuộc tính position

Ví dụ về thuộc tính z-index

Ví dụ về thuộc tính content

Mới nhất

Tìm hiểu về CSS absolute position

Absolute position là gì?

Cách căn chỉnh vị trí của một thành phần như thế nào?

Kết Luận:

Tạo và hiệu chỉnh bảng trong HTML

Các thuộc tính CSS

Thuộc tính CSS

Ví dụ về thuộc tính font

Ví dụ về background

Ví dụ về thuộc tính border

Ví dụ về thuộc tính display

Ví dụ về thuộc tính text-align

Ví dụ về thuộc tính vertical-align

Ví dụ về thuộc tính list-style

Ví dụ về thuộc tính margin

Ví dụ về thuộc tính padding

Ví dụ về thuộc tính float

Ví dụ về thuộc tính overflow

Ví dụ về thuộc tính position

Ví dụ về thuộc tính z-index

Ví dụ về thuộc tính content