Slide bài giảng CSS của vietpro (buổi 02)

TRUNG TÂM ĐÀO TẠO LẬP TRÌNH WEB & ĐỒ HỌA

VIETPRO EDUATION

BÀI GIẢNG CSS (BUỔI 2)
CÁC THUỘC TÍNH TRONG CSS
Giảng viên: Hoàng Minh Tuấn


THUỘC TÍNH ID TRONG CSS
1. Ý nghĩa của ID trong CSS
- ID là thuộc tính có tính duy nhất trong HTML Tag và
trong cả văn bản HTML
- CSS sẽ dựa vào thuộc tính ID để nhận biết và quy định
sự khác nhau của Style cho những thành phần đó
2. Khai báo thuộc tính ID trong HTML Tag
- id = “Tên ID”
- Tên ID phải được viết liền, có thể chứa chữ số, chữ cái,
dấu _, - và không được chứa khoảng trắng cùng các ký
tự đặc biệt
3. Cú pháp triệu gọi ID trong CSS
- #id_name{Property1: Value1;... PropertyN: ValueN;}
-

Chú ý: Có thể đặt trùng tên ID trong một văn bản
HTML cũng không gây ra lỗi nhưng ns sẽ làm mất đi
bản chất của thuộc tính ID.


THUỘC TÍNH CLASS TRONG CSS
1. Ý nghĩa của Class trong CSS

- Class là một nhóm các phần tử có cùng thuộc tính,
như vậy Class có thể được sử dụng nhiều lần cho
nhiều HTML Tag khác nhau
- CSS sẽ dựa và những phần tử có cùng Class để nhận
biết và quy định sự giống nhau về Style cho những
phần tử đó.
2. Khai báo thuộc tính Class trong HTML Tag
- class = “class1 class2 ... classN”
- Cách đặt tên Class tương tự như ID
3. Cú pháp triệu gọi Class trong CSS
- .class_name{Property1: Value1;... PropertyN: ValueN;}


ĐIỀU KHIỂN TRONG CSS
1. Điều khiển cho Liên kết (Link)
- link: Trạng thái liên kết chưa có Click
- a:link{Property1: Value1;... PropertyN: ValueN;}
-

hover: Trang thái liên kết đang được hơ chuột
a:hover{Property1: Value1;... PropertyN: ValueN;}

-

active: Trạng thái liên kết đang giữ Click
a:active{Property1: Value1;... PropertyN: ValueN;}

-

visited: Trạng thái liên kết đã được Cllick

a:visited{Property1: Value1;... PropertyN: ValueN;}

2. Điều khiển cho HTML Tag bất kỳ
- HTML Tag:hover:


BOX MODEL TRONG CSS
1. Mô hình “Hộp BOX MODEL”
- Trong CSS, box model (mô hình hộp) mô tả cách mà
CSS định dạng khối không gian bao quanh một thành
phần. Nó bao gồm padding (vùng đệm), border (viền)
và margin (canh lề) và các tùy chọn. Hình dưới mô tả
cấu trúc minh họa mô hình hộp cho một thành phần
web.

2. Các thuộc tính của Box Model
- Padding
- Border
- Margin


CÁC THUỘC TÍNH PADDING
1. Khai báo thuộc tính Padding
- Padding-left: Value;
- Padding-right: Value;
- Padding-top: Value;
- Padding-bottom: Value;
2. Cách viết rút gọn để khai báo Padding
- Padding: Value1 Value2 Value3 Value4
- Value1: Vùng đệm phía trên

- Value2: Vùng đệm phía phải
- Value3: Vùng đệm phía dưới
- Value4: Vùng đệm phía trái
-

Padding: Value1 Value2
Value1: Vùng đệm trên-dưới
Value2: Vùng đệm trái-phải

-

Padding: Value
Value: Vùng đệm trên-dưới-trái-phải


CÁC THUỘC TÍNH BORDER
1. Border-width
- border-width: Độ dầy của đường viền với giá trị là đơn
vị độ dài
2. Border-color
- border-color: Mầu của đường viền, với giá trị là tên
mầu hoặc mã mầu


CÁC THUỘC TÍNH BORDER
3. Border-style
- border-style: Kiểu hiển thị đường viền với một trong
các giá trị sau

4. Cách viết rút gọn để khai báo Border

- border: Value1 Value2 Value3;
- Value1: Độ dầy của đường viền
- Value2: Mầu đường viền
- Value3: Kiểu hiển thị đường viền


CÁC THUỘC TÍNH MARGIN
1. Khai báo thuộc tính Margin
- Margin-left: Value;
- Margin-right: Value;
- Margin-top: Value;
- Margin-bottom: Value;
2. Cách viết rút gọn để khai báo Margin
- Margin: Value1 Value2 Value3 Value4
- Value1: Canh lề trên trên
- Value2: Canh lề phải
- Value3: Canh lề dưới
- Value4: Canh lề trái
-

Margin: Value1 Value2
Value1: Canh lề trên-dưới
Value2: Canh lề trái-phải

-

Margin: Value
Value: Canh lề trên-dưới-trái-phải

THỰC HÀNH
I – BÀI TẬP THỰC HÀNH
1. Bài 1
2. Bài 2

II – BÀI TẬP VỀ NHÀ
1. Bài 1
2. Bài 2