Bài trước: CuTeoHocLamWeb(2): Tạo một trang web đơn giản
-----
3. Làm quen với CSS
Vậy là bạn đã biết cách dùng thẻ HTML để tạo ra các phần tử HTML, đã biết dùng phần tử HTML để hiển thị nội dung cho một trang web.
Tuy nhiên, nội dung trang web chỉ là các dòng chữ màu đen đơn điệu. Để tạo ra một trang web với định dạng, kiểu dáng, và màu sắc đa dạng chúng ta cần phải trang trí cho nó.
Để trang trí cho trang web, bạn cần sử dụng tới một ngôn ngữ khác, có tên là CSS.
3.1 CSS là gì?
CSS là viết tắt của 3 từ tiếng Anh: Cascading Style Sheets, nghĩa là viết mã định dạng cho trang web theo kĩ thuật xếp lớp. Chúng ta sẽ tìm hiểu về kĩ thuật xếp lớp (cascade) ở các phần sau.
Có thể hiểu đơn giản, bạn đã dùng HTML để tạo ra phần thô của ngôi nhà, giờ bạn sẽ dùng CSS để sơn, để trang trí cho ngôi nhà của bạn trông đẹp và bắt mắt hơn.
CSS là một ngôn ngữ định kiểu, được sử dụng để mô tả kiểu hiển thị (presentation) cho các phần tử trong tài liệu HTML hoặc XML. CSS chỉ dẫn một phần tử HTML sẽ được hiển thị như thế nào trên màn hình, trên giấy hoặc các phương tiện hiển thị khác.
Tổ chức W3C quản lý và đưa ra các đặc tả cho CSS.
Học CSS là học cú pháp của nó; học cách tìm và định dạng các phần tử HTML, để chúng ta có được trang web với cách bố trí, hiển thị, màu sắc, các hiệu ứng theo ý muốn.
Lưu ý, từ CSS có khi được sử dụng như là một động từ, ví dụ “bạn hãy CSS cái hình đó đi”. Có khi lại được sử dụng như một danh từ, ví dụ “dùng CSS để định dạng cái hình đó”.
Để dễ hiểu, chúng ta sẽ cùng thực hành với CSS.
Muốn thực hành với CSS, chúng ta chỉ cần một phần mềm viết mã đơn giản (ví dụ Notepad hoặc VS Code) và trình duyệt để hiển thị kết quả.
Để CSS cho trang web, chúng ta cần thực hiện ba bước sau:
– Có sẵn tài liệu HTML, nếu chưa có thì chúng ta cần tạo ra tài liệu HTML
– Viết các chỉ dẫn định dạng (style rule, gọi tắt là chỉ dẫn) để mô tả cách thức hiển thị cho các phần tử HTML, bạn muốn phần tử sẽ hiển thị ra trình duyệt như thế nào thì mô tả trong các chỉ dẫn. Ví dụ mô tả về màu sắc, kích thước, vị trí của phần tử.
– Gắn, hay áp các chỉ dẫn vào tài liệu HTML. Khi trình duyệt hiển thị trang web, nó sẽ dựa vào các chỉ dẫn để định dạng các phần tử HTML.
Chúng ta sẽ thực hành từng bước.
Bước 1. Viết tài liệu HTML
Chúng ta đã có tài liệu HTML ở các bài học trước nên không cần viết tài liệu HTML.
Ví dụ, ở trong trang web hiển thị bài thơ Quê Hương, chúng ta đã có phần tử h1 và p.
Do chúng ta chưa viết mã CSS cho 2 phần tử h1 và p, nên trình duyệt đã lấy CSS mặc định của trình duyệt để định dạng cho h1 có chữ màu đen, cỡ chữ lớn; p có màu đen, cỡ chữ bình thường (16px). Chúng ta sẽ viết các chỉ dẫn CSS mới để định dạng lại cho h1 và p.
Bước 2. Viết các chỉ dẫn
Chúng ta muốn tiêu đề bài thơ có màu đỏ và 2 khổ thơ có chữ màu xanh, in nghiêng? Mở tập tin QueHuong.html, viết chỉ dẫn sau, lưu lại tập tin mã nguồn và xem kết quả :
…
<meta charset="UTF-8">
<style>
h1 {
color: red;
}
p {
color: green;
font-style: italic;
}
</style>
</head>
…
Chúng ta cùng xem xét chỉ dẫn sau:
h1 {
color: red;
}
Một chỉ dẫn gồm hai phần là Bộ chọn và Khai báo.
– Bộ chọn (selector): xác định phần tử hoặc nhóm phần tử sẽ được định dạng
– Khai báo (declaration): cho biết các phần tử sẽ được định dạng như thế nào
Như ở ví dụ trên, h1 là bộ chọn, { color: red; } là khai báo.
Phần khai báo:
– Được giới hạn bằng cặp ngoặc nhọn ({})
– Bên trong ngoặc nhọn là các cặp thuộc tính: giá trị (property: value)
– Giữa thuộc tính và giá trị có một dấu hai chấm (:) và một khoảng trắng
– Cuối mỗi cặp thuộc tính: giá trị là dấu chấm phẩy (;)
Xem hình minh họa,
Bộ chọn
Trong đoạn mã CSS ở ví dụ trên, bộ chọn là phần tử h1 và p. Đây được gọi là bộ chọn dựa theo loại phần tử (element type), là kiểu bộ chọn cơ bản nhất. Nội dung trong phần khai báo của mỗi chỉ dẫn sẽ tác động lên tất cả các phần tử p và h1 trong tài liệu HTML. Ở phần sau sẽ tìm hiểu thêm các bộ chọn phức tạp hơn. Trong CSS, việc xác định đúng bộ chọn và sử dụng bộ chọn một cách hợp lý là một kỹ năng quan trọng cần để ý.
Khai báo
Ở phần trên đã mô tả chi tiết cú pháp của một khai báo. Vì CSS không quan tâm tới các khoảng trắng và dấu xuống hàng dư thừa, vì vậy với khai báo gồm nhiều cặp “thuộc tính: giá trị” thì nên viết mỗi cặp trên một hàng để dễ quan sát mã nguồn.
Viết chỉ dẫn trên một hàng, không có khoảng trắng, chương trình chạy vẫn đúng, nhưng rất khó quan sát mã nguồn, ví dụ:
p{color:green;font-style:italic;}
Chúng ta nên viết theo cách sau:
p {
color: green;
font-style: italic;
}
Thuộc tính
Thuộc tính (property) chính là tất cả các yếu tố liên quan đến việc định dạng một phần tử HTML, ví dụ màu chữ, màu nền, kích thước phông chữ, vị trí hiển thị…v.v. Tên các thuộc tính
được quy định sẵn trong đặc tả của CSS. Chúng ta cần phải học để biết ý nghĩa của mỗi thuộc tính đối với mỗi phần tử HTML. Ví dụ: thuộc tính color dùng để thiết lập màu của chữ, thuộc tính font-style dùng để thiết lập kiểu của chữ (nghiêng, đậm).
Giá trị
Với mỗi thuộc tính sẽ có các giá trị tương ứng đi kèm. Ví dụ thuộc tính color sẽ có các giá trị là
tên của các màu (ví dụ red, green, blue), thuộc tính font-style sẽ có giá trị là italic (nghiêng), normal (bình thường). Điều quan trọng chúng ta cần biết là với một thuộc tính thì có thể sử dụng giá trị gì.
Tóm lại: với mỗi loại bộ chọn sẽ có các thuộc tính chuẩn đi kèm, và với mỗi thuộc tính sẽ có những giá trị phù hợp, các phần sau sẽ làm quen với một số thuộc tính và giá trị này, đồng thời học cách để sử dụng chúng một cách chính xác và hiệu quả.
Như vậy, chúng ta đã làm được 2 việc là viết mã HTML và viết chỉ dẫn định dạng (thường gọi là viết mã CSS). Việc sau cùng là gắn các chỉ dẫn định dạng vào tài liệu HTML, hay còn gọi
là áp CSS vào tài liệu HTML.
Bước 3. Gắn CSS vào tài liệu HTML
Gắn CSS vào tài liệu HTML chính là việc chỉ cho trình duyệt biết mã CSS đang được để ở đâu? Để khi biên dịch, trình duyệt có thể tìm được mã CSS để định dạng nội dung hiển thị. Nhưng trước đó, chúng ta phải biết nơi để viết mã CSS?
Có thể viết mã CSS ở 3 nơi khác nhau:
– Viết mã CSS ở trong tài liệu HTML
– Viết mã CSS ở ngoài tài liệu HTML
– Viết mã CSS ở trong phần tử HTML
Ứng với 3 nơi viết mã CSS ở trên, sẽ có 3 cách để chỉ cho trình duyệt tìm được mã CSS là: sử dụng phần tử <style>, sử dụng phần tử link và sử dụng thuộc tính style.
Viết mã CSS ở trong tài liệu HTML
Viết mã CSS ở trong tài liệu HTML (embedded style sheets), đây chính là cách chúng ta đã sử dụng để viết mã CSS ở ví dụ phía trên. Chúng ta đã viết mã CSS trong tài liệu HTML, cụ
thể là trong tập tin QueHuong.html. Và dùng phần tử <style> để báo cho trình duyệt biết: mã CSS sẽ đặt ở trong phần tử này. Phần tử <style> phải được đặt trong phần tử <head>. Bằng cách này, mã CSS chỉ áp dụng được cho chính tài liệu HTML chứa nó.
Viết mã CSS ở ngoài tài liệu HTML
Viết mã CSS ở ngoài tài liệu HTML (external style sheets) là phương pháp được sử dụng nhiều nhất và có nhiều ưu điểm. Mã CSS sẽ được viết trong một tập tin riêng, có phần mở rộng là .css, tập tin này được liên kết tới một hoặc nhiều tài liệu HTML bằng phần tử link.
Bằng cách này, với một tập tin CSS có thể áp dụng cho nhiều tài liệu HTML khác nhau.
Ví dụ,
Trong thư mục css tạo tập tin style.css.
Trong tập tin style.css, viết đoạn mã sau:
body{
background-color: bisque;
}
Thực hiện gắn CSS với tài liệu HTML bằng phần tử link. Trong tập tin QueHuong.html, thêm
dòng mã sau:
…
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css">
<style>
…
Lưu lại các tập tin mã nguồn, mở trình duyệt sẽ thấy trang web có nền màu bisque (màu nâu đất).
Thuộc tính rel="stylesheet" cho biết mối quan hệ giữa tập tin sẽ được liên kết (style.css) với tập tin hiện tại (QueHuong.html) là gì? Trong trường hợp này, style.css sẽ là mã định dạng (stylesheet) cho QueHuong.html. rel là viết tắt của relationship.
Thuộc tính href="../css/style.css" cho biết bị trí của tập tin chứa mã CSS. href là viết tắt của hypertext reference, nghĩa là tham chiếu tới một siêu văn bản.
Viết mã CSS ở trong phần tử HTML
Viết mã CSS ở trong phần tử HTML (inline style) được thực hiện bằng cách thêm thuộc tính style vào thẻ mở (open tag), nội dung mã CSS chính là giá trị của thuộc tính. Với cách này, mã CSS chỉ áp dụng được cho chính phần tử HTML chứa nó. Nên tránh sử dụng cách này, trừ một số trường hợp đặc biệt cần phải ghi đè mã CSS của hai phương pháp trên. Vì việc đưa mã định dạng vào trong phần tử HTML sẽ gây ra rất nhiều khó khăn khi cần thay đổi việc hiển thị của toàn bộ trang web.
Ví dụ, thêm CSS cho phần tử <p> như sau:
…
<h1>Quê Hương</h1>
<p style="color:brown">Quê hương là gì hả mẹ
Mà cô giáo dạy hãy yêu?
…
Lưu lại mã nguồn, xem kết quả trên trình duyệt sẽ thấy khổ thơ đầu tiên có màu nâu.
3.2
Bài tập
1. CSS là viết tắt của các từ nào?
A. Code Style Sheets
B. Cascading Style Sheets
C. Cascading Style Source
D. Code Style Source
2. Quan sát đoạn mã p { color: red; font-size: 54px; }, theo thuật ngữ của CSS, phát biểu nào sau đây không đúng?
A. p là bộ chọn (selector)
B. Đoạn mã trên là một chỉ dẫn định dạng (style rule)
C. color là thuộc tính (property)
D. Đoạn mã trên là một khai báo (declaration)
3. Bạn có thể viết mã CSS ở đâu? Phát biểu nào sau đây không đúng?
A. Viết ở trong phần tử HTML, sử dụng thuộc tính style
B. Viết ở ngoài tài liệu HTML, trong tập tin .css, sử dụng phần tử link để liên kết
C. Viết ở trong tài liệu HTML, sử dụng phần tử <script>
D. Viết ở trong tài liệu HTML, sử dụng phần tử <style>
4. Viết lại các đoạn mã trong bài viết.
-----
Gợi ý trả lời:
1(B), 2(D), 3(C)
------
Cập nhật: 4/12/2024
Bài sau: