Bài giảng Công nghệ Web (ASP.NET): Bài 3 - Lê Quang Lợi
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (546.93 KB, 14 trang )
Bài3:Thiết kế web với CSS
Lê Quang Lợi
Email:
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:
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:
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 <the ID=“nhãn” … > …
.nhãn{ /* Nội dung*/}: khi áp dụng <the Class=“nhãn”..> …
Lê Quang Lợi:
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{
Witdh:300px;
float:left;
}
H1, #myStyle{
font-color:red;
font-szie:13pt;
}
H2{
font-color:red;
font-szie:13pt;
}
<div class=“Div30”> </div>
Lê Quang Lợi:
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:
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ẻ: <the style=“thuoctinh:giatri;” … />
Áp dụng chỉ cho thẻ:
CH
» Thẻ Style: tác dụng trên trang hiện hành
<Style type=“text/css”>
h2{ color:red;}
</style>
» Thẻ style: Liên kế với file CSS. Áp dụng cho nhiều trang
<link rel=“StyleSheet” href=“URL” />
Ví dụ: <link rel=“stylesheet” href=“../myStyle.css” />
Lê Quang Lợi:
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:
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 [ <length> | <%> ]
y = vertical radius [ <length> | <%> ]
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:
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:
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:
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
<div class=“khoi”>
<div class=“dau”> </div>
<div class=“giua”> </div>
<div class=“Cuoi”> </div>
</div>
Lê Quang Lợi:
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)
.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:
}
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:
Môn học : Công nghệ WEB (ASP.NET)
CNPM-CNTT-ĐHSPKT HY
