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
}
Leave a Comment