Giáo trình Lập trình ứng dụng Web với ASP.NET - Đại học Khoa học Tự nhiên TP.HCM

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