30/7/10

CSS How To...

Khi một trình duyệt đọc một định dạng từng phần, nó sẽ chuyển tài liệu theo nó.

Ba cách để chèn CSS

Có 3 cách để chèn một đingj.
  • Định dạng từng phần bên ngoài
  • Định dạng từng phần bên trong
  • Định dạng đường thẳng

Phần định dạng bên ngoài

Định dạng từng phần bên ngoài là một ý tưởng khi định dạng được thêm vào nhiều trang. Với một định dạng từng phần bên ngoài, bạn có thể tìm kiếm toàn bộ liên kết Web bởi sự thay đổi một dữ liệu. Mỗi trang phải liên kết để sử dụng định dạng từng phần: thẻ <link>. Thẻ <link> nằm bên trong của phần <head></head>.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Một định dạng từng phần có thể được viết bới bất cứ biên tập văn bản nào. Dữ liệu không nên chứa bất cứ thẻ HTML nào. Định dạng từng phần của bạn nên được lưu dữ với một đuôi mở rộng *.css. Một ví dụ của file định dạng từng phần được hiển thị bên dưới:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}


Remark Không được để khoảng các giữa các thuộn tính giá trị và đơn vị! "margin-left:20 px" (thay bằng "margin-left:20px") sẽ làm việc trong IE, nhưng không làm việc trong FireFox hoặc Opera.

Định dạng phần tử bên trong

Một định dạng phần tử bên trong nên được sử dụng khi một tài liệu đơn có một định dạng duy nhất. Bạn có thể đặt định dạng bên trong thẻ lựa chọn <head></head> của một trang HTML, bằng việc sử dụng thẻ <style>, giống như sau:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>


Định dạng theo đường thẳng

Một định dạng theo đường thẳng kém nhiều thuận lợi so với định dạng từ phần bởi việc trình bày các nội dung lộn xỗn. Sự dụng phương pháp này là thừa!
Để sự dụng định dạng theo đường thẳng. bạn sử dụng thuộc tính định dạng trong thẻ relavant. Thuộc tính định dạng này có thể chứa đựng bất kì thuộc tính CSS nào. Ví dụ hiện thị cách để thay đổi màu và cân trái của đoạn sau:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>


Nhiều định dạng từng phần

Nếu một số thuộc tính đã được thiết lập cho sự lựa chọn giống nhau trong một định dạng từng phần khác nhau., giá trị sẽ được kế thừa từ nhiều định dạng toàn phần
Ví dụ, một định dạng toàn phần bên trong có những thuộc tính này cho phần tử h3

h3
{
color:red;
text-align:left;
font-size:8pt;
}
Và một định dạng từng phần bên trong có những thuộc tính bày cho phần tử h3:
h3
{
text-align:right;
font-size:20pt;
}

Nếu một trang với định dạng từng phần bên trong cũng  liên kết với định dạng từng phần bên ngoài của những thuộc tính trong phần tử h3 sẽ là:.

color:red;
text-align:right;
font-size:20pt;

Màu sắc được kế thừa từ định dạng từng phần bên ngoài và cân lê văn bản và kích cỡ được thay thê bởi định dạng từng phần bên trong.

Nhiều định dạng sẽ lồng vào một

Định dạng có thể được chỉ rõ:
  • Bên trong là một phần tử HTML
  • Bên trong là phần đầu của một trang HTML
  • Một dữ liệu CSS bên ngoài.
Mẹo: Bất cứ nhiều định dạng từng phần bên ngoài có thể được suy ra từ bên trong một dữ liệu HTML đơn. 

Sắp xếp phân tầng

Định dạng gì sẽ được sử dụng khi có nhiểu hơn một định dạng xác định cho một phần tử HTML?
Nói chung, chúng ta cs thể nói rằng, tất cả định dạng sẽ "phân tầng" vào một định dạng từng phần "ảo" mới bởi quy tắc sau, nơi số 4 có thuộc tính cao nhất:
  1. Mặc định của trình duyêt.
  2. Định dạnh từng phần bên ngoài
  3. Định dạng từng phần bên trong (trong phần head)
  4. Định dạng theo đường thẳng (bên trong một phần tử HTML)
Vì vậy, một định dạng theo đường thẳng có ưu tiên cao nhất, điều này có nghĩa là, nó sẽ gạt qua một bên định dạng mặc định bên ngoài thẻ <head>, hoặc một định dạng phần tử bên ngoài, hoặc trình duyệt mặc định.

Remark Chú ý: Nếu liên kết đến định dạng phần tử bên ngoài được thay thế sau định dạng phần tử bên trong HTML <head>, định dạng phần tử bên ngoài sẽ gạt qua một bên định dạng phần tử bên trong.

0 nhận xét:

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] :-t b-( :-L

Đăng nhận xét

Lưu ý: Chỉ thành viên của blog này mới được đăng nhận xét.

Home | Forum | JavaScript | Services | Submit script | Documentary | Contact us | About us