C3 CSS

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
LẬP TRÌNH GIAO DIỆN VỚI CSS

LẬP TRÌNH ỨNG DỤNG WEB
ThS. Đỗ Thị Hương Lan
1
NỘI DUNG
1. Giới thiệu CSS

2. Định nghĩa Style
3. Sử dụng và Phân loại CSS
4. Selector trong CSS và phạm vi ảnh hưởng
5. Dùng CSS để dàn trang
2 2
Giới thiệu về CSS
o CSS = Cascading Style Sheets
o Dùng để mô tả cách hiển thị các thành phần trên trang Web
o Có thể sử dụng lại cho các trang web khác
o Có thể thay đổi thuộc tính từng trang hoặc cả site nhanh chóng (cascading)
3
Lợi ích khi dùng CSS
4
Cú pháp CSS cơ bản
Selector { property:value; }
o Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Nó
là các tag HTML, class hay id
▪ Ví dụ: body, h2, p, img, #title, #content, .username,…
o Property: Chính là các thuộc tính quy định cách trình bày.
▪ Ví dụ: backgroundcolor, font-family, color, padding, margin,…
o Value: Giá trị của thuộc tính.
▪ Ví dụ: #ffffff là giá trị của thuộc tính color
o
body {background: #FFF; color: #FF0000;font-size: 14pt;}
.class {font-size: 10pt; font-weight: bold; }
#id {text-transform:uppercase; font-style: italic; }
5
Ghi chú trong style
o Sử dụng /*Ghichú*/
o Ví dụ:
SelectorName
{ property1:value1;/*Ghichu1*/
property2:value2;/*Ghichu2*/
………
propertyN:valueN;
}
6
Phân loại CSS
o Gồm 3 loại CSS
▪ 1. Inline Style Sheet
▪ 2. Embedding Style Sheet
▪ 3. External Style Sheet
7
Inline style Sheet (nội tuyến)
o Định nghĩa style trong thuộc tính style của từng tag HTML
o Lưu ý: Nếu muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì
không nên dùng cách này
<tag style= “property1: value1;

…property N:value N;”>…
</tag>
ví dụ:
<h1 style="color: yellow">this is yellow </h1>
8
Embedding Style Sheet
o Nhúng trong tag <style> của trang HTML
<head>
<style type=“text/css” >
<!–
SelectorName{
property 1:value1;
property 2:value2;
………
property N: valueN;
}
…-->
</style>
</head>
9
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #000;
}
h1 {
color: red;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
10
Ví dụ
11
External Style Sheet
o Mọi style đều lưu trong file có phần mở rộng là *.css (được sử dụng phổ biến)
o Tạo liên kết đến file CSS bằng cách gọi đến file css trong HTML
▪ Cú pháp:
<head>
<link rel=“stylesheet” href=“URL” type="text/css">
</head>
12
External Style Sheet
13
Ví dụ
o Trong file mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
14
Ví dụ (tt)
o Sử dụng mystyle.CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
15
So sánh, đánh giá
Inline style sheet Embedding style sheet External style sheet
Cú pháp <p style=“color:red;”> <style type=“text/css”> <link rel=“stylesheet”
ĐHCNTT .tieude1{color=red;} href=“style.css”>
</p> </style> <p class =“tieude1”>
<p class=“tieude1” ĐHCNTT
ĐHCNTT </p>
</p>
Ưu + Dễ quản lý style theo từng + Dễ quản lý style theo từng tài + Thiết lập style cho nhiều
tag liệu web tài liệu
+ Ưu tiên áp dụng đầu tiên + Không cần thêm các trang + Thông tin các style được
theo thứ tự ưu tiên thông tin khác cho style trình duyệt cache lại
Khuyết Cần khai báo style trong từng Cần khai báo lại style lại cho + Tốn thời gian download file
tag của tài liệu các trang khác .css -> làm chậm quá trình
biên dịch web ở trình duyệt
trong lần đầu tiên sử dụng
16
Độ ưu tiên
o
▪ 1. Inline style sheet

▪ 2. Embedding style sheet
▪ 3. External style sheet
▪ 4. Browser Default
17
Selector trong CSS và phạm vi ảnh hưởng
o Selector
▪ Là tên 1 style tương ứng với một thành phần được áp định dạng
▪ Vídụ:
.TieuDe1 {
color: red;
font-family: Verdana, sans-serif;
}
<h1 class=“TieuDe1”> ĐHCNTT</h1>
18
Selector trong CSS và phạm vi ảnh hưởng (tt)
Lọai Mô tả phạm vi ảnh hưởng Ví dụ
Element Định dạng áp dụng cho Nội dung tất cả H1{color:red}
các tag element trong tài liệu Web
#id Định dạng áp dụng cho Nội dung tất cả #test {color: green;} /
các tab có thuộc tính id trong tài liệu
Web
.class Định dạng áp dụng cho tất cả các tab có .note {color: red;}
thuộc tính class trong tài liệu Web
https://www.w3schools.com/css/css_selectors.asp
19
Ví dụ về element
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Tất cả các đoạn văn bản sẽ bị ảnh hưởng</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
20
Ví dụ ID rules
21
Class rules
22
Css Box Model
o
▪
▪
▪
▪
o
o
23
Css Layout
selector { position: giá trị; }
Giá trị Ví dụ Mô tả
static position: static; Đây là dạng mặc định.

Thiết lập vị trí của phần tử mà
không gây ảnh hưởng tới việc hiển
relative position: relative;
thị ban đầu cũng như các phần tử
khác
Thiết lập vị trí của một phần tử
theo phần tử cha có giá trị thuộc
absolute position: absolute;
tính position là relative hoặc
absolute
fixed position: fixed; Vị trí tuyệt đối theo trình duyệt
inherit position: inherit; Thừa kế
24
Css Layout
o
25
Css Layout
o Thuộc tính float được sử dụng để định vị và định dạng nội dung
o Có thể dung khi dàn trang, hiển thị nhiều cột hay thực hiện việc định vị trí ảnh
và text …
o Thuộc tính float có 3 giá trị:
▪ Left: Cố định phần tử về bên trái.
▪ Right: Cố định phần tử về bên phải.
▪ None: Bình thường.
26
THAM KHẢO THÊM
o https://www.w3schools.com/css/default.asp
27
BÀI TẬP
28
BÀI TẬP
29
BÀI TẬP
30
BÀI TẬP
31
BÀI TẬP
32

C3 CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

C3 CSS

Uploaded by

Copyright:

Available Formats

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

LẬP TRÌNH GIAO DIỆN VỚI CSS

ThS. Đỗ Thị Hương Lan

1. Giới thiệu CSS

<tag style= “property1: value1;

▪ 1. Inline style sheet

<h1 class=“TieuDe1”> ĐHCNTT</h1>

static position: static; Đây là dạng mặc định.

inherit position: inherit; Thừa kế

You might also like