CSS cơ bản

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
}

Leave a Comment