Lời nói đầu
Sau khi học xong cuốn sách đầu tiên, TỰ HỌC LÀM WEB, Tập 1 – HTML căn bản, chúng ta đã có được các kiến
thức và kĩ năng về con đường nghề nghiệp, về nghề làm web, về cách học, về khả
năng sử dụng tiếng Anh. Đặc biệt, chúng ta đã có thể làm được các dự án nhỏ,
trong đó chỉ sử dụng HTML để tạo ra một website; biết đưa trang web lên
Internet để mọi người có thể truy cập.
Trong quá trình làm web, HTML có một số vai trò sau:
– Hiển thị tất cả các loại nội dung của trang web, ví dụ:
văn bản, hình ảnh, âm thanh, bản đồ
– Tạo ra ngữ nghĩa cho các thành phần trong tài liệu HTML,
nó giúp tài liệu HTML có cấu trúc rõ ràng, đúng đặc tả của HTML; Từ đó, giúp lập
trình viên làm việc dễ hơn; giúp các phần mềm có thể đọc hiểu được mã HTML, giúp
các cỗ máy tìm kiếm có thể làm việc hiệu quả; tăng khả năng lập trình với mã
HTML.
– Thông qua form của HTML, chúng ta có thể thu thập thông
tin từ người dùng; gửi dữ liệu từ client về server
Như vậy, với HTML, chúng ta đã tạo ra được nội dung cho
trang web. Tuy nhiên, bạn sẽ thấy, nội dung trang web được hiển thị một cách tuần
tự, từ trên xuống dưới, đoạn mã nào viết trước thì được hiển thị trước. Trang
web không được chia cột, không có màu sắc bắt mắt, không có hiệu ứng. Nói chung
là khá đơn điệu, nhàm chán.
Để bố trí trang web cho chuyên nghiệp về bố cục, có màu sắc
bắt mắt, có các hiệu ứng ấn tượng thì chúng ta phải học và tìm hiểu về CSS.
Đây là cuốn sách thứ hai, TỰ HỌC LÀM WEB, Tập 2 – CSS căn bản, trong loạt các cuốn sách về tự
học làm web.
Sách được viết theo kiểu tự học, với mỗi chủ đề luôn bắt đầu
là các kiến thức căn bản, các khái niệm, các thực hành minh họa; sau đó là các
nguồn tài liệu tham khảo để bạn đọc và xem thêm; tiếp theo là các bài tập và thực
hành; sau cùng là câu hỏi ôn tập.
Trong sách cũng có các tài liệu tham khảo, câu hỏi, bài tập,
bài thực hành bằng tiếng Anh, để giúp người học trải nghiệm, từng bước nâng cao
khả năng sử dụng tiếng Anh. Bạn có thể sử dụng danh mục các từ tiếng Anh chuyên
ngành tại đây: https://bit.ly/3iLYpgG.
Phần kết thúc sẽ là hướng dẫn làm một số dự án.
Nội dung của cuốn sách này:
– Tổng quan về CSS
– CSS cho văn bản
– Làm việc với phông chữ
– Màu sắc
– Định dạng nền
– Bố cục trang web
– Các chủ đề mở rộng
– Tập làm dự án
Cuốn sách tiếp theo bạn nên có là TỰ HỌC LÀM WEB, Tập 3 – JavaScript căn bản.
Dù đã cố gắng, nhưng tài liệu này chắc chắn còn hạn chế về
kiến thức, kĩ năng, nhận định. Mong bạn luôn đọc trong tâm thế hoài nghi.
1
Tổng quan về CSS
Trong phần này, chúng ta sẽ tìm hiểu về:
– CSS là gì?
– Sự kế thừa
– Kĩ thuật xếp lớp
– Định chuẩn CSS
– Box model
– Đơn vị đo trong CSS
1.1
CSS là gì?
CSS là viết tắt của 3 từ tiếng Anh: Cascading Style Sheets,
dịch sát nghĩa là mã định dạng 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.
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 đó”.
Hiểu đơn giản, chúng ta dùng HTML để tạo ra phần thô của một
căn nhà, sau đó dùng CSS để sơn và trang trí cho ngôi 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ả.
Như trong phần tìm hiểu về trình duyệt web, khi nhận được mã HTML và CSS, Rendering
engine (Gecko, Webkit hoặc Blink) sẽ phân tích mã HTML, CSS và hiển thị nội
dung của trang web ra màn hình.
Để 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
[index.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>Cu Teo hoc CSS</p>
</body>
</html>
Vậy là chúng ta đã
có phần tử HTML là <p>. Xem kết quả trên trình duyệt sẽ thấy dòng chữ Cu Teo hoc CSS có màu đen, cỡ chữ bình
thường.
Bước 2. Viết các chỉ dẫn
Chúng ta muốn
dòng chữ có màu đỏ và cỡ chữ lớn hơn? Hãy viết chỉ dẫn sau, lưu lại tập tin mã
nguồn và xem kết quả :
…
<title>Document</title>
<style>
p {
color: red;
font-size: 54px;
}
</style>
</head>
…
Chúng ta cùng xem xét chỉ dẫn sau:
p {
color: red;
font-size:
54px;
}
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, p
là bộ chọn, { color: red; font-size:
54px; } 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ử 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 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:red;font-size:54px;}
Chúng ta nên viết theo cách sau:
p {
color: red;
font-size: 54px;
}
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-size
dùng để thiết lập kích cỡ của chữ.
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-size sẽ có giá trị là
kích thước của chữ được tính bằng px.
Đ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ỉ dẫn 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ỉ dẫn
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 index.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ụ,
Tại thư mục chứa tập tin index.html, chúng ta tạo thêm thư mục
css, 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: blue;
}
Thực hiện gắn CSS với tài liệu HTML bằng phần tử link. Trong tập tin index.html, thêm dòng mã sau:
…
<title>Document</title>
<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 xanh.
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 (index.html) là gì? Trong trường hợp này, style.css sẽ là mã định dạng (stylesheet) cho index.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:
<body>
<p style="color: yellow">Cu Teo hoc CSS</p>
</body>
Lưu lại mã nguồn, xem kết quả trên trình duyệt sẽ thấy chữ
có màu vàng.
|
Chú thích trong CSS |
|
Trong CSS, nội dung
nằm trong cặp dấu /* */ sẽ được hiểu là chú thích. Ví dụ: … <style> /* định dạng phần
tử p */ p { … Khi thực thi đoạn mã
CSS, trình duyệt sẽ bỏ qua đoạn mã chú thích. Do vậy, bạn có thể sử dụng chú
thích để che đi các đoạn mã trong lúc tìm và sửa lỗi. |
Phần tiếp theo sẽ trình bày một số khái niệm quan trọng của
CSS, hiểu các khái niệm này sẽ giúp chúng ta làm việc với CSS được nhẹ nhàng và
chuyên nghiệp. Nếu bạn chưa thể hiểu rõ các khái niệm này cũng không sao, vì
trong các bài học kế tiếp sẽ có nhắc lại chúng trong các tình huống cụ thể.
-----
Cập nhật: 16/3/2023
-----
Bạn muốn tự học HTML bài bản? Xem thêm