January 2010 ~ Internet Resources

Simple CSS Bài 12: Vị trí & Lớp

1/28/2010 09:45:00 AM Posted by Hoàng Dũng CSS No comments

Dựa trên bài của Pearl trên phpcodevn

12.1. Nguyên lý hoạt động của vị trí – position
Hãy tưởng tượng cửa sổ trình duyệt của bạn giống như một hệ tọa độ và với position bạn có thể đặt một đối tượng web ở bất cứ vị trí nào trên hệ tọa độ này.

Giả sử chúng ta muốn định vị một ảnh ở vị trí 70px cách đỉnh và 90px từ bên trái tài liệu, chúng ta sẽ viết CSS như sau:

1img {
2position:absolute;
3top:70px;
4left:90px
5}

Như bạn đã thấy, sự định vị bằng CSS là một công nghệ chính xác để định vị một thành phần. Nó dễ dàng hơn so với việc dùng bảng, ảnh trong suốt hay bất kỳ thứ gì khác.
12.2. Vị trí tuyệt đối – Absolute position
Định vị tuyệt đối là sự định vị mà trong đó các thành phần được định vị không để lại bất cứ một khoảng trống nào trong tài liệu.
Một thành phần được định vị tuyệt đối sẽ nhận giá trị position là absolute. Các đối tượng đã định vị tuyệt đối sẽ dùng kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ.
Ví dụ sau sẽ chỉ cho chúng ta cách đặt bốn ảnh ở bốn góc tài liệu bằng định vị tuyệt đối. Ví dụ 12.2

01#logo1 {
02position:absolute;
03top:50px;
04left:70px
05width:100px;
06height:100px;
07background:black;
08}
09#logo2 {
10position:absolute;
11top:0;
12right:0;
13width:100px;
14height:100px;
15background:green;
16}
17#logo3 {
18position:absolute;
19bottom:0;
20left:0;
21width:100px;
22height:100px;
23background:blue;
24}
25#logo4 {
26position:absolute;
27bottom:70px;
28right:50px;
29width:100px;
30height:100px;
31background:red;
32}

12.3. Vị trí tương đối – Relative position
Sự định vị tương đối cho một thành phần là sự định vị được tính từ vị trí gốc trong tài liệu. Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài liệu. Các thành phần được định vị tương đối sẽ nhận giá trị position là relative.
Chúng ta hãy làm lại ví dụ trên nhưng thay absolute thành relative. Các bạn ghi nhận lại vị trí 4 ảnh logo lúc áp dụng thuộc tính position là none, absolute và relative rồi rút ra nhận xét.
Hai thuộc tính position và float mang lại cho trang web của bạn sự cơ động hơn các phương pháp dùng bảng hay ảnh trong
suốt.
12.4. Lớp/Chiều sâu – Z-Index

CSS hoạt động trên cả 3 chiều: cao, rộng, sâu. Chiều sâu được định nghĩa với thuộc tính z-index, thuộc tính này giúp bạn đặt một thành phần này lên trên một thành phần khác. Với mục đích này, bạn sẽ gán cho mỗi phần tử một con số. Theo đó, phần tử có số cao hơn sẽ nằm trên, phần tử có số thấp hơn sẽ nằm dưới.
Ví dụ sau chúng ta sẽ đặt 5 bức ảnh logo ở 5 lớp. Ví dụ 12.4

01#logo1 {
02position:absolute;
03top:70px;
04left:50px;
05width:100px;
06height:100px;
07background:black;
08z-index:1
09}
10 
11#logo2 {
12position:absolute;
13top:140px;
14left:100px;
15width:100px;
16height:100px;
17background:yellow;
18z-index:2
19}
20 
21#logo3 {
22position:absolute;
23top:210px;
24left:150px;
25width:100px;
26height:100px;
27background:green;
28z-index:3
29}
30 
31#logo4 {
32position:absolute;
33top:280px;
34left:200px;
35width:100px;
36height:100px;
37background:orange;
38z-index:4
39}
40 
41#logo5 {
42position:absolute;
43top:350px;
44left:250px;
45width:100px;
46height:100px;
47background:red;
48z-index:5
49}

Bài viết của link2caro - Cộng Đồng WordPress Việt Nam
Hãy tôn trọng tác giả và ghi rõ nguồn khi sao chép, sử dụng nội dung bài viết này.

Simple CSS Bài 11: Float & Clear

1/28/2010 09:44:00 AM Posted by Hoàng Dũng CSS No comments

11.1 Thuộc tính float:

Float (theo như nghĩa tiếng Việt là thả trôi) là một thuộc tính CSS dùng để cố định float-clear

một thành phần web 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 (như tạo các trang web 2 column layout hay 3 column layout), hiển thị văn bản thành cột (giống như kiểu Format > Columns trong MS Word vậy), hay thực hiện việc định vị trí ảnh và text (như một số kiểu text wrapping của MS Word). Để rõ hơn chúng ta hãy xem hình minh họa sau về cơ chế hoạt động của float:

Thuộc tính float có 3 giá trị:
+ Left: Cố định phần tử về bên trái.
+ Right: Cố định phần tử về bên phải.
+ None: Bình thường.

Nhìn vào hình minh họa trên chúng ta thấy là ban đầu trong box lớn có hai thành phần là Box B và phần Content. Lúc đầu Box B nằm bên trên và Content nằm bên dưới, nhưng khi chúng ta đặt thuộc tính float cho Box B thì Box B bị cố định về bên trái và chừa lại khoảng trống bên trái nó. Còn phần Content thì vốn nằm bên dưới sẽ tự động tràn lên để lắp đầy khoảng trống do Box B tạo ra.

Trong ví dụ sau, chúng ta sẽ thực hiện float ảnh logo sang trái để phần nội dung bên dưới tràn lên nằm cạnh logo.

1#logo {
2float:left;
3}

Một ví dụ khác là chúng ta sẽ thử dùng float để chia 2 cột văn bản. Ví dụ 11.1

01.column1, .column2 {
02width: 45%;
03float:left;
04text-align:justify;
05padding:0 2%;
06}
07 
08.column1 {
09border:1px solid black;
10}
11 
12.column2 {
13border:1px solid red;
14}

11.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.

Trong ví dụ trên, khi chúng ta float tấm ảnh qua trái thì mặc nhiên văn bản sẽ được tràn lên để lắp vào chỗ trống. Nhưng khi chúng ta đặt vào văn bản thuộc tính clear thì chúng ta có quyền quyết định xem phần văn bản đó có được tràn lên hay không.

Thuộc tính clear có tất cả 4 thuộc tính: left (tràn bên trái), right (tràn bên phải), both (không tràn) và none.
Thử dùng thuộc tính clear với các giá trị khác nhau đối với đoạn văn bản trong ví dụ float ảnh logo ở trên.

Bài viết của link2caro - Cộng Đồng WordPress Việt Nam
Hãy tôn trọng tác giả và ghi rõ nguồn khi sao chép, sử dụng nội dung bài viết này.

Simple CSS Bài 10: Chiều cao & Chiều rộng

1/28/2010 09:43:00 AM Posted by Hoàng Dũng CSS No comments

Dựa theo bài của Pearl trên phpcodevn

10.1. Thuộc tính chiều rộng – width:

Width là một thuộc tính CSS dùng để quy định chiều rộng cho một thành phần web.
Ví dụ sau chúng ta sẽ định chiều rộng cho thành phần p của một trang web.

1p {
2width:700px;
3}

10.2. Thuộc tính chiều rộng tối đa – max-width:

Max-width là thuộc tính CSS dùng để quy định chiều rộng tối đa cho một thành phần web.

10.3. Thuộc tính chiều rộng tối thiểu – min-width:

Min-width là thuộc tính CSS dùng để quy định chiều rộng tối thiểu cho một thành phần web.

10.4. Thuộc tính chiều cao – height:

Height là một thuộc tính CSS dùng để quy định chiều cao cho một thành phần web.

Ví dụ sau chúng ta sẽ định chiều cao cho thành phần p của một trang web.

1p {
2height:300px
3}

10.5. Thuộc tính chiều cao tối đa – max-height:

Max-height là thuộc tính CSS dùng để quy định chiều cao tối đa cho một thành phần web.

10.6. Thuộc tính chiều cao tối thiểu – min-height:

Min-height là thuộc tính CSS dùng để quy định chiều cao tối thiểu cho một thành phần web.

Lưu ý:
Thông thường chiều cao một thành phần web do văn bản trong trang web đó quyết định. Việc định chiều cao chính xác cho một thành phần sẽ tạo thanh cuộn văn bản nếu chiều cao văn bản lớn hơn chiều cao đã định. Các thuộc tính max/min-width/height được sử dụng trong những trường hợp bạn không chắc giá trị chính xác cho width, height cả một thành phần. Ví dụ, bạn vùng chứa bài post của một forum có bề ngang 500px, bạn có thể định max-width:500px cho phần hình ảnh trong phần đó để tránh những ảnh lớn bị lệch ra ngoài.

Bài viết của link2caro - Cộng Đồng WordPress Việt Nam
Hãy tôn trọng tác giả và ghi rõ nguồn khi sao chép, sử dụng nội dung bài viết này.

Simple CSS Bài 9: Mô hình hộp

1/28/2010 09:42:00 AM Posted by Hoàng Dũng CSS No comments

Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Nó bao gồm margin (lề), border (viền), padding (vùng đệm) và phần nội dung của đối tượng. Hình bên dưới mô tả cấu trúc minh họa mô hình hộp cho một thành phần web trong FireBug. (Một phần mở rộng rất hữu ích trong việc chỉnh sửa CSS)

Mô hình hộp trong Firefox

Ví dụ: Với đoạn mã sau

1

textarea {

2

top: 5px;

3

left: 11px;

4

margin: 1px; (hay margin: 1px 1px 1px 1px;)

5

borderr: 1px; (hay border: 1px 1px 1px 1px;)

6

width: 458px;

7

height: 108px;

8

}

Thì khung văn bản (textarea) của bạn sẽ trông như thế này trong FireBug:
css-box-model-2

Hay trên trang web thì bạn sẽ nhìn thế này (với FireBug, bạn có thể nhìn thấy trực quan những thành phần của mô hình hộp, màu xanh nhạt: phần nội dung (content), màu tím: vùng đệm (padding), màu đỏ: viền (border), và màu vàng: lề (margin)
css-box-model-1

Thuộc tính lề – margin:

Như tất cả những ai đã học qua MS Word đều biết là trong phần thiết lập Trang – Page, có một thiết lập lề – margin để định lề cho trang in. Tương tự, thuộc tính lề – margin trong CSS cũng được dùng để canh lề cho cả trang web hay một thành phần web này với các thành phần web khác hay với viền trang.

Ví dụ sau sẽ chỉ cho chúng ta biết cách canh lề cho một trang web.

1

body {

2

margin-top:80px;

3

margin-bottom:40px;

4

margin-left:50px;

5

margin-right:30px;

6

border:1px dotted #FF0000

7

}

Hoặc gọn hơn chúng ta sẽ viết như sau:

1

body {

2

margin:80px 30px 40px 50px;

3

border:1px dotted #FF0000

4

}

Cú pháp như sau: margin: trên | phải | dưới | trái
Hoặc: margin: |< value2> – với value 1 là giá trị margin-top và margin-bottom và value2 là giá trị margin-left và margin-right.

Kết quả của ví dụ trên sẽ được mô hình hóa như sau:

Ví dụ kế tiếp sẽ thể hiện rõ hơn về việc dùng margin để canh lề cho các đối tượng trong trang web. Các bạn hãy quan sát các đường viền và nhận xét.

01

body {

02

margin:80px 30px 40px 50px;

03

border:1px solid #FF0000

04

}

05

06

#box1 {

07

margin:50px 30px 20px 40px;

08

border:1px solid #00FF00

09

}

10

11

#box2 {

12

margin:50px 30px 20px 40px;

13

border:1px solid #0000FF

14

}

Thuộc tính vùng đệm – padding:

Vùng đệm – padding quy định khoảng cách giữa phần nội dung và viền của một đối tượng (xem lại ảnh minh họa về mô hình hộp ở trang trước).

Cú pháp: padding: trên | phải | dưới | trái
Hoặc: padding: |< value2> – với value 1 là giá trị margin-top và margin-bottom và value2 là giá trị margin-left và margin-right.

Các bạn hãy thử thực hiện lại 2 ví dụ ở phần margin, nhưng thay margin bằng padding, nhớ quan sát các thay đổi và chú ý tới vị trí của đường viền.

Đường viền – border là một thành phần quan trọng trong một trang web. Nó thường được dùng trong trang trí, đóng khung cho một đối tượng cần nhấn mạnh, phân cách các đối tượng giúp trang web trông dễ nhìn hơn,… Trong bài học này, chúng ta sẽ cùng tìm hiểu về cách dùng CSS để định border cho các đối tượng web.

Thuộc tính border-width:

Border-width là một thuộc tính CSS quy định độ rộng cho viền của một đối tượng web. Thuộc tính này có các giá trị: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels. Xem hình minh họa bên dưới.

Thuộc tính border-color:

Border-color là thuộc tính CSS quy định màu viền cho một đối tượng web. Thuộc tính này nhận tất cả đơn vị màu CSS hỗ trợ.

Thuộc tính border-style:

Border-style là thuộc tính CSS quy định kiểu viền thể hiện của một đối tượng web.
CSS cung cấp tất cả 8 kiểu viền tương ứng với 8 giá trị: dotted, dashed, solid, double, groove, ridge, inset và outset. Ngoài ra, hai giá trị none hay hidden dùng để ẩn đường viền. Để hiểu rõ hơn, chúng ta hãy xem hình minh họa dưới đây (tất cả viền có màu đỏ).

Ví dụ: Ví dụ sau sẽ định viền cho 3 thành phần h1, h2, p như sau:

01

h1 {    border-width:thin;

02

border-color:#FF0000;

03

border-style:solid   }

04

05

h2 {    border-width:thick;

06

border-color:#CCC;

07

border-style:dotted  }

08

p {   border-width:5px;

09

border-color:#FF00FF;

10

border-style:double  }

Ngoài ra, chúng ta cũng có thể dùng riêng các thuộc tính border-top, border-right, border-bottom hay border-left để chỉ định viền riêng cho các đối tượng.

Ví dụ:

01

h1 {

02

border-top-width:thin;

03

border-top-color:#FF0000;

04

border-top-style:solid;

05

border-right-width:thick;

06

border-right-color:#AFAFAF;

07

border-right-style:dotted;

08

border-bottom-width:2px;

09

border-bottom-color:blue;

10

border-bottom-style:double;

11

border-left-width:5px;

12

border-left-color:violet;

13

border-left-style:groove

14

}

Thuộc tính border rút gọn:
Để dễ nhớ chúng ta có thể sử dụng cấu trúc rút gọn của CSS như sau:
Border: | |

Có thể bạn đã thấy một số trang web có những ô, phần nhập văn bản, hay nút bấm có những đường cong mềm mại (trên Firefox, Safari)? Bạn có thể sử dụng các thuộc tính bổ sung sau cho đường viền của mình để tạo ra những đường cong như ý muốn (thuộc tính này có thể sẽ được đưa vào CSS3, còn với CSS2.1 thì thuộc tính này không được coi là chuẩn)

border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-radius	-moz-border-radius	-webkit-border-radius

Bài viết của link2caro - Cộng Đồng WordPress Việt Nam
Hãy tôn trọng tác giả và ghi rõ nguồn khi sao chép, sử dụng nội dung bài viết này.

Simple CSS Bài 8: Span & Div

1/28/2010 09:40:00 AM Posted by Hoàng Dũng CSS No comments

8.1. Nhóm phần tử với thẻ :

Thẻ trong HTML thật ra là một thẻ trung hòa, nó không thêm hay bớt bất cứ một thứ gì vào một tài liệu HTML cả. Nhưng chính nhờ tính chất trung hòa này mà nó lại là một công cụ đánh dấu tuyệt vời để qua đó chúng ta có thể viết CSS định dạng cho các phần tử mong muốn.

Ví dụ: Chúng ta có đoạn HTML sau trích dẫn câu nói của chủ tịch Hồ Chí Minh. Ví dụ 8.1

`1`	`<p>Không có gì quý hơn độc lập, tự do.p>`

Yêu cầu ở đây là chúng ta hãy dùng CSS tô đậm 2 từ độc lập, tự do. Để giải quyết vấn đề này, chúng ta sẽ thêm thẻ vào đoạn HTML như sau:

1<p>
2Không có gì quý hơn <span   class="nhanmanh">độc lậpspan>, <span class="nhanmanh">tự dospan>.
3p>

Và bây giờ chúng ta có thể viết CSS cho yêu cầu trên:

1.nhanmanh {
2font-weight:bold
3}

Rất đơn giản phải không nào.
8.2. Nhóm khối phần tử với thẻ

Cũng như ,

cũng là một thẻ trung hòa và được thêm vào tài liệu HTML với mục đính nhóm các phần tử lại cho mục đích định dạng bằng CSS. Tuy nhiên, điểm khác biệt là dùng để nhóm một khối phần tử trong khi đó

có thể nhóm một hoặc nhiều khối phần tử.

Trở lại ví dụ về danh sách tỉnh, thành trong phần class bài trước chúng ta sẽ giải quyết vấn đề bằng cách nhóm các phần tử với

như sau: Ví dụ 8.2

01<p>Danh Sách Các Tỉnh, Thành Phố Việt Nam:p>
02<ul>
03<div id="tp">
04<li>Hà Nộili>
05<li>TP. Hồ Chí Minhli>
06<li>Đà Nẵngli>
07div>
08<div id="tinh">
09<li>Thừa Thiên Huếli>
10<li>Khánh Hòali>
11<li>Quãng Ninhli>
12<li>Tiền Giangli>
13div>
14ul>

Và đoạn CSS cho mục đích này sẽ là:

1#tp {
2color:blue;
3}
4#tinh {
5color:green;
6}

Trong hai bài học trên, chúng ta đã được học qua về id, class,

, và lợi ích của nó trong việc nhóm, đánh dấu phần tử để có thể dùng CSS để tạo ra các kiểu trình bày đặc biệt. Có thể một số bạn chưa học qua HTML sẽ khó khăn trong việc nắm bắt các kiến thức này. Tuy nhiên, yêu cầu mà Pearl đưa ra ở đây chỉ là các bạn có thể vận dụng các phần tử này trong CSS.

Bài viết của link2caro - Cộng Đồng WordPress Việt Nam
Hãy tôn trọng tác giả và ghi rõ nguồn khi sao chép, sử dụng nội dung bài viết này.

Simple CSS Bài 7: Class (Lớp) & ID

1/28/2010 09:39:00 AM Posted by Hoàng Dũng CSS No comments

Dựa theo bài của Pearl tại phpcodevn

Trong các bài học trước, chúng ta đã được học các thuộc tính CSS về background, color, font,… Tuy nhiên, bạn cũng nhận ra là khi áp dụng một thuộc tính CSS cho một thành phần nào đó ví dụ như h1, h2, p, a, img,… thì toàn bộ các thành phần này trong trang web đều nhận thuộc tính này. Vậy có các nào để nhóm lại một số thành phần nào đó để áp dụng một thuộc tính đặc biệt. Ví dụ như bạn muốn các liên kết trên menu trang web sẽ được in hoa, và có kích cỡ lớn hơn so với liên kết trong nội dung thì phải làm thế nào? Đây chính là vấn đề mà chúng ta sẽ cùng giải quyết trong chương này.
7.1. Nhóm các phần tử với class (lớp) :
Ví dụ chúng ta có một đoạn mã HTML sau đây :

01<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Namp>
02<ul>
03<li>Hà Nộili>
04<li>TP. Hồ Chí Minhli>
05<li>Đà Nẵngli>
06<li>Thừa Thiên Huếli>
07<li>Khánh Hòali>
08<li>Quãng Ninhli>
09<li>Tiền Giangli>
10ul>

Yêu cầu đặt ra là làm thế nào để tên các thành phố là màu đỏ và tên các tỉnh là màu xanh da trời. Để giải quyết vấn đề này chúng ta sẽ dùng một thuộc tính HTML gọi là class để tạo thành 2 nhóm là thành phố và tính. Ta sẽ viết lại đoạn HTML sau thành như thế này:

01<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Namp>
02<ul>
03<li class=”tp”>Hà Nộili>
04<li class=”tp”>TP. Hồ Chí  Minhli>
05<li class=”tp”>Đà Nẵngli>
06<li class=”tinh”>Thừa Thiên  Huếli>
07<li class=”tinh”>Khánh Hòali>
08<li class=”tinh”>Quãng  Ninhli>
09<li class=”tinh”>Tiền Giangli>
10ul>

Với việc dùng class để nhóm các đối tượng như trên thì công việc của chúng ta sẽ trở nên đơn giản hơn nhiều:

1li .tp {
2color:FF0000
3}
4li .tinh {
5color:0000FF
6}

Lưu ý: Không nên đặt tên class với ký tự đầu là chữ số, nó sẽ không làm việc cho Firefox.
7.2. Nhận dạng phần tử với id:
Ví dụ:
Cũng với đoạn HTML như ví dụ về class. Nhưng yêu cầu đặt ra là Hà Nội sẽ có màu đỏ sậm, TP. Hồ Chí Minh màu đỏ, Đà Nẵng màu đỏ tươi còn các tỉnh màu xanh da trời. Để giải quyết vấn đề này chúng ta sẽ sử dụng thuộc tính HTML là id
để nhận dạng mỗi thành phố và dùng class để nhóm các tỉnh. Đoạn HTML của chúng ta bây giờ sẽ là :

01<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Namp>
02<ul>
03<li id=”hanoi”>Hà Nộili>
04<li id=”hcmc”>TP. Hồ Chí  Minhli>
05<li id=”danang”>Đà Nẵngli>
06<li class=”tinh”>Thừa Thiên  Huếli>
07<li class=”tinh”>Khánh Hòali>
08<li class=”tinh”>Quãng  Ninhli>
09<li class=”tinh”>Tiền Giangli>
10ul>

Và đoạn CSS cần dùng sẽ là :

1#hanoi { color:# 790000 }
2#hcmc { color:#FF0000 }
3#danang { color:#FF00FF }
4.tinh { color:#0000FF }

Lưu ý: Không nên đặt tên id với ký tự đầu là chữ số, nó sẽ không làm việc cho Firefox.
Trải qua hai ví dụ trên chúng ta có thể rút ra những kết luận sau:

Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó nó có thể được sử dụng nhiều lần.
Id dùng để nhận dạng một đối tượng đặc trưng, id có tính duy nhất.

Trong bài học này, chúng ta đã được học về các sử dụng class và id để áp dụng các đặc tính đặc biệt cho một thành phần web. Ở bài kế tiếp chúng ta sẽ được học thêm về hai thẻ

và trong HTML và ý nghĩa 2 thẻ này đối với việc viết CSS.

Bài viết của link2caro - Cộng Đồng WordPress Việt Nam
Hãy tôn trọng tác giả và ghi rõ nguồn khi sao chép, sử dụng nội dung bài viết này.

2010-01-28

Simple CSS Bài 12: Vị trí & Lớp

Simple CSS Bài 11: Float & Clear

Simple CSS Bài 10: Chiều cao & Chiều rộng

Simple CSS Bài 9: Mô hình hộp

Simple CSS Bài 8: Span & Div

Simple CSS Bài 7: Class (Lớp) & ID