Chủ Đề : 12F
GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH
TẠO TRANG WEB
Embedded Files
Yêu cầu cần đạt của chủ đề 12F là:
Yêu cầu cần đạt của chủ đề 12F là:
– Cấu trúc trang web dưới dạng HTML
+ Hiểu và giải thích được cấu trúc của một trang web dưới dạng HTML.
+ Sử dụng được các thẻ HTML để trình bày trang web:
* Định dạng văn bản, phông chữ, tạo liên kết, danh sách.
* Đưa các tệp dữ liệu đa phương tiện vào trang web (Ví dụ: ảnh, âm thanh, video).
* Tạo bảng, khung (frame).
– Sử dụng CSS trong tạo trang web:
+ Hiểu và sử dụng được một số thuộc tính cơ bản của CSS: màu sắc, phông chữ, nền, đường viền, kích cỡ,...
+ Sử dụng được các yếu tố của vùng chọn (selector) như: class, id, tag....
+ Sử dụng được CSS làm trang web đẹp, đa dạng và sinh động hơn.
NỘI DUNG KIẾN THỨC
NỘI DUNG KIẾN THỨC
1. Cấu trúc trang Web dưới dạng HTML
1.1. Trang Web và ngôn ngữ HTML
Trang web là một tài nguyên trực tuyến trên Internet. Một trang web có thể chứa nhiều loại nội dung, bao gồm văn bản, hình ảnh, video, âm thanh, biểu đồ, biểu mẫu,... HTML là chữ viết tắt của cụm từ Hyper Text Markup Language (Ngôn ngữ đánh dấu siêu văn bản) được sử dụng để tạo một trang web, trên một website có thể sẽ chứa nhiều trang và mỗi trang được quy ra là một tài liệu HTML. HTML là một trong những ngôn ngữ quan trọng trong lĩnh vực thiết kế website. HTML đã trở thành một chuẩn mực của Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Hiện nay, HTML5 là phiên bản HTML được sử dụng phổ biến nhất. HTML sử dụng các thẻ (tags) để đánh dấu các phần khác nhau của trang web, chẳng hạn như: tiêu đề, đoạn văn bản, hình ảnh, liên kết và các đối tượng đa phương tiện khác. Mọi thành phần trong trang web đều được tạo ra bằng các thẻ.
Văn bản (mã nguồn) trang web được viết bằng HTML và được lưu thành tập tin có phần mở rộng là .html. Người lập trình sử dụng các công cụ soạn thảo văn bản HTML để biên soạn và chỉnh sửa văn bản (mã nguồn) HTML. Người dùng mở các tệp tin HTML bằng trình duyệt web như: Google Chrome, Microsoft Edge, Cốc Cốc, Mozilla Firefox,... để xem được nội dung của trang web.
a) Soạn thảo văn bản HTML
Tệp tin văn bản HTML có thể được soạn thảo bằng công cụ soạn thảo bất kì, song các công cụ soạn thảo chuyên biệt giúp việc này được dễ dàng và nhanh chóng hơn. Một số công cụ soạn thảo văn bản HTML dùng trên máy tính (ngoại tuyến) phổ biến như: Visual Studio Code, Sublime Text hay Notepad++. Hiện nay, có rất nhiều công cụ soạn thảo văn bản HTML trực tuyến như onlinegdb.com, w3school.com hay tutorialpoint.com. Các công cụ soạn thảo ngoại tuyển thường có tính năng phong phú hơn và không yêu cầu kết nối mạng. Ngược lại, các công cụ trực tuyến có thể tiện dụng, làm việc mọi lúc mọi nơi mà không cần cài đặt trên máy tính, song lại đòi hỏi phải có kết nối Internet. Do đó, tuỳ vào điều kiện của từng cá nhân, chúng ta có lựa chọn sử dụng công cụ soạn thảo trực tuyến hoặc ngoại tuyến.
Lưu ý: Đối với các công cụ hỗ trợ đa ngôn ngữ, ta cần chọn ngôn ngữ HTML để sử dụng được các tính năng phù hợp.
b) Phần tử HTML
Phần tử (Element) HTML là một thành phần của văn bản (mã nguồn) HTML.. Một phần từ được định nghĩa bằng một cặp gồm thẻ mở (thẻ bắt đầu, kí hiệu <tên_thê) và thẻ đóng (thẻ kết thúc, kí hiệu </tên_thẻ >), các thuộc tính và nội dung mà cặp thẻ tác động. Một số phần tử đặc biệt như <img>, <input> không có thẻ đóng. Ta có thể gọi phần từ HTML là thẻ HTML.
Cú pháp khai báo một phần tử thông thường như sau:
- Tên_thẻ: Được đặt tên mang tính gợi nhớ tới ý nghĩa của thẻ. Ví dụ, <title> là thẻ để tạo tiêu đề cho trang web, <head> là phần đầu của văn bản HTML.
- Nội dung: Là phần chứa nội dung được định dạng hoặc tác động bởi phần tử đó. Ví dụ, với phần tử <p>, nội dung là văn bản được hiển thị, với phần tử <h1>, nội dung là phần văn bản sẽ được áp dụng định dạng Heading 1.
- Thuộc tính: Phần tử có thể có nhiều thuộc tính nhằm cung cấp thông tin bổ sung cho phân tử như màu sắc, kích thước, liên kết,... Mỗi thuộc tỉnh được viết dưới dạng tên thuộc tính và dấu "=", sau đó đến giá trị thiết lập cho thuộc tỉnh đó đặt trong dấu nhảy kép. Các thuộc tỉnh phân tách nhau bởi dấu cách.
Lưu ý: Các thuộc tỉnh chỉ được đặt trong thẻ mở, không đặt trong thẻ đóng hay phía ngoài của cặp thẻ.
c) Cấu trúc văn bản HTML
Một văn bản HTML bao gồm hai thành phần chính là phần đầu và phần thân đặt trong cặp thẻ <html> </html>:
- Phần đầu: Nằm trong cặp thẻ <head> </head> là phần đầu tiên của trang web, nơi chứa thông tin tiêu đề của trang web (thông qua thẻ <title>) và các tài nguyên khác như CSS (thẻ <link> hoặc <style>), JavaScript (thé <script>), bộ kí tự charset (the <meta>)....
- Phần thân: Đặt trong cặp thẻ <body> </body> chứa nội dung chính của trang web. Tất cả các thẻ để tạo nội dung như thẻ định dạng văn bản, chèn tệp tin đa phương tiện, siêu liên kết,... đều nằm trong phần thân của một văn bản HTML.
Ngoài phần nằm trong cặp thẻ <html> </html>, văn bản HTML có thể có chú thích để cung cấp thông tin thêm ở đầu trang. Thông thường người ta sử dụng <!DOCTYPE html> báo hiệu đây là văn bản được viết bằng HTML5.
Cách HTML mô tả cấu trúc của một website:
Cách HTML mô tả cấu trúc của một website:
<html>
<head>
<title>Đây là nhan đề của một bài viết</title>
</head>
<body>
<h1>Đây là tiêu đề chính</h1>
<p>Đây là đoạn văn để giới thiệu nội dung phần còn lại của trang, nếu nội dung dài thì có thể chia thành nhiều tiêu đề phụ.<p>
<h2>Đây là tiêu đề phụ</h2>
<p>Một bài viết nên có 1 vài tiêu đề phụ, điều đó giúp co cấu trúc bài viết được rõ ràng, người đọc dễ hiểu hơn.</p>
<h2>Đây là một tiêu đề phục khác cùng cấp với tiêu đề phụ bên trên</h2>
</body>
</html>
1.2. Tạo và định dạng nội dung văn bản HTML
a) Định dạng văn bản
Các thẻ định dạng văn bản trong HTML là công cụ giúp điều chỉnh hình thức hiển thị văn bản trên trang web một cách dễ dàng và linh hoạt, tạo ra nội dung rõ ràng, hấp dẫn và dễ đọc hơn cho người đọc.
Một số thẻ định dạng văn bản thường dùng được liệt kê trong bảng sau:
b) Tạo siêu liên kết
Siêu liên kết (Hyperlink) là một phần tử trong HTML được sử dụng để tạo ra một liên kết giữa hai tài nguyên trên Internet hoặc giữa các phần tử trên cùng một trang web. Các tài nguyên được gắn với siêu văn bản (hay còn gọi là liên kết web). Siêu văn bản (hypertext) là một văn bản gắn với các tài nguyên trên Internet như: âm thanh, hình ảnh, trang web hay các siêu văn bản khác. Do đó, có thể nói siêu liên kết tạo ra kết nối giữa các siêu văn bản. Người dùng có thể truy cập đến tài nguyên liên kết với siêu văn bản bằng cách nhấp chuột vào văn bản được hiển thị.
Một siêu liên kết được tạo bằng cách sử dụng thẻ <a> với thuộc tỉnh href (hypertext reference) để chỉ định địa chỉ URL (Uniform Resource Locator) mà liên kết sẽ dẫn đến theo cú pháp:
<a href="URL"> Nội dung văn bản </a>
URL là địa chỉ (đường dẫn) tới tài nguyên được siêu liên kết trỏ tới. URL tró tới một tệp tin HTML khác thông qua đường dẫn đến tệp tin, có thể là đường dẫn tương đối hoặc tuyệt đối. Đường dẫn tuyệt đối (đầy đủ) bao gồm giao thức, tên miền, địa chỉ dẫn đến tệp tin tài nguyên qua các thư mục. Đường dẫn tương đối chi khai báo địa chỉ dẫn đến tệp tin từ thư mục đang làm việc. Tuy nhiên, đường dẫn tương đối chỉ sử dụng được khi tệp tin cần liên kết nằm trong cùng thư mục với tệp tin HTML đang làm việc.
Ví dụ: https://www.coding.com/trang1.html là một URL, trong đó giao thức là https, tên miền là www.coding.com và trang1.html là đường dẫn đến tệp tin trang1.html (trường hợp này không có các thư mục con).
Trong một số trường hợp, đường dẫn liên kết với một website khác thì trình duyệt Web sẽ tự động liên kết với trang chủ của website đó. Vì vậy, không cần chỉ rõ URL đến tệp tin trang chủ (thường là index.html) trong thuộc tỉnh href
Siêu liên kết có thể trỏ tới một phần tử khác trong cùng một văn bản HTML sử dụng định danh, quy định bằng thuộc tỉnh ID của phần từ đó.
c) Tạo bảng
Bảng thường được dùng để hiển thị thông tin dưới dạng hàng và cột. Bảng là một tập các hàng, mỗi hàng gồm nhiều ô dữ liệu. Trong HTML, ta sử dụng thẻ <table> để tạo bảng và các thẻ con như <tr> để tạo hàng, <td> để tạo các ô đữ liệu (cột).
<table></table> là các thẻ để bắt đầu và kết thúc bảng. Các thẻ <tr> <td> đều phải nằm trong cặp thẻ này.
<tr> là thẻ được dùng để tạo một hàng trong bảng, một hàng bao gồm ít nhất một ô (cột). Mỗi ô dữ liệu trong hàng được tạo bằng thẻ <td>. Ta có thể sử dụng thêm thẻ <th> để tạo hàng đầu tiên là tiêu đề của các cột trong bảng.
Ta có thể sử dụng các thuộc tính để làm định dạng bảng như quy định chiều rộng (width), chiều cao (height), viền (border),... Thẻ <caption> để đặt tiêu đề (đoạn thuyết minh) cho bảng.
d) Tạo danh sách
Danh sách là một nhóm các mục tương đương nhau. Danh sách trong HTML gồm 2 loại là danh sách có thứ tự và danh sách không có thứ tự. ons ned
Danh sách có thứ tự (Ordered List) sử dụng thẻ <ol>, trong đó mỗi mục được tạo bằng cặp thẻ <li></li>. Hai tham số thường dùng là type để xác định kiểu thứ tự và start để thiết lập giá trị bắt đầu. Các kiểu giá trị của thuộc tính type gồm số nguyên (1, 2, 3,...), chữ cái thường hoặc hoa (a, b, c,... hoặc A, B, C,...) hoặc chữ số La Mã (i, ii, iii,... hoặc I, II, III,...). Theo mặc định, các mục sẽ được đánh số tự động bắt đầu từ số 1, a, A, i hoặc I. Tuy nhiên, việc thiết lập giá trị cho thuộc tỉnh start có thể thay đổi giá trị bắt đầu bằng một giá trị bất kì trong các giá trị cùng kiểu.
Danh sách không có thứ tự (Unordered List) sử dụng thẻ <ul> trong HTML với các mục được tạo bằng thẻ <li>. Theo mặc định, các mục của danh sách không có thứ tự được hiển thị với dấu chấm tròn màu đen. Giá trị này có thể thay đổi bằng cách thiết lập giá trị cho thuộc tính style của thẻ <ul>.
1.3. Chèn nội dung đa phương tiện và khung
Ta có thể chèn các nội dung đa phương tiện như ảnh, âm thanh hoặc video bằng các thẻ tương ứng <img>, <audio> hoặc <video>. Các thẻ này đều phải có thuộc tính sực để xác định được vị trí lưu tệp chứa nội dung.
a) Chèn ảnh
Cú pháp chèn hình ảnh như sau:
<img src="đường_dẫn_ảnh" alt="mô_tả_ảnh">
Trong đó: thuộc tỉnh src bắt buộc phải có để chỉ ra đường dẫn tới tệp tin chứa ảnh; alt là thuộc tính cung cấp một văn bản thay thế cho hình ảnh nếu hình ảnh không thể hiển thị. Ta có thể sử dụng thêm các thuộc tính width, height để xác định kích thước hiển thị của ảnh.
Các định dạng tệp ảnh như: jpeg, gif, bmp, png,... đều được hỗ trợ.
b) Chèn audio/video
Cú pháp chèn audio và video như sau:
<audio src="đường dẫn" controls> Thông báo </audio> <video src="đường dẫn" width="độ rộng" height="chiều cao"> Thông báo </video>
Trong đó, src là thuộc tính bắt buộc để chỉ định đường dẫn đến tệp tin audio hoặc video cần chèn; thuộc tỉnh controls nếu được chỉ rõ sẽ tạo ra bộ điều khiển cơ bản cho âm thanh/video như nút chơi, tạm dừng, tăng giảm âm lượng... và thanh tiến trình. Ngoài ra, thẻ video có thêm thuộc tỉnh width và height để xác định độ rộng và chiều cao của khung hiển thị video. Thông báo là đoạn văn bản sẽ hiển thị khi không thể tìm thấy hoặc chơi được âm thanh/video.
Các định dạng thường dùng trên Web của tệp âm thanh là mp3, wav và ogg của tệp video là mp4, ogg hay webm.
c) Sử dụng khung (nội tuyến) iframe
Khung (nội tuyến) <iframe> là một phần tử HTML cho phép nhúng một trang web hoặc một phần của một trang web từ một nguồn bên ngoài vào trang web hiện tại. Chức năng chính của thẻ này là tạo một không gian chứa độc lập trong trang web để hiển thị nội dung từ một nguồn khác trong cùng một trang mà không cần chuyển hướng hoặc tải lại trang. Một số nội dung thường được nhúng trong khung (nội tuyến) như video từ Youtube, bản đồ từ GoogleMap....
Cú pháp sử dụng iframe như sau:
<iframe src="URL_của_trang_web" width="width_value" height="height_value" title="Tiêu_đề"> </iframe
Trong đó:
- Thuộc tỉnh se xác định đường dẫn của trang web hoặc tài nguyên cần nhúng.
- Thuộc tỉnh width và height quy định kích thước của khung iframe theo số lượng điểm ảnh (pixels) hoặc phần trăm của kích thước trang web.
- Ngoài ra, còn một số thuộc tính khác như: title, frameborder, scrolling, allowfullscreen.... để điều chỉnh hành vi và tỉnh năng của khung iframe theo yêu cầu cụ thể.
1.4. Biểu mẫu
a) Biểu mẫu
Biểu mẫu, còn gọi là phần từ form của HTML, là giao diện để thu thập thông tin (dữ liệu) từ người dùng. Biểu mẫu được tạo bởi các phần tử đặt trong cặp thẻ <form></form>.
Một số phần tử thường dùng trong biểu mẫu được trình bày tóm tắt trong bảng sau:
b) Một số phần tử của biểu mẫu
• Phần tử input
Phần từ <input> cho phép người dùng nhập thông tin như văn bản, số hoặc lựa chọn. Loại thông tin có thể nhập vào bằng thẻ <input> được xác định bởi giá trị của thuộc tỉnh type.
type "text": Phần tử cho phép nhập văn bản gồm các kí tự trong bảng mã kí tự ASCII hay Unicode.
type="password": Dùng để nhập mật khẩu, các kí tự nhập vào sẽ được hiển thị dưới dạng dấu chấm.
type="checkbox": Cho phép người dùng chọn một hoặc nhiều tuỳ chọn. Thông thường với loại hộp kiểm/ô lựa chọn, ta có thể chọn nhiều tuỳ chọn một lúc, type="radio": Tạo ra một nút chọn. Các nút chọn thường tạo thành nhóm có cùng tên để đảm bảo chỉ chọn được duy nhất một nút chọn trong nhóm.
Ngoài ra, thẻ <input> còn có các thuộc tỉnh khác như: name (tên), value (giá trị)....
• Phần tử <textarea>
Phần tử <textarea> trong HTML được sử dụng để tạo ra một ô cho phép nhập đoạn văn bản gồm nhiều dòng hơn so với phần tử <input>. Do đó, phần tử này được dùng khi cần nhập hoặc hiển thị văn bản dài như các phản hồi, bình luận,...
Cú pháp khai báo một thẻ <textarea> như sau: <textarea name="tenl" rows="4" cols="50" placeholder="Nhập nội dung..."></textarea>
Trong đó, rows và cols chỉ định số hàng và cột của phần tử, có thể coi mỗi hàng là một dòng, mỗi cột tương ứng với chiều rộng của một kí tự; name là tên được dùng để gọi phần tử, placeholder hiển thị một lời nhắc mặc định trong <textarea>, thường mô tả nội dung cần nhập. Ngoài ra, một số thuộc tỉnh khác như readonly (chỉ cho phép đọc, không được chỉnh sửa thay đổi), disabled (vô hiệu hoá phần tử)....
• Phần tử hộp chọn <select>
Phần từ <select> trong HTML được sử dụng để tạo ra một hộp chọn gồm một
danh sách các lựa chọn có sẵn. Cú pháp khai báo hộp chọn như sau:
<select name="ten"> <option value="value_1">Lựa chọn 1</option>
<option value="value_2">Lựa chọn 2</option>
<option value="value_n">Lựa chọn n</option> </select>
Số lượng lựa chọn là không hạn chế, mỗi lựa chọn được viết trong một cặp thẻ <option> </option> và có giá trị không trùng lặp. Phần từ hộp chọn hữu ích trong các tỉnh huống có nhiều lựa chọn với giá trị cố định, giúp hạn chế sai sót hơn nhập bằng các phần từ <input> hay <textarea>
2. Sử dụng CSS trong tạo trang web
2.1 Giới thiệu CSS
a) Giới thiệu CSS
CSS (Cascading Style Sheets) là ngôn ngữ dùng để thiết lập mẫu định dạng (kiểu trình bày) cho các phần tử HTML trong trang web. CSS giúp tạo ra bố cục và giao diện đồ hoạ hấp dẫn cho trang web một cách thống nhất, nhanh chóng và thuận tiện.
CSS có thể được áp dụng bằng cách nhúng trực tiếp vào trong văn bản (mã nguồn) HTML, gọi là CSS trong (nội tuyến) hoặc bằng cách viết các tập tin CSS riêng biệt và sau đó liên kết chúng với văn bản HTML, gọi là CSS ngoài (ngoại tuyến).
b) CSS trong (nội tuyến)
CSS trong thực hiện bằng cách sử dụng thuộc tỉnh style cho một thẻ riêng lẻ hoặc quy định cho tất cả các thẻ cùng loại trong văn bản HTML bằng thẻ <style> trong phần đầu (thẻ <head>) của văn bản đó.
Ví dụ: Định dạng bằng thuộc tính style của thẻ. Chỉ riêng thẻ <p> này, phần chữ Nội dung văn bản sẽ được thiết lập có màu xanh, kích cỡ chữ là 16 px.
<p style="color: blue; font-size: 16px;">Nội dung văn bản</p>
Định dạng cho toàn bộ thẻ <p> trong văn bản HTML bằng thẻ <style> trong the <head>:
<head> <style> p {color: blue; font-size: 16px; } </style>
</head>
Trong ví dụ này, văn bản đặt trong tất cả các phần tử <p> trong văn bản HTML này đều có màu xanh và kích thước font là 16 px.
c) CSS ngoài (ngoại tuyến)
CSS ngoài thực hiện viết CSS trong một tập tin riêng biệt và sau đó liên kết nói với tài liệu HTML bằng thẻ <link>, do đó được gọi là “external CSS”. Điều này cho phép sử dụng một định dạng CSS cho nhiều văn bản HTML khác nhau và vẫn bản HTML cũng gọn và dễ nhìn hơn.
Ví dụ, các định dạng CSS được lưu trong tệp có tên style.css (tệp tin chứa các phần mở rộng là css), khi đó từ văn bản HTML ta có thể sử dụng mã định dạng có phần các định dạng này bằng cách liên kết với tệp tin như sau:
<head> <link rel="stylesheet" type="text/css" href="styles.css"> </head>
2.2 Một số thuộc tính định dạng CSS
a) các thuộc tính định dạng
Lưu ý: Với các thuộc tính thiết lập màu sắc, ta có thể sử dụng tên màu có sẵn trong CSS như: blue, red, cyan,... hoặc bằng mã màu ở hệ hexadecimal như #f0f0f0, #008000.
Để thiết lập định dạng (định kiểu) cho một phần tử, ta xác định giá trị cho các thuộc tỉnh trong thẻ mở. Có thể thiết lập nhiều thuộc tính cho một phần tử. Cuối mỗi thuộc tính đều có dấu chấm phẩy, kể cả thuộc tính cuối cùng.
b) Định dạng khung/hộp (box
Nội dung trên trang web có thể được chia thành nhiều khung/hộp khác nhau để thuận tiện áp dụng các quy tắc định dạng CSS cũng như điều chỉnh kích thước và vị trí trên trang web.
Một khung/hộp bao gồm các phần sau:
-Vùng Phần nội dung (Content): Vùng/phần này chứa nội dung chính là văn bản hoặc hình ảnh, video. Vùng nội dung lớn hay nhỏ do nội dung cần hiển thị quyết định.
- Vùng Phần viền (Border): Là vùng bao quanh vùng nội dung. Viền có thể là các đường viền đứt, liền, in đậm, hoặc không có viền.
- Vùng đệm (Padding): Khoảng cách giữa vùng nội dung và viền của khung. Vùng đệm tạo ra khoảng trống xung quanh vùng nội dung.
- Vùng lề (Margin): Vùng lề tạo ra một khoảng trống xung quanh khung/hộp, để ngăn cách khung/hộp với các phần tử xung quanh.
Các thuộc tính CSS cho khung/hộp được thể hiện trong bảng sau:
Lưu ý: Với các thuộc tính thiết lập màu sắc, ta có thể sử dụng tên màu có sẵn trong CSS như: blue, red, cyan,... hoặc bằng mã màu ở hệ hexadecimal như #f0f0f0, #008000.
Để thiết lập định dạng (định kiểu) cho một phần tử, ta xác định giá trị cho các thuộc tỉnh trong thẻ mở. Có thể thiết lập nhiều thuộc tính cho một phần tử. Cuối mỗi thuộc tính đều có dấu chấm phẩy, kể cả thuộc tính cuối cùng.
b) Định dạng khung/hộp (box
Nội dung trên trang web có thể được chia thành nhiều khung/hộp khác nhau để thuận tiện áp dụng các quy tắc định dạng CSS cũng như điều chỉnh kích thước và vị trí trên trang web.
Một khung/hộp bao gồm các phần sau:
-Vùng Phần nội dung (Content): Vùng/phần này chứa nội dung chính là văn bản hoặc hình ảnh, video. Vùng nội dung lớn hay nhỏ do nội dung cần hiển thị quyết định.
- Vùng Phần viền (Border): Là vùng bao quanh vùng nội dung. Viền có thể là các đường viền đứt, liền, in đậm, hoặc không có viền.
- Vùng đệm (Padding): Khoảng cách giữa vùng nội dung và viền của khung. Vùng đệm tạo ra khoảng trống xung quanh vùng nội dung.
- Vùng lề (Margin): Vùng lề tạo ra một khoảng trống xung quanh khung/hộp, để ngăn cách khung/hộp với các phần tử xung quanh.
Các thuộc tính CSS cho khung/hộp được thể hiện trong bảng sau:
Các quy tắc định dạng khung/hộp có thể tạo ra với hầu hết các phần tử HTML. Ví dụ, có thể tạo khung/hộp cho phần tử <p> với các thuộc tính như sau
c) Hiển thị khối dòng
Trong HTML, các phần tử được chia làm hai loại là phần thử hiển thị theo đông (inline) và phần tử hiển thị theo khối (block). Phần tử hiển thị theo dòng là phần từ chỉ chiếm một phần nhỏ trên dòng và không làm thay đổi cấu trúc của dòng, phần tử hiển thị theo khối sẽ tự động bắt đầu trên một dòng mới và chiếm hết chiều rộng của dòng. Các phần tử như <span>, <a>, <strong>, <em>, <img>, <input>, <button> mặc định hiển thị theo dòng; phần tử như <div>, <p>, <h1> đến <h6>, <ul>, <ol>, <li>, <header>, <footer> mặc định hiển thị theo khối.
Tuy nhiên, ta có thể thay đổi cách hiển thị theo dòng hay khối của các phần tử bằng thuộc tỉnh CSS display. Các giá trị thuộc tính display có thể nhận là block (theo khối), inline (theo dòng).
2.3. Bộ chọn (Vùng chọn) và quy tắc áp dụng CSS
Bộ chọn Vùng chọn (Selector) là cách để xác định các phần tử HTML áp dụng các quy tắc định dạng (định kiểu) CSS. Có nhiều loại bộ chọn khác nhau trong CSS như: bộ chọn phần tử (Element Selector), bộ chọn lớp (Class Selector), bộ chọn định danh (ID Selector), bộ chọn thuộc tính (Attribute Selctor),... Mỗi loại được sử dụng để chọn ra các phần tử theo cách khác nhau.
a) Bộ chọn phần tử
Bộ chọn phần tử trong CSS được sử dụng để áp dụng các quy tắc CSS cho nhiều thuộc tính của một phần tử HTML. Cú pháp như sau:
ten_bo_chon { thuoc_tinhl: gia_tri_1; thuoc_tinh2: gia_tri_2; thuoc_tinhn: gia_tri_n;
Như vậy, chúng ta có thể xây dựng quy tắc định dạng cho nhiều thuộc tính của một phần tử (bộ chọn). Sau mỗi quy tắc định dạng cho một thuộc tỉnh đều có dấu chấm phẩy (;).
Ví dụ, bộ chọn phần tử <p> như sau:
p {color: blue; font-size: 16px;}
b) Bộ chọn lớp
Bộ chọn lớp cho phép áp dụng các quy tắc CSS cho một hoặc nhiều phần tử HTML mà không cần phải thêm ID riêng biệt cho từng phần tử đó.
Trước hết, ta cần phải định nghĩa bộ chọn lớp theo cú pháp sau:
.ten_lop (
thuoc_tinhl: gia_tri 1;
thuoc_tinh2: gia_tri_2;
thuoc_tinhn: gia_tri_n;
Trong đó, ten_lop là tên của lớp, được đặt theo quy tắc đặt tên của các ngôn ngữ lập trình: không được bắt đầu bằng số và không chứa khoảng trắng. Một lớp có thể bao gồm nhiều quy tắc định dạng cho nhiều thuộc tính HTML có liên quan.
Ví dụ, bộ chọn lớp thiết lập các định dạng về màu sắc như:
<style>
lưu ý{ color: red; font-size: 14px) binh_thuong(color: blue; font-size: 13px)
</style>
Sau khi khai báo các bộ chọn lớp trong thẻ <style>, các phần tử trong văn bản HTML có thể sử dụng các bộ chọn lớp bằng cách thiết lập thuộc tính class của thẻ bằng tên bộ chọn thích hợp. Ví dụ, với hai bộ chọn khai báo ở trên, ta có thể dùng như sau:
<body>
<h1 class= "luu y">Lưu ý</h1>
<p class= "binh_thuong">Nội dung bình thường.</p>
</body>
Bộ chọn lớp cho phép áp dụng một bộ quy tắc định dạng cho nhiều phần từ khác nhau mà không cần viết lại, do đó tăng tính sử dụng lại. Bộ chọn lớp cũng mang lại tỉnh linh hoạt cao khi ta dễ dàng thay đổi định dạng (định kiểu) của một số phần tử mà không làm ảnh hưởng đến các phần tử khác.
c) Bộ chọn định danh
Bộ chọn định danh trong CSS (còn được gọi là ID selector) cho phép định dạng (định kiểu) cho một phần từ cụ thể bằng cách sử dụng một định danh duy nhất của phần tử đỏ. Củ pháp khai báo như sau:
#ten dinh danh ( thuoc tình 1: gia_tri_1; thuoc tinh 2: gia_tri_2;
Ví dụ, định đanh cho phần tử có định danh #tieude (thuộc tỉnh id= "tieu_de") như sau:
#tieu de {
background-color: yellow;
color: green;
font-size: 24px;
Sau khi khai báo trong thẻ <style>, bộ chọn định danh chỉ được áp dụng cho phần tử có id chính xác là tieu de. Một văn bản HTML chỉ nên có đúng một phần tử có id là tieu_de, nếu không dễ dẫn đến xung đột, làm giảm hiệu quả của CSS.
Bộ chọn định danh có mức ưu tiên cao hơn so với các bộ chọn khác như bộ chọn lớp (class) và bộ chọn phần tử (element). Do đó, các định dạng (định kiểu) quy định bởi bộ chọn định danh sẽ ghi đè định dạng (định kiểu) của các bộ chọn khác.
Bộ chọn định danh giúp định dạng một phần tử cụ thể một cách chính xác, song không sử dụng lại cho các phần tử khác được và dễ dẫn đến xung đột.
d) Quy tắc áp dụng định dạng CSS
Một văn bản HTML có thể có nhiều quy tắc định dạng CSS khác nhau, trình duyệt lựa chọn áp dụng các quy tắc này theo các quy định và thứ tự ưu tiên như sau:
- Độ ưu tiên: Quy tắc CSS có độ ưu tiên cao hơn sẽ được áp dụng trước.
Thuộc tính CSS khai báo với từ khoá !important sẽ được áp dụng trước hết.
Các quy tắc cho đối tượng cụ thể cũng được ưu tiên hơn các quy tắc chung
cho nhiều đối tượng. Do đó, quy tắc của bộ chọn định danh sẽ có độ ưu tiên
cao hơn so với quy tắc của bộ chọn lớp (class) hoặc bộ chọn phần tử,
- Thứ tự khai báo: Nếu có nhiều quy tắc có độ ưu tiên và độ cụ thể như nhau
thì quy tắc được khai báo sau cùng sẽ được ưu tiên cao hơn so với các quy
tắc được khai báo trước đó.
- Kế thừa: Một số quy tắc CSS sẽ được kế thừa từ phần từ cha tới các phần tử con, trừ khi có quy tắc cụ thể nào đó được áp dụng trực tiếp cho các phần tử con.
- Quy tắc CSS trong (trực tiếp) được khai báo trong thẻ <style> sẽ có độ ưu tiên cao hơn CSS ngoài (gián tiếp).
Page updated
Google Sites
Report abuse