Bài giảng Nhập môn HTML và thiết kế Web - Cơ bản về CSS - Chu Thị Hường

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 Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
Định dạng Text,
Pseudo-classes cho liên kết
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. DHTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
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.
Đặ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à DHTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 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.
Đặ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 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ư DHTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 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ượng trong cấu trúc. Mỗi đối tượng có thể truy cập và lập trình độc lập.
Đặ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 cho DHTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 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 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. DHTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
Scripting: Ta có thể viết các script để thay đổi kiể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 ta chèn các font mà tùy chọn trên ttrang web, ta có thể có gói font trong trang. DHTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
Đ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ườ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.
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ểu của những phần tử HTML trên trang sau khi chúng được hiển thị.
Sự thay đổi này đáp ứng sự tương tác của người dùng. KHAI BÁO CSS Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
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 cho trì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ĩ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.
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 Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Xin Chào
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ủa các thẻ đó. p { MỘT SỐ ĐẶC TÍNH CƠ BẢN CỦA CSS Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT background-color: #FF00FF; text-align: right; width: 100%; height: 150px; }
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 MỘT SỐ ĐẶC TÍNH CƠ BẢN CỦA CSS Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT <div id="vidu" style="width:300px; height:100px; background-color: #00FFFF; text-align: justify;"> ...
Có thể khai báo CSS bằng nhiều cách khác nhau. 2. Style đặt trong phần Tiêu đề trang MỘT SỐ ĐẶC TÍNH CƠ BẢN CỦA CSS Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT #vidu { width: 400px; height:200px; background-color : #AB0176; text-align : "justify"; }
Có thể khai báo CSS bằng nhiều cách khác nhau. 3. Style đặt trong file mở rộng .css MỘT SỐ ĐẶC TÍNH CƠ BẢN CỦA CSS Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Tiêu đề trang <link type="text/css" rel="Stylesheet" href="StyleSheet.css" /> ...
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 MỘT SỐ ĐẶC TÍNH CƠ BẢN CỦA CSS Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 2. Style đặt trong phần 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 MỘT SỐ ĐẶC TÍNH CƠ BẢN CỦA CSS Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Tương đương
Khai báo CSS selector {property: value} KHAI BÁO CSS
Selector: Các đối tượng mà chúng ta sẽ áp dụng các Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT thuộc tính trình bày. Nó có thể là các tag HTML, class hay id.
Property: Chính là các thuộc tí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 Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
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 Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT  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.
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 Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
Các kiểu Selector:
Grouped selectors : Style áp dụng cho nhiều selectors. KHAI BÁO CSS Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
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 Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
Background: Định dạng màu nền/ảnh nền cho 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 MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
vào các thành phần trên trang web.
Background: Định dạng màu nền/ảnh nền cho 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. MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
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ội dung 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 MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 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 đơ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 MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT biệt như top, bottom, left, right.
Background: Cú pháp rút gọn: background:| | MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT |
Background: MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
Font: Định dạng font chữ, gồm các thuộc tí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 MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT thà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 font chữ 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: | || | CSS Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
Các thuộc tính hay sử dụng:
Font: MÀU CHỮ, MÀU NỀN VÀ FONT CHỮ Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
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 Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
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ă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 ĐỊNH DẠNG TEXT Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
cá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á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).
Pseudo-classes cho các liên kết: Pseudo- classes cho phép xác định các hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định như: a:link: Khi liên kết chưa được thăm PSEUDO-CLASSES CHO LIÊN KẾT Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

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 các liên kết: PSEUDO-CLASSES CHO LIÊN KẾT Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT THẢO LUẬN – CÂU HỎI Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
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 Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT