Chương 3: MỘT SỐ CÔNG CỤ THIẾT KẾ WEBSITE docx

– External Style style được qui định trong file .CSS ngoài– Browser Default thiết lập mặc định của trình duyệt • Thứ tự ưu tiên: Mức ưu tiên giảm dần từ trên xuống... Cách chèn CSS tt• V

Chương 3 MỘT SỐ CÔNG

9/3/2009 Công cụ thiết kế Web - CSS 2

9/3/2009 Công cụ thiết kế Web - CSS 4

– External Style (style được qui định trong file CSS ngoài)

– Browser Default (thiết lập mặc định của trình duyệt)

• Thứ tự ưu tiên: Mức ưu tiên giảm dần từ trên xuống

9/3/2009 Công cụ thiết kế Web - CSS 6

Cách chèn CSS (tt)

• Với External style:

– Định nghĩa style trong file riêng (thường có đuôi CSS)

– Nhúng file CSS đã định nghĩa vào trang web:

<link href=“địa chỉ file" rel="stylesheet" type="text/css">

• Với Inline style:

<tên_thẻ style=“tt1:gt1;tt2:gt2;…”>

Khai báo và sử dụng style

Chú ý khi viết style

• Style phân biệt chữ hoa, chữ thường

• Để ghi chú trong style sử dụng:

/*

*/

9/3/2009 Công cụ thiết kế Web - CSS 10

Khai báo style

selector {

Property1: Value1; Property2: Value2; }

9/3/2009 Công cụ thiết kế Web - CSS 12

Sử dụng lớp

• Đặt thuộc tính class của thẻ=“tên_lớp”:

<tên_thẻ class=“tên_lớp”>

• Ví dụ:

<p class=“loai1”>Đoạn này màu đỏ</p>

<h1 class=“loai2”>Style không có hiệu lực

</h1>

<h2 class=“loai3”>Tiêu đề màu xanh</h3>

9/3/2009 Công cụ thiết kế Web - CSS 14

Sử dụng định danh

• Mỗi định danh là duy nhất trên trang

• Đặt thuộc tính id của thẻ = định_danh

<tên_thẻ id=“định_danh”>

• Ví dụ:

<p id=“doan1”>Đoạn này màu đỏ</p>

<h1 id=“loai2”>Tiêu đề xanh</h1>

Một số trường hợp cụ thể

9/3/2009 Công cụ thiết kế Web - CSS 18

CSS cho nền

9/3/2009 Công cụ thiết kế Web - CSS 20

CSS cho nền (tt)

CSS và cho bản

9/3/2009 Công cụ thiết kế Web - CSS 22

CSS và cho bản (tt)

CSS và font

9/3/2009 Công cụ thiết kế Web - CSS 24

CSS và font (tt)

CSS và font (tt)

9/3/2009 Công cụ thiết kế Web - CSS 26

CSS và font (tt)

CSS và đường viền

9/3/2009 Công cụ thiết kế Web - CSS 28

9/3/2009 Công cụ thiết kế Web - CSS 30

9/3/2009 Công cụ thiết kế Web - CSS 32

9/3/2009 Công cụ thiết kế Web - CSS 34

A.bar1:hover {

COLOR: red;

FONT-SIZE: 13pt }

A.bar2:hover {

COLOR: red;

FONT-SIZE: 13pt }

</STYLE>

<STYLE>

.Item { cursor: hand;

font-family: VnArial;

font-size: 14;

font-style: normal;

background-color:#006666; color:ffffeb

} Item2 { cursor: hand;

font-family: VnArial;

font-size: 14;

font-style: normal;

background-color:#FFFFFF; color:blue

} colorbook {

font-family: Arial;

font-size: 16;

font-style: normal;

background-color:#000000; color:#ffffff

}

</STYLE>

Ví dụ

<A class=bar2 href="Dangky.htm">§¨ng ký</A>