• Increase font size
  • Default font size
  • Decrease font size
  • default style
  • blue style
  • red style
Thứ bảy 30 Tháng 8 2014
You are here: Home Joomla Kiến Thức Nâng Cao Cơ Bản CSS - Các thuộc tính của font chữ và định nghĩa font chữ cho văn bản

Bất Cứ Khi Nào Bạn Cần Hãy Gọi: 0906.800.529

Chỉ mục bài viết
Cơ Bản CSS
Các vấn đề về văn bản và cách định dạng văn bản
Các thuộc tính của font chữ và định nghĩa font chữ cho văn bản
Cách viết giản lược trong CSS
Tất cả các trang

 

VI. 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;
}

08. Khai báo các thuộc tính font ở dạng shorthand.
p {
font: italic small-caps 900 12px arial;
}

Đườ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:

01. Thuộ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

03. Chọ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;
}

Thuộc tính đường bao ngoài (Outline)

Thuộc tính Outline sẽ vẽ một đường bao ngoài toàn bộ một phần tử HTML, đối với phần tử có đường viền (border) thì đường bao này sẽ bao trọn đường viền của phần tử đó. Cũng tương tự như đường viền bạn có thể đặt cho nó các thuộc tính về màu săc, độ lớn và kiểu.
Có một điều cần chú ý là các thuộc tính của đường bao này có thể không được hỗ trợ trên IE

01. Đặt thuộc màu cho đường bao

Nếu muốn đặt màu cho đường bao chúng ta có thể sử dụng thuộc tính outline-color:
p {
outline-color: #CC0000;
}

02. Đặt độ rộng cho đường bao.

Tương tự như đường viền, để đặt độ rộng cho đường bao chúng ta đặt giá trị độ lớn cho thuộc tính outline-width:
p {
outline-width: 2px;
}

03. Chọn kiểu đường bao

Để chọn kiểu cho đường bao chúng ta sẽ đặt lần lượt các giá trị cho thuộc tính outline-style:
p {
outline-style: dotted;
}
STT    outline-style
1    none
2    hidden
3    dotted
4    dashed
5    solid
6    double
7    groove
8    ridge
9    inset
10    outset

Để cho gọn chúng ta cũng có thể viết các giá trị của thuộc tính Outline dưới dạng shorthand như sau:
div.outline {
outline: 1px solid #000;
}

Các thuộc tính của margin

Thuộc tính margin sẽ định nghĩa khoảng trắng bao quanh một phần tử HTML. Nó có thể dùng giá trị âm để lồng nội dung vào với nhau. Tương ứng với 4 phía của một phần tử chúng ta có 4 thuộc tính tương ứng. Mặt khác để viết cho gọn chúng ta cũng có thể dùng cách viết giản lược để định nghĩa các giá trị cho thuộc tính margin.

Đối với các trình duyệt Netcape và IE thì giá trị mặc định của thuộc tính margin là 8px. Nhưng Opera thì không hỗ trợ như vậy. Để cho thống nhất chúng ta có thể đặt margin mặc định cho toàn bộ các phần tử.
Các giá trị mà thuộc tính margin có thể nhận được đó là: auto, length, %. Chúng ta đặt giá trị nào là tùy thích cộng với việc tương ứng tỉ lệ với các phần tử khác.
Tương ứng với 4 phía ta có 4 thuộc tính:

1.    margin-top:
2.    margin-right:
3.    margin-bottom:
4.    margin-left:

Để cho gọn chúng ta cũng có thể việt thuộc tính margin dưới dạng shorthand
div.margin {
margin: 10px 4px 5px 9px; /* top  |  right  |  bottom  |  left*/
}

CSS padding

CSS padding sẽ định nghĩa khoảng trống giữa mép của các phần tử tới các phần tử con hoặc nội dung bên trong. Chúng ta không thể gán giá trị âm cho thuộc tính này. Cũng giống như margin thuộc tính padding cũng tương ứng với 4 phía của phần tử.
Tương ứng với 4 phía của phần tử chúng ta có 4 thuộc tính padding tương ứng đó là:

1.    padding-top:
2.    padding-right:
3.    padding-bottom:
4.    padding-left:

Các giá trị có thể gán cho các thuộc tính này là : % hoặc length
Để viết cho gọn chúng ta cũng có thể viết thuộc tính padding dưới dạng shorthand.
div.padding {
padding: 5px 3px 2px 8px;



Login Form



Hỗ Trợ Trực Tuyến


Hotline: 0906.800.529

Thống Kê Truy Cập

mod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_counter
mod_vvisit_counterHôm Nay147
mod_vvisit_counterTháng Này5780
mod_vvisit_counterTất Cả160291

Bình Chọn

Bạn Hay Sửa Máy Tính Ở Đâu