Đang tải... (xem toàn văn)
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.
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 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 HTML » Thống thiết kế giao diện ứng dụng web » Dựa mã giả » Cài đặt 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 thị + Nhãn » Tiền thị “*,#,.”: thể loại áp dụng cho thẻ » Tên : đại diện cho nội dung giống tên bến » Một số quy tắc đặt tên áp dụng HTML TheHTML: Áp dụng cho thẻ tương ứng #nhãn {/*Nội dung*/}: áp dụng … nhãn{ /* Nội dung*/}: á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 » Xây dựng nội dung Thuộc tính: giá trị; Ví dụ: color:red; font-size:13pt; » Chú thích CSS: /* nội dung*/ Div30{ Witdh:300px; float:left; } H1, #myStyle{ font-color:red; font-szie:13pt; } H2{ font-color:red; 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 thẻ*/» TheHTML: Cài đặt cho thẻ HTML » Ten ten1: cài đặt ten1 ten » Ten, ten: Áp dụng nội dung » Ten:tensukien: áp dụng nội dung kiện » Ten: first-Child 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 cho thẻ: CH » Thẻ Style: tác dụng trang 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 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 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 -moz-border-radius: *kích cỡ];// FF -webkit-border-radius: 3px; -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 thiết kế Web » Padding margin: Margin [-top/left/right/bottom]: So sánh Padding [-top/left/right/bottom+: So sánh … 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 thiết kế Web » Backgound-color: màu cho giao diện » Backgound-image: (URL); ảnh 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 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ụ CSS (khung giao diện) » Khung: thể cách trình bày (chia trang) thành khối giao diện nhỏ » Cấu trúc 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ụ CSS (khung giao diện CSS) giua{ khoi{ min-height:200px; padding:4px; width:200px; float:left; margin-right:8px; margin-bottom:8px; border: 1px solid #CCCCCC; } } Cuoi{ dau{ border-right:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; padding:4px; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right: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ụ CSS (Menu) » Menu (nhiều tầng) ngang/dọc Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY ... -webkit-border-radius: 3px; -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... 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 thiết kế Web » Bo góc cho... Ten: first-Child 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