Bài 6: Các thuộc tính của font chữ và định nghĩa font chữ cho văn bản

Các thuộc tính về font chữ sẽ cho phép bạn thay đổi họ font (font family), độ đậm (boldness), kích thước (size) và kiểu font (style).

01Đặt font cho đoạn văn bản.

Để đặt một loại font chữ nào đó cho đoạn văn bản thì chúng ta sẽ sử dụng thuộc tính font-faily:

p {
font-family: Arial, Tahoma, Verdana, sans-serif;
}
Thông thường bạn cần phải khai báo họ của font ở cuối (trong ví dụ trên thì sans-serif là chỉ tới 1 họ font) để trong trường hợp máy của người duyệt Web không có các font như mình đã đặt thì nó sẽ lấy font mặc định của họ font trên.

02Đặt đoạn văn bản sử dụng font nhãn caption.

p.caption {
font: caption;
}
03Đặt kích thước font cho đoạn văn bản.

Khi chúng ta muốn những đoạn văn bản hoặc tiêu đề có kích thước của chữ khác nhau, chúng ta có thể sử dụng thuộc tính font-size:

h1 {
font-size: 20px;
}

h3 {
font-size: 12px;
}
04Định lại kích thước font bằng thuộc tính font-size-ajust:

p {
font-size-ajust: 0.60;
}
05Đặt kiểu font cho đoạn văn bản.

Chữ đậm, chữ nghiêng,… được đặt với thuộc tính font-style:

p {
font-style: italic; /* normal  |  italic |  oblique */
}
06

Muốn hiển thị font ở dạng small-caps hoặc ở dạng normal thì chúng ta sẽ sử dụng thuộc tính font-variant. Thuộc tính này có hai giá trị normal và small-caps

p {
font-variant: normal; /* normal  |  small-caps */
}
07Đặt độ đậm nhạt của font.

Khi chúng ta muốn thay đổi độ đậm nhạt của văn bản chúng ta sẽ dùng thuộc tính font-weight:. Chúng ta có thể đặt giá 3 loại giá trị cho thuộc tính này 1. normal(bình thường), 2. bold(đậm), 3. 300(đặt dạng số)

h3 {
font-weight: bold;
}
08Khai báo các thuộc tính font ở dạng shorthand.

p {
font: italic small-caps 900 12px arial;
}

Bài 7: Đường viền và các thuộc tính của đường viền

Các thuộc tính của đường viền (border) sẽ cho phép đặt các giá trị đặc biệt cho đườn viền như kiểu đường viền, kích thước, màu sắc. Thuộc tính này sẽ được áp dụng cho các thẻ HTML như <div>, <li>, <table>,…

Trong thuộc tính đường viền (border) chúng ta có 3 giá trị cơ bản đó là:

1.      border-color:

2.      border-width:

3.      border-style:

01Thuộc tính màu của đường viền

Để đặt màu cho đường viền chúng ta sẽ đặt thông số màu cho thuộc tính border-color:

div.color {

  border-color: #CC0000;

}

02Đặt chiều rộng cho đường viền (border)

Nếu muốn đặt chiều rộng của đường viền chúng ta sẽ đặt giá trị cho thuộc tính border-width:

div.borerwidth {

  border-width: 2px;

}

STT	Giá trị
1	thin
2	medium
3	thick
4	length

03Chọn kiểu của đường viền

Bạn có thể sử dụng thuộc tính border-style để đặt kiểu cho đường viền. Chúng ta có thể gán cho thuộc tính này 9 giá trị khác nhau tương ứng với 9 kiểu đường viền khác nhau.

div.borderstyle {

  border-style: solid;

}

STT	border-style
1	none
2	hidden
3	dotted
4	dashed
5	solid
6	double
7	groove
8	ridge
9	inset
10	outset

Với 4 phía của đối tượng ta có 4 thuộc tính border tương ứng:

1.      border-top:

2.      border-right:

3.      border-bottom:

4.      border-left:

Ứng với đường viền của mỗi phía chúng ta đều có 3 giá trị (color, width, style)

STT	Phía	Thuộc tính
1	top	border-top-color: border-top-width: border-top-style:
2	right	border-right-color: border-right-width: border-right-style:
3	bottom	border-bottom-color: border-bottom-width: border-bottom-style:
4	left	border-left-color: border-left-width: border-left-style:

Chúng ta có thể dùng phương pháp viết mã giản lược (shorthand) để viết các thuộc tính của đường viền gọn hơn. Giả sử chúng ta đặt thuộc tính border của thẻ <div> với độ rộng bằng 1, kiểu solid và màu là #CC0000

div.border {

  border: 1px solid #CC0000;

}

Posted in: CSS