Cascading Style Sheets (CSS)

Định nghĩaCascading Style Sheets CSS là các lớp trình diễễ n tạo nễn giao diện người dùng... Tại sao lại là CSS?CSS gõ boể các thuộc tính hiễển thị từ cấấu trúc cho phép tái sưể dụng,

Cascading Style Sheets (CSS) Giới thiệu

Tuấn Nguyễn

FITHOU

Định nghĩa

Cascading Style Sheets (CSS) là các lớp trình diễễ n tạo nễn giao diện người dùng

Tại sao lại là CSS?

CSS gõ boể các thuộc tính hiễển thị từ cấấu trúc cho phép tái sưể dụng, dễễ dàng

baểo trì và dễễ dàng hoán đôểi các lớp

trình bày

HTML không phaểi là 1 ngôn ngữ trình

bày Các nhà cung cấấp độc quyễền đã

tạo ra các theể trình bày:

◦<font>

◦<b>

◦ <i>

CSS cho phép chúng ta chuấển hóa và

thay đôểi một cách dễễ dàng nhanh chóng

Tại sao lại là CSS?

bị a ểnh hưở ểng bở ểi sự kễấ thừa.

Kế thừa với CSS

Cho phép các thành phấề n “inherit” các style từ các thành phấề n cha.

Hữu ích nhờ gia ểm thiễể u CSS đễể thiễấ t lập style cho các thành phấề n con.

Trừ khi 1 style có nhiễề u đặc tính hởn được thiễấ t lập cho thành phấề n con, thì các thành phấề n con pha ểi

tìm kiễấ m style từ thành phấề n cha.

Môễ i style có một sôấ giá trị được

cho bở ểi các selector (sẽ học ở ể

phấề n sau)

Sử dụng Style Sheets

Các Style Sheet từ bễn ngoài

<link rel=“stylesheet” type=“text/css”

href=“location.css” />

◦Đông thời là mô taể cuểa “media” (screen,

tv, print, handheld, etc)

◦Phưởng thức tham chiễấu.

 trình duyệt sẽ tổng hợp toàn bộ CSS này vào một CSS ảo, và nếu

có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau

sẽ được ưu tiễn

CSS nội tuyến > CSS bên trong > CSS bên ngoài

> CSS mặc định của trình duyệt

CSS nội tuyến > CSS bên trong > CSS bên ngoài

> CSS mặc định của trình duyệt

Kiểu (Element) Selector

The Class Selector

<p class=“intro”>This is my introduction text</p>

.intro {

font: 12px verdana, sans-serif;

margin: 10px;

}

The Identifier Selector

<p id=“intro”> This is my introduction text</p>

#intro {

border-bottom: 2px dashed #fff;

}

◦ Sưể dụng các định danh cho các sections

chính và các section con trong trang.

CSS Selectors NÂNG CAO

Chăểng hạn có thễể sưể dụng danh sách

không thứ tự đễể làm menu navi thay cho table

◦Navigation thực chấất là 1 “list” thông tin và

không pha ểi là dữ liệu dạng ba ểng

CSS – mức độ tương thích với trình duyệt

Các trình duyệt cao cấấp hiện đại (IE 5.5+, Firefox 1.5+, Safari 2+, Opera)

đã loại boể những lo lăấng vễề hiệu quaể

cuểa CSS

ể trình duyệt có selectors và các Ở

thuộc tính mà hấều hễất các trình duyệt đễều chấấp nhận, nhưng IE7, FF 2, Safari

3 đễều chấấp nhận đặc taể CSS 2.1

Do vậy, không có bấất cứ lý do nào mà không sưể dụng CSS trong ứng dụng web

có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành

phần trang web

font đầu tiên được liệt kê trong danh sách sẽ

được dùng để hiển thị trang web.

nễấ u trễn PC chưa có font đó thì font đứng thứ 2 sẽ được sưể dụng.

+ Family-names: Tên cụ thể của một font Ví dụ: Arial,

Thuộc tính font-weight mô tả cách thức thể

hiện của font chữ là ở dạng bình thường

(normal) hay in đậm (bold)

Ngoài ra, một số trình duyệt cũng hỗ trợ mô tả

body { font-size:20px } h1 { font-size:3em } h2 { font-size:2em }

CSS Units & Colors

Mô hình Box

p {

width:200px;

margin:30px 20px; padding:20px 10px; border:1px solid

#000;

text-align:justify }

◦ Left: 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

.column1 { border-right:1px solid #000 }

Thuộc tính float được sử dụng để chia các cột văn bản.

Thuộc tính float được sử dụng để chia các cột văn bản.

CSS cho phép định vị đễể giaểm thiễểu

kích thước tôểng thễể, form, và cho phép layout có thễể thay đôểi chỉể bằng việc soạn thaểo style sheets

CSS layouts cũng tăng cường tính hiệu quaể, người đọc có thễể tăất css đễể chỉể xem nội dung ởể dạng thông thường

h1 { font: italic bold 35px

arial,verdana,sans-serif; }

h1 { font: italic bold 35px

arial,verdana,sans-serif; }