Công nghệ web - Bài 3:Thiết kế web với CSS

Bài3:Thiết kế web với CSS Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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ụ Bài 03: Thiết kế web với CSS Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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; } 3.1Giới thiệu CSS Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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 3.2 Cú pháp CSS Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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*/ 3.2 Cú pháp CSS H2{ font-color:red; font-szie:13pt; } H1, #myStyle{ font-color:red; font-szie:13pt; } .Div30{ Witdh:300px; float:left; } Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 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;} 3.2 Cú pháp CSS Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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ụ: 3.3 Áp dụng CSS với HTML Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » Thuộc tính kích thước  Boder [-top/left/right/bottom]: witdh style color;  Witdh, min-witdh:  Heigh, min-heigh:  Boderstyle: 3.4 Thuộc tính hay dùng trong thiết kế Web Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » Bo góc cho thẻ HTML 3.4 Thuộc tính hay dùng trong thiết kế Web x = horizontal radius [ | ] y = vertical radius [ | ] border-top-left radius: x y; border-top-right-radius: x y; border-bottom-right-radius: 0; border-bottom-left-radius: x y; border -*-*-radius: [x] [y]? border-radius: *kích cỡ];// CSS3 -moz-border-radius: *kích cỡ];// FF -webkit-border-radius: *kích cỡ+ -webkit-border-radius: 3px; Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » Padding và margin:  Margin [-top/left/right/bottom]: So sánh ngoài  Padding [-top/left/right/bottom+: So sánh trong 3.4 Thuộc tính hay dùng trong thiết kế Web Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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 3.4 Thuộc tính hay dùng trong thiết kế Web 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{ width:200px; float:left; margin-right:8px; margin-bottom:8px; } .dau{ border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; padding:4px; } .giua{ min-height:200px; padding:4px; border: 1px solid #CCCCCC; } .Cuoi{ border-right:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; 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