Ktl-icon-tai-lieu

CSS

Được đăng lên bởi phuongit9293
Số trang: 33 trang   |   Lượt xem: 1200 lần   |   Lượt tải: 0 lần
CHƯƠNG 3

CSS (Casscading Style Sheets)

1

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

2

Lợi ích khi dùng CSS
 Thời

khóa biểu quả khoa HTTT

3

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
Sử dụng tương tự như dạng TEMPLATE
Có thể sử dụng lại cho các trang web khác
Có thể thay đổi thuộc tính từng trang hoặc
cả site nhanh chóng (cascading)

4

Định nghĩa Style
Dạng 1:

<tag style=
“property1:value1;
property2:value2;
………
propertyN:valueN;”>…</tag>
Vídụ:
<h1 style=“color : blue; font-family : Arial;”> ĐHCNTT
</h1>
5

Định nghĩa Style (tt)
Dạng 2:

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

Định nghĩa Style
Dạng 3:

SelectorName{
property1:value1;
property2:value2;
………
propertyN:valueN;}

.TieuDe1 {
color: red;
font-family: Verdana, sansserif; }
<h1 class=“TieuDe1”>
ĐHCNTT </h1>

<tag class = “SelectorName”>
………
</tag>
7

Ghi chú trong style


Giống Ghi chú trong C++



Sử dụng /*Ghichú*/



Ví dụ:
SelectorName
{

property1:value1;/*Ghichu1*/
property2:value2;/*Ghichu2*/
………
propertyN:valueN;

}
8

Phân loại CSS
Gồm 3 loại CSS
• 1.Inline Style Sheet
• 2. Embedding Style Sheet
• 3. External Style Sheet

9

Inline style Sheet



Định nghĩa style trong thuộc tính style
của từng tag HTML
Theo cú pháp dạng 1

<tag style= “property1: value1;
…property N:value N;”>…
</tag>
Vídụ:
<H1 STYLE="color: yellow">This is yellow </H1>

10

Embedding Style Sheet
•
•

Nhúng trong tag <style>của trang HTML
Định nghĩa style theo cú pháp Dạng 2

<head>
<style type=“text/css” media="all | print | screen" >
<!–
TagName{
property 1:value1;
property 2:value2;
………
property N: valueN;
}
…-->
</style>
</head>

11

Ví dụ
<HTML>
<HEAD>
<TITLE>Embedded Style Sheet
</TITLE><STYLE TYPE="text/css">
<!—
P{color: green;font-size: 12pt;font-family: Arial;}
H2{color: Red;}
--></STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF"><H2>This is red</H2>
<P>this is green, 12 pt. and Garamond.</P>
</BODY>
</HTML>

12

External Style Sheet





Mọi style đều lưu trong file có phần mở
rộng là *.CSS (được sử dụng phổ biến)
Định nghĩa style theo cú pháp dạng 2,3
Tạo liên kết đến file CSS

•

1.Trong trang HTML: Liên kết bằng tag link.
Cúpháp:
<head>
<link rel=“stylesheet” href=“URL” type="text/css">
</head>
13

External Style Sheet (tt)
2.Trong trang HTML: L...
1
CHƯƠNG 3
CSS (Casscading Style Sheets)
CSS - Trang 2
Để xem tài liệu đầy đủ. Xin vui lòng
CSS - Người đăng: phuongit9293
5 Tài liệu rất hay! Được đăng lên bởi - 1 giờ trước Đúng là cái mình đang tìm. Rất hay và bổ ích. Cảm ơn bạn!
33 Vietnamese
CSS 9 10 139