Định dạng bằng CSS
Đào Việt Cường
Khoa CNTT-ĐHSP Hà Nội
CSS
CSS=Cascading Style Sheet: Mẫu quy định cách thức thể hiện các thẻ HTML
Style được đưa vào HTML 4.0 để giải quyết một số vấn đề.
Giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web.
Có thể định nghĩa nhiều style vào một thẻ HTML (Cascading)

Các loại style
Có 4 loại style:
Inline Style (Style được qui định trong 1 thẻ HTML cụ thể)
Internal Style (Style được qui định trong phần của 1 trang HTML )
External Style (style được qui định trong file .CSS ngoài)
Browser Default (thiết lập mặc định của trình duyệt)
Thứ tự ưu tiên: Mức ưu tiên giảm dần từ trên xuống
Cách chèn CSS
Đặt trong …
Với Internal style:

Cách chèn CSS (tt)
Với External style:
Định nghĩa style trong file riêng (thường có đuôi .CSS)
Nhúng file CSS đã định nghĩa vào trang web:

Với Inline style:

Khai báo và sử dụng style
Chú ý khi viết style
Style phân biệt chữ hoa, chữ thường
Để ghi chú trong style sử dụng:
/*
Đoạn ghi chú
*/
Khai báo style
selector {
Property1: Value1;
Property2: Value2;
}
Style áp dụng cho thẻ cụ thể
Trường hợp 1 thẻ: Đặt selector là tên_thẻ
p {
color: red;
}
Khai báo đồng thời nhiều thẻ: Viết danh sách tên thẻ phân cách bởi dấu phảy
h1,h2,h3,h4,h5,h6{
font-family:arial;
}
Tạo lớp
Gắn với thẻ cụ thể: Đặt selector là tên_thẻ.tên_lớp
p.loai1{
color:red;
}
p.loai2{
color:blue;
}
Không gắn với thẻ cụ thể: bỏ phần tên_thẻ đi, giữ lại dấu chấm:
.loai3{
color:green;
}
Sử dụng lớp
Đặt thuộc tính class của thẻ=“tên_lớp”:

Ví dụ:

Đoạn này màu đỏ

Style không có hiệu lực

Tiêu đề màu xanh

Định danh
Tương tự như class. Thay dấu chấm (.) thành dấu thăng (#).
Cho thẻ cụ thể: tên_thẻ#định_danh{…}
Tổng quát: #định_danh{…}
Ví dụ:
p#doan1{
color:red;
}
#loai2{
color:blue;
}
Sử dụng định danh
Mỗi định danh là duy nhất trên trang
Đặt thuộc tính id của thẻ = định_danh

Ví dụ:

Đoạn này màu đỏ

Tiêu đề xanh

Một số trường hợp cụ thể
CSS Basic
CSS Background
CSS Text
CSS Font
CSS Border
CSS Margin
CSS Padding
CSS List
CSS Advanced
CSS Dimension
CSS Classification
CSS Positioning
CSS Pseudo-class
CSS Pseudo-element
CSS Media Types
CSS cho nền
CSS cho nền (tt)
CSS và cho bản
CSS và cho bản (tt)
CSS và font
CSS và font (tt)
CSS và font (tt)
CSS và font (tt)
CSS và đường viền