WebCourse bai04 CSS Casscading Style Sheets

WebCourse bai04

Khoa CNTT – ĐH.KHTN

Bài 4

Giới thiệu về CSS

trang WEB

nhanh chóng (cascading)

Định nghĩa Style – Ghi chú

ƒ SelectorName {

property1:value1; /*Ghi chu 1*/

property2:value2; /*Ghi chu 2*/

………

propertyN:valueN;}

Các loại CSS

ƒ Gồm 3 loại CSS

1 Inline Style Sheet

2 Embedding Style Sheet

• Nhúng trong tag <style> của trang HTML

ƒ Định nghĩa style theo cú pháp kiểu 2

3 External Style Sheet

ƒ Mọi style đều lưu trong file có phần mở rộng là *.CSS

ƒ Định nghĩa style theo cú pháp kiểu 2

ƒ Tạo liên kết đến file CSS

1 Trong trang HTML: liên kết bằng tag link Cú pháp:

<style type=“text/css” media="all | print | screen" >

@import url( URL );

</style>

External Style Sheet – Ví dụ

Trong tập tin MyStyle.CSS

So sánh, Đánh giá

Inline Style Sheet Embedding Style Sheet External Style Sheet

<p class=“TieuDe1”>

Test

</p>

Ưu đi ểm • D ễ dàng quản lý Style

theo t ừng tag của tài liệu

web

• Có đ ộ ưu tiên cao nhất

• D ễ dàng quản lý Style

theo t ừng tài liệu web

• Không c ần tải thêm các

trang thông tin khác cho style

• Có th ể thiết lập Style cho

nhi ều tài liệu web.

• Thông tin các Style đư ợc

trình duy ệt cache lại

Khuy ết điểm • C ần phải Khai báo lại

thông tin style trong t ừng

tài li ệu Web và các tài liệu

khác m ột cách thủ công.

• Khó c ập nhật style

• C ần phải khai báo lại

thông tin style cho các tài

li ệu khác trong mỗi lần sử

Độ ưu tiên

loại CSS (độ ưu tiên giảm dần) :

1 Inline Style Sheet

3 External Style Sheet

#test {color: green;}

/* ND c ủa bất kỳ tag có thuộc tính id=test

đ ều bị định dạng màu chữ=xanh lá */

.class Đ ịnh dạng áp dụng cho ND tất cả

các tab có thu ộc tính class trong

tà li ệu Web

.note {color: yellow;}

/* ND c ủa bất kỳ tag có thuộc tính

class=note đ ều bị định dạng màu

ch ữ=vàng*/

element class Định dạng áp dụng cho ND các

tag Element có thu ộc tính class

Lo ại Mô t ả phạm vi ảnh hưởng Ví d ụ

p strong {color: purple;}

/* ND c ủa các thẻ <strong> nằm trong thẻ

<p> đ ều bị định dạng màu chữ=màu tía */

Pseudo Class

Pseudo

element

Đ ịnh dạng được áp dụng dựa vào

tr ạng thái của các Element

(Không xu ất hiện trong mã lệnh

HTML)

Các loại Selector (tt)

Selector trong CSS - Element

Selector trong CSS – ID rules

Selector trong CSS – Class rules

thuộc tính class.

Selector trong CSS – Kết hợp Element và Class

Selector trong CSS - Contextual Selection

chuổi tag theo đúng thứ tự

Selector trong CSS – Pseudo Class

chuột.

Selector trong CSS – Pseudo Element

của ký tự, của dòng văn bản

ƒ :first-letter, :first-line

khác.

Selector trong CSS – Pseudo Element