Sử dụng CSS như thế nào? – CSS How to…?

images

Bài viết này sẽ cho chúng ta biết cách làm thế nào để hiển sử dụng CSS. Và hiển thị chúng  trên trình duyệt.

Khi chúng ta biết, khi một trình duyệt đọc một file CSS. Nó sẽ định dạng văn bản theo file CSS đó.

1. Chúng ta có 3 cách để chèn CSS. (Three Ways to Insert CSS)

3 cách để chèn CSS là:

– External Style Sheet. (chèn CSS từ 1 file riêng bên ngoài tài liêu HTML)

– Internal style sheet. (chèn CSS bên trong tài liệu HTML).

– Inline style. (chèn trực tiếp trong từng dòng HTML).

Sau đây chúng ta sẽ tìm hiểu từng cách trên.

2. External Style Sheet

– Một External style sheet lý tưởng là khi style đó được áp dụng cho nhiều trang. Với một External style sheet bạn có thể thay đổi toàn bộ giao diện của một trang web bằng cách thay đổi một tập tin. Mỗi trang phải liên kết với file CSS bằng cách sử dụng thẻ <link>. Thẻ <link> nằm trong phần head:

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

ví dụ trên sử dụng file “mystyle.css” nằm trong cùng folder với tài liệu HTML.

– Một External style có thể được viết bằng bất kỳ trình trình soạn thảo text nào. Tập tin không chứa bất kỳ thẻ html. Tài liệu CSS sẽ được lưu với đuôi mở rộng là “.css”. Dưới đây là một ví dụ về 1 style sheet:

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

* Lưu ý: không để khoảng trống giữa các giá trị thuộc tính và các đơn vị. Ví dụ như “margin-left:20   px” (nếu chính xác là “margin-left:20px”) làm việc được trong IE, nhưng Firefox hay Opera có thể không được.

– Các trình biên tập (soạn thảo) CSS được sử dụng phổ biến:

Blumentals HTML PAD (click vào đây để download Blumental HTML PAD 2010 phiên bản portalbe) : Đây là một trình biên tập CSS nói riêng và các tài liệu HTML nói riêng được sử dụng phổ biến nhất hiện nay. Nó hỗ trợ biên tập và xử lý file CSS và HTML rất mạnh. Dưới đây là giao điện chính của chương trình.

image

+ Notepad ++ : là một chương trình đơn giản, có hỗ trợ soạn thảo CSS. Để chọn ngôn ngữ cần biên tập bạn vào menu language –> C –> CSS.

+ Chương trình notepad có sẵn của Windows cũng có thể sử dụng để soạn thảo CSS. Bạn mở notepad lên viết code bình thường và sau đó chọn save as để lưu file với đuôi mở rộng là .css.

3. Internal Style Sheet

– Internal style sheet được sử dụng khi một tai liệu đơn có một một tập hợp các style. Các internal style được định nghĩa bên trong phần head của trang HTML, bằng cách sử dụng thẻ <style>, giống như ví dụ dưới đây:

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

 

4. Inline Style

– Một inline style làm chúng ta mất rất nhiều ưu điểm style sheet, bằng cách trộn lẫn nội dung với định dạng hiển thị. Rất ít ai sử dụng phương pháp này. Nhưng đã đề cập đến CSS thì phải nói sơ qua về nó.

– Để sử dụng inline style bạn sử dụng thuộc tính style bên trong các thẻ có liên quan. Các thuộc tính style có thể chứa thuộc tính CSS bất kỳ. Ví dụ này sẽ làm thay đổi màu sắc và canh lề trái của một đoạn văn bản:

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

 

5. Multiple Style Sheet

– Nếu một số thuộc tính có thiết lập giống nhau trong các style sheet khác nhau, các giá trị sẽ được kế thừa nhiều style sheet hơn.

– Ví dụ, một External style sheet có các thuộc tính co selector h3:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

và một internal style có các thuộc tính cho selector h3:

h3
{
text-align:right;
font-size:20pt;
}

Nếu trang với internal style được liên kết với các thuộc tính trang External style sheet thì h3 sẽ là:

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

Màu sắc được kế thừa từ External style sheet và các text-align, fort-size được thay thế bằng internal style sheet.

6. Nhiều style sẽ xếp 1 tầng (Multiple styles will cascade into one)

Các style có thể được xác định :

– Bên trong một phần tử HTML.

– Bên trong phần head của HTML.

– Trong một file CSS bên ngoài.

Mẹo (tip): Nhiều External style sheets có thể được tham chiếu bên trong một tài liệu HTML đơn.

Cascading order (phân cấp)

Style nào sẽ được sử dụng khi có nhiều hơn một style được xác định trong môt phần tử HTML?

– Nói chung, chúng ta có thể nói rằng tất cả các style sẽ xếp lớp vào một style sheet ảo mới. 4 thành phần sau đây sẽ có độ ưu tiên cao nhất.

+ Trình duyệt Web mặc định.

+ External style sheet.

+ Internal style sheet (trong phần head).

+ Inline style (bên trong phần tử HTML).

Vì vậy, mỗi một inline style (bên trong phần tử HTML) có độ ưu tiên cao nhất. Có nghĩa là nó sẽ ghi đè lên các định nghĩa trong thẻ <head>, hay một external style sheet hay một trình duyệt (một giá trị mặc định).

* Lưu ý: Nếu liên kết external style sheet được đặt sau internal style trong thẻ <head> của tài liệu HTML, External style sheet sẽ ghi đè lên internal style sheet.

Advertisements

About thanhcuong1990

Handsome and talent!! ^^
This entry was posted in CSS. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s