CSS (Cascading Style Sheets)

Định nghĩa một CSS là đặt một tên ©SS cho một nhóm các định dạng.. Sử dụng tên CSS la sử dụng nhóm định dạng mà nó đại diện °ồ CSS có thê định kèm trong cùng trang HTML hay lưu riêng mộ

Bai 3

CSS (Cascading Style Sheets)

Giới thiệu CSS Tao CSS

Quan ly CSS

Dinh nghia cac CSS

Ap dung CSS

GIO! THIEU CSS 6

- CSS (Cascading Style Sheets) là sự kết hợp một nhóm

định dạng tự chọn Định nghĩa một CSS là đặt một tên

©SS cho một nhóm các định dạng Sử dụng tên CSS la sử

dụng nhóm định dạng mà nó đại diện

°ồ CSS có thê định kèm trong cùng trang HTML hay lưu riêng

một tập tin kiểu CSS, phục vụ cho nhiều trang

- ©SS giúp việc chinh sửa giao diện trang web trở nên linh

động, nhanh chóng & chính xác

° Đề thuận tiện cho nhiều người Dreamweaver CS4 tạo một

số hộp thoại CSS giúp bạn nhanh chóng tạo được một

CSS như ý

TAO CSS

O

cong cu New CSS Rule

Selector Type:

Choose a contextual selector type for your CSS rule

Class (can apply to any HTML element) vị

Class (can apply to any HTML element

ID (applies to only one HTML element)

¢ Selector Name: Dat tén cho

selector

This selector name will apply your rule to

all HTML elements with class “nen”

Rule Definition:

Choose where your rule will be defined,

(New Style Sheet File) v

QUAN LY CSS

All |Current

—.title

New 4 : Tao moi CSS — content

F—.contentp

—.clear

— ul li

—ul lia

— ul li a:hover all

—hi, h3, hé »

Properties for “body”

t= Azt|++} @ +) w

ĐỊNH NGHĨA CSS -TYPE ©

CSS Style cho text (tyle)

- Font-family: xác định kiểu chữ | CSS Rule definition for vvv

- Font-style: xac dinh chi thường (Normal) on

hoac in nghiéng (/talic)

- Line-height: dinh chiéu cao của dòng chữ

ngang cho chữ

¢ _ Font-weighit: chỉ định độ in đậm của chữ

° Text-transform: xác định chữ in hoa

(uppercase) hay in thuong (/owercase)

LT

Help L_œ% || cana || Apay |

BACKGROUND

CSS Style cho nén (Background)

¢ Background Color: chi định màu nên

¢ Background Image: Nén cua déi

tượng là hình

¢ Background Repeat: xác định kiểu lặp

hình nén (No Repeat), (Repeat),

(Repeat-x/ Repeat-y)

¢ Background Attachment: chi định hình

nên ở vị trí cỗ định (xed), hoặc cuộn

theo nội dung (scroll)

¢ Background Position: xac dinh vi tri

hình nền so với đối tượng hoặc cửa số

tài liệu

| CSS Rule definition for vvv

Extensions

Help

Category Background

T pe

i ——— = Block Background-color: [ _

B Border Background-image:

List Positioning Background-repeat:

Background-attachment:

Background-position (X):

Background-position (Y):

vị

| | Cancel

CSS Style cho khéi (Block)

- Word Spacing: Khoảng cách giữa các

từ

- Letter Spacing: Khoảng cách giữa các

ký tự

° Vertical Align: canh hàng đối tượng &

được áp dụng cho thẻ <img>

¢ Text Align: canh hàng cho văn bản

° Text Indent: khoảng cách thụt dau

dòng

„ Whites-pace: kiêm soát khoảng trang

- Display: An hién doi twong & chi dinh

cách hiên thị của đôi tượng, như inline,

block

CSS Rule definition for vvv

| 0K } | Cancel

BOX

CSS Style Box kiểm soát bố cục các

đôi tượng

- Width: Xác định chiều rộng của Div CSS Rule definition for vvv

‹ Clear: dùng đề đây các đối tượng AP

- Margin: xác định khoảng cách giữa các

Div

BORDER

CSS Style cho duong vién

° Type: chỉ định dạng đường viên

¢ Width: xac dinh độ dài của biên

Category Border

Type Background Style Width Color

Block

Box Same for all Same for all Same for all

List Top: | xị | xị L1

Positioning

Extensions Right: LJ

Bottom: ry Left: LJ

LIST

CSS Style cho danh sach

e List style type: chi dinh loai CSS Rule definition for vvv

> ` x sed List-style-type: |

Extensions

đầu dòng

-ÒỒ LIsf style position: xac dinh vi

tri gach dau dong

Lok _jJL cnä |][ Am J

POSITIONING

CSS Style cho vi tri

; | CSS Rule definition for vvv

Positioning

trị ta nhập rd Width: A Z-Index: »|

„ a L - aks Height: xị Overflow: xị

của cửa sô trình duyệt

° Visibility: Ấn hiện đối tượng Các giá

trị là kế thừa (Inherit), hién (Visible) &

ân đôi tượng (Hidden)

POSITIONING tt

° Placement: chỉ định vị trí, kích cỡ của khung chứa Giá trị mặc định là pixel

[ CSS Rule definition for -vvv

Category Positioning Type

—— Position: v Visibility: ia |

ie Width: xị Z-Index: xị

Extensions Placement Clip —

Right: xị Right: xị

Bottom: iM | Bottom: iM |

Left: xị Left: »|

_œ%_] Le.) [_ Am )

EXTENSIONS

CSS Style mo rdéng (Extensions)

- Page break before: ngat trang trong in an

¢ Cursor: Thay đổi trỏ chuột

» Filter: Áp dụng hiệu ứng cho đôi tượng, như : blur, inversion

CSS Rule definition for vvv

Category Extensions

Background Backgroun Page break

Block oo — Box Page-break-before: | v | Border peas

List Page-break-after: | vị

Visual effect

Cursor: x|

Filter: x|

DIV -CSS

Cấu trúc một Div-CSS:

#tênD[IV{

Dinh-dang-1 : gia trị 1;

Định-dạng-2 : giá trị 2;

¢ Vi du:

#main{

width: /80px;

margin: Opx auto;

background-color: #CCCCO0O;

float: left:

- áp dụng:

<DIV id= "main ></DIV>

CLASS - CSS

Cấu trúc một Class-CSS:

tênCSS{

Định-dạng-1 : giá trị 1;

Định-dạng-2 : giá trị 2;

}

¢ Vi du:

.nen{

width: /80px;

margin: Opx auto;

background-color: #CCCCO0O;

float: left:

- áp dụng:

<DIV class="nen’></DIV>

DECENDANT -CSS5 ©)

Định dạng theo thứ tự cha con

-Ví dụ:

.#menu_ nav ul li a{

Color: #ff0000;

text-decoration: none;

Ẳ

SCROLLBAR | @

Tao mau thanh cuon