CƠ B ẢN V Ề CSS20149172128).pdfDHTML (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

Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin

CƠ BẢN VỀ CSS

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

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ữ,� Định dạng Text,� Pseudo-classes cho liên kết

NỘI DUNG


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

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

DHTML


� Đặc điểm của DHTML:� 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à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.

DHTML


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

DHTML


� Đặc điểm của DHTML:� Đị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 chonó 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.

DHTML


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

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

DHTML


� Đặ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.� Đ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ếu

cá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.

DHTML


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

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

KHAI BÁO CSS


� 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ộituyến được định nghĩa bằng thuộc tính STYLE đối vớiphầ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ộituyế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;}

KHAI BÁO CSS


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

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

}

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


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

<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 .css4. 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ácthuộ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.� 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.

KHAI BÁO CSS


� 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): Định

nghĩ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àu

nền cho các thành phần trong trang web� Thuộc tính background-image: Chèn ảnh nền

vào các thành phần trên trang web.

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


� 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ền

trên các thành phần trên trang web.� 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

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 2

giá 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í đặ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á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 }

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

ĐỊNH DẠNG TEXT


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

ĐỊNH DẠNG TEXT


� 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� 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 – đang

giữ nhấn chuột ().� a:focus: Khi liên kết nhận focus

PSEUDO-CLASSES CHO LIÊN KẾT


� 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

Documents

CƠ B ẢN V Ề CSS20149172128).pdfDHTML (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