Hướng đối tượng java căn bản CSS
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.41 MB, 36 trang )
DANH SÁCH NHÓM
1.
2.
3.
PHAN THỊ HỒNG NGÂN
ĐÀO BÁ LINH
VÕ VĂN KIỆT
CSS
CSS là gì?
CSS
(Cascading Style Sheet) là mẫu định dạng
phân tầng.
CSS là một chuẩn để định dạng các tài liệu HTML,
XHTML và XML.
Lợi ích của CSS
Giúp các nhà thiết kế web có thêm lựa chọn về màu sắc, khoảng cách, vị trí,
biên, lề…
Thuộc tính CSS được bổ sung vào HTML và không phá vỡ cấu trúc của HTML
sẵn có.
CSS làm tăng sự nhất quán về định dạng và hiệu năng tải trang web.
ÁP DỤNG CSS VÀO TRANG HTML
•
Inline style: là cách dùng style ngay trong câu lệnh, bổ sung thêm thuộc tính style vào sau một
phần tử HTML
•
Internal style sheet: định nghĩa riêng một khối, phân biệt bởi thẻ <style > và được đặt trong phần
head của tài liệu
•
External style sheet: Tạo một tập tin có phần mở rộng là *.css bên ngoài HTML, sử dụng thẻ <link>
trong phần <head> để liên kết tập tin này trong HTML.
MỨC ĐỘ ƯU TIÊN
Mức độ ưu tiên khi áp dụng CSS như sau:
External CSS < Internal CSS < Inline CSS
Có thể hiểu rằng mã CSS nào "gần" với tag nhất thì sẽ được ưu tiên áp dụng hơn cả.
CÚ PHÁP CSS
•
Gồm 3 thành phần
Bộ chọn (Selector)
Thuộc tính (Property)
Giá trị (Value)
•
Cú pháp
Dấu chấm phẩy dùng để phân cách
thuộc tính
CÚ PHÁP CSS
•
•
•
•
•
Selector thường là tên thẻ HTML
Mỗi thuộc tính cần có giá trị
Một thuộc tính và giá trị phân cách bằng dấu ":"
Hai cặp thuộc tính – giá trị phân cách nhau bởi dấu ";"
Toàn bộ các cặp thuộc tính – giá trị của thẻ HTML được đặt trong cặp dấu ngoặc
nhọn.
Selector
Các selector trong HTML:
1.
2.
3.
4.
5.
6.
7.
HTML selector
Class selector
Identity selector
Descendant selector
Child selector
Attribute selector
Pseudo class selector
HTML Class
•
Bộ chọn đơn giản nhất, dùng các thẻ HTML
a
{
/*Bỏ gạch chân cho các hyperlink*/
text-decoration: none;
}
Comment trong CSS
Class Selector
Có 2 cách định nghĩa bộ chọn lớp:
Định nghĩa bộ chọn lớp cho thẻ cụ thể
Định nghĩa bộ chọn lớp không xác định thẻ cụ thể
ID Selector
•
•
•
Định danh ID cho phép chia thẻ thành nhiều loại khác nhau
Một bộ chọn lớp có thể áp dụng nhiều lần ở các vị trí khác nhau
Định danh chỉ có thể áp dụng duy nhất cho 1 thẻ và tên của định danh phải là
duy nhất trên trang web
•
Cú pháp ID selector
[Tên thẻ]#<id của thẻ> { property: value ; …}
Child Selector
•
•
•
Dùng để chọn thành phần/ thẻ con của một thành phần/thẻ khác
Cú pháp: thẻ > thẻ > thẻ …
Ví dụ 1: chọn các thẻ p là con thẻ div
div > p { color: red }
•
Ví dụ 2: chọn các thẻ b là con thẻ p và thẻ p là con div
div > p > b { color:red }
Descendant Selector
Dùng để chọn một thành phần/thẻ nằm bên trong thành phần/thẻ khác
Attribute Selector
Cho phép chọn các phần tử/thẻ dựa vào thuộc tính của các phần tử thẻ
Pseudo Class Selector
•
•
Pseudo class: dùng để thêm vào các hiệu ứng đặc biệt cho các bộ chọn.
Cho phép bộ chọn chọn các phần tử mà không quan tâm đến tên, thuộc tính hay
nội dung.
•
Cú pháp
Pseudo Class Selector
•
•
Anchor pseudo class: lớp ảo định nghĩa style cho các trạng thái link
Có 4 trạng thái link
– link: link chưa được mở (unvisited link)
– visited: link đã được mở (visited link)
– hover: link đang rê chuột bên trên (mouse over link)
– active: link đã được chọn (selected link)
Pseudo Class Selector – focus
:focus pseudo class: lớp ảo định nghĩa style của phần tử khi phần tử đang
focus
:lang pseudo class: cho phép định nghĩa style ngôn ngữ khác nhau trong tài
liệu
Đơn vị đo lường CSS
19
Các nhóm thuộc tính trong CSS
•
•
•
•
•
•
Thuộc tính định dạng font chữ, văn bản (font, text)
Thuộc tính định dạng nền (background)
Mô hình hộp (box model)
Các thuộc tính định margin, padding, border
Thuộc tính định dạng cách hiển thị (display)
Thuộc tính xác định vị trí (position)
20
THÔNG TIN ĐỊNH DẠNG FONT CHỮ
Thuộc tính
Mô tả
font
thuộc tính rút gọn dùng để thiết lập tất cả các thuộc tính cho 1 font trong một khai báo duy nhất.
font-family
một danh sách thứ tự ưu tiên của các họ font cho một thành phần
font-size
font-style
font-variant
font-weight
thiết lập kích cỡ cho một font chữ
thiết lập kiểu cách của font chữ
hiển thị văn bản trong một font chữ HOA NHỎ hoặc một font chữ thường
thiết lập trọng lượng của font
THÔNG TIN ĐỊNH DẠNG VĂN BẢN
THUỘC TÍNH
MÔ TẢ
Color
thiết lập màu cho văn bản
Direction
thiết lập hướng cho văn bản
Letter-spacing
tăng hoặc giảm khoảng trống giữa các ký tự trong văn bạn
Text-align
căn chỉnh lề của một văn bản trong một thành phần
Text-decoration
thêm trang trí cho văn bản
Text-indent
khoảng thụt vào ở dòng đầu tiên của văn bản trong một thành phần
Text-shadow
thêm bóng cho văn bản
Text-transform
chuyển đổi ký tự trong một thành phần
White-space
thiết lập cách xử lý khoảng trắng, tab, cách xuống dòng
Word-spacing
tăng hoặc giảm khoảng trống giữa các từ
Thông tin định dạng nền
THUỘC TÍNH
MIÊU TẢ
Background
dùng để thiết lập tất cả các thuộc tính nền trong một khai báo.
Background-attachment
thiết lập ảnh cố định hay cuộn theo phần văn bản còn lại
Background-color
thiết lập màu nền của một phần tử.
Background-image
thiết lập một ảnh như nền của trang.
Background-position
thiết lập điểm xuất phát của một ảnh nền
Background-repeat
thiết lập cách một ảnh sẽ được lặp lại như thế nào.
Mô hình hộp (box model)
Các thông tin định dạng lề + vùng đệm
Thông tin định dạng lề:
•
•
Margin
Padding
Vùng đệm: Khi khai báo rút gọn giá trị margin, padding thì các giá trị tính theo chiều kim
đồng hồ tính từ top
