Bài giảng Thiết kế Web - Bài 4: CSS - Phan Thanh Sơn

Download

THIẾT KẾ WEB

Phan Thanh Sơn

Khoa Công nghệ thông tin

Email: webmaster.tsq[email protected]

Tel: 0989.937.737

Nội dung bài giảng

1. Giới thiệu

2. Phâ n loại

3. Sử dụng

4. Khai bá o

5. Tạo và sử dụng lớp

6. Tạo và sử dụng định danh

7. Cá c thuộc tí nh

2/27

1. Giới thiệu

CSS = Cascading Style Sheet:

Mẫu quy định cá ch thức thể hiện

cá c thẻ HTML

Style được đưa vào HTML để tiết

kiệm được rất nhiều thời gian và

cô ng sức cho việc thiết kế web.

Có thể định nghĩa nhiều style vào

một thẻ HTML (Cascading)

3/27

1. Giới thiệu (tt)

Bảng kiểu (style sheet) nhằm thoả mản nhu cầu

– Thẩm mỹ

– Giữ tí nh thống nhất cho trang HTML.

– Định dang một số tí nh chất thô ng thường cùng một lúc

cho tất cả cá c đối tượng trên trang

Tiện í ch của CSS :

– Tiết kiệm thời gian

– Khi thay đổi định dạng chỉ cần thay đổi CSS, cá c trang

khá c sẽ tự động cập nhật sự thay đổi đó

– Có thể dùng cá c CSS cùng với JavaScript để tạo cá c

hiệu ứng đặc biệt

Bất lợi của CSS:

– Khô ng một trì nh duyệt nào chấp nhận nó hoàn toàn

– Phải mất thời gian để học cá ch sử dụng

4/27

1. Giới thiệu (tt)

Bảng kiểu (style sheet) nhằm thoả mản nhu cầu

– Thẩm mỹ

– Giữ tí nh thống nhất cho trang HTML.

– Định dang một số tí nh chất thô ng thường cùng một lúc

cho tất cả cá c đối tượng trên trang

Tiện í ch của CSS :

– Tiết kiệm thời gian

– Khi thay đổi định dạng chỉ cần thay đổi CSS, cá c trang

khá c sẽ tự động cập nhật sự thay đổi đó

– Có thể dùng cá c CSS cùng với JavaScript để tạo cá c

hiệu ứng đặc biệt

Bất lợi của CSS:

– Khô ng một trì nh duyệt nào chấp nhận nó hoàn toàn

– Phải mất thời gian để học cá ch sử dụng

5/27

2. Phân loại

Có 4 loại style:

a. Inline Style (Style được qui định trong 1 thẻ

HTML cụ thể)

b. Internal Style (Style được qui định trong phần

<HEAD> của 1 trang HTML )

c. External Style (style được qui định trong file

.CSS ngoài)

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

6/27

3. Sử dụng

A. Đặt trong <head>…</head>

Với Internal style:

<!--

Nội dung định nghĩa style

-->

</style>

7/27

3. Sử dụng (tt)

Ví dụ

<HTML>

<HEAD>

H1,H2 { color: limegreen;

font-family: Arial }

</STYLE>

</HEAD>

<BODY>

<H1>This is the H1 element</H1>

<H2>This is the H2 element</H2>

<H3>This is the H3 element with its default style as

displayed in the browser</H3>

</BODY>

</HTML>

8/27

3. Sử dụng (tt)

B. Với External style:

a. Định nghĩa style trong file riêng (thường có

đuôi .CSS)

b. Nhúng file CSS đã định nghĩa vào trang

web:

rel="stylesheet"

type="text/css">

C. Với Inline style:

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

9/27

3. Sử dụng (tt)

Chú ý: Style phâ n biệt chữ hoa,

chữ thường

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

Đoạn ghi chú

10/27

4. Khai bá o

selector {

Property1: Value1 Value2;

Property2: Value3 Value4;

}

11/27

4. Khai bá o (tt)

Trường hợp 1 thẻ: Đặt selector là

tên_thẻ

p {

color: red;

}

Khai bá o đồng thời nhiều thẻ: Viết

danh sá ch tên thẻ phâ n cá ch bởi dấu

phẩy

h1,h2,h3,h4,h5,h6{

font-family:arial;

}

12/27

5. Tạo và sử dụng lớp

A. Gắn với thẻ cụ thể: Đặt selector là

tên_thẻ.tên_lớp

p.loai1{

color:red;

}

p.loai2{

color:blue;

}

B. Khô ng gắn với thẻ cụ thể: bỏ phần tên_thẻ đi,

giữ lại dấu chấm:

.loai3{

color:green;

}

13/27

5. Tạo và sử dụng lớp (tt)

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

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

D. Ví dụ:

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

lực</h1>

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

xanh</h2>

14/27

6. Tạo và sử dụng định danh

Tương tự như class. Thay dấu chấm (.) thành

dấu thăng (#).

Cho thẻ cụ thể:

tên_thẻ#định_danh{…}

Tổng quá t: #định_danh{…}

Ví dụ:

p#doan1{

color:red;

}

#loai2{

color:blue;

}

15/27

6. Tạo và sử dụng định danh (tt)

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ụ:

16/27

7. Các thuộc tính định dạng

A. ĐỊNH DẠNG VĂN BẢN

a. Chọn bộ font:

font-family: familyname1, familyname2…

b. Tạo chữ nghiêng:

Font-style: italic

c. Tạo chữ đậm:

Font-weight: bold

d. Định cỡ chữ:

Font-size: xx-small hoặc x-small, small, medium, large, x-

large, xx-large hoặc Font-size:12pt (giá trị cụ thể)

Có thể định dạng cá c thuộc tí nh chữ nghiêng, đậm và

cỡ chữ cùng một lúc:

Font: italic bold size

17/27

7. Các thuộc tính định dạng (tt)

e. Màu của chữ:

Color: colorName hoặc #rrggbb

f. Màu nền của chữ:

Background:colorName hoặc #rrggbb

g. Định khoảng cá c giữa cá c từ, cá c ký tự:

Word-spacing:n (n: khoảng cá ch giữa cá c từ, tí nh

bằng

pixel)

Letter-spacing:n (n: khoảng cá ch giữa cá c từ, tí nh

bằng pixel)

h. Canh lề cho văn bản:

Text-Align: left, right, center, justify

i. Thay đổi dạng chữ:

Text-transform: capitalize, uppercase, lowercase

18/27

7. Các thuộc tính định dạng (tt)

B. ĐỊNH DẠNG DANH SÁ CH

List-style: circle chấm trò n rỗng

List-style: disc chấm trò n đen

List-style: square chấm đen vuô ng

List-style: decimal đánh số ả rập

List-style: lower-alpha thứ tự alpha

List-style: upper-alpha thứ tự alpha chữ in hoa

List-style: upper-roman số la mã hoa

List-style: lower-roman số la mã thường

List-style-image:url: hì nh làm bullet

19/27

7. Các thuộc tính định dạng (tt)

A. Ví dụ:

<li><font size="+3" color="#FF0000">Inline style

</font>

<li><font size="+3" color="#FF0000">Internal

style</font>

<li>font size="+3" color="#FF0000">External

style</font>

</ul>

20/27

Tải về để xem bản đầy đủ

25 trang baolam 24501 Free

Download

Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế Web - Bài 4: CSS - Phan Thanh Sơn", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

bai_giang_thiet_ke_web_bai_4_css_phan_thanh_son.ppt