NHẬP MÔN HTML VÀ THIẾT KẾ WEB

CƠ BẢN VỀ CSS

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

NỘI DUNG

(cid:1) DHTML, (cid:1) Một số đặc tính cơ bản của CSS, (cid:1) Khai báo CSS, (cid:1) Màu chữ, màu nền và font chữ, (cid:1) Màu chữ, màu nền và font chữ, (cid:1) Định dạng Text, (cid:1) Pseudo-classes cho liên kết

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

DHTML

(cid:1) DHTML (HTML động) có thể được định nghĩa như một phần mềm được sử dụng cho việc mô tả sự kết hợp giữa HTML, các stylesheet và ngôn ngữ script làm cho tài liệu trở nên sinh động. động.

(cid:1) Với mỗi phiên bản trình duyệt mới, lại thêm vào các tính năng tốt hơn cho HTML. Ngày nay, các trình duyệt hỗ trợ mô hình đối tượng tài liệu «Document Object Model» mà ở đó các phần tử HTML được coi như là đối tượng.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

DHTML

(cid:1) Đặc điểm của DHTML:

(cid:1) Kiểu động (Dynamic Style): Bằng cách dùng các kiểu ‘style sheets’, chúng ta có thể xác định màu, kiểu hoặc cỡ của nội dung trang. Chúng ta có thể thay đổi kiểu của trang mà Chúng ta có thể thay đổi kiểu của trang mà không cần gửi đến máy chủ «Web server» cho mỗi lần thêm vào thẻ và thuộc tính. Điều đó có nghĩa là chúng ta có thể thay đổi màu, font, kích cỡ hoặc nội dung văn bản khi đáp lại những tương tác của người dùng.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

DHTML

(cid:1) Đặc điểm của DHTML:

(cid:1) Nội dung động (Dynamic Content): Có thể thay đổi chữ và hình ảnh trên trang web sau khi nó hiển thị. Ta có thể thay đổi nội dung của trang đó khi đáp lại sự kiện nào đó như của trang đó khi đáp lại sự kiện nào đó như nhập dữ liệu, click chuột,....

(cid:1) Cấu trúc đối tượng (Object Strucure): HTML động theo một cấu trúc đối tượng, theo đó mỗi phần tử được đối xử như một đối tượng trong cấu trúc. Mỗi đối tượng có thể truy cập và lập trình độc lập.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

DHTML

(cid:1) Đặc điểm của DHTML:

(cid:1) Định vị (Positioning): Trong HTML động chúng ta có thể chỉ ra chính xác (tuyệt đối hoặc tương đối) tọa độ x, y. Khi một trang web được hiển thị ta có thẻ di chuyển các phần tử trên trang web làm cho nó trở nên động.

(cid:1) Định vị tuyệt đối: Chỉ rõ vị trí xác định theo các điểm

«pixels»

(cid:1) Định vị tương đối: Chỉ ra vị trí tương đối của các phần tử. (cid:1) Từ việc định vị cho ta xác định thứ tự sắp xếp « z-order» các phần tử. Đối tượng này chồng đè lên đối tượng khác.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

DHTML

(cid:1) Đặc điểm của DHTML:

(cid:1) Liên kết dữ liệu: Trong HTML động chúng ta có thể kết nối một cơ sở dữ liệu vào bảng của trang web. Khi trang được nạp lên, dữ liệu từ CSDL trên máy chủ được hiển thị trong bảng.

(cid:1) Scripting: Ta có thể viết các script để thay đổi

kiểu và nội dung của trang web.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

DHTML

(cid:1) Đặc điểm của DHTML:

(cid:1) Có khả năng tải font chữ (Downloadable Fonts): Downloadable Fonts là đặc điểm cho phép ta chèn các font mà tùy chọn trên ttrang web, ta có thể có gói font trong trang.

(cid:1) Điều này đảm bảo văn bản trong trong trang web đó

luôn hiển thị theo font mà ta chọn.

(cid:1) Đây là đặc điểm quan trọng bởi vì thông thường nếu các font được chỉ ra không có trong máy của người dùng thì trình duyệt sẽ dùng font mặc định có sẵn, do đó sẽ hủy bỏ mục đích chỉ ra kiểu font của bạn.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

KHAI BÁO CSS

(cid:1) Giới thiệu:

(cid:1) Một trong những tính năng quan trọng của HTML động là những kiểu (style) động. Nghĩa là ta có thể thay đổi kiểu của những phần tử HTML trên trang sau khi chúng được hiển thị.

(cid:1) Sự thay đổi này đáp ứng sự tương tác của người dùng. (cid:1) Sự thay đổi này đáp ứng sự tương tác của người dùng.

(cid:1) Style sheet được tạo nên từ các quy tắc kiểu cách và liệu HTML, mà nó báo cho

được nhúng vào trong tài trình duyệt biết cách trình bày tài liệu.

(cid:1) Style sheet phân cấp (Cascading style sheet) định nghĩa các kiểu các kiểu có thể áp dụng vào các trang hoặc các phần tử của trang.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

KHAI BÁO CSS

(cid:1) Giới thiệu: Có hai cách thay đổi kiểu trên trang web: (cid:1) Thay đổi kiểu nội tuyến (inline style): Kiểu nội tuyến là kiểu được gán trực tiếp cho một phần tử nào đó.Kiểu nội tuyến được định nghĩa bằng thuộc tính STYLE đối với phần tử của thẻ đó. phần tử của thẻ đó.

Xin Chào

(cid:1) Viết kịch bản để thay đổi: Ta có thể thay thế kiểu nội tuyến bằng kịch bản, khi đó ta sử dụng đối tượng kiểu (Style Object). Đối tượng kiểu hỗ trợ mọi tính chất mà CSS hỗ trợ đối với kiểu.

h1{ color: #0000FF; background-color: #C0C0C0;}

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

MỘT SỐ ĐẶC TÍNH CƠ BẢN CỦA CSS

(cid:1) CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó.

p { {

background-color: #FF00FF; text-align: right; width: 100%; height: 150px;

}

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

MỘT SỐ ĐẶC TÍNH CƠ BẢN CỦA CSS (cid:1) Có thể khai báo CSS bằng nhiều cách khác nhau. Mức độ ưu tiên của CSS sẽ theo thứ tự sau.

1. Style đặt trong từng thẻ HTML riêng biệt

...

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

MỘT SỐ ĐẶC TÍNH CƠ BẢN CỦA CSS

(cid:1) Có thể khai báo CSS bằng nhiều cách khác

nhau.

2. Style đặt trong phần

Tiêu đề trang Tiêu đề trang

href="StyleSheet.css" />

và file css

Tương

đương

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

KHAI BÁO CSS

(cid:1) Khai báo CSS

selector {property: value}

(cid:1) Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Nó có thể là các tag HTML, class hay id.

(cid:1) Property: Chính là các thuộc tính quy định cách trình bày. (cid:1) Value: Giá trị của thuộc tính.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

KHAI BÁO CSS

(cid:1) Các kiểu Selector:

(cid:1) Class selectors : Tên của Class selector có tiền

tố là dấu chấm (.)

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

KHAI BÁO CSS

(cid:1) Các kiểu Selector: (cid:1) Class selectors :

(cid:1) Chú ý:

(cid:2) Nếu muốn chỉ định class cho một phần tử nào đó thì đặt thẻ

HTML đó trước CSS rule. HTML đó trước CSS rule.

(cid:2) Ta có thể áp dụng nhiều class cho một phần tử bằng cách

liệt kê các class đó cách nhau bởi dấu cách.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

KHAI BÁO CSS

(cid:1) Các kiểu Selector:

(cid:1) ID selectors : Style áp dụng cho phần tử HTML,

đặt trước ID của nó dấu “#”.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

KHAI BÁO CSS

(cid:1) Các kiểu Selector:

(cid:1) Grouped selectors : Style áp dụng cho nhiều

selectors.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

KHAI BÁO CSS

(cid:1) Các kiểu Selector:

(cid:1) Contextual selectors (Selectors theo ngữ cảnh): Định nghĩa thuộc tính cho phần tử HTML tùy thuộc vào ngữ cảnh của nó.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ

(cid:1) Background: Định dạng màu nền/ảnh nền

cho các thành phần trong trang web. (cid:1) Thuộc tính background-color: Định dạng màu

nền cho các thành phần trong trang web (cid:1) Thuộc tính background-image: Chèn ảnh nền Thuộc tính background-image: Chèn ảnh nền vào các thành phần trên trang web.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ

(cid:1) Background: Định dạng màu nền/ảnh nền

cho các thành phần trong trang web. (cid:1) Thuộc tính background-repeat: Lặp lại ảnh nền

trên các thành phần trên trang web. (cid:1) repeat-x: Chỉ lặp lại ảnh theo phương ngang. (cid:1) repeat-x: Chỉ lặp lại ảnh theo phương ngang. (cid:1) repeat-y: Chỉ lặp lại ảnh theo phương dọc. (cid:1) repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị

mặc định.

(cid:1) no-repeat: Không lặp lại ảnh.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ

(cid:1) Background:

(cid:1) Thuộc tính background-attachment: Dùng để xác định tính cố định của ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị: (cid:1) scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây (cid:1) scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây

là giá trị mặc định.

(cid:1) fixed: Cố định ảnh nền so với nội dung trang web. Khi

áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ

(cid:1) Background:

(cid:1) Thuộc tính background-position: Dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Các đơn vị chính xác như centimeters, pixels, inches,… hay các đơn vị qui đổi như %, hoặc các vị trí đặt hay các đơn vị qui đổi như %, hoặc các vị trí đặt biệt như top, bottom, left, right.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ

(cid:1) Background: Cú pháp rút gọn:

background:|

| |

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ

(cid:1) Background:

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ

(cid:1) Font: Định dạng font chữ, gồm các thuộc

tính (cid:1) Thuộc tính font-family: Chỉ định tên các loại font. (cid:1) Thuộc tính font-style: Chỉ định các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) lên các (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web.

(cid:1) Thuộc tính font-variant: được dùng để chọn giữa chế

độ bình thường và small-caps của một font chữ.

(cid:1) Thuộc tính font-weight: cách thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold).

(cid:1) Thuộc tính font-size: Chỉ định kích thước font.

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

CSS

(cid:1) Font: Cấu trúc rút gọn:

font: |

|| |< font-family>

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ

(cid:1) Các thuộc tính hay sử dụng:

(cid:1) Font:

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

ĐỊNH DẠNG TEXT

(cid:1) Các thuộc tính đối với Text:

(cid:1) Thuộc tính Color: Định màu chữ cho một thành

phần nào đó trên trang web. body { color:#000 } h1 { color:#0000FF } h1 { color:#0000FF }

(cid:1) Thuộc tính text-indent: Cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản. p { text-indent:30px }

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

ĐỊNH DẠNG TEXT

(cid:1) Các thuộc tính đối với Text:

(cid:1) Thuộc tính text-align: Dùng để canh chỉnh văn bản cho các thành phần trong trang web: left (mặc định), right, center và justify. Thuộc tính letter-spacing: Dùng để định khoảng (cid:1) Thuộc tính letter-spacing: Dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản.

(cid:1) Thuộc tính text-decoration: Dùng để thêm các hiệu ứng gạch chân (underline), gạch xiên (line- through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp nháy (blink).

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT