Bài giảng Công nghệ Web - Bài 03: Thiết kế web với CSS - 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