Go Back   Diễn Đàn Bo-Blog Việt Nam > Bo-Blog > Kiến Thức Cơ Bản Về CSS



About Me
Your Avatar

 
Trả lời Gởi Ðề Tài Mới
 
Ðiều Chỉnh Kiếm Trong Bài
  #1  
Old 28-02-2010, 08:06 PM
cakiemcia's Avatar
cakiemcia is offline
Member
 
Tham gia ngày: Feb 2010
Bài gởi: 64
Default Hướng dẫn bạn sử dụng CSS code căn bản (Ai muốn edit cái file Css thì nên đọc kĩ nha)

Mục lục
# Simple CSS Bài 1: Giới Thiệu
# Simple CSS Bài 3: Background
# Simple CSS Bài 4: Font Chữ
# Simple CSS Bài 6: Định dạng liên kết
# Simple CSS Bài 7: Class (Lớp) & ID
# Simple CSS Bài 8: Span & Div
# Simple CSS Bài 9: Mô hình hộp
# Simple CSS Bài 10: Chiều cao & Chiều rộng
# Simple CSS Bài 11: Float & Clear
# Simple CSS Bài 12: Vị trí & Lớp


Simple CSS Bài 1: Giới Thiệu


1.1. CSS là gì?

Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm mỹ – làm đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có CSS. CSS ( là từ viết tắt của Cascading Style Sheet, có thể tạm dịch là bản kiểu mẫu song song) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…

1.2. Tại sao CSS?

Nếu bạn đã từng học qua HTML thì cũng biết HTML cũng hỗ trợ một số thuộc tính định dạng cơ bản cho text, picture, table, … nhưng nó không thật sự phong phú và chính xác như nhau trên mọi hệ thống. CSS cung cấp cho bạn hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả. Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt, nên bạn hoàn toàn có thể tự tin trang web của mình có thể hiển thị hầu như “như nhau” dù trên một hệ thống sử dụng Windows, Linux hay trên một máy Mac miễn là bạn đang sử dụng một phiên bản trình duyệt mới nhất. Sử dụng các mã định dạng trực tiếp trong HTML tốn hao nhiều thời gian thiết kế cũng như dung lượng lưu trữ trên đĩa cứng. Trong khi đó CSS đưa ra phương thức “tờ mẫu ngoại” giúp áp dụng một khuôn mẫu chuẩn từ một file CSS ở ngoài. Nó thật sự có hiệu quả đồng bộ khi bạn tạo một website có hàng trăm trang hay cả khi bạn muốn thay đổi một thuộc tính trình bày nào đó. Hãy thử tưởng tượng bạn có một website với hàng trăm trang và bạn muốn thay đổi font chữ hay màu chữ cho một thành phần nào đó. Đó thật sự sẽ là một công việc buồn chán và tốn nhiều thời gian. Nhưng với việc sử dụng CSS việc đó là hoàn toàn đơn giản cũng như là bạn có một trò ma thuật nào đó.

Ngoài ra, CSS còn cho phép bạn áp đặt những kiểu trình bày thích hợp hơn cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại,… CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.

1.3. Học CSS cần những gì?

Thật sự không có một điều kiện gì được quy định khi học CSS. Nhưng ở một khía cạnh nào đó thì một sự chuẩn bị cho một cuộc hành trình dù là dễ nhất vẫn không thừa vì ít nhất nó sẽ giúp bạn làm tốt hơn.

* Hành trang thứ nhất mà bạn nên có là một kiến thức về HTML, nó không thật sự cần thiết nếu bạn chỉ dùng CSS để trình bày cho một trang HTML có sẵn (như làm skin cho blog chẳng hạn), nhưng bạn vẫn cần biết ý nghĩa một số thẻ HTML, nó sẽ có ích khi bạn viết CSS. Tuy nhiên, nếu bạn muốn tự thiết kế, trình bày một trang web của riêng mình thì tùy theo quy mô trang web, bạn cần phải học thêm cả HTML, XHMTL, Javascript và một số ngôn ngữ lập trình web khác.
* Hành trang thứ hai chính là một trình soạn thảo văn bản để bạn có thể viết mã CSS. Ở đây, Pearl khuyên bạn nên sử dụng một trình soạn thảo đơn giản như Notepad, Wordpad trong Windows hay Pico trong Linux, Simple Text trong Mac. Nó sẽ giúp bạn chắc là code là của bạn và không có bất kỳ một sự can thiệt nào từ chương trình như khi dùng DreamWeaver, FrontPage, Golive,…
* Hành trang thứ ba của bạn chính lả một phiên bản mới nhất của trình duyệt mà bạn thường dùng.

Và một điều nữa mà mình muốn đề nghị đó là các bạn hãy dành một ít thời gian để thực hành CSS sau mỗi bài học nó sẽ thật sự có ích cho bạn. Thực hành chẳng những giúp bạn vận dụng nhuần nhuyễn các bài học mà còn có tác dụng giải thích ngược lại những lý thuyết mà bạn chưa hiểu.

Bây giờ nếu bạn đã thật sự chuẩn bị chúng ta hãy chuyển qua chương tiếp theo để thật sự bước chân vào thế giới CSS.

Nguồn: link2caro - Cộng Đồng WordPress Việt Nam

thay đổi nội dung bởi: cakiemcia, 28-02-2010 lúc 10:32 PM
Trả Lời Với Trích Dẫn
  #2  
Old 28-02-2010, 10:06 PM
cakiemcia's Avatar
cakiemcia cakiemcia is offline
Member
 
Tham gia ngày: Feb 2010
Bài gởi: 64
Default

Simple CSS Bài 3: Background

Trong bài học này chúng ta sẽ được học về cách định màu nền/ảnh nền cho một trang web cũng như các kỹ thuật định vị, điều chỉnh ảnh nền.

3.1. Màu nền (thuộc tính background-color)

Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web. Các giá trị mã màu của background-color cũng giống như color nhưng
có thêm giá trị transparent để tạo nền trong suốt. Ví dụ sau đây sẽ chỉ cho chúng ta biết cách sử dụng thuộc tính background-color để định màu nền cho cả trang web, các thành phần h1, h2 lần lượt là xanh lơ, đỏ và cam.

Trích:
01 body {
02 background-color:cyan
03 }
04
05 h1 {
06 background-color:red
07 }
08 h2 {
09 background-color:orange
10 }

3.2. Ảnh nền (thuộc tính background-image)


Việc sử dụng ảnh nền giúp trang web trông sinh động và bắt mắt hơn. Để chèn ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính
background-image. Bây giờ chúng ta sẽ cùng làm một ví dụ minh họa để xem thuộc tính background-image sẽ hoạt động ra sao. Đầu tiên hãy tìm một tấm ảnh mà bạn thích, ở đây chúng ta sẽ lấy tấm ảnh logo.png. Sau đó, chúng ta sẽ viết CSS để đặt logo này làm ảnh nền trang web như sau:


Trích:
01 body {
02 background-image:url(logo.png)
03 }
04 h1 {
05 background-color:red
06 }
07 h2 {
08 background-color:orange
09 }
10 p {
11 background-color: #FDC689
12 }
Như các bạn đã thấy chúng ta sẽ phải chỉ định đường dẫn của ảnh trong cặp ngoặc đơn sau url. Do ảnh đặt trong cùng thư mục với file style3.css nên chúng ta chỉ cần ghi abc.jpg. Nhưng nếu chúng ta tạo thêm một thư mục img trong thư mục thì chúng ta sẽ phải ghi là background-image:url(img/abc.jpg). Đôi khi nếu không chắc lắm bạn có thể dùng đường dẫn tuyệt đối cho ảnh.

3.3. Lặp lại ảnh nền (thuộc tính background-repeat):

Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn
thừa. Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh nền. Thuộc tính này có 4 giá trị:

+ repeat-x: Chỉ lặp lại ảnh theo phương ngang.
+ repeat-y: Chỉ lặp lại ảnh theo phương dọc.
+ repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
+ no-repeat: Không lặp lại ảnh.

Bây giờ, chúng ta hãy thêm thuộc tính background-repeat này vào ví dụ trên thử xem sao.


Trích:
1 body {
2 background-image:url(logo.png);
3 background-repeat:no-repeat;
4 }
Các bạn xem, có phải ảnh nền đã không bị lặp lại như trong ví dụ trước, hãy thử thay đổi qua lại giữa các giá trị và xem kết quả tạo ra.

3.4. Khóa ảnh nền (thuộc tính background-attachment)


Background-attachment là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị:
+ scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.
+ fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.


3.5. Định vị ảnh nền (thuộc tính background-position)


Theo mặc định ảnh nền khi được chèn sẽ nằm ở góc trên, bên trái màn hình. Tuy nhiên với thuộc tính background-position bạn sẽ có thể đặt ảnh nền ở bất cứ vị
trí nào (trong không gian của thành phần mà nó làm nền). Background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính position. Như đơn vị chính xác như centimeters, pixels, inches,… hay các đơn vị qui đổi như %, hoặc các vị trí đặt biệt như top, bottom, left, right.

Ví dụ:
Giá trị Ý nghĩa

Trích:
background-position: 5cm 2cm Ảnh được định vị tại 5cm từ trái qua, 2 cm từ trên xuống
background-position: 20% 30% Ảnh được định vị tại 20% từ trái qua, 30% cm từ trên xuống
background-position: bottom left Ảnh được định vị ở góc trái phía dưới
Thuộc tính background rút gọn

Khi sử dụng quá nhiều thuộc tính CSS sẽ gây khó khăn cho người đọc, công tác chỉnh sửa cũng như tốn nhiều dung lượng ổ cứng cho nên CSS đưa ra một cấu trúc
rút gọn cho các thuộc tính cùng nhóm.

Ví dụ: Chúng ta có thể nhóm lại đoạn CSS sau


Trích:
1 background-color:transparent;
2 background-image: url(logo.png);
3 background-repeat: no-repeat;
4 background-attachment: fixed;
5 background-position: right bottom;
thành một dòng ngắn gọn:

Trích:
1 background:transparent url(logo.png) no-repeat fixed right bottom;
Từ ví dụ trên chúng ta có thể khái quát cấu trúc rút gọn cho nhóm background:
Trích:
background:<background-color> | <background-image> | <background-repeat> | <background-attachment> | <background-position>
Theo mặc định thì các thuộc tính không được đề cập sẽ nhận các giá trị mặc định.

Ví dụ: Chúng ta sẽ bỏ qua hai thuộc tính background-attachment và background-position ở dòng mã trên đi:


Trích:
1 background:transparent url(logo.png) no-repeat;
Hai thuộc tính không được chỉ định sẽ đơn thuần được thiết lập tới giá trị mặc định mà chúng ta điều biết là scroll và top left.

thay đổi nội dung bởi: cakiemcia, 28-02-2010 lúc 10:33 PM
Trả Lời Với Trích Dẫn
  #3  
Old 28-02-2010, 10:13 PM
cakiemcia's Avatar
cakiemcia cakiemcia is offline
Member
 
Tham gia ngày: Feb 2010
Bài gởi: 64
Default

Simple CSS Bài 4: Font Chữ


4.1. Thuộc tính font-family:


Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web. Theo đó, thì font đầu tiên được liệt kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên máy tính truy cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ được ưu tiên…cho đến khi có một font phù hợp.
Có hai loại tên font được dùng để chỉ định trong font-family: family-names (họ theo tên) và generic families (họ chung).

* Family-names: Tên cụ thể của một font. Ví dụ: Arial, Verdana, Tohama,…
* Generic families: Tên của một họ gồm nhiều font. Ví dụ: sans-serif (không chân), serif (có chân),…

Khi lên danh sách font dùng để hiển thị một trang web bạn sẽ chọn những font chữ mong muốn trang web sẽ được hiển thị để đặt ở các vị trí ưu tiên. Tuy nhiên, có thể những font này sẽ không thông dụng lắm nên bạn cũng cần chỉ định thêm một số font thông dụng dự phần như Arial, Tohama hay Times New Roman và bạn cũng được đề nghị đặt vào danh sách font của mình một generic families (thường thì nó sẽ có độ ưu tiên thấp nhất). Thực hiện theo cách này thì sẽ đảm bảo trang web của bạn có thể hiển thị tốt trên bất kỳ hệ thống nào.
Ví dụ sau chúng ta sẽ viết CSS để quy định font chữ dùng cho cả trang web là Times New Roman, Tohama, sans-serif, và font chữ dùng để hiển thị các tiêu đề h1, h2, h3 sẽ là Arial, Verdana và các font họ serif.


Trích:
1 body { font-family:"Times New Roman",Tohama,sans-serif }
2 h1, h2, h3 { font-family:arial,verdana,serif }
Mở trang web trong trình duyệt và kiểm tra kết quả. Chúng ta thấy phần tiêu đề sẽ được ưu tiên hiển thị bằng font Arial, nếu trên máy không có font này thì font Verdana sẽ được ưu tiên và kế đó sẽ là các font thuộc họ serif.

Chú ý: Đối với các font có khoảng trắng trong tên như Times New Roman cần được đặt trong dấu ngoặc kép.

4.2. Thuộc tính font-style:


Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal),
in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web. Trong ví dụ
bên dưới chúng ta sẽ thử thực hiện áp dụng kiểu in nghiêng cho thành phần h1 và
kiểu xiên cho h2.


Trích:
1 h1 {
2 font-style:italic;
3 }
4 h2 {
5 font-style:oblique;
6 }
4.3. Thuộc tính font-variant:

Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ.
Một font small-caps là một font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn để thay thế những chữ in thường. Nếu như font chữ dùng để hiển thị không có sẵn font small-caps thì trình duyệt sẽ hiện chữ in hoa để thay thế.
Trong ví dụ sau chúng ta sẽ sử dụng kiểu small-caps cho phần h1


Trích:
1 h1 {
2 font-variant:small-caps
3 }
4.4. Thuộc tính font-weight:

Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold). Ngoài ra, một số trình duyệt cũng hỗ trợ mô tả độ in đậm bằng các con số từ 100 – 900.
Thử in đậm phần p:


Trích:
1 p {
2 font-weight:bold
3 }
4.5. Thuộc tính font-size:

Kích thước của một font được định bởi thuộc tính font-size.
Thuộc tính này nhận các giá trị đơn vị đo hỗ trợ bởi CSS bên cạnh các giá trị xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger. Tùy theo mục đích sử dụng của website bạn có thể lựa chon những đơn vị phù hợp. Ví dụ trang web của bạn phục vụ chủ yếu là những người già, thị lực kém hay những người dùng sử dụng các màn hình máy tính kém chất lượng thì bạn có thể cân nhấc sử dụng các đơn vị qui đổi như em hay %. Như vậy sẽ đảm bảo font chữ trên trang web của bạn luôn ở kích thước phù hợp.
Ở ví dụ sau trang web sẽ có kích cỡ font là 20px, h1 là 3em = 3 x 20 = 60px, h2 là 2em = 40px.


Trích:
1 body {
2 font-size:20px
3 }
4 h1 {
5 font-size:3em
6 }
7 h2 {
8 font-size:2em
9 }
Thuộc tính font rút gọn: Tương tự như các thuộc tính background, chúng ta cũng có thể rút gọn các thuộc tính font lại thành một thuộc tính đơn như ví dụ sau:

Trích:
1 h1 {
2 font-style: italic;
3 font-variant:small-caps;
4 font-weight: bold;
5 font-size: 35px;
6 font-family: arial,verdana,sans-serif;
7 }
Thành

1	h1 {
2	font: italic bold 35px arial,verdana,sans-serif;
3	}
Cấu trúc rút gọn cho các thuộc tính nhóm font: Font : | < font-variant> | | |< font-family>
Đi qua bài học này, bạn đã nắm bắt được cách định font chữ cho một thành phần trang web cũng như cách sử dụng các kiểu font in nghiêng, in đậm, font small-caps và cách qui định kích thước font. Trong bài học kế chúng ta sẽ được tìm hiểu thêm về các thuộc tính CSS về định dạng văn bản.

thay đổi nội dung bởi: cakiemcia, 28-02-2010 lúc 10:34 PM
Trả Lời Với Trích Dẫn
  #4  
Old 28-02-2010, 10:19 PM
cakiemcia's Avatar
cakiemcia cakiemcia is offline
Member
 
Tham gia ngày: Feb 2010
Bài gởi: 64
Default

Simple CSS Bài 6: Định dạng liên kết

Một thành phần rất quan trọng trong mọi website chính là liên kết. Cũng như một đối tượng văn bản thông thường, chúng ta hoàn toàn có thể áp dụng các thuộc tính định dạng đã học ở 2 bài trước như định font chữ, gạch chân, màu chữ,… cho một liên kết. Hơn nữa, CSS còn cung cấp một điều khiển đặc biệt được gọi là pseudo-classes. Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm (a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được thăm (a:visited) hay khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active). Với điều khiển pseudo-classes cùng với các thuộc tính CSS đã học chắc chắn sẽ mang lại rất nhiều ý tưởng về trang trí liên kết cho trang web.
Sau đây chúng ta sẽ tiến hành một số ví dụ để tìm hiểu thêm về các khả năng trang trí cho một liên kết dựa trên pseudo-classes.

Ví dụ 1: Ví dụ này chúng ta sẽ áp dụng 4 màu sắc khác nhau cho từng trạng thái liên kết: các liên kết chưa thăm có màu xanh lá; các liên kết mouse over sẽ có màu đỏ tươi; các liên kết đã thăm sẽ có màu đỏ và các liên kết đang kích hoạt có màu tím.


01	a:link {
02	color:#00FF00
03	}
04	a:hover {
05	color:#FF00FF
06	}
07	a:visited {
08	color:#FF0000
09	}
10	a:active {
11	color:# 662D91
12	}
Ví dụ 2: Tạo các hiệu ứng tương ứng với trình trạng liên kết: các liên chưa thăm có màu xanh lá, kích cỡ font 14px; liên kết mouse over có màu đỏ tươi, kích cỡ font 1.2em, hiệu ứng nhấp nháy; liên kết đã thăm sẽ có màu xanh da trời, không có đường gạch chân; các liên kết đang kích hoạt có màu tím và font dạng small-caps.
01	a:link {
02	color:#00FF00;
03	font-size:14px
04	}</p><br />
05	<p>a:hover {
06	color:#FF00FF;
07	font-size:1.2em;
08	text-decoration:blink
09	}</p><br />
10	<p>a:visited {
11	color:#FF0000;
12	text-decoration:none
13	}</p><br />
14	<p>a:active {
15	color:# 662D91;
16	font-variant:small-caps
17	}
Ví dụ 3: Ví dụ này cũng tạo cho liên kết hiệu ứng màu sắc giống ví dụ 2 nhưng sẽ có thêm 1 số hiệu ứng: các liến kết sẽ có khung viền màu đen, kích cỡ font 14px; liên kết mouse over có nền light cyan; các liên kết đã thăm có nền light yellow.

01	a {
02	border:1px solid #000;
03	font-size:14px
04	}</p><br />
05	<p>a:link {
06	color:#00FF00;
07	}</p><br />
08	<p>a:hover {
09	background-color:#00BFF3;
10	color:#FF00FF;
11	font-size:1.2em;
12	text-decoration:blink
13	}</p><br />
14	<p>a:visited {
15	background-color:#FFF568;
16	color:#FF0000;
17	text-decoration:none
18	}</p><br />
19	<p>a:active {
20	color:#662D91;
21	font-variant:small-caps
22	}
Ba ví dụ trên chỉ là một tí gợi ý về khả năng kết hợp các thuộc tính CSS với pseudo-classes để tạo nên nhiều hiệu ứng hấp dẫn cho trang web.

thay đổi nội dung bởi: cakiemcia, 28-02-2010 lúc 10:22 PM
Trả Lời Với Trích Dẫn
  #5  
Old 28-02-2010, 10:25 PM
cakiemcia's Avatar
cakiemcia cakiemcia is offline
Member
 
Tham gia ngày: Feb 2010
Bài gởi: 64
Default

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

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 Nam</p>
02	<ul>
03	<li>Hà Nội</li>
04	<li>TP. Hồ Chí Minh</li>
05	<li>Đà Nẵng</li>
06	<li>Thừa Thiên Huế</li>
07	<li>Khánh Hòa</li>
08	<li>Quãng Ninh</li>
09	<li>Tiền Giang</li>
10	</ul>
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 Nam</p>
02	<ul>
03	<li class=”tp”>Hà Nội</li>
04	<li class=”tp”>TP. Hồ Chí Minh</li>
05	<li class=”tp”>Đà Nẵng</li>
06	<li class=”tinh”>Thừa Thiên Huế</li>
07	<li class=”tinh”>Khánh Hòa</li>
08	<li class=”tinh”>Quãng Ninh</li>
09	<li class=”tinh”>Tiền Giang</li>
10	</ul>

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:


Trích:
1 li .tp {
2 color:FF0000
3 }
4 li .tinh {
5 color: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 Nam</p>
02	<ul>
03	<li id=”hanoi”>Hà Nội</li>
04	<li id=”hcmc”>TP. Hồ Chí Minh</li>
05	<li id=”danang”>Đà Nẵng</li>
06	<li class=”tinh”>Thừa Thiên Huế</li>
07	<li class=”tinh”>Khánh Hòa</li>
08	<li class=”tinh”>Quãng Ninh</li>
09	<li class=”tinh”>Tiền Giang</li>
10	</ul>
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ẻ <div> và <span> trong HTML và ý nghĩa 2 thẻ này đối với việc viết CSS.
Trả Lời Với Trích Dẫn
  #6  
Old 28-02-2010, 10:30 PM
cakiemcia's Avatar
cakiemcia cakiemcia is offline
Member
 
Tham gia ngày: Feb 2010
Bài gởi: 64
Default

Sory quên bài 5 , h post bù
Simple CSS Bài 5: Định dạng văn bản

5.1. Màu chữ (thuộc tính color):

Để định màu chữ cho một thành phần nào đó trên trang web chúng ta sử dụng thuộc tính color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ.
Ví dụ sau chúng ta sẽ viết CSS để định màu chữ chung cho một trang web là đen, cho tiêu đề h1 màu xanh da trời, cho tiêu đề h2 màu xanh lá chúng ta sẽ làm như


1	body {
2	color:#000
3	}
4	h1 {
5	color:#0000FF
6	}
7	h2 {
8	color:#00FF00
9	}
5.2. Thuộc tính text-indent :

Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo cơ bản dùng trong CSS. Trong ví dụ sau chúng ta sẽ định dạng thụt đầu dòng một khoảng 30px cho dòng văn bản đầu tiên trong mỗi đoạn văn bản đối với các thành phần <p>

1	p {
2	text-indent:30px
3	}
5.3. Thuộc tính text-align :

Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bản cho các thành phần trong trang web.
Cũng tương tự như các lựa chọn canh chỉnh văn bản trong các trình soạn thảo văn bản thông dụng như MS Word, thuộc tính này có tất cả 4 giá trị : left (canh trái – mặc định), right (canh phải), center (canh giữa) và justify (canh đều).
Trong ví dụ sau chúng ta sẽ thực hiện canh phải các thành phần h1, h2 và canh đều đối với thành phần <p>


1	h1, h2 {
2	text-align:right
3	}
4	p {
5	text-align:justify
6	}
5.4. Thuộc tính letter-spacing:

Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản.
Muốn định khoảng cách giữa các ký tự trong thành phần h1, h2 là 7px và thành phần <p> là 5px chúng ta sẽ viết CSS sau:


1	h1, h2 {
2	letter-spacing:7px
3	}
4	p { letter-spacing:5px }
5.5. Thuộc tính text-decoration:

Thuộc tính text-decoration giúp bạn thêm các hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp nháy (blink).
Ví dụ sau chúng ta sẽ định dạng gạch chân cho thành phần h1, gạch đầu thành phần h2


1	h1 {
2	text-decoration:underline
3	}
4	h2 {
5	text-decoration:overline
6	}
5.6. Thuộc tính text-transform:

Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào văn bản gốc trên HTML. Thuộc tính này có tất cả 4 giá trị: uppercase (in hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng – mặc định).
Trong ví dụ dưới đây chúng ta sẽ định dạng cho thành phần h1 là in hoa, h2 là in hoa đầu mỗi ký tự.


1	h1 {
2	text-transform:uppercase
3	}
4	h2 {
5	text-transform:capitalize
6	}

thay đổi nội dung bởi: cakiemcia, 28-02-2010 lúc 10:34 PM
Trả Lời Với Trích Dẫn
  #7  
Old 28-02-2010, 10:40 PM
cakiemcia's Avatar
cakiemcia cakiemcia is offline
Member
 
Tham gia ngày: Feb 2010
Bài gởi: 64
Default

Simple CSS Bài 8: Span & Div

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

Thẻ <span> 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

Click the image to open in full size.

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ẻ <span> vào đoạn HTML như sau:

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

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


1	.nhanmanh {
2	font-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ẻ <div>:

Cũng như <span>, <div> 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à <span> dùng để nhóm một khối phần tử trong khi đó <div> 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 <div> như sau: Ví dụ 8.2


Click the image to open in full size.

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ội</li>
05	<li>TP. Hồ Chí Minh</li>
06	<li>Đà Nẵng</li>
07	</div>
08	<div id="tinh">
09	<li>Thừa Thiên Huế</li>
10	<li>Khánh Hòa</li>
11	<li>Quãng Ninh</li>
12	<li>Tiền Giang</li>
13	</div>
14	</ul>
Và đoạn CSS cho mục đích này sẽ là:

1	#tp {
2	color:blue;
3	}
4	#tinh {
5	color:green;
6	}
Trong hai bài học trên, chúng ta đã được học qua về id, class, <div>, <span> 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.
Trả Lời Với Trích Dẫn
  #8  
Old 28-02-2010, 10:43 PM
cakiemcia's Avatar
cakiemcia cakiemcia is offline
Member
 
Tham gia ngày: Feb 2010
Bài gởi: 64
Default

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



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
Click the image to open in full size.

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:
Click the image to open in full size.

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)

Click the image to open in full size.
Trả Lời Với Trích Dẫn
  #9  
Old 28-02-2010, 10:46 PM
cakiemcia's Avatar
cakiemcia cakiemcia is offline
Member
 
Tham gia ngày: Feb 2010
Bài gởi: 64
Default

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

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.


1	p {
2	width: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.


1	p {
2	height: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.
Trả Lời Với Trích Dẫn
  #10  
Old 28-02-2010, 10:49 PM
cakiemcia's Avatar
cakiemcia cakiemcia is offline
Member
 
Tham gia ngày: Feb 2010
Bài gởi: 64
Default

Simple CSS Bài 11: Float & Clear

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-clearmộ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:
Click the image to open in full size.
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 {
2	float: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

Click the image to open in full size.

01	.column1, .column2 {
02	width: 45%;
03	float:left;
04	text-align:justify;
05	padding:0 2%;
06	}
07	 
08	.column1 {
09	border:1px solid black;
10	}
11	 
12	.column2 {
13	border: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.
Trả Lời Với Trích Dẫn
Trả lời Gởi Ðề Tài Mới

Tags
(ai, bạn, bản, cái, code, css, căn, dẫn, dụng, edit, file, hướng, , muốn, nên, nha), sử, thì, đọc

Ðiều Chỉnh Kiếm Trong Bài
Kiếm Trong Bài:

Kiếm Chi Tiết

Chuyển đến


Múi giờ GMT. Hiện tại là 09:14 PM.
Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
vdata

Bo-Blog Việt Nam

Bo-blog
9.9 10 13259