Các thuộc tính định dạng cho text

Các thuộc tính định dạng cho text thường được sử dụng định dạng trực tiếp cho các thẻ thuộc nhóm inline như: color, size, font …

Code HTML

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimum-scale=0.5">
<title>Tiêu đề website</title>
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" media="all" href="css/style.css" />
</head>
<body>
<div>
<p>Thành phần không có CSS</p>
<p class="content">
   Thành phần có CSS   
</p>
</div>
</body>
</html>

Code CSS

p.content {
   //code here
}

Thuộc tính color

Dùng để định dạng màu sắc cho thành phần, giá trị là dấu “#” kết hợp với dãy ký tự latin hoặc màu RGB hoặc tên màu sắc viết bằng tiếng anh

p.content { 
   color: #ff0000; 
   //color: rgb(255,0,0); 
   //color: red;
}

Thuộc tính font-size

Dùng để định dạng cỡ chữ cho thành phần, giá trị được tính theo nhiều đơn vị khác nhau, thường dùng nhất là px, em, %

p.content { 
   font-size: 14px; 
}

Thuộc tính font-family

Được dùng để định dạng kiểu chữ cho thành phần

p.content { 
   font-family: Arial; 
}

Thuộc tính font-weight

Được dùng để định dạng độ dày của chữ cho thành phần, giá trị chính của font-weight gồm: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900

p.content {
   font-weight: bold;
}

Thuộc tính font-style

Được dùng để định dạng kiểu chữ cho thành phần, các giá trị chính cho thuộc tính font-style gồm: italic, oblique, normal

p.content 
{    
    font-style: italic; //in nghiêng
}

Thuộc tính letter-spacing

Được dùng để định dạng khoảng cách các ký tự cho thành phần, giá trị được tính theo nhiều đơn vị khác nhau, thường dùng nhất là px, em, %

p.content 
{  letter-spacing: 5px;}

Thuộc tính line-height

Được dùng để định dạng khoảng cách các dòng cho thành phần, giá trị có thể là 0 hoặc có đơn vị

p.content 
{  
   line-height: 1.5;
}

Thuộc tính text-decoration

Được dùng xác định thành phần có gạch dưới hay không, các giá trị chính cho thuộc tính text-decoration gồm: blink, line-through, overline, underline, none

p.content 
{  
   text-decoration: line-through; //gạch dưới
}

You may also like

Leave a Comment X