Các thuộc tính của CSS cho văn bản

Ở phần trước chúng ta đã biết về tác dụng và vị trí để đặt các thuộc tính của CSS trên một file (X)HTML ( CSS Internal ), trên một dòng ( CSS Inline ) hay trên một file CSS riêng biệt ( CSS External ). Và cách để link file CSS tới các file (X)HTML cần định dạng.

Các thuộc tính của CSS dùng để định dạng cơ bản cho text.

font-family : Định dạng cho toàn bộ phần text trên trang web. Thông thường nó được gán ngay cho Body

Ví dụ:

font-family: "Times New Roman", Times, serif;

Với ví dụ trên, trình duyệt sẽ đọc font mặc định ban đầu là font "Times New Roman" sẽ được ưu tiên. Trong trường hợp máy bạn dùng không có font Times New Roman, thì Web browser sẽ load đến font xếp thứ hai và tương tự như vậy với font thứ ba.

font-size : Quy định kích cỡ cho phần text

Ví dụ:

font-size: 12px;

Với ví dụ trên, trình duyệt sẽ xác nhận là font có kích cỡ là 12px

font-weight : Quy định độ dày nét chữ

Ví dụ:

font-weight: bold;

Với ví dụ trên, nét chữ sẽ dày hơn như ta đặt chế độ Bold cho chữ trong một số phần mềm editor

line-height : Chính là khoảng cách giữa các dòng trên một khối văn bản

Ví dụ:

line-height: 16px;

Có nghĩa là khoảng cách giữa các dòng trên khối văn bản là 16px.

text-decoration : Thường dùng để định dạng cho các đoạn link liên kết

Ví dụ:

a:hover {text-decoration: none;}

Quy định trạng thái cho đoạn link khi ta hover chuột qua thì không có thay đổi, gạch chân (underline)...

color : Quy định màu sắc cho đoạn văn bản

Ví dụ:

p { color: red; } hoặc p { color: #FF6600; }

Bạn có thể dùng tên màu cơ bản như yellow, black, white, red, blue, green... hoặc số pantone màu theo chuẩn Hex (6 kí tự và bắt đầu bằng dấu "#"): #FF6600.

Trên đây là một số thuộc tính cơ bản cho văn bản trình bày trên website được định dạng bởi CSS. Ngoài ra còn có một số các thuộc tính khác như cách sắp xếp theo chiều dọc (vertical-align), khoảng cách giữa các ký tự (letter-spacing)... Nhưng các thuộc tính đó không thường xuyên xuất hiện trên văn bản web. Các bạn có thể tìm hiểu những thuộc tính phụ đó qua các trang web về CSS.

Set as favorite

Bookmark

Comments (1) Add Comment