Giáo trình Lập trình ứng dụng Web với ASP. NET

TRUNG TÂM TIN HỌC – ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM 
227 Nguyễn Văn Cừ - Quận 5- Tp.Hồ Chí Minh 
Tel: 8351056 – Fax 8324466 – Email: ttth@hcmuns.edu.vn 
Mã tài liệu: DT_NCM_LT_TLGD_ASP.NET 
Phiên bản 1.0 – Tháng 06/05 
TAØI LIEÄU HÖÔÙNG DAÃN GIAÛNG DAÏY
CHÖÔNG TRÌNH KYÕ THUAÄT VIEÂN
Hoïc phaàn 3 
LAÄP TRÌNH ÖÙNG DUÏNG WEB 
VÔÙI ASP.NET 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 1/174 
MỤC LỤC 
GIỚI THIỆU .......................................................................................................... 5 
GIÁO TRÌNH LÝ THUYẾT....................................................................................... 6 
TÀI LIỆU THAM KHẢO........................................................................................... 6 
Bài 1 ...................................................................................................................... 7 
TỔNG QUAN VỀ ASP.NET ...................................................................................... 7 
I. Tổng quan về lập trình ứng dụng Web............................................................ 8 
I.1. HTTP và HTML - Nền móng của Kỹ thuật lập trình web ..................................... 8 
I.2. Tìm hiểu các mô hình ứng dụng .....................................................................10 
II. Giới thiệu về ASP.Net.................................................................................... 12 
II.1. Tìm hiểu về .Net Phatform.............................................................................12 
II.2. Tìm hiểu về .Net Framework ..........................................................................12 
II.3. Tìm hiểu về ASP.Net .....................................................................................16 
II.4. Những ưu điểm của ASP.Net..........................................................................16 
II.5. Quá trình xử lý tập tin ASPX...........................................................................17 
III. Web Server ................................................................................................... 18 
III.1. Internet Information Services.........................................................................18 
III.2. Cài đặt Web Server .......................................................................................19 
III.3. Cấu hình Internet Information Services...........................................................22 
III.4. Tạo các ứng dụng web trên IIS......................................................................23 
IV. Tạo ứng dụng Web đầu tiên.......................................................................... 24 
IV.1. Khởi động MS Visual Studio .Net ....................................................................24 
IV.2. Tạo mới ứng dụng Web.................................................................................25 
IV.3. Phân loại tập tin trong ASP.Net ......................................................................27 
IV.4. Làm quen với các thành phần giao diện trên VS .Net .......................................28 
Bài 2 .................................................................................................................... 32 
WEB SERVER CONTROL ...................................................................................... 32 
I. HTML Control ................................................................................................ 33 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 2/174 
II. ASP.Net Web Control .................................................................................... 35 
II.1. Asp.Net Page................................................................................................35 
II.2. Điều khiển cơ bản.........................................................................................36 
II.3. Điều khiển kiểm tra dữ liệu............................................................................46 
II.4. Một số điều khiển khác..................................................................................53 
II.5. Đối tượng ViewState .....................................................................................59 
Bài 3 .................................................................................................................... 61 
CÁC ĐIỀU KHIỂN LIÊN KẾT DỮ LIỆU .................................................................. 61 
I. Điều khiển DataGrid...................................................................................... 62 
I.1. Các thao tác định dạng lưới ...........................................................................62 
I.2. Xử lý sắp xếp................................................................................................67 
I.3. Xử lý phân trang...........................................................................................69 
I.4. Tùy biến các cột ...........................................................................................70 
I.5. Cập nhật dữ liệu trực tiếp trên lưới.................................................................74 
II. Điều khiển DataList ...................................................................................... 79 
II.1. Sử dụng DataList để hiển thị dữ liệu...............................................................79 
II.2. Cập nhật dữ liệu với DataList .........................................................................83 
III. Điều khiển Repeater ..................................................................................... 87 
IV. Các ví dụ mở rộng ......................................................................................... 90 
IV.1. Xử lý đảo hướng sắp xếp trong DataGrid ........................................................90 
IV.2. Tạo biểu tượng sắp xếp trong cột cho DataGrid...............................................91 
IV.3. Định dạng hình thức hiển thị cho dòng dữ liệu thỏa điều kiện trên DataGrid ......92 
IV.4. Tạo hiệu ứng chọn khi rê chuột qua các dòng dữ liệu ......................................93 
Bài 4 .................................................................................................................... 94 
XÂY DỰNG LỚP XỬ LÝ DỮ LIỆU.......................................................................... 94 
I. Thiết kế tổng quan........................................................................................ 96 
I.1. Cấu trúc chi tiết lớp XL_BANG ........................................................................98 
I.2. Xây dựng lớp xử lý nghiệp vụ.......................................................................102 
I.3. Sử dụng lớp xử lý nghiệp vụ ........................................................................104 
Bài 5 .................................................................................................................. 108 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 3/174 
XÂY DỰNG ĐỐI TƯỢNG THỂ HIỆN.................................................................... 108 
I. Tạo mới đối tượng thể hiện......................................................................... 109 
II. Sử dụng đối tượng thể hiện ........................................................................ 111 
III. Tạo phương thức cho đối tượng thể hiện.................................................... 112 
IV. Tạo sự kiện cho đối tượng thể hiện ............................................................ 113 
IV.1. Thiết kế .....................................................................................................114 
IV.2. Xử lý..........................................................................................................114 
Bài 6 .................................................................................................................. 117 
XÂY DỰNG VÀ QUẢN LÝ ỨNG DỤNG ................................................................. 117 
I. Đối tượng Request, Response..................................................................... 118 
I.1. Đối tượng Response....................................................................................118 
I.2. Đối tượng Request ......................................................................................120 
II. Đối tượng Session, Application ................................................................... 122 
II.1. Đối tượng Application..................................................................................123 
II.2. Đối tượng Session.......................................................................................124 
III. Đối tượng Server......................................................................................... 125 
IV. Đối tượng Cookies ...................................................................................... 125 
IV.1. Giới thiệu ...................................................................................................125 
IV.2. Làm việc với Cookies ...................................................................................126 
V. Tập tin quản lý và cấu hình ứng dụng......................................................... 127 
V.1. Global.asax.................................................................................................127 
V.2. Web.config.................................................................................................128 
VI. Tổ chức & xây dựng ứng dụng.................................................................... 133 
VI.1. Tổ chức lưu trữ ứng dụng............................................................................133 
VI.2. Xây dựng ứng dụng ....................................................................................134 
Bài 7 .................................................................................................................. 136 
WEB SERVICE ................................................................................................... 136 
I. Tìm hiểu về Web Services ........................................................................... 137 
II. Xây dựng Web Services .............................................................................. 140 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 4/174 
II.1. Tạo Web Services trong VS .Net...................................................................140 
II.2. Kiểm tra Web Service ..................................................................................141 
III. Sử dụng Web Service.................................................................................. 143 
III.1. Sử dụng Web Service do người dùng xây dựng .............................................144 
III.2. Sử dụng Web Services được cung cấp miễn phí trên mạng.............................144 
IV. Xây dựng Web Services truy xuất dữ liệu................................................... 148 
IV.1. Web Service: WS_KHACH_HANG..................................................................148 
IV.2. Sử dụng WS_KHACH_HANG.........................................................................150 
Bài 8 .................................................................................................................. 152 
PHỤ LỤC ........................................................................................................... 152 
I. Cơ sở dữ liệu dùng trong ứng dụng ............................................................ 153 
I.1. Thiết kế cơ sở dữ liệu..................................................................................153 
I.2. Dữ liệu thử .................................................................................................156 
II. Giới thiệu về các tag HTML ......................................................................... 157 
II.1. Cơ bản về tag HTML....................................................................................157 
II.2. Các tag nhập liệu........................................................................................163 
III. Cascading Style Sheets - CSS...................................................................... 166 
III.1. Giới thiệu CSS.............................................................................................166 
III.2. Cú pháp CSS ..............................................................................................167 
III.3. Sử dụng CSS trong trang HTML....................................................................169 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 5/174 
GIỚI THIỆU 
Sau khi hoàn thành khóa học này, học viên sẽ có các khả năng: 
ƒ Cài đặt và cấu hình Web Server. 
ƒ Thiết kế, xây dựng, phát triển ứng dụng web với Asp.Net 
Với thời lượng là 36 tiết LT và 60 tiết TH được phân bổ như sau: 
STT Bài học Số tiết LT Số tiết TH 
1 Tổng quan về Asp.Net 3 5 
2 Asp Server Control 6 10 
3 Các điều khiển liên kết dữ liệu 6 10 
4 Xây dựng lớp xử lý dữ liệu 3 5 
5 Xây dựng các đối tượng thể hiện 6 10 
6 Xây dựng và quản lý ứng dụng web 9 15 
7 Web Services 3 5 
Tổng số tiết: 36 60 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 6/174 
GIÁO TRÌNH LÝ THUYẾT 
TÀI LIỆU THAM KHẢO 
Trong quá trình biên soạn tài liệu hướng dẫn giảng dạy và giáo trình, chúng tôi có tham khảo một 
số tài liệu sau: 
1. MSDN Library - April 2003 & MSDN Library - July 2005 
2. MSDN Traning: Developing Microsoft ASP.NET Web Applications Using Visual Studio.NET 
3. MSDN Traning: Programming with Microsoft ADO.NET 
4. ASP.NET Web Developer’s Guide 
5. ASP.NET By Example [Steven A. Smith] 
6. Developing Web Applications with Visual Basic .NET and ASP.NET [John Alexander, Billy Hollis] 
7. Programming ASP.NET, 2nd Edition [Dan Hurwitz, Jesse Liberty] 
8. Inside ASP.NET [Scott Worley] 
9. ASP NET Bible [Mridula Parihar] 
10. ASP.NET for Web Designers [Peter Ladka] 
11. Professional ADO.NET Programming [Wrox] 
12. Cascading Style Sheets - The Designer's Edge [Molly E. Holzschlag ] 
13. JavaScript Bible - Gold Edition [Danny Goodman] 
14. Real World Web Services [Yasser Shohoud] 
15. Trang chủ ASP.Net:  
16. Trường học trực tuyến của W3C:  
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 7/174 
HƯỚNG DẪN PHẦN LÝ THUYẾT 
Bài 1 
TỔNG QUAN VỀ ASP.NET 
Tóm tắt 
Lý thuyết 3 tiết - Thực hành 5 tiết 
Mục tiêu Các mục chính Bài tập 
Tìm hiểu các kỹ thuật lập trình ứng 
dụng web và các mô hình ứng dụng. 
Cài đặt và cấu hình Web Server. 
Tìm hiểu môi trường phát triển ứng 
dụng web với Visual Studio.Net. 
1. Tổng quan về lập trình ứng dụng 
web 
2. Giới thiệu về Asp.Net 
3. Web Server 
4. Tạo ứng dụng web đầu tiên 
1.1, 1.2, 1.3, 1.4, 
1.6, 1.7 
Bài làm thêm: 
1.5 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 8/174 
I. Tổng quan về lập trình ứng dụng Web 
Ứng dụng Web là một hệ thống phức tạp, dựa trên nhiều yếu tố: phần cứng, phần mềm, giao thức, 
ngôn ngữ và thành phần giao diện. Trong phần này, c ...  có thứ tự, mỗi mục 
sẽ bắt đầu bằng dấu –, ƒ , à, {, 
Trong HTML, mỗi mục trong danh sách được bắt đầu bằng tag . Các mục trong danh sách lại 
được đặt trong một tag danh sách. HTML có các tag danh sách: 
 : ordered list – danh sách có thứ tự 
 : unordered list – danh sách không có thứ tự 
Ví dụ: 
Nội dung môn học lập trình web cơ bản 
 HTML 
 JavaScript 
Kết quả: 
Nội dung môn học lập trình web cơ bản 
1. HTML 
2. JavaScript 
Ví dụ: 
Nội dung môn học lập trình web cơ bản 
 HTML 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 161/174 
 JavaScript 
Kết quả: 
Nội dung môn học lập trình web cơ bản 
• HTML 
• JavaScript 
Thuộc tính type của các tag danh sách cho phép bạn định lại các số thứ tự hay bullet hiển thị đầu 
mỗi mục trong danh sách. Các giá trị của type: 
 - Order list - Unorder list 
"A" : A, B, C,  
"a" : a, b, c,  
"I" : I, II, III, 
"i" : i, ii, iii,  
"1" : 1, 2, 3,  (mặc định) 
"disk" : z 
"circle" : { 
"square" : ƒ 
II.1.5. Hình ảnh (Image) 
HTML những phiên bản đầu tiên không hỗ trợ việc đưa hình ảnh vào các trang web. HTML giờ đây 
đã cho phép bạn đưa vào trang web không chỉ hình ảnh mà cả các file "nhúng" như video, âm 
thanh. Nên sử dụng các định dạng file thông dụng mà web browser hỗ trợ như GIF, JPEG, BMP, 
PNG 
a. Đưa hình ảnh vào trang web 
HTML sử dụng tag (image) để hiển thị hình ảnh. Thuộc tính quan trọng nhất của là 
src (source) có giá trị là một URL chỉ ra đường dần tới file hình ảnh muốn hiển thị. 
Ví dụ: 
Yahoo! 
Kết quả: 
Yahoo! 
Chú ý: nếu file hình ảnh của bạn không nằm chung thư mục với file .html thì bạn phải chỉ ra đường 
dẫn tới file đó. 
b. Thuộc tính atl 
Trong các trường hợp hình ảnh không được hiển thị do không tìm thấy file hay web browser không 
nhận được file từ phía web server, có thể sử dụng thuộc tính alt (alternate) với giá trị là nội dung 
mô tả tóm tắt hình ảnh muốn thể hiện để người dùng dễ nhận biết. 
Ví dụ: 
Yahoo! 
Kết quả: (khi không có file c:\yahoo.gif) 
Yahoo! 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 162/174 
c. Xác định chiều rộng và chiều cao 
Để thay đổi chiều rộng và chiều cao của hình ảnh, sử dụng hai thuộc tính width và height. Giá trị 
của width và height thường dùng là pixel (mặc định) và %. 
Ví dụ: 
Yahoo! 
Kết quả: 
Yahoo! 
II.1.6. Bảng (Table) 
a. Cú pháp 
HTML sử dụng bộ một cấu trúc tag gồm có , và để định dạng các bảng: 
ƒ : phần nằm trong tag là một cấu trúc các dòng và cột của bảng 
ƒ - Table Row: phần nằm trong tag là cấu trúc các cột của một dòng 
ƒ - Table Data: phần nằm trong tag là nội dung của một cell (một cột của một dòng) 
Ví dụ: 
 Cột 1 dòng 1Cột 2 dòng 1 
 Cột 3 dòng 1 
 Cột 1 dòng 2Cột 2 dòng 2 
 Cột 3 dòng 2 
Kết quả: 
Cột 1 dòng 1 Cột 2 dòng 1 Cột 3 dòng 1 
Cột 1 dòng 2 Cột 2 dòng 2 Cột 3 dòng 2 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 163/174 
b. Width, CellSpacing và CellPadding 
ƒ width: Định độ rộng của table hay các cột. 
ƒ cellspacing: Định khoảng cách giữa các cell. 
ƒ cellpadding: Định khoảng cách từ biên của cell tới nội dung trong cell. 
Nếu không chỉ định độ rộng cho table, web browser tự động chỉnh độ rộng table đủ chứa phần nội 
dung bên trong. Tương tự, độ rộng cột sẽ tự động co giãn để thích hợp với nội dung chứa trong 
cột. Chỉ định giá trị cho width giúp bạn kiểm soát được web browser trình bày trang web của mình. 
Giá trị của width có thể đo bằng pixel hay %. Thông thường ta hay dùng %. 
Ví dụ: 
Kết quả: 
II.2. Các tag nhập liệu 
II.2.1. Tag 
Hầu hết các điều khiển cơ bản trong đều được tạo bằng tag , cấu trúc của tag 
 như sau: 
type : loại điều khiển muốn tạo. Có 5 loại điều khiển là: 
ƒ TextBox – "text" 
ƒ CheckBox – "checkbox" 
ƒ OptionBox – "radio" 
ƒ Button – "button" 
ƒ Submit/Reset – "submit"/"reset" 
name: Tên của điều khiển. Tương tự như các form bạn lập trình trên Windows, mỗi điều khiển nên 
có một tên riêng biệt. Riêng với trường hợp OptionBox, để gom nhiều option thành một nhóm, các 
OptionBox sẽ có giá trị của thuộc tính name giống nhau. 
value: Chuỗi văn bản hiển thị trên điều khiển. Với TextBox là nội dung của TextBox, với Button (kể 
cả Submit và Reset) là tiêu đề của điều khiển. 
Ví dụ: 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 164/174 
 Tên đăng nhập 
 Mật khẩu 
   
 Tạo người dùng mới 
Kết quả: 
Qua ví dụ trên, có thể thấy rằng trong bạn được phép sử dụng các tag định dạng 
để trình bày form như , , 
Chú ý: 
Với CheckBox và OptionBox, thuộc tính checked dùng để đánh dấu chọn vào CheckBox hay 
OptionBox khi trang web hiển thị. 
Thuộc tính size của textbox dùng để chỉ định chiều rộng của textbox, đơn vị của size là số ký tự. 
Tuy nhiên, nội dung của textbox không bị giới hạn bởi size. 
II.2.2. Vùng nhập liệu – tag 
Điều khiển TextBox mà bạn tạo bằng tag chỉ có khả năng nhận vào một dòng văn bản. Để 
có một TextBox cho phép nhập nhiều dòng bạn sử dụng tag . 
Nội dung 
Khác với tag , tag cần kết thúc bởi . Nội dung của TextBox tạo 
bằng cũng không định bởi giá trị của thuộc tính value, thay vào đó, phần nội dung này 
nằm giữa cặp tag. 
Thuộc tính cols của tương tự như thuộc tính size của xác định 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 165/174 
chiều rộng của TextBox tính bằng số ký tự. Thuộc tính rows cho biết chiều cao của TextBox. 
Ví dụ: 
 Hello 
Kết quả: 
II.2.3. ComboBox và ListBox 
Điều khiển ComboBox và ListBox phức tạp hơn so với các điều khiển cơ bản vì cần định nghĩa các 
mục chọn. HTML sử dụng tag để khai báo cả hai loại điều khiển này: 
Ví dụ: 
Môn học: 
 Visual Basic 
 Visual C++ 
 Java 
Kết quả: 
ƒ Thuộc tính size giúp web browser xác định điều khiển là một ComboBox (size="1") hay 
ListBox (size>1). 
ƒ Tag , như bạn thấy trong ví dụ, được đặt trong cặp tag để định nghĩa các 
mục chọn. 
ƒ Tên mục chọn được đặt trong trong cặp tag  
ƒ Mục chọn mặc định được biểu thị qua thuộc tính selected. 
ƒ Thuộc tính value cho biết giá trị của mục chọn. Bạn sẽ cần biết giá trị của mục chọn khi xử lý 
dữ liệu nhập của form. 
ƒ Nếu bạn muốn ListBox có thể được chọn nhiều mục cùng một lúc, hãy sử dụng thuộc tính 
multiple của tag . 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 166/174 
III. Cascading Style Sheets - CSS 
III.1. Giới thiệu CSS 
III.1.1. CSS là gì 
ƒ CSS: Cascading Style Sheets 
ƒ Các Style định nghĩa cách trình duyệt hiển thị các đối tượng HTML 
ƒ Các Style được lưu trong Style Sheet 
ƒ Các Style Sheet độc lập được lưu trong file CSS riêng biệt 
ƒ Các Style Sheet độc lập có thể tiết kiệm nhiều thời gian cho bạn 
ƒ Nhiều định nghĩa Style cho cùng một loại đối tượng sẽ được sử dụng theo lớp. 
III.1.2. Style giúp bạn giải quyết nhiều vấn đề 
HTML tag được thiết kế để định dạng cách hiển thị nội dung của một trang Web bằng cách định 
nghĩa như "đây là phần header", "đây là một đoạn", "đây là một bảng", Mỗi trình duyệt hiển thị 
nội dung trang Web theo cách riêng của mình dựa trên những định nghĩa đó. 
Các trình duyệt thông dụng như Internet Explorer hay Netscape liên tục thêm thắt các tag HTML 
mới của riêng mình vào danh sách các HTML tag chuẩn của W3C làm cho việc tạo lập các văn bản 
Web để hiển thị độc lập trên mọi trình duyệt ngày càng khó khăn. 
Để giải quyết vấn đề này, W3C (World Wide Web consortium- tổ chức chịu trách nhiệm tạo lập các 
chuẩn trên Web) tạo ra các STYLE cho HTML 4.0 
Cả Netscape 4.0 và Internet Explorer 4.0 đều hỗ trợ Cascading Style Sheets. 
I.1.1 Style Sheet tiết kiệm nhiều công sức thiết kế 
Các Style trên HTML 4.0 định nghĩa cách mà các thành phần HTML được hiển thị. Các Style thường 
được lưu trong các file độc lập với trang Web của bạn. Các file CSS độc lập cho phép bạn thay đổi 
hình thức thể hiện và khuôn dạng của tất cả các trang trong Website thống nhất mà chỉ phải thực 
hiện thay đổi một lần. 
I.1.2 Style nào sẽ được dùng? 
Ta có thể nói rằng, các Style sẽ được sử dụng theo "lớp" (cascade) ưu tiên khi nhiều Style định 
nghĩa một thành phần HTML được tham chiếu trong một file HTML. Thứ tự ưu tiên được sắp xếp từ 
cao xuống thấp: 
ƒ Style cho thành phần HTML cụ thể 
ƒ Style trong phần HEAD 
ƒ Style trong file CSS 
ƒ Mặc nhiên theo trình duyệt 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 167/174 
III.2. Cú pháp CSS 
Cú pháp của CSS gồm 3 phần: đối tượng, thuộc tính và giá trị: 
Đối tượng {thuộc tính: giá trị} 
Đối tượng thường là các tag HTML mà bạn muốn định nghĩa cách hiển thị. Thuộc tính là thuộc tính 
hiển thị của đối tượng đó. Giá trị là cách mà bạn muốn một thuộc tính hiển thị như thế nào. Cặp 
{thuộc tính: giá trị} được đặt trong dấu {}. 
Body {color: black} 
Nếu giá trị gồm nhiều từ, đặt chúng trong dấu nháy đôi: 
p {font-family: "sans serif"} 
Nếu bạn muốn định nghĩa nhiều thuộc tính của một đối tượng, phân cách các cặp thuộc tính: giá trị 
bằng dấu (;). 
p {text-align: center; color: red} 
Để định nghĩa Style được dễ đọc hơn: 
P { 
 text-align: center; 
 color: black; 
 font-family: arial 
} 
III.2.1. Nhóm nhiều đối tượng 
Bạn có thể định nghĩa một Style cho nhiều đối tượng cùng một lúc: 
h1, h2, h3, h4, h5, h6 { 
 color: green 
} 
III.2.2. Thuộc tính Class 
Với thuộc tính Class, bạn có thể định nghĩa nhiều Style khác nhau cho cùng một đối tượng. Ví dụ, 
bạn muốn có hai Style cho cùng một tag , nếu tag nào có class=right sẽ canh lề bên phải, 
class=center sẽ canh giữa: 
p.right {text-align: right} 
p.center {text-align: center} 
Trong trang HTML: 
 Đoạn này sẽ được canh phải. 
 Đoạn này sẽ được canh giữa. 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 168/174 
Bạn cũng có thể bỏ qua tên đối tượng để định nghĩa kiểu Style cho tất cả các thành phần có Class 
mà bạn định nghĩa. Ví dụ: 
.center { 
 text-align: center; 
 color: red 
} 
Trong trang HTML sau, cả H1 và đoạn văn bản đều được canh giữa: 
 Tiêu đề này sẽ được canh giữa. 
 Đoạn này sẽ được canh giữa. 
III.2.3. Thuộc tính ID 
Thuộc tính ID có thể dùng định nghĩa Style theo hai cách: 
Tất cả các thành phần HTML có cùng một ID. 
Chỉ một thành phần HTML nào đó có ID được định nghĩa. 
Ví dụ sau, Style dùng cho tất cả các thành phần HTML có ID là "intro": 
#intro { 
 font-size:110%; 
 font-weight:bold; 
 color:#0000ff; 
 background-color:transparent 
} 
Ví dụ sau, Style chỉ dùng cho thành phần nào có ID là "intro" trong trang Web. 
p#intro { 
 font-size:110%; 
 font-weight:bold; 
 color:#0000ff; 
 background-color:transparent 
} 
III.2.4. Ghi chú trong CSS 
CSS dùng cách ghi chú tương tự như ngôn ngữ C: các đoạn ghi chú bắt đầu bằng /* và kết thúc bởi 
*/. Ví dụ: 
/* Đây là phần ghi chú */ 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 169/174 
p { 
 text-align: center; 
 /* Đây là phần ghi chú */ 
 color: black; 
 font-family: arial 
} 
III.3. Sử dụng CSS trong trang HTML 
III.3.1. Làm thế nào chèn vào một Style Sheet 
Khi trình duyệt đọc một Style, nó sẽ định dạng nội dung trang Web theo Style đó. Có 3 cách để sử 
dụng Style trong một trang HTML. 
III.3.2. Dùng file CSS riêng 
File CSS độc lập nên dùng khi Style được áp dụng cho nhiều trang. Mỗi trang sử dụng Style định 
nghĩa trong file CSS sẽ phải liên kết đến file đó bằng tag đặt trong phần HEAD: 
 <link rel="stylesheet" type="text/css" 
 href="tên_file.css" /> 
Ví dụ một file CSS: Style.css 
hr {color: sienna} 
p {margin-left: 20px} 
body {background-image: url("images/back40.gif")} 
III.3.3. Định nghĩa các Style trong phần HEAD 
Các Style định nghĩa trong phần HEAD có thể dùng cho nhiều thành phần HTML trong trang Web 
đó. Bạn sử dụng tag để định nghĩa Style: 
 hr {color: sienna} 
 p {margin-left: 20px} 
 body {background-image: url("images/back40.gif")} 
Ghi chú: Trình duyệt thường bỏ qua các tag HTML mà nó không biết, do đó để các trình duyệt 
không hỗ trợ CSS không hiển thị phần định nghĩa Style, bạn nên đặt trong tag ghi chú của HTML: 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 170/174 
 <!-- 
 hr {color: sienna} 
 p {margin-left: 20px} 
 body {background-image: url("images/back40.gif")} 
 --> 
III.3.4. Dùng Style cho một thành phần HTML cụ thể 
Style cho một tag HTML cụ thể gần như không tận dụng được các lợi điểm của CSS ngoại trừ cách 
hiển thị đối tượng. Bạn dùng thuộc tính Style để định nghĩa Style cho thành phần HTML. 
 Đây là đoạn văn bản 
III.3.5. Nhiều Style cho một đối tượng 
Nếu một đối tượng được định nghĩa nhiều Style, nó sẽ sử dụng Style cụ thể nhất. Ví dụ, một file 
CSS định nghĩa tag H3 như sau: 
h3 { 
 color: red; 
 text-align: left; 
 font-size: 8pt 
} 
Trong một file HTML có phần định nghĩa Style cho H3 như sau: 
h3 { 
 text-align: right; 
 font-size: 20pt 
} 
Nếu trang HTML có link đến file CSS trên, Style cho H3 sẽ định nghĩa như sau: 
Color: red; 
text-align: right; 
font-size: 20pt 
III.3.6. Các ví dụ 
a. Màu chữ, màu nền 
 body {background-color: rgb(250,250,250)} 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 171/174 
 h1 {background-color: #00ff00; color: #0000ff} 
 h2 {background-color: transparent; color: #dda0dd} 
 p {color: #0000FF}} 
 Đây là dòng tiêu đề: Header 1 
 Đây là dòng tiêu đề: Header 2 
 Đây là một đoạn văn bản 
b. Canh lề văn bản 
 h1 {text-align: center} 
 h2 {text-align: left} 
 h3 {text-align: right} 
 Đây là Header 1 
 Đây là Header 2 
 Đây là Header 3 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 172/174 
c. Hình nền cho trang Web 
Body { 
 background-image: 
 url('Hinh_nen.jpg'); 
 background-repeat: repeat-x 
} 
Mặc định, hình nền sẽ được tô đầy trang Web. Tuy nhiên, nếu chúng ta muốn tô hình nền theo 
hướng ngang, hay đứng, ta chọn giá trị cho thuộc tính background-repeat tương ứng: repeat-
x/repeat-y/repeat-xy 
d. Font chữ 
Ví dụ 1: 
 h1 {font-family: Tahoma; font-size: 150%} 
 h2 {font-family: Tahoma; font-size: 120%} 
 h3 {font-family: Tahoma; font-size: 12} 
 p {font-family: Tahoma;} 
 p.sansserif {font-family: sans-serif} 
 Đây là header 1 
 còn đây là header 2 
 và đây là header 3 
 Đây là đoạn văn bản 
 Đây là đoạn văn bản có font sansserif 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 173/174 
Ví dụ 2: 
 p{text-align:justify; font-family: Tahoma; 
 font-size: 12px; border-bottom: 2px solid #ff0000} 
Để biết được những Web Service được cung cấp miễn phí trên mạng, các 
bạn có thể dùng google để thực hiện tìm kiếm. Ở đây, chúng tôi giới 
thiệu đến các bạn trang:  cung cấp khá nhiều 
các Web Service hữu ích.. 
e. Quản lý màu hiển thị của liên kết: Hyperlink 
 a {text-decoration:none; color: #0000FF} 
 a:visited {text-decoration:none; color: #0000A0} 
 a:hover {text-decoration:none; color: #FF00FF} 
 a:active {text-decoration:none; color: #FF0000} 
Tài liệu hướng dẫn giảng dạy 
Học phần 3 - Lập trình ứng dụng web với ASP.NET Trang 174/174 
Trang 
Quản lý giáo viên - TTTH