Bài giảng Công nghệ Web (ASP.NET): Bài 3 - Lê Quang Lợi

Bài 3 cung cấp các kiến thức về Thiết kế web với CSS. Những nọi dung chính và cơ bản trong chương này gồm có: Giới thiệu về CSS, cú pháp CSS, áp dụng CSS, một số thuộc tính thông dụng, một số ví dụ. Mời các bạn tham khảo.
Nội dung trích xuất từ tài liệu:
Bài giảng Công nghệ Web (ASP.NET): Bài 3 - Lê Quang Lợi Bài3:Thiết kế web với CSS Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn Bài 03: Thiết kế web với CSS » Giới thiệu về CSS » Cú pháp CSS » Áp dụng CSS » Một số thuộc tính thông dụng » Một số ví dụ Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 3.1Giới thiệu CSS » CSS: Cascading Style Sheet (định khuôn/ kiểu) » Cài đặt thuộc tính cho thẻ HTML » Thiết kế web: CSS và HTML » Thống nhất trong thiết kế giao diện ứng dụng web » Dựa trên mã giả » Cài đặt các thuộc tính bị ẩn Ví dụ: h1{color:red} *{font-size:12pt;} #myStyle{ witdh:200px; float:left; } Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 3.2 Cú pháp CSS » Cấu trúc CSS: Ten{ /* Noi dung*/} » Tên: Tiền chỉ thị + Nhãn » Tiền chỉ thị “*,#,.”: thể hiện loại áp dụng cho các thẻ » Tên : đại diện cho nội dung và giống tên bến » Một số quy tắc đặt tên và áp dụng trong HTML  TheHTML: Áp dụng cho thẻ tương ứng  #nhãn {/*Nội dung*/}: khi áp dụng …  .nhãn{ /* Nội dung*/}: khi áp dụng … Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 3.2 Cú pháp CSS » Tạo tên: đại diện cho nội dung CSS bên trong » Xây dựng nội dung Thuộc tính: giá trị; Ví dụ: color:red; font-size:13pt; » Chú thích trong CSS: /* nội dung*/ .Div30{ H1, #myStyle{ H2{ Witdh:300px; font-color:red; font-color:red; float:left; font-szie:13pt; font-szie:13pt; } } } Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 3.2 Cú pháp CSS Một số quy tắc cho đặt tên CSS mở rộng » *,/* áp dụng cho toàn bộ thẻ*/- » TheHTML: Cài đặt cho thẻ HTML » Ten ten1: cài đặt ten1 trong ten » Ten, ten: Áp dụng cùng một nội dung » Ten:tensukien: áp dụng nội dung sự kiện » Ten: first-Child và Ten:last-Child : Tên(thẻ đầu/cuối) Ví dụ: #myDiv , .myStyle { color:red;} Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 3.3 Áp dụng CSS với HTML » Trên thẻ:  Áp dụng chỉ cho thẻ: CH » Thẻ Style: tác dụng trên trang hiện hành h2{ color:red;} » Thẻ style: Liên kế với file CSS. Áp dụng cho nhiều trang Ví dụ: Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 3.4 Thuộc tính hay dùng trong thiết kế Web » Thuộc tính kích thước  Boder [-top/left/right/bottom]: witdh style color;  Witdh, min-witdh:  Heigh, min-heigh:  Boderstyle: Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 3.4 Thuộc tính hay dùng trong thiết kế Web » Bo góc cho thẻ HTML border -*-*-radius: [x] [y]? x = horizontal radius [ | ] y = vertical radius [ | ] border-radius: *kích cỡ];// CSS3 -webkit-border-radius: 3px; -moz-border-radius: *kích cỡ];// FF -webkit-border-radius: *kích cỡ+ border-top-left radius: x y; border-top-right-radius: x y; border-bottom-right-radius: 0; border-bottom-left-radius: x y; Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 3.4 Thuộc tính hay dùng trong thiết kế Web » Padding và margin:  Margin [-top/left/right/bottom]: So sánh ngoài  Padding [-top/left/right/bottom+: So sánh trong … Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 3.4 Thuộc tính hay dùng trong thiết kế Web » Backgound-color: màu nền cho giao diện » Backgound-image: (URL); ảnh nền cho giao diện » background-repeat:repeat-y/repeat-x/no-repeat; » Float=“left/right”: Chiều đính cho giao diện thẻ » Clear=“none/both/left/right”: việc xóa giao diện » Color: màu sắc cho nội dung văn bản Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 3.5 Ví dụ về CSS (khung giao diện) » Khung: thể hiện cách trình bày (chia trang) thành các khối giao diện nhỏ » Cấu trúc một khung Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 3.5 Ví dụ về CSS (khung giao diện CSS) .khoi{ .giua{ width:200px; min-height:200px; float:left; padding:4px; margin-right:8px; margin-bottom:8px; border: 1px solid #CCCCCC; } } .dau{ .Cuoi{ border-top:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; padding:4px; padding:4px; } } Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 3.5 Ví dụ về CSS (Menu) » Menu (nhiều tầng) hoặc ngang/dọc Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY ...