Bài 14. Định dạng văn bản bằng CSS

1. CSS là gì? Vai trò của CSS

Trong một trang web có hai việc tưởng chừng khác nhau nhưng lại gắn chặt với nhau:

• HTML dùng để tạo nội dung và cấu trúc: tiêu đề, đoạn văn, danh sách, bảng, liên kết, ...
• CSS dùng để định dạng, làm trang web đẹp và dễ đọc hơn.

Nhờ phân chia rõ “ai làm nội dung, ai làm hình thức”, ta có thể thay đổi giao diện của nhiều trang chỉ bằng cách sửa một tệp CSS dùng chung; việc sửa đổi, bảo trì cũng thuận tiện hơn nhiều so với viết định dạng cục bộ từng chỗ.

2. Cấu trúc một quy tắc CSS

bo_chon {
    thuoc_tinh_1: gia_tri_1;
    thuoc_tinh_2: gia_tri_2;
}

Một quy tắc CSS gồm hai phần chính:

• Bộ chọn (selector): cho biết phần tử nào của trang web sẽ được định dạng, ví dụ h1, p.
• Khối khai báo: đặt trong cặp dấu ngoặc nhọn, gồm nhiều dòng dạng “thuộc tính: giá trị”, các dòng này phân cách nhau bằng dấu chấm phẩy.

Ví dụ quy tắc sau làm cho mọi thẻ h1 có chữ màu đỏ, cỡ 20 pixel:

h1 {
    color: red;
    font-size: 20px;
}

3. Đưa CSS vào trang web

Có ba cách thường dùng:

1. 1.

   Viết trực tiếp trong thẻ HTML (CSS nội tuyến, inline): dùng thuộc tính style ở thẻ mở.

   <h1 style="color: red; font-size: 20px;">Tieu de</h1>

2. 2.

   Viết khối quy tắc trong thẻ style đặt ở phần head của trang (CSS trong trang, internal):

   <style>
       h1 {
           color: red;
           font-size: 20px;
       }
   </style>

3. 3.

   Viết trong tệp riêng có đuôi .css rồi liên kết vào trang (CSS ngoài, external). Tệp style.css chỉ chứa các quy tắc CSS:

   h1 {
       color: red;
       font-size: 20px;
   }

   Trong phần head của trang HTML, viết thêm dòng liên kết:

   <link rel="stylesheet" href="style.css">

4. Các thuộc tính định dạng văn bản thường dùng

5. Một số bộ chọn thường dùng

Thuộc tính class có thể dùng cho nhiều phần tử; thuộc tính id chỉ nên xuất hiện một lần trong một trang, nhờ vậy bộ chọn #mo-dau sẽ chỉnh sửa đúng một chỗ duy nhất.

6. Ví dụ minh hoạ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gioi thieu ban than</title>
<style>
    h1 {
        color: blue;
        font-size: 24px;
        text-align: center;
    }
    p {
        font-family: Arial, sans-serif;
        font-size: 16px;
        line-height: 1.5;
    }
    .dong-dau {
        text-indent: 2em;
    }
</style>
</head>
<body>
<h1>Gioi thieu ban than</h1>
<p class="dong-dau">Em ten la ...</p>
<p>So thich cua em la ...</p>
</body>
</html>

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}
p {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}
.dong-dau {
    text-indent: 2em;
}

<link rel="stylesheet" href="dinhdang.css">

7. Lưu ý và lỗi hay gặp

8. Câu hỏi ôn tập