cƠ bẢn vỀ css - fit.mta.edu.vnfit.mta.edu.vn/files/danhsach/htmlbai6.pdf · scroll: Ảnh...

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

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

CƠ BẢN VỀ CSS

1

� DHTML,

� Một số đặc tính cơ bản của CSS,

� Khai báo CSS,

� Màu chữ, màu nền và font chữ,

NỘI DUNG


� Màu chữ, màu nền và font chữ,

� Định dạng Text,

� Pseudo-classes cho liên kết

� DHTML (HTML động) có thể được định nghĩanhư 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.

DHTML


động.

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

� Đặc điểm của DHTML:

� Kiểu động (Dynamic Style): Bằng cách dùngcá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à

DHTML


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 đáplại những tương tác của người dùng.

� Đặc điểm của DHTML:

� Nội dung động (Dynamic Content): Có thểthay đổi chữ và hình ảnh trên trang web saukhi nó hiển thị. Ta có thể thay đổi nội dungcủa trang đó khi đáp lại sự kiện nào đó như

DHTML


của trang đó khi đáp lại sự kiện nào đó nhưnhập dữ liệu, click chuột,....

� 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ượngtrong cấu trúc. Mỗi đối tượng có thể truy cậpvà lập trình độc lập.

� Đặc điểm của DHTML:� Định vị (Positioning): Trong HTML động chúng tacó 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

DHTML


nó trở nên động.� Định vị tuyệt đối: Chỉ rõ vị trí xác định theo các điểm«pixels»

� Định vị tương đối: Chỉ ra vị trí tương đối của các phần tử.

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

� Đặc điểm của DHTML:� 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 trangweb. Khi trang được nạp lên, dữ liệu từ CSDLtrên máy chủ được hiển thị trong bảng.

DHTML


� Scripting: Ta có thể viết các script để thay đổikiểu và nội dung của trang web.

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

DHTML


� Đ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.

� Đây là đặc điểm quan trọng bởi vì thông thường nếucác font được chỉ ra không có trong máy của ngườidù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.

� Giới thiệu:� 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ểucủa những phần tử HTML trên trang sau khi chúng đượchiển thị.� Sự thay đổi này đáp ứng sự tương tác của người dùng.

KHAI BÁO CSS


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

� Style sheet được tạo nên từ các quy tắc kiểu cách vàđược nhúng vào trong tài liệu HTML, mà nó báo chotrình duyệt biết cách trình bày tài liệu.

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

� Giới thiệu: Có hai cách thay đổi kiểu trên trang web:� 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ẻ đó.

KHAI BÁO CSS


phần tử của thẻ đó.<h1 style="color:Blue; background-color:#C0C0C0">Xin Chào</h1>

� 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;}

� 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ủacác thẻ đó.

p

{

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


{

background-color: #FF00FF;

text-align: right;

width: 100%;

height: 150px;

}

� Có thể khai báo CSS bằng nhiều cách khácnhau. 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



<div id="vidu" style="width:300px; height:100px; background-color: #00FFFF;

text-align: justify;">...

</div>

� Có thể khai báo CSS bằng nhiều cách khácnhau.

2. Style đặt trong phần <head><html>

<head><title>Tiêu đề trang</title>



<title>Tiêu đề trang</title><style type="text/css">#vidu{ width: 400px; height:200px;

background-color : #AB0176; text-align :

"justify";}</style>

</head><body>

<div id="vidu“> … </div></body>

</html>

� Có thể khai báo CSS bằng nhiều cách khácnhau.

3. Style đặt trong file mở rộng .css


<html>

<head>


<head>

<title>Tiêu đề trang</title>

<link type="text/css"

rel="Stylesheet"

href="StyleSheet.css" />

</head>

<body>

<div id="vidu“> ...</div>

</body>

</html>

� Có thể khai báo CSS bằng nhiều cách khácnhau. 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



2. Style đặt trong phần <head>

3. Style đặt trong file mở rộng .css

4. Style mặc định của trình duyệt

� CSS có tính kế thừa: Giả sử có thẻ <div id="vidu"> và file css



Tương đương

� Khai báo CSSselector {property: value}

KHAI BÁO CSS

� 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, classhay id.

� Property: Chính là các thuộctính quy định cách trình bày.

� Value: Giá trị của thuộc tính.

� Các kiểu Selector:� Class selectors : Tên của Class selector có tiền tố là dấu chấm (.)

KHAI BÁO CSS


� Các kiểu Selector:� Class selectors :

� Chú ý:� Nếu muốn chỉ định class cho một phần tử nào đó thì đặt thẻHTML đó trước CSS rule.

KHAI BÁO CSS


HTML đó trước CSS rule.

� Ta có thể áp dụng nhiều class cho một phần tử bằng cáchliệt kê các class đó cách nhau bởi dấu cách.

� Các kiểu Selector:� ID selectors : Style áp dụng cho phần tử HTML, đặt trước ID của nó dấu “#”.

KHAI BÁO CSS


� Các kiểu Selector:� Grouped selectors : Style áp dụng cho nhiều selectors.

KHAI BÁO CSS


� Các kiểu Selector:� Contextual selectors (Selectors theo ngữ cảnh): Địnhnghĩa thuộc tính cho phần tử HTML tùy thuộc vào ngữcảnh của nó.

KHAI BÁO CSS


� Background: Định dạng màu nền/ảnh nềncho các thành phần trong trang web.� Thuộc tính background-color: Định dạng màunền cho các thành phần trong trang web

Thuộc tính background-image: Chèn ảnh nền

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


� Thuộc tính background-image: Chèn ảnh nềnvào các thành phần trên trang web.

� Background: Định dạng màu nền/ảnh nềncho các thành phần trong trang web.� Thuộc tính background-repeat: Lặp lại ảnh nềntrên các thành phần trên trang web.� repeat-x: Chỉ lặp lại ảnh theo phương ngang.



� repeat-x: Chỉ lặp lại ảnh theo phương ngang.

� repeat-y: Chỉ lặp lại ảnh theo phương dọc.

� repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.

� no-repeat: Không lặp lại ảnh.

� Background:� 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ộidung trang web. Thuộc tính này có 2 giá trị:� scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây



� scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.

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

� Background:� Thuộc tính background-position: Dùng một cặp 2giá trị để biểu diễn tọa độ đặt ảnh nền. Các đơnvị 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í đặtbiệt như top, bottom, left, right.

� Background: Cú pháp rút gọn:background:<background-color>|

<background-image>

<background-repeat>|



<background-attachment>|

<background-position>

� Background:



� Font: Định dạng font chữ, gồm các thuộctính� Thuộc tính font-family: Chỉ định tên các loại font.

� 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ácthành phần trang web.

� 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ữ.

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

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

� Font: Cấu trúc rút gọn:font: <font-style>|

<font-variant>|<font-weight>|

<font-size> |< font-family>

CSS


� Các thuộc tính hay sử dụng:� Font:



� Các thuộc tính đối với Text:� 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 }

ĐỊNH DẠNG TEXT


h1 { color:#0000FF }

� 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 }

� Các thuộc tính đối với Text:� Thuộc tính text-align: Dùng để canh chỉnh vănbả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

ĐỊNH DẠNG TEXT


� Thuộc tính letter-spacing: Dùng để định khoảngcách giữa các ký tự trong một đoạn văn bản.

� Thuộc tính text-decoration: Dùng để thêm cáchiệ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).

� Pseudo-classes cho các liên kết: Pseudo-classes cho phép xác định các hiệu ứng địnhdạng cho một đối tượng liên kết ở một trạngthái xác định như:

a:link: Khi liên kết chưa được thăm

PSEUDO-CLASSES CHO LIÊN KẾT


� a:link: Khi liên kết chưa được thăm

� a:hover: Khi rê chuột lên liên kết

� a:visited: Khi liên kết được thăm

� a:active: Khi liên kết đang được kích hoạt – đanggiữ nhấn chuột ().

� a:focus: Khi liên kết nhận focus

� Pseudo-classes cho các liên kết:

PSEUDO-CLASSES CHO LIÊN KẾT


THẢO LUẬN – CÂU HỎI


� Thực hành các ví dụ

� Tìm hiểu mở rộng CSS3

� Nên ý tưởng thiết kế các chức năng cho bài tập lớn

BÀI TẬP


bài tập lớn

cƠ bẢn vỀ css - fit.mta.edu.vnfit.mta.edu.vn/files/danhsach/htmlbai6.pdf · scroll: Ảnh...

Documents