0% found this document useful (0 votes)

23 views75 pages

LTWeb Bai03

The document discusses Cascading Style Sheets (CSS). It introduces CSS and its uses, including to describe how HTML elements are displayed on web pages. CSS is used to control properties like colors, fonts, spacing and layout. The document covers different ways of applying CSS styles, such as internal, embedded and external style sheets, and the order of precedence between these methods. Selectors in CSS are also discussed, including element, class and ID selectors to target specific HTML elements for styling.

Uploaded by

Thêm Nguyễn Thị

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

23 views75 pages

LTWeb Bai03

Uploaded by

Thêm Nguyễn Thị

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 75

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

Bài 3
CSS – Casscading Style Sheets

Viện CNTT & TT

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

Nội dung

 Giới thiệu CSS

 Định nghĩa Style
 Sử dụng và Phân loại CSS
 Selector trong CSS và phạm vi ảnh hưởng
Thiết kế và lập trình Web

Nội dung

 Giới thiệu CSS

 Định nghĩa Style
 Sử dụng và Phân loại CSS
 Selector trong CSS và phạm vi ảnh hưởng
Thiết kế và lập trình Web

Giới thiệu về CSS

 CSS = Casscading Style Sheets
 Dùng để mô tả cách hiển thị các thành phần trên trang
WEB
 Ban đầu HMTL
– Tập các quy tắc cho phép NSD xem các 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 các thẻ HTML riêng,
không theo chuẩn
 W3C (World Wide Web Consortium) ra đời CSS cho
phép hỗ trợ nhà thiết kế
Thiết kế và lập trình Web

Giới thiệu về CSS

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

 CSS dễ thay đổi
 Sự nhất quán
 Khả năng chi phối đa dạng
 Tạo ra định dạng chung cho toàn bộ Web
Thiết kế và lập trình Web

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

Without CSS

With CSS
Thiết kế và lập trình Web

Nội dung

 Giới thiệu CSS

 Định nghĩa Style
 Sử dụng và Phân loại CSS
 Selector trong CSS và phạm vi ảnh hưởng
Thiết kế và lập trình Web

Định nghĩa Style

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

Ví dụ: Ví dụ:
<h1 style=“ .TieuDe1 {
color : blue; color: red;
font-family : Arial;” > DHKHTN </h1> font-family: Verdana, sans-serif; }
<h1 class=“TieuDe1”> DHBKHN </h1>
Thiết kế và lập trình Web

Định nghĩa Style – Ghi chú

 Giống Ghi chú trong C++

 Sử dung /*Ghi chú*/
 Ví dụ :
 SelectorName {
property1:value1; /*Ghi chu 1*/
property2:value2; /*Ghi chu 2*/
………
propertyN:valueN;}
Thiết kế và lập trình Web

Nội dung

 Giới thiệu CSS

 Định nghĩa Style
 Sử dụng và Phân loại CSS
 Selector trong CSS và phạm vi ảnh hưởng
Thiết kế và lập trình Web

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

 Gồm 3 loại CSS

– Inline Style Sheet (Nhúng CSS vào tag HTML)
– Embedding Style Sheet (Nhúng CSS vào trang web)
– External Style Sheet (Liên kết CSS với trang web)
Thiết kế và lập trình Web

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

 Định nghĩa style trong thuộc tính style của từng tag
HTML.
 Theo cú pháp kiểu 1.
<tag style = “property1:value1;…propertyN:valueN;”> …. </tag>

 Không sử dụng lại được.

 Ví dụ:
<H1 STYLE="color: yellow">This is yellow</H1>
Thiết kế và lập trình Web

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

 Còn gọi là Internal Style Sheet hoặc Document-Wide Style Sheet
 Mọi định nghĩa style được đặt trong tag <style> của trang HTML.
 Định nghĩa style theo cú pháp kiểu 2.
 Trang HTML có nội dung như sau:
<head>
<style type=“text/css” >

</style>
</head>
Thiết kế và lập trình Web

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

<HTML>
<HEAD>
<TITLE>
Embedded Style Sheet
</TITLE>

<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H2>This is green</H2>
<P>This is red, 12 pt. and Garamond.</P>
</BODY>
</HTML>
Thiết kế và lập trình Web

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.

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

 Trang HTML : Liên kết bằng tag style với @import url. Cú pháp
<head>
<style type=“text/css” media="all | print | screen" >
@import url(URL);
</style>
</head>
Thiết kế và lập trình Web

Sử dụng và Phân loại CSS - External Style Sheet

Trong tập tin MyStyle.CSS Trong trang Web : demo.htm

H2 <html>
{ <head>
FONT-WEIGHT: bold; <title>Cass………</title>
FONT-SIZE: 16pt; <link HREF="MyStyle.css"
REL="stylesheet" >
COLOR: white;
</head>
FONT-STYLE: italic;
<body>
FONT-FAMILY: Arial;
<h2>This is an H2 </h2>
BACKGROUND-COLOR: red;
</body>
font-color: white
</html>
}
Thiết kế và lập trình Web

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

Inline Style Sheet Embedding Style Sheet External Style Sheet

Khai báo Kiểu 1 Kiểu 2 Kiểu 2

Cú pháp <p style=“color:red;”> <style type=“text/css”> <link rel=“stylesheet “
Test .TieuDe1{color: red;} href=“main.css” />
</p> </style>
<p class=“TieuDe1”> <p class=“TieuDe1”>
Test Test
</p> </p>
Ưu điểm • Dễ dàng quản lý Style theo • Dễ dàng quản lý Style theo • Có thể thiết lập Style cho
từng tag của tài liệu web. từng tài liệu web. nhiều tài liệu web.
• Có độ ưu tiên cao nhất • Không cần tải thêm các • Thông tin các Style được
trang thông tin khác cho trình duyệt cache lại
style
Khuyết điểm • Cần phải Khai báo lại • Cần phải khai báo lại • Tốn thời gian download file
thông tin style trong từng tài thông tin style cho các tài *.css và làm chậm quá trình
liệu Web và các tài liệu khác liệu khác trong mỗi lần sử biên dịch web ở trình duyệt
một cách thủ công. dụng trong lần đầu sử dụng
• Khó cập nhật style
Thiết kế và lập trình Web

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

 Thứ tự ưu tiên áp dụng định dạng khi sử dụng các

loại CSS (độ ưu tiên giảm dần) :
1. Inline Style Sheet
2. Embedding Style Sheet
3. External Style Sheet
4. Browser Default
Thiết kế và lập trình Web
Thiết kế và lập trình Web

Nội dung

 Giới thiệu CSS

 Định nghĩa Style
 Sử dụng và Phân loại CSS
 Selector trong CSS và phạm vi ảnh hưởng
Thiết kế và lập trình Web

Selector

 Là tên 1 style tương ứng với một thành phần được áp

dụng định dạng

 Các dạng selectors

 HTML element selectors

 Class selectors Ví dụ:

.TieuDe1 {
color: red;
 ID selectors font-family: Verdana, sans-serif; }

 .... <h1 class=“TieuDe1”> DHKHTN </h1>

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

Selector trong CSS

Loại Mô tả phạm vi ảnh hưởng Ví dụ
element Định dạng áp dụng cho ND tất cả các tag h1 {color: red;}
Element trong tài liệu Web /* ND của thẻ <h1> bị định dạng màu chữ=đỏ */

#id Định dạng áp dụng cho ND tất cả các #test {color: green;}
tab có thuộc tính id trong tà liệu Web /* 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 .note {color: yellow;}
tab có thuộc tính class trong tà liệu Web /* 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 h1.note {text-decoration: underline;}
Element có thuộc tính class tương ứng /* ND của các thẻ <h1> có thuộc tính class=note
đều bị định dạng gạch chân */

Grouping Định dạng áp dụng cho ND một nhóm h1,h2,h3 {background-color: orange;}
các tag trong tài liệu. /* ND của các thẻ <h1> <h2> <h3> đều bị định
dạng màu nền = màu cam */

Contextual Định dạng áp dụng cho ND các thẻ được p strong {color: purple;}
lồng trong một thẻ cha nào đó /* ND của các thẻ <strong> nằm trong thẻ <p> đều
bị định dạng màu chữ=màu tía */