Bài giảng lập trình web chương 2 ths nguyễn minh vi

ThS Nguyễn Minh ViBM Tin học – ĐH An Giang Cascading Style Sheets... ThS Nguyễn Minh ViBM Tin học – ĐH An Giang Cascading Style Sheets BỘ CHỌN SELECTORS... và theo sau là tên selector 

Trang 1

ThS Nguyễn Minh Vi

BM Tin học – ĐH An Giang

Cascading Style Sheets

Trang 2

Giới thiệu

CSS (Cascading Style Sheets):

 Hỗ trợ các kiểu định dạng phong phú, đa dạng

Trang 3

Giới thiệu

HTML

CSS + HTML

Trang 5

Cú pháp

Trang 6

Chèn style sheet

 External: dùng thẻ <link> liên kết file css bên ngoài

 Có thể áp dụng cho nhiều tài liệu khác nhau

 Internal: dùng thẻ <style> đặt trong phần

head

 Có hiệu lực trong tài liệu chứa nó

 Inline: dùng thuộc tính style trong thẻ

 Chỉ có hiệu lực trong chính thẻ HTML đó

Trang 8

Độ ưu tiên

 Khi có nhiều kiểu cùng áp dụng lên một phần tử, thì độ ưu tiên sẽ tăng dần theo thứ tự

External < Internal < Inline

External CSS Internal CSS Inline CSS

Trang 9

BỘ CHỌN (SELECTORS)

Trang 12

 Class selector: bắt đầu bằng dấu và

theo sau là tên selector

 dùng cho nhóm phần tử thuộc cùng class

(thông qua thuộc tính class)

 hoặc cho phần tử HTML mà thuộc class này (kết hợp giữa html selector và class selector)

p . center { text-align :center;}

Trang 13

Pseudo class

 Cú pháp:

selector : pseudo-class {property:value;}

selector . class : pseudo-class {property:value;}

Trang 14

CÁC THUỘC TÍNH CƠ BẢN

Trang 15

background

thiết lập tất cả thuộc tính nền trong cùng một khai báo

background-attachment ảnh nền cố định hoặc

cuộn theo nội dung

fixed scroll

background-color màu nền màu (tên hoặc chỉ số)

background-repeat cách lặp ảnh nền

no-repeat repeat-x repeat-y

Trang 17

font thiết lập tất cả thuộc tính font

trong cùng một khai báo

font-family font chữ tên font

font-size kích thước

(xx-/x-)small / smaller medium

(xx-/x-)large / larger length / %

font-style kiểu chữ

normal italic oblique

font-variant hiển thị theo dạng bình thường

hoặc small-caps

normal small-caps

font-weight độ đậm nhạt

normal bold / bolder lighter

100  900

Trang 18

vertical-align canh lề theo chiều đứng

topmiddlebottom

text-decoration cách trang trí (các kiểu gạch)

noneunderline overline line-throughblink

Trang 19

white-space cách xử lý white-space

normalpre

nowrap

Trang 21

list-style

thiết lập tất cả thuộc tính danh sách trong cùng một khai báo

list-style-image ảnh của list-item none

Trang 22

<li>Javascript</li>

</ul>

Trang 23

border-collapse kiểu đường viền bảng collapse

separate

border-spacing khoảng cách giữa các đường viền của

các ô (kiểu separate) length

caption-side vị trí tiêu đề so với bảng

topbottomleft

right

empty-cells hiện hoặc ẩn đường viền các ô trống

(kiểu separate)

showhide

fixed

Trang 24

border-collapse : separate;

empty-cells : hide;

border-spacing : 5px; } th{

Trang 25

 Liên kết có các trạng thái

 link : bình thường, chưa được chọn

 visited : đã được chọn

 hover : đang được lướt chuột lên

 active : đang được chọn

 Có thể áp dụng các thuộc tính màu chữ, nền, hiệu ứng chữ cho các trạng thái của liên kết

Trang 26

<a href="http://www.agu.edu.vn">Trang chủ AGU</a> |

<a href="http://mail.agu.edu.vn">Thư điện tử</a> |

<a href="http://enews.agu.edu.vn">Báo sinh viên</a> |

Trang 27

CÁC THUỘC TÍNH VIỀN, LỀ, …

Trang 28

Box model

Trang 29

%

Trang 31

 Ví dụ

Trang 32

padding thiết lập khoảng cách từ

đường viền đến nội dungpadding-top

Trang 33

outline thiết lập thuộc tính

outline-width độ dày

thinmediumthickgiá trị cụ thể

Trang 34

CÁC THUỘC TÍNH VỊ TRÍ

Trang 35

position kiểu vị trí đặt phần tử

static fixedrelativeabsolutetop

display hiển thị phần tử theo khối (riêng

dòng), trên dòng, hoặc ẩn

blockinlinenone

z-index thứ tự của phần tử (khi có nhiều

phần tử chồng lên nhau)

auto

số thứ tự

Trang 36

top / middle / bottom

Trang 37

<p>Đoạn văn bình thường</p>

 Ví dụ thuộc tính position

Trang 39

<a href="js.htm">Javascript</a>

<a href="php.htm">PHP-MySQL</a>

 Ví dụ thuộc tính display

Định dạng
Số trang	45
Dung lượng	1,23 MB