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

Chia sẻ: Tằng Túy | Ngày: | Loại File: PDF | Số trang:14

Thêm vào BST

Báo xấu

58
lượt xem 7
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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