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.
Trang 1Bài3:Thiết kế web với CSS
Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn
Trang 2» 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
Trang 3» CSS : C ascading S tyle S heet (đị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
Trang 4» Cấu trúc CSS : Ten { /* Noi dung */ }
» 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” > …
3.2 Cú pháp CSS
Trang 5» 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*/
<div class =“ Div30 ”> </div> <p id =“ myStyle ”> </p>
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;
}
Trang 6Mộ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
Ví dụ: #myDiv , myStyle { color:red;}
3.2 Cú pháp CSS
Trang 7» Trên thẻ : <the style =“ thuoctinh : giatri; ” … />
Áp dụng chỉ cho thẻ: <h1 style =“ font-size:12pt ”> CH</h1>
» 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” />
3.3 Áp dụng CSS với HTML
Trang 8» 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
Trang 9» Bo góc cho thẻ HTML
3.4 Thuộc tính hay dùng trong thiết kế Web
x = horizontal radius [ <length> | <%> ]
y = vertical radius [ <length> | <%> ]
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;
Trang 10» 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
Trang 11» 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
Trang 123.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>
Trang 133.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-left:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC; padding:4px;
}
Trang 143.5 Ví dụ về CSS (Menu)
» Menu (nhiều tầng) hoặc ngang/dọc