Bài giảng Thiết kế và lập trình Web - Bài 3: CSS – Casscading style sheets

Sử dụng và Phân loại CSS - External Style Sheet  Mọi style đều lưu trong file có phần mở rộng là *.CSS.  File CSS: lưu trữ nhiều style theo cú pháp kiểu 2[r]

(1)

Thiết kế lập trình Web

Viện CNTT & TT

Bài

(2)

Nội dung

 Giới thiệu CSS

 Định nghĩa Style

 Sử dụng Phân loại CSS

(3)

Nội dung

(4)

Giới thiệu CSS

 CSS = Casscading Style Sheets

 Dùng để mô tả cách hiển thị thành phần trang WEB

 Ban đầu HMTL

– Tập quy tắc cho phép NSD xem trang Web

– Khơng hỗ trợ nhà thiết kế có nhiều quyền chi phối thiết

kế

=> Các trình duyệt bổ sung thêm thẻ HTML riêng, không theo chuẩn

(5)

Giới thiệu CSS

 Style tiết kiệm thời gian

 CSS dễ thay đổi

 Sự quán

 Khả chi phối đa dạng

(6)

Giới thiệu CSS – Ví dụ

Without CSS

(7)

Nội dung

(8)

Định nghĩa Style

Kiểu

<tag style =

“property1:value1; property2:value2; ……… propertyN:valueN;”>…</tag> Kiểu SelectorName { property1:value1; property2:value2; ……… propertyN:valueN;}

<tag class = “SelectorName”> ………

</tag>

Ví dụ:

<h1 style=“

color : blue;

font-family : Arial;” > DHKHTN </h1>

Ví dụ: .TieuDe1 {

color: red;

(9)

Định nghĩa Style – Ghi

 Giống Ghi C++

 Sử dung /*Ghi chú*/

 Ví dụ :

 SelectorName {

property1:value1; /*Ghi chu 1*/

property2:value2; /*Ghi chu 2*/

………

(10)

Nội dung

(11)

Sử dụng Phân loại CSS – Phân loại

 Gồm loại CSS

– Inline Style Sheet (Nhúng CSS vào tag HTML)

– Embedding Style Sheet (Nhúng CSS vào trang web)

(12)

Sử dụng Phân loại CSS - Inline Style Sheet

 Định nghĩa style thuộc tính style tag

HTML

 Theo cú pháp kiểu

 Không sử dụng lại

 Ví dụ:

(13)

Sử dụng Phân loại CSS - Embedding Style Sheet

 Còn gọi Internal Style Sheet Document-Wide Style Sheet

 Mọi định nghĩa style đặt tag <style> trang HTML  Định nghĩa style theo cú pháp kiểu

 Trang HTML có nội dung sau:

<head>

<!

SelectorName {

property1:value1; property2:value2; ………

propertyN:valueN;} >

</style>

(14)

Sử dụng Phân loại CSS - Embedding Style Sheet

<HTML>

<HEAD>

<TITLE>

Embedded Style Sheet </TITLE>

<!

P {color: red; font-size: 12pt; font-family: Arial;}

H2 {color: green;} >

</STYLE>

</HEAD>

<H2>This is green</H2>

<P>This is red, 12 pt and Garamond.</P>

(15)

Sử dụng Phân loại CSS - External Style Sheet  Mọi style lưu file có phần mở rộng *.CSS

 File CSS: lưu trữ nhiều style theo cú pháp kiểu

 Trong file HTML: liên kết tag link Cú pháp:

<head>

 Trang HTML : Liên kết tag style với @import url Cú pháp

<head>

@import url(URL);

</style>

(16)

Sử dụng Phân loại CSS - External Style Sheet Trong tập tin MyStyle.CSS

H2 { FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; font-color: white }

Trong trang Web : demo.htm

<html>

<head>

<link HREF="MyStyle.css"

REL="stylesheet" > </head>

<body>

<h2>This is an H2 </h2>

(17)

Sử dụng Phân loại CSS – So sánh, Đánh giá

Inline Style Sheet Embedding Style Sheet External Style Sheet

Khai báo Kiểu Kiểu Kiểu

Cú pháp <p style=“color:red;”>

Test </p> <style type=“text/css”> TieuDe1{color: red;} </style> <p class=“TieuDe1”> Test </p>

</p>

Ưu điểm • Dễ dàng quản lý Style theo tag tài liệu web • Có độ ưu tiên cao

• Dễ dàng quản lý Style theo tài liệu web

• Khơng cần tải thêm 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 Style trình duyệt cache lại

Khuyết điểm • Cần phải Khai báo lại thông tin style tài liệu Web tài liệu khác 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 tài liệu khác lần sử dụng

(18)

Sử dụng Phân loại CSS – Độ ưu tiên

 Thứ tự ưu tiên áp dụng định dạng sử dụng loại CSS (độ ưu tiên giảm dần) :

1 Inline Style Sheet

2 Embedding Style Sheet

3 External Style Sheet

(19)

(20)

Nội dung