Bài trước: Bảo mật web và ứng dụng (2) - Ứng dụng web

---

1 Tạo giao diện giả mạo bằng CSS

Ở bài học trước, chúng ta đã tìm hiểu xong:

– Ứng dụng web hoạt động dựa trên mô hình client-server

– Quá trình giao tiếp với web server; việc lấy và xử lý mã tại trình duyệt web

– Biết cách dùng HTML để tạo ra nội dung cho trang web

– Cài đặt được chức năng WSL của Windows, hệ điều hành Kali Linux

Phần này, chúng ta sẽ tìm hiểu tiếp về:

– Sử dụng CSS để định dạng, trang trí, thể hiện giao diện trang web theo nhu cầu

– Giả mạo giao diện web bằng CSS

– Giả mạo giao diện web bằng công cụ

1.1 Ngôn ngữ CSS

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) ở bài học chuyên sâu về CSS.

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 (trong in ấn) 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>

<title>Document</title>

</head>

<body>

</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>

</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.