Đang tải... (xem toàn văn)
Chương 3 MỘT SỐ CÔNG Chương 3 MỘT SỐ CÔNG
Trang 206/17/24Công cụ thiết kế Web - CSS2
Nội dung
•Ngôn ngữ đánh dấu HTML•PHP, Javascript
•Một số công cụ hỗ trợ thiết kế website
Trang 33.1 Ngôn ngữ đánh dấu HTML
3.1.1 Tổng quan về HTML3.1.2 Các thẻ của HTML
3.1.3 Sử dụng Frontpage thiết kế web tĩnh
3.1.4 Định dạng website với CSS
Trang 406/17/24Công cụ thiết kế Web - CSS4
•Giúp tiết kiệm được rất nhiều thời gian và công sức
cho việc thiết kế web.
•Có thể định nghĩa nhiều style vào một thẻ HTML
(Cascading)
Trang 606/17/24Công cụ thiết kế Web - CSS6
Cách chèn CSS
•Đặt trong <head>…</head>•Đặt bên trong thẻ style:
<style type=“text/css”><!
Nội dung định nghĩa style
</style>
Trang 7Cách chèn CSS (tt)
•Đặt liên kết với 1 file CSS bên ngoài:
<link href=“địa chỉ file" rel="stylesheet" type="text/css">
•Đặt nội tuyến:
<tên_thẻ style=“tt1:gt1;tt2:gt2;…”>
Trang 8Khai báo và sử dụng style
Trang 9Chú ý khi viết style
•Style phân biệt chữ hoa, chữ thường•Để ghi chú trong style sử dụng:
Đoạn ghi chú
*/
Trang 1006/17/24Công cụ thiết kế Web - CSS10
Khai báo style
selector {
Property1: Value1; Property2: Value2;}
Trang 11Style áp dụng cho thẻ cụ thể
•Trường hợp 1 thẻ: Đặt selector là tên_thẻ
p {
color: red;}
•Khai báo đồng thời nhiều thẻ: Viết danh sách tên thẻ
phân cách bởi dấu phảyh1,h2,h3,h4,h5,h6{
font-family:arial;
Trang 1206/17/24Công cụ thiết kế Web - CSS12
Trang 13Sử dụng lớp
•Đặt thuộc tính class của thẻ=“tên_lớp”:<tên_thẻ class=“tên_lớp”>
•Ví dụ:
<p class=“loai1”>Đoạn này màu đỏ</p>
<h1 class=“loai2”>Style không có hiệu lực </h1>
<h2 class=“loai3”>Tiêu đề màu xanh</h3>
Trang 1406/17/24Công cụ thiết kế Web - CSS14
Trang 15Sử dụng định danh
•Mỗi định danh là duy nhất trên trang
•Đặt thuộc tính id của thẻ = định_danh<tên_thẻ id=“định_danh”>
•Ví dụ:
<p id=“doan1”>Đoạn này màu đỏ</p><h1 id=“loai2”>Tiêu đề xanh</h1>
Trang 16Một số trường hợp cụ thể
Trang 17CSS Basic
1.CSS Background2.CSS Text
3.CSS Font4.CSS Border5.CSS Margin6.CSS Padding7.CSS List
Trang 1806/17/24Công cụ thiết kế Web - CSS18
CSS Advanced
1.CSS Dimension2.CSS Classification3.CSS Positioning4.CSS Pseudo-class5.CSS Pseudo-element6.CSS Media Types
Trang 19CSS cho nền
Trang 2006/17/24Công cụ thiết kế Web - CSS20
CSS cho nền (tt)
Trang 21CSS và cho bản
Trang 2206/17/24Công cụ thiết kế Web - CSS22
CSS và cho bản (tt)
Trang 23CSS và font
Trang 2406/17/24Công cụ thiết kế Web - CSS24
CSS và font (tt)
Trang 25CSS và font (tt)
Trang 2606/17/24Công cụ thiết kế Web - CSS26
CSS và font (tt)
Trang 27CSS và đường viền
Trang 2806/17/24Công cụ thiết kế Web - CSS28
Trang 3006/17/24Công cụ thiết kế Web - CSS30
Trang 3206/17/24Công cụ thiết kế Web - CSS32