Ngôn ngữ CSS – CSS Height Line

Ngôn ngữ CSS

– CSS Height Line

Bài trước

Bài sau

Thuộc tính Height Line

Thuộc tính line-height thiết lập chiều caotối thiểu giữa các dòng văn bản trong một khung hộp (Box).

Cú pháp:

tagName {
    line-height: giá trị;
}

Thuộc tính height line có các giá tri sau:

Giá trị
Ví dụ
Mô tả

normal
line-height: normal;
Không tăng khoảng cách giữa các ký tự cho chữ.

Số
line-height: 1.5;
Tăng hoặc giảm khoảng cách giữa các dòng, có thể là số tự nhiên hoặc số thập phân.

Khoảng cách
line-height: 2px;
Tăng hoặc giảm khoảng cách giữa các dòng, đơn vị có thể là px, em, %, …

inherit
line-height: inherit;
Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ:
 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p{line-height:50px}
</style>
</head>

<body>
<body>
<p>Một thành phần rất quan trọng trong mọi website chính là liên kết. 
Cũng như một đối tượng văn bản thông thường, chúng ta hoàn 
toàn có thể áp dụng các thuộc tính định dạng văn bản thông
 thường cho một liên kết. Hơn nữa, CSS còn cung cấp một điều 
khiển đặc biệt được gọi là pseudo-classes. 

Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng 
cho một đối tượng liên kết ở một trạng thái xác định như khi 
liên kết chưa được thăm (a:link), khi rê chuột lên liên kết (a:hover), 
khi liên kết được thăm (a:visited) hay khi liên kết đang được kích hoạt
 – đang giữ nhấn chuột (a:active). 

Với điều khiển pseudo-classes cùng với các thuộc tính CSS đã 
học chắc chắn sẽ mang lại rất nhiều ý tưởng về trang trí liên kết cho trang web. 
Sau đây chúng ta sẽ tiến hành một số ví dụ để tìm hiểu 
thêm về các khả năng trang trí cho một liên kết dựa trên pseudo-classes. </p>
</body>
</html>

Xem ví dụ

Bài trước

Bài sau