Thầy Cải - Quốc Thái

BÀI F15. KHOA HỌC DỮ LIỆU (CTST - CS)

Đây là bài soạn lý thuyết tin học 12 - sách Chân trời sáng tạo. Bài học này thuộc định hướng Khoa học máy tính (CS). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

1. Giới thiệu và mục tiêu của Khoa học dữ liệu

- Dữ liệu ngày càng phong phú và đa dạng xuất hiện từ nhiều nguồn như mạng xã hội, thương mại điện tử, tìm kiếm,...
- Khoa học dữ liệu (KHDL) là lĩnh vực liên ngành (Toán, Thống kê, Khoa học máy tính, Trí tuệ nhân tạo, Học máy,...) nhằm tạo ra giá trị từ dữ liệu.
- Một số mục tiêu chính:
+ Khám phá tri thức: tìm mẫu dữ liệu, phát hiện ngoại lệ, hiểu mối quan hệ giữa các thuộc tính.
+ Phân tích dữ liệu: rút thông tin, hỗ trợ ra quyết định.
+ Tối ưu hoá quyết định: áp dụng mô hình học máy để chọn giải pháp tốt hơn.
+ Trực quan hoá dữ liệu: dùng biểu đồ, đồ hoạ giúp dễ hiểu, dễ trình bày và phân tích.

2. Một số thành tựu của Khoa học dữ liệu

a) Khám phá tri thức và nâng cao năng lực ra quyết định

- KHDL giúp phát hiện mẫu dữ liệu, xu hướng ẩn trong dữ liệu lớn.
- Các công cụ như SAS, SPSS Modeler hỗ trợ ngân hàng, tài chính phát hiện rủi ro, điều chỉnh lãi suất.

b) Tự động hoá

- Ứng dụng trong robot thông minh (Amazon RDU), nông nghiệp (hệ thống kiểm soát môi trường),...
- KHDL kết hợp với học máy giúp tự động hóa quy trình dựa trên dữ liệu cảm biến, hình ảnh, tốc độ,...

c) Cá nhân hoá dịch vụ

- Dựa vào lịch sử hành vi người dùng để đề xuất nội dung, sản phẩm phù hợp.
- Ví dụ: Netflix, YouTube, Amazon,... dùng dữ liệu lịch sử và đánh giá để tạo trải nghiệm riêng.

d) Dự đoán

- Dùng mô hình học máy để chẩn đoán y khoa, phân tích xu hướng bệnh.
- Ví dụ: phần mềm IBM Watson for Oncology hỗ trợ điều trị ung thư tại Việt Nam.
Khoa học dữ liệu đóng vai trò then chốt trong việc khai thác giá trị từ dữ liệu lớn, hỗ trợ tự động hóa, cá nhân hóa và dự đoán chính xác, góp phần nâng cao hiệu quả ra quyết định trong nhiều lĩnh vực.

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài A1. Giới thiệu Trí tuệ nhân tạo
Bài A2. Trí tuệ nhân tạo và cuộc sống
Bài A3(ict). Thực hành kết nối thiết bị số với máy tính
Bài A4(ict). Thực hành kết nối thiết bị số với máy tính (tiếp theo)

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

Bài B1. Thiết bị và giao thức mạng
Bài B2. Các chức năng mạng của hệ điều hành
Bài B3. Thực hành kết nối và sử dụng mạng trên thiết bị thông minh
Bài B4(cs). Vai trò của các thiết bị mạng
Bài B5(cs). Đường truyền hữu tuyến và vô tuyến
Bài B6(cs). Thiết kế mạng nội bộ
Bài B7(cs). Thực hành thiết kế mạng nội bộ

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

Bài E1(ict). Tạo trang web, thiết lập giao diện và xem trước trang web
Bài E2(ict). Tạo, hiệu chỉnh trang web và thiết kế thanh điều hướng
Bài E3(ict). Tạo văn bản, chèn hình ảnh và tạo chân trang
Bài E4(ict). Sử dụng Content Blocks, Buttun, Divider
Bài E5(ict). Nhúng mã và tạo băng chuyền hình ảnh
Bài E6(ict). Chèn YouTube, Calendar, Drive và Collapsible group
Bài E7(ict). Sử dụng Map, Form và các thiết lập trang web
Bài E8(ict). Hoàn thiện và xuất bản trang web

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

Bài F1. HTML và trang web
Bài F2. Tạo và định dạng trang web với các thẻ HTML
Bài F3. Tạo bảng và khung trong trang web với HTML
Bài F4. Thêm dữ liệu đa phương tiện vào trang web
Bài F5. Tạo biểu mẫu trong trang web
Bài F6. Dự án tạo trang web
Bài F7. Giới thiệu CSS
Bài F8. Một số thuộc tính cơ bản của CSS
Bài F9. Một số thuộc tính định kiểu bằng vùng chọn trong CSS
Bài F10. Định kiểu CSS cho siêu liên kết và danh sách
Bài F11. Định kiểu CSS cho bảng và phần tử div
Bài F12. Định kiểu CSS cho biểu mẫu
Bài F13. Dự án tạo trang web (tiếp theo)
Bài F14(cs). Học máy
Bài F15(cs). Khoa học dữ liệu
Bài F16(cs). Máy tính, thuật toán và Khoa học dữ liệu
Bài F17(cs). Hoạt động trải nghiệm về Khoa học dữ liệu
Bài F18(cs). Kĩ thuật mô phỏng
Bài F19(cs). Sử dụng phần mềm mô phỏng

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài G1. Nhóm nghề dịch vụ thuộc ngành Công nghệ thông tin
Bài G2. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài G3. Một số nghề ứng dụng tin học và một số ngành thuộc lĩnh vực Công nghệ thông tin

CÁC CHUYÊN MỤC LIÊN QUAN:

☞ Kiểm tra tin học 12 - Chân trời sáng tạo
☞ Lý thuyết tin học 12 - Chân trời sáng tạo
☞ Thực hành tin học 12 - Chân trời sáng tạo
☞ Gợi ý trả lời tin học 12 - Chân trời sáng tạo
☞ Trắc nghiệm tin học 12 - Chân trời sáng tạo
☞ Bài giảng điện tử tin học 12 - Chân trời sáng tạo

BÀI F14. HỌC MÁY (CTST - CS)

1. Sơ lược về học máy

- Học máy (machine learning) là một lĩnh vực của Trí tuệ nhân tạo (AI), giúp máy tính học từ dữ liệu để giải quyết các vấn đề như dự đoán, phân loại, nhận dạng, xử lý ngôn ngữ tự nhiên...
- Quá trình học máy gồm các bước:
+ Thu thập và chuẩn bị dữ liệu.
+ Trích xuất đặc trưng từ dữ liệu.
+ Huấn luyện mô hình học máy.
+ Đánh giá hiệu suất mô hình.
+ Triển khai mô hình.
- Dữ liệu đầu vào:
+ Có nhãn: dùng trong Học có giám sát – mục tiêu là dự đoán hoặc phân loại (ứng dụng: lọc thư rác, nhận dạng hình ảnh, giọng nói...).
+ Không có nhãn: dùng trong Học không giám sát – mục tiêu là phát hiện cấu trúc dữ liệu (ứng dụng: gom cụm, phân nhóm khách hàng...).
- Học máy đóng vai trò nền tảng trong nhiều hệ thống hiện đại như trợ lý ảo (Siri, Google Assistant), hệ thống gợi ý (Amazon),...

2. Vai trò của học máy trong một số ứng dụng

a) Lọc thư rác

Mô hình học máy phân tích đặc trưng của email (từ khóa, tiêu đề, người gửi...) để phân loại rác. Gmail, Outlook là ví dụ tiêu biểu.

b) Chẩn đoán bệnh

Sử dụng học máy để phát hiện bệnh sớm (ung thư, tiểu đường...) dựa trên hồ sơ bệnh án, hình ảnh y tế. Ví dụ: phần mềm IBM Watson for Oncology hỗ trợ điều trị ung thư tại Việt Nam.

c) Nhận dạng giọng nói

Cho phép nhận dạng đa ngôn ngữ, phương ngữ, phân tích ngữ cảnh. Ứng dụng: YouTube, Siri, Google Assistant,...

d) Dịch tự động

Công cụ như Google Translate sử dụng học máy để dịch văn bản, âm thanh, hình ảnh; phản hồi người dùng giúp mô hình cải thiện liên tục.

e) Phân tích thị trường

Học máy dự đoán xu hướng tiêu dùng, phản ứng thị trường, phân loại khách hàng,... Công cụ như Power BI hỗ trợ ra quyết định dựa trên mô hình học máy.

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI F13. DỰ ÁN TẠO TRANG WEB (TT) (CTST - CS & ICT)

Đây là bài soạn lý thuyết tin học 12 - sách Chân trời sáng tạo. Bài học này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (cs) và Tin học ứng dụng (ict). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

THỰC HÀNH

Nhiệm vụ. Định kiểu CSS cho trang web kỉ yếu lớp 12A
Yêu cầu:
- Sử dụng lại các tệp từ dự án trang web kỉ yếu lớp 12A đã thực hiện trong Bài F6.
- Bổ sung mã lệnh CSS để tăng tính thẩm mỹ, sự đa dạng và sinh động cho trang web.
- Làm việc theo nhóm từ 3–5 học sinh trong 2 tuần, bao gồm 2 tiết học trên lớp để trình bày kết quả.
Đánh giá:
- Nội dung: Hoàn thiện và chỉnh sửa theo góp ý từ Bài F6.
- Hình thức: Áp dụng kiến thức CSS đã học và có thể mở rộng thêm, sử dụng linh
hoạt các kỹ thuật như chèn trực tiếp, dùng tệp CSS riêng, vùng chọn với class, id,... để tùy biến giao diện theo ý tưởng riêng.
Hướng dẫn:
1) Giai đoạn chuẩn bị
- Thống nhất bố cục, hình thức và cách viết mã CSS (trực tiếp hay tệp riêng).
- Xác định vùng chọn, id, class và quy ước đặt tên.
- Tìm hiểu thêm mã lệnh CSS mới.
- Lập kế hoạch công việc và phân công thành viên.
2) Giai đoạn thực hiện
- Thực hiện công việc theo phân công.
- Thảo luận, kiểm tra, sửa lỗi và hoàn thiện trang web.
3) Giai đoạn báo cáo
- Chuẩn bị báo cáo tổng kết dự án.
- Trình bày trước lớp, lắng nghe nhận xét từ bạn bè và giáo viên.

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI F12. ĐỊNH KIỂU CSS CHO BIỂU MẪU (CTST - CS & ICT)

1. Định kiểu cho hộp văn bản

- Định kiểu biểu mẫu giúp tăng tính thẩm mỹ, cải thiện trải nghiệm người dùng và khả năng tiếp cận.
- Có thể sử dụng các thuộc tính như: font-family, background-color, border, padding, margin,...
- Sử dụng display: block để nhãn <label> chiếm trọn một dòng.
- Dùng box-sizing: border-box để tính cả đường viền và vùng đệm vào kích thước phần tử.
- Để làm nổi bật hộp văn bản khi được chọn, dùng lớp giả :focus.
Ví dụ:

2. Định kiểu cho nút tròn, hộp kiểm và nút nhấn

- Sử dụng vùng chọn dạng input[type="radio"], input[type="checkbox"], input[type="submit"],...
- Định kiểu theo trạng thái:
:checked cho nút tròn và hộp kiểm khi được chọn.
:hover và :active cho nút nhấn khi rê chuột hoặc đang được nhấn giữ.
Ví dụ:

THỰC HÀNH

Nhiệm vụ: Định kiểu CSS cho biểu mẫu góp ý
Áp dụng với biểu mẫu trong gopy.html, gồm các thành phần:
- Họ tên và Lớp (hộp văn bản)
- Định hướng môn Tin học (nút tròn)
- Câu lạc bộ đang tham gia (hộp kiểm)
- Ý kiến góp ý (hộp văn bản nhiều dòng)
- Nút gửi góp ý
Cách thực hiện:
- Định kiểu cho <form>: nền trắng, viền xám, tối đa 400px chiều rộng.
- Hộp văn bản: nền xám, không viền.
- Nút tròn và hộp kiểm (trạng thái được chọn): định kiểu rõ ràng khi được nháy chọn.
- Hộp văn bản góp ý: cho phép thay đổi kích thước theo chiều dọc (resize: vertical).
- Nút Gửi: định kiểu màu sắc, viền, hiệu ứng khi rê chuột hoặc nhấn giữ.

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI F11. ĐỊNH KIỂU CSS CHO BẢNG VÀ PHẦN TỬ DIV (CTST - CS & ICT)

1. Định kiểu cho bảng

- Để bảng hiển thị đẹp mắt, có thể:
+ Sử dụng border-collapse: collapse để tạo đường viền đơn thay vì viền đôi mặc định.
+ Định kiểu màu nền cho hàng tiêu đề và các hàng chẵn/lẻ bằng lớp giả nth-child(even) hoặc nth-child(odd).
+ Tạo hiệu ứng khi rê chuột bằng tr:hover để đổi màu nền.
- Ví dụ:
+ border: 1px solid #3eafff cho đường viền màu xanh.
+ tr:nth-child(even) để hàng chẵn có nền xám.
+ tr:hover để tạo hiệu ứng màu nền khi di chuyển chuột qua hàng.

2. Định kiểu cho phần tử <div>

- Sử dụng <div> thay vì bảng để bố cục linh hoạt, tương thích nhiều kích cỡ màn hình.
- Mặc định, các <div> xếp theo chiều dọc; dùng float: left hoặc float: right để căn trái hoặc phải.
- Khi các <div> có chiều cao khác nhau và muốn tránh lỗi chồng lấp, dùng thêm một <div class="clear-both"> với clear: both để tạo khoảng ngăn cách.
Ví dụ:
.left { float: left; } và .right { float: right; } để chia bố cục trái/phải.
.clear-both { clear: both; } để tách vùng bên dưới hai khối.

THỰC HÀNH

Nhiệm vụ 1. Định kiểu CSS cho bảng
Định kiểu bảng "Lịch sinh hoạt hằng tuần" trong portfolio.html bằng class .my-table:
- Đường viền màu xanh, rộng 100%.
- Dùng padding để tạo vùng đệm cho ô.
- Hàng tiêu đề: nền xanh, chữ trắng, in đậm.
- Hàng chẵn: nền xám (nth-child(even)).
- Hiệu ứng hover: đổi màu nền khi rê chuột.
Nhiệm vụ 2. Định kiểu CSS cho phần tử <div>
Tạo bố cục minh họa trong bocucminhhoa.html sử dụng <div>:
+ Thẻ <link> liên kết đến layout.css.
+ Tạo thanh ngang bằng class .bar.
+ Vùng trái (.left) chiếm 20% chiều ngang, nền xám đậm.
+ Vùng phải (.right) chiếm phần còn lại, nền xám nhạt.
+ Dùng .clear-both để ngăn cách với footer.
+ Chân trang (.footer) có nền cam, cách vùng trên 10px.

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI F10. ĐỊNH KIỂU CSS CHO SIÊU LIÊN KẾT VÀ DANH SÁCH (CTST - CS & ICT)

1. Định kiểu CSS cho siêu liên kết

Siêu liên kết được tạo bằng thẻ <a> và có thể định kiểu cho 5 trạng thái bằng các lớp giả trong CSS:

a) Trạng thái bình thường:

Sử dụng vùng chọn a để định kiểu màu sắc, bỏ gạch chân.

b) Trạng thái lướt qua (hover):

Sử dụng a:hover để thay đổi màu hoặc hiệu ứng khi rê chuột vào liên kết.

c) Trạng thái kích hoạt (active):

Sử dụng a:active để định kiểu khi liên kết đang được nhấn giữ.

d) Trạng thái đã truy cập (visited):

Sử dụng a:visited để định kiểu cho các liên kết đã được truy cập.

e) Trạng thái tập trung (focus):

Sử dụng a:focus để định kiểu khi liên kết được chọn bằng bàn phím, thường có viền hoặc hiệu ứng nổi bật.
Tất cả các trạng thái này được định kiểu bằng cách khai báo vùng chọn kết hợp thẻ <a> với lớp giả tương ứng.

2. Định kiểu CSS cho danh sách.

CSS hỗ trợ định kiểu dấu đầu dòng hoặc số thứ tự của danh sách bằng ba thuộc tính:

a) Đánh số hoặc dấu đầu dòng theo kiểu có sẵn:

Sử dụng list-style-type để chọn các kiểu như circle, square, decimal, …

b) Đánh dấu đầu dòng bằng hình ảnh:

Dùng list-style-image kết hợp hàm url() để đặt hình ảnh thay cho dấu đầu dòng.

c) Vị trí hiển thị dấu đầu dòng:

Sử dụng list-style-position với giá trị inside (bên trong nội dung) hoặc outside (bên ngoài nội dung).

THỰC HÀNH

Nhiệm vụ: Định kiểu CSS cho siêu liên kết và danh sách
Yêu cầu: Tạo thanh trình đơn ngang ở đầu trang chủ của trang index.html gồm 3 siêu liên kết.
Cách thực hiện:
- Tạo danh sách chứa 3 siêu liên kết, đặt trong thẻ <div class="nav">.
- Định kiểu cho div.nav bằng CSS trong thẻ <style>.
- Dùng vùng chọn .nav li để sắp xếp các mục theo chiều ngang.
- Dùng .nav li a để định kiểu văn bản, màu chữ và vùng đệm cho các liên kết.
- Thêm hiệu ứng hover để thay đổi màu nền và chữ khi rê chuột.
- Mở tệp HTML để kiểm tra kết quả.

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI F9. MỘT SỐ THUỘC TÍNH ĐỊNH KIỂU BẰNG VÙNG CHỌN TRONG CSS (CTST - CS & ICT)

1. Khái niệm vùng chọn CSS

Vùng chọn (selector) trong CSS là mẫu dùng để xác định phần tử HTML sẽ được định kiểu. Có thể chọn phần tử bằng:
- Tên phần tử (vd: p)
- ID (vd: #my-id)
- Class (vd: .my-class)
Vùng chọn giúp áp dụng một kiểu CSS cho nhiều phần tử, tăng tính nhất quán, dễ bảo trì và tái sử dụng.

2. Những kĩ thuật định kiểu cơ bản bằng vùng chọn

a) Định kiểu cho các phần tử cùng loại

Sử dụng tên thẻ HTML làm vùng chọn để định kiểu chung.
Ví dụ: định kiểu tất cả <div> thành chữ màu xanh.

b) Định kiểu cho các phần tử khác loại

Dùng class để định kiểu cho các phần tử khác nhau nhưng có cùng class.
Ví dụ: cả <div> và <p> có class my-class sẽ được định kiểu giống nhau.
Một phần tử có thể có nhiều class để kết hợp nhiều kiểu định dạng.

c) Định kiểu cho riêng một phần tử xác định

Sử dụng ID duy nhất cho từng phần tử.
Ví dụ: phần tử có id="my-id" sẽ được định kiểu riêng, như màu chữ đỏ.
Tóm lại: có ba kỹ thuật vùng chọn chính:
- Tên thẻ: định kiểu cho phần tử cùng loại.
- Tên lớp (class): định kiểu cho phần tử cùng hoặc khác loại.
- ID: định kiểu riêng cho một phần tử duy nhất.

THỰC HÀNH

Sử dụng với tệp portfolio.html.
Nhiệm vụ 1. Định kiểu CSS cho vùng chọn là tên thẻ
- Định kiểu cho các tiêu đề <h1>:
+ Màu chữ trắng, cỡ 20, phông Arial.
+ Nền xanh, rộng nửa trang, bo tròn góc phải.
+ Căn phải văn bản, vùng đệm 10px.
Cách làm: Tạo tệp style.css, khai báo vùng chọn là h1, dùng các thuộc tính: color, font-size, font-family, background-color, width, border-radius, text-align, padding.
Nhiệm vụ 2. Định kiểu CSS cho vùng chọn là tên thẻ và tên lớp
- Căn giữa ảnh, đặt trong nền tối, bo góc, chỉnh kích thước vừa phải.
- Các ảnh được đặt trong <div class="image-style">.
Cách làm:
- Dùng vùng chọn .image-style để căn giữa và tạo nền.
- Dùng vùng chọn .image-style img để chỉnh kích thước ảnh nằm trong khối div đó.

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI F8. MỘT SỐ THUỘC TÍNH CƠ BẢN CỦA CSS (CTST - CS & ICT)

1. Những thuộc tính định kiểu cho màu sắc và phông chữ

Hình thức trình bày văn bản như màu sắc và phông chữ ảnh hưởng đến cảm nhận của người xem. CSS hỗ trợ các thuộc tính:
- font-family: tên phông chữ
- font-size: cỡ chữ
- font-style: kiểu chữ (như nghiêng)
- font-weight: độ đậm nhạt
- color: màu chữ (có thể dùng tên màu, mã màu, hoặc hàm màu như rgba)
Ví dụ: sử dụng thẻ <span> để định kiểu một phần văn bản, như từ “Vô địch” bằng phông Georgia, cỡ lớn, nghiêng và đậm.

2. Những thuộc tính định kiểu cho văn bản

CSS cung cấp nhiều cách định dạng văn bản:
- text-align: căn ngang (trái, phải, giữa, đều hàng)
- vertical-align: căn dọc (trên, dưới, giữa, chỉ số trên/dưới)
- Các thuộc tính khác: letter-spacing (khoảng cách ký tự), word-spacing (khoảng cách từ), text-shadow (đổ bóng),...
Ví dụ: bổ sung căn giữa cho tiêu đề bằng text-align: center.

3. Những thuộc tính định kiểu cho nền

Nền của phần tử HTML có thể được định dạng bằng:
- background-color: màu nền
- background-image: ảnh nền (dùng hàm url())
- background: thuộc tính tổng hợp
- Các thuộc tính khác: opacity, background-repeat,...
Ví dụ: tạo nền chuyển sắc cho phần nội dung bằng cách đặt mã CSS trong thẻ <div>.

4. Những thuộc tính định kiểu cho đường viền, lề và vùng đệm

- border: định kiểu viền (độ dày, kiểu nét, màu)
- margin: khoảng cách ngoài viền (lề)
- padding: khoảng cách bên trong viền (vùng đệm)
Ví dụ: trong một <div>, đặt border: 1px solid gray, margin: 20px 50px 50px 250px, padding: 20px, border-radius để bo tròn góc.

THỰC HÀNH

Áp dụng cho trang web portfolio.html.
Nhiệm vụ 1. Định kiểu CSS cho văn bản và nền
- Căn phải phần thông tin cá nhân.
- Dùng ảnh hinhnen.jpg làm nền phủ toàn bộ chiều ngang.
- Dùng text-align: right, background-image, background-size: cover, color: #ffffff, padding để tăng tính thẩm mỹ và dễ đọc.
Nhiệm vụ 2. Định kiểu CSS cho đường viền, lề và vùng đệm
- Mỗi mục Sở thích nằm trong một <div> có:
+ Viền 1px xám, nền trắng.
+ Chiều cao 30px, độ rộng 50% trang web.
+ Góc bo tròn.
+ Lề và vùng đệm đều 20px.

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI F15. KHOA HỌC DỮ LIỆU (CTST - CS)

BÀI F14. HỌC MÁY (CTST - CS)

BÀI F13. DỰ ÁN TẠO TRANG WEB (TT) (CTST - CS & ICT)

BÀI F12. ĐỊNH KIỂU CSS CHO BIỂU MẪU (CTST - CS & ICT)

BÀI F11. ĐỊNH KIỂU CSS CHO BẢNG VÀ PHẦN TỬ DIV (CTST - CS & ICT)

BÀI F10. ĐỊNH KIỂU CSS CHO SIÊU LIÊN KẾT VÀ DANH SÁCH (CTST - CS & ICT)

BÀI F9. MỘT SỐ THUỘC TÍNH ĐỊNH KIỂU BẰNG VÙNG CHỌN TRONG CSS (CTST - CS & ICT)

BÀI F8. MỘT SỐ THUỘC TÍNH CƠ BẢN CỦA CSS (CTST - CS & ICT)

Chuyên mục bài viết

Các trang web hữu ích

Các video clip đáng xem

Tổng số lượt xem