Xem chi tiết hướng dẫn buổi 7 qua video
A – LÝ THUYẾT
I – CÁC THUỘC TÍNH VỀ FONT CHỮ
1 – Thuộc tính font-family
a) Khái
niệm
Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font
sẽ được dùng để hiển thị một thành phần trang web. Theo đó, thì font đầu tiên
được liệt kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên
máy tính truy cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ
được ưu tiên…cho đến khi có một font phù hợp
b) Cách
sử dụng
font-fmily:
value;
value là
tên của font chữ như Arial, Tahoma, “Times New Roman”,…
Chú ý: Giá trị của thuộc tính font-family có thể có nhiều loại Font, và mỗi loại Font đó cách
nhau bởi “dấu phẩy”;
2 – Thuộc tính font-style
a) Khái
niệm
Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web
b) Cách
sử dụng
fon-style:
value;
value
là một trong các giá trị sau:
- Italic: Kiểu in nghiêng
- Oblique: Kiểu hay xiên
3 – Thuộc tính font-variant
a) Khái
niệm
Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và
small-caps của một font chữ
Một font small-caps là một font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa
chuẩn để thay thế những chữ in thường. Nếu như font chữ dùng để hiển thị không
có sẵn font small-caps thì trình duyệt sẽ hiện chữ in hoa để thay thế
b) Cách
sử dụng
font-variant:
small-caps
4 – Thuộc tính font-weight
a) Khái
niệm
Thuộc
tính font-weight mô tả cách thức thể
hiện của font chữ là ở dạng bình thường (normal)
hay in đậm (bold). Ngoài ra, một số
trình duyệt cũng hỗ trợ mô tả độ in đậm bằng các con số từ 100 – 900
b) Cách
sử dụng
font-weight:
value;
value
là một trong các giá trị sau:
- Bold: Chữ in đậm
- 100 – 900: Độ đậm của chữ được tăng dần từ giá trị 100 đến giá trị 900
5 – Thuộc tính font-size
a) Khái
niệm
Kích thước của một font được định
bởi thuộc tính font-size
Thuộc tính này nhận các giá trị đơn
vị đo hỗ trợ bởi CSS bên cạnh các giá trị xx-small, x-small, small, medium,
large, x-large, xx-large, smaller, larger. Tùy theo mục đích sử dụng của
website bạn có thể lựa chon những đơn vị phù hợp. Ví dụ trang web của bạn phục
vụ chủ yếu là những người già, thị lực kém hay những người dùng sử dụng các màn
hình máy tính kém chất lượng thì bạn có thể cân nhấc sử dụng các đơn vị qui đổi
như em hay %. Như vậy sẽ đảm bảo font chữ trên trang web của bạn luôn ở kích
thước phù hợp
b) Cách
sử dụng
font-size:
value;
value là
giá trị được tính bằng đơn vị chiều dài
Chú ý: Thông thường chúng ta sử nên dụng đơn vị là
Pixels
II – CÁC THUỘC TÍNH VỀ TEXT
1 – Thuộc tính color (Mầu chữ)
a) Định
nghĩa
Để định màu chữ cho một thành phần
nào đó trên trang web chúng ta sử dụng thuộc tính color. Giá trị của thuộc tính
này là các giá trị màu CSS hỗ trợ
b) Cách
sử dụng
color: value;
value là
tên mầu hoặc mã mầu
2 – Thuộc tính text-indent
a) Định
nghĩa
Thuộc tính text-indent cung cấp khả
năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản. Giá trị
thuộc tính này là các đơn vị đo cơ bản dùng trong CSS
b) Cách
sử dụng
text-indent: value;
value là
giá trị tính theo đơn vị độ dài để tạo ra khoảng thụt đầu dòng
3 – Thuộc tính text-align
a) Khái
niệm
Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bản cho các thành phần
trong trang web
Cũng tương tự như các lựa chọn canh
chỉnh văn bản trong các trình soạn thảo văn bản thông dụng như MS Word, thuộc
tính này có tất cả 4 giá trị : left
(canh trái – mặc định), right (canh
phải), center (canh giữa) và justify (canh đều)
b) Cách
sử dụng
text-align: value;
value là một trong 4 giá trị sau:
- Left: Canh trái (Mặc định)
- Right Canh phải
- Center: Canh giữa
- Justify: Canh đều
4 – Thuộc tính letter-spacing
a) Khái
niệm
Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong
một đoạn văn bản
b) Cách
sử dụng
letter-spacing:
value;
value
là giá trị được tính theo đơn vị độ dài thể hiện khoảng cách giữa các ký tự
trong văn bản
5 – Thuộc tính text-decoration
a) Khái
niệm
Thuộc tính text-decoration giúp bạn thêm các hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là
văn bản nhấp nháy (blink)
b) Cách
sử dụng
text-decoration: value;
value
là một trong 4 giá trị sau:
·
Underline: Gạch chân
·
Line-through: Gạch xiên
·
Overline: Gạch đầu
·
Blink: Nhấp nháy
6 – Thuộc tính text-transform
a) Khái
niệm
Text-transform là thuộc
tính qui định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào
văn bản gốc trên HTML
Thuộc tính này có tất cả 4 giá trị:
uppercase (in hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên
trong mỗi từ) và none (không áp dụng
hiệu ứng – mặc định)
b) Cách
sử dụng
text-transform:
value;
value
là một trong 4 giá trị sau:
- Uppercase: In hoa
- Lowercase: In thường
- Capitalize: In hoa ở ký tự đầu tiên trong mỗi từ
- None: Không áp dụng hiệu ứng (Mặc định)
B – THỰC HÀNH
I – BÀI TẬP THỰC HÀNH
1 – Bài tập
Bài 1:
Sử
dụng tối đa các thuộc tính đã học trong CSS để hoàn thành một mẫu Menu trái (Left
Sidebar Menu) như hình 1 dưới đây, cho biết các thông số sau:
- Bborder:0px, Cellpading:0px, Cellspacing:0px
- Độ rộng của Menu là 220px
- Độ cao của thẻ TR chứa Menu Tile là 26px, font: arial, size: 12px
- Độ cao của các thẻ TR chứa các Menu Item là 30px, size:11px
Đáp án:
<html>
<head><title>Bài 1</title></head>
<style type="text/css">
a{
font-family:arial;
font-size:11px;
font-weight:bold;
color:#000000;
text-decoration:none;
text-transform:none;
}
</style>
<body>
<table style="background:#efefef;" align="center" width="220px" border="0" cellpadding="0" cellspacing="0">
<tr height="26px" style=" font-family:arial; font-weight: bold; font-size:12px; color:#FFFFFF; text-align:center; text-transform:capitalize; background:url(images/header2_menu.gif) repeat-x;">
<td>danh mục chính</td>
</tr>
<tr height="30px">
<td><a style="text-decoration:underline; color:#FF6600;" href="#">• Trang chủ</a></td>
</tr>
<tr height="30px">
<td><a href="#">• Dịch vụ CNTT</a></td>
</tr>
<tr height="30px">
<td><a href="#">• Tin tức khoa học & công nghệ</a></td>
</tr>
<tr height="30px">
<td><a href="#">• Thông báo chung của công ty</a></td>
</tr>
<tr height="30px">
<td><a href="#">• Tuyển dụng việc làm</a></td>
</tr>
</table>
</body>
</html>
II – BÀI TẬP LÀM THÊM
1 – Bài tập
Sử
dụng tối đa các thuộc tính đã học trong CSS để hoàn thành một mẫu Menu ngang (Navbar
Menu) như hình dưới đây. Cho biết các thông số thiết kế như sau:
- Bborder:0px, Cellpading:0px, Cellspacing:0px
- Độ rộng của Menu là 500px
- Độ cao là 32px;
- Font:arial, size:11px
Đáp án:
<html>
<head><title>Bài 2</title></head>
<style type="text/css">
table{
background:url(images/navbar.gif) top left repeat-x;
}
td{
background:url(images/navbar_line.gif) top right no-repeat;
text-align:center;
}
td a{
font-family:arial;
font-size:11px;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
text-transform:capitalize;
}
</style>
<body>
<table align="center" width="500px" height="32px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a style="color:#FF6600;" href="#">trang chủ</a></td>
<td><a href="#">giới thiệu</a></td>
<td><a href="#">tin tức</a></td>
<td><a href="#">liên hệ</a></td>
<td><a href="#">diễn đàn</a></td>
</tr>
</table>
</body>
</html>
>>Xem bài trước: Bài 6 - CSS LÀ GÌ – CÁC QUY ƯỚC TRONG CSS VÀ MỘT SỐ THUỘC TÍNH ĐƠN GIẢN VỀ FONT NỀN
>>Xem bài tiếp theo: Bài 8 - CSS (CB) CLASS, ID VÀ ĐIỀU KHIỂN HOVER
No comments:
Post a Comment