Hướng đối tượng java căn bản CSS

• Thuộc tính định dạng font chữ, văn bản font, textCác nhóm thuộc tính trong CSS 20... THÔNG TIN ĐỊNH DẠNG FONT CHỮ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 f

DANH SÁCH NHÓM

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ề…

sẵn có.

Lợi ích của CSS

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ả.

thuộc tính

• Selector thường là tên thẻ HTML

• 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 ";"

nhọn

CÚ PHÁP CSS

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ể

• Định danh ID cho phép chia thẻ thành nhiều loại khác nhau

duy nhất trên trang web

[Tên thẻ] # <id của thẻ> { property : value ; …}

ID 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ẻ …

div > p { color: red }

div > p > b { color:red }

Child Selector

Dùng để chọn một thành phần/thẻ nằm bên trong thành phần/thẻ khác

Descendant 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ẻ

Attribute Selector

Pseudo Class Selector

nội dung

• Anchor pseudo class: lớp ảo định nghĩa style cho các 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

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

• Thuộc tính định dạng font chữ, văn bản (font, text)

Các nhóm thuộc tính trong CSS

20

THÔNG TIN ĐỊNH DẠNG FONT CHỮ

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

hiển thị văn bản trong một font chữ HOA NHỎ hoặc một font chữ thường

font-weight 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

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)

• Canh theo chiều ngang

– Văn bản dùng text-align

– Thành phần không phải văn bản dùng margin

Canh giữa với CSS

Margin-left: auto và margin-right:auto

Thành phần sẽ được canh giữa các cạnh trong khối chứa

• Canh giữa theo chiều dọc

– sử dụng phương pháp tọa độ absolute

– để dùng kỹ thuật này phải biết chính xác kích thước của thành phần cần canh chỉnh

w

h

position: absolute top: 50% /* top là viị trí giữữa cuủa chiềều cao*/

margin: -h/2 0 0 0 Height: h ;

Canh giữa với CSS

• Canh giữa theo ngang, dọc.

w

h

position: absolute top: 50% /* top là viị trí giữữa cuủa chiềều cao*/

left: 50% /*left là viị trí giữữa cuủa bềề ngang*/

margin: -h/2 0 0 –w/2

Canh giữa với CSS

• Float là thuộc tính nền tảng để xây dựng trang web thuần CSS.

chia thành nhiều cột

– Lef : 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

Sử dụng Float trong CSS

• Thành phần đi sau thành phần có thuộc tính float sẽ tràn lên, để tránh điều này có thể dùng thuộc tính clear.

– Lef : thành phần sẽ di chuyển xuống dưới (biên dưới) thành phần nào có giá trị float:lef

– Right : thành phần sẽ di chuyển xuống dưới (biên dưới) thành phần nào có giá trị float: right

– Both : thành phần sẽ di chuyển xuống dưới tất cả hộp float.

Sử dụng Float trong CSS

Tạo menu ngang bằng Float

• Bước 1: tạo một danh sách ul với các li là hyperlink như sau

Tạo menu ngang bằng Float

• Bước 3: thiết lập trạng thái hover cho hyperlink và thẻ li

Tạo menu ngang bằng Float

Tạo layout bằng CSS

Các thành phần chính website

– Main navigation (menu) : tùy bố cục có thể đặt dạng nằm ngang hay dọc

Ví dụ: Trong thiết kế minh họa chọn nằm ngang kích thước: width:760px height:50px

– Header : nơi đặt thành phần quang trọng như: banner, logo, tên công ty…trong thiết kế chọn nằm ngang width: 760px height:150px.

– Content : nơi chứa nội dung chính Kích thước width: 480px, height tùy ý theo nội dung.

– Right column : tùy bố cục có thể 2 hay 3 cột Phần này chứa thông tin mang tính nổi bật, hiển thị dạng tin ngắn Width: 280, height tùy ý.

– Footer : nơi chứa thông tin copyright, các điều khoản sử dụng hay menu nhỏ gọn Kích thước Width: 760px, Height 66px.

• Bố cục như trên đã hình thành nên khung cơ bản của website

menu navigation

header

footerTạo layout bằng CSS

CẢM ƠN CÁC BẠN ĐÃ THEO DÕI