Tài liệu hướng dẫn Kỹ thuật viên - Học phần 3: Lập trình ứng dụng web với ASP.Net

Tóm tắt Tài liệu hướng dẫn Kỹ thuật viên - Học phần 3: Lập trình ứng dụng web với ASP.Net: ...lstKhu_dl.Items.Add("Đà Lạt") End If End Sub 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 42/174 Private Sub butChon_dia_diem_Click() Dim i As Integer lblDia_diem.Text = "" For i = 0 To lstKhu_Dl.Items.Count - 1 If lstKhu_dl.Items(i).Sele...Ghi / Không - Hủy) là do VS.Net hỗ trợ, giá trị thuộc tính CommandName của các nút lệnh trên là những giá trị mặc định được qui định sẵn. Ứng với mỗi CommandName mặc định, sẽ có các sự kiện để ta thực hiện các xử lý tương ứng: ƒ Command name="Edit" Î Sự kiện EditCommand ƒ Command name="Updat...Control("lnkNha_xb") Dim Mnxb As Integer = e.Item.DataItem("Mnxb") lnkNha_xb.Text = lNXB.Thuoc_tinh(Mnxb, "Ten_nha_xuat_ban") lnkNha_xb.CommandArgument = MNXB Bước 3. Bẫy biến cố ItemCommand để phát sự kiện tương ứng Private Sub dtlSach_ItemCommand(, e ) If e.CommandName = "Ten_sach" T...

pdf175 trang | Chia sẻ: havih72 | Lượt xem: 368 | Lượt tải: 0download
Nội dung tài liệu Tài liệu hướng dẫn Kỹ thuật viên - Học phần 3: Lập trình ứng dụng web với ASP.Net, để tải tài liệu về máy bạn click vào nút DOWNLOAD ở trên
òng 
, ,: đặt dòng văn bản nằm trong cặp tag là tiêu đề 
(heading). 
c. Tag ghi chú 
Cũng như các ngôn ngữ lập trình, để cho phép người viết trang web đặt những ghi chú dành riêng cho mình 
vào trong trang web, HTML cung cấp tag ghi chú. Đây là tag đặc biệt so với những tag khác: 
Ghi nhớ tag qua ý nghĩa 
HTML 4.0 có tương đối nhiều tag, để nhớ được nhiều, người viết thường phải hiểu được ý nghĩa tên 
của mỗi tag. Các tag trong HTML thường là viết tắt của những từ gợi nhớ như: Paragraph, 
BReack, 
II.1.2. Định dạng Text 
a. Định dạng kiểu chữ 
Trong các tài liệu, văn bản chúng ta thường sử dụng các kiểu chữ đậm, nghiêng, gạch dưới,ví dụ 
sau minh hoạ các tag được dùng định dạng kiểu chữ: 
In đậm 
In rất đậm 
chữ lớn 
nhấn mạnh 
in nghiêng 
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 158/174 
chữ nhỏ 
Công thức hoá học của nước: H2O 
X bình phương: X 2 
Để xem code HTML của một trang web đã có từ IE, trên menu View, chọn mục Source. Bạn có thể 
học hỏi được nhiều điều bằng cách xem code HTML của những trang web được thiết kế chuyên 
nghiệp nhưng hãy nhớ rằng những trang web đẹp luôn được viết rất công phu và thường sử dụng 
nhiều công cụ (tool) hỗ trợ. 
b. Font chữ, màu sắc và canh lề 
Ví dụ: 
Computer Joke 
Kỹ thuật viên: 
Máy tính của anh có ổ đĩa mềm chứ ? 
Khách: 
Tôi không nhìn thấy bên trong. Có chữ 
" Intel Pentium Inside 
" 
Thuộc tính của một tag 
Một thông tin định dạng có thể gồm nhiều chi tiết, trong ví dụ trên, font chữ sẽ hiển thị cho một 
chuỗi văn bản được chỉ định qua tag tuy nhiên, font chữ lại gồm nhiều chi tiết như: tên font, 
kích thước, màu sắc, 
Các thông tin chi tiết được gọi là các thuộc tính của tag. Một tag có thể có nhiều thuộc tính. Bạn 
nên đặt giá trị của thuộc tính trong dấu ngoặc kép. 
Định dạng trước nội dung văn bản 
Web browser sẽ không quan tâm đến cách bạn trình bày đoạn code HTML trong file .html mà chỉ 
dựa vào các tag để trình bày nội dung trang web. 
Tag được dùng khi bạn muốn yêu cầu web browser "tôn trọng" các khoảng trắng và xuống 
dòng trong đoạn code HTML của mì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 159/174 
Ví dụ: 
Không 
 có tag 
 <pre> 
 Đoạn văn bản này 
 nằm trong 
 tag <pre> 
Kết quả: 
Không có tag 
 Đoạn văn bản này 
 nằm trong 
 tag 
II.1.3. Liên kết các trang web (Link) 
URL: (Uniform Resource Locator), là một đường dẫn được dùng trên Internet để chỉ tới một trang 
web cụ thể nào đó. Thuật ngữ thường dùng thay cho url là : "địa chỉ" 
Domain name: Là tên dễ nhớ của một địa chỉ. Những tên này được quản lý bởi một tổ chức quốc 
tế, đảm bảo không có hai địa chỉ khác nhau nào có cùng tên. Nếu bạn muốn website của mình có 
một tên gợi nhớ để mọi người có thể truy cập, bạn sẽ phải đem tên đó đi đăng ký. 
Trong domain name, phần cuối cùng dùng để phân loại các website: 
ƒ Com : commercial – website thương mại, kinh doanh 
ƒ Edu : education – website về giáo dục, đào tạo 
ƒ Gov : government – website của chính phủ 
ƒ vn, uk, au,  : vietnam, united kingdom, austratlia – website của quốc gia nào. 
a. Tạo liên kết 
HTML dùng tag (anchor) để tạo liên kết tới một trang web. Tag có ba thuộc tính chính là: 
ƒ href : địa chỉ của trang web muốn liên kết 
ƒ target : cửa sổ sẽ hiển thị trang web 
ƒ name : tên của mối liên kết 
Ví dụ: 
Liên kết tới Yahoo! 
Thuộc tính target chỉ ra cửa sổ sẽ dùng để mở trang web mới. Nếu không đặt giá trị cho target, 
trang web bạn đang xem sẽ bị thay thế bằng trang web mới. Để mở trang web trong một cửa sổ 
mới, đặt target="_blank" 
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 160/174 
b. Liên kết trong cùng trang web 
Nếu như cho bạn được quyền đặt tên cho các tag của HTML, có lẽ bạn sẽ thay bằng 
(Link) thì đúng hơn. Tuy nhiên thực sự mang ý nghĩa là một mỏ neo (anchor) khi bạn dùng để 
liên kết tới một đoạn văn bản nào đó trong chính bản thân trang web. 
Thuộc tính name của dùng để đặt tên cho đoạn văn bản sẽ liên kết tới. Chú ý, giá trị của name 
có dấu # đứng trước. 
Ví dụ: 
Đến cuối trang 
cuối trang 
c. Liên kết với địa chỉ email 
Để cho phép người đọc gửi mail cho bạn bằng cách click vào liên kết, gán giá trị "mailto:địa chỉ 
email" cho thuộc tính href. 
II.1.4. Danh sách (List) 
Danh sách gồm 2 loại: có thứ tự và không có thứ tự 
Danh sách trong HTML tương tư như định dạng Bullets and Numbering trong Word. Thông thường, 
chúng ta ít phân biệt giữa danh sách có thứ tự và không có thứ tự. Với danh sách có thứ tự, mỗi 
mục sẽ được đánh thứ tự 1, 2, 3 hay a, b, c,  trong khi với danh sách không 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 

File đính kèm:

  • pdftai_lieu_huong_dan_ky_thuat_vien_hoc_phan_3_lap_trinh_ung_du.pdf