Đề cương ôn tập Tin học 12 (Kết nối tri thức) - Bài 13: Khái niệm, vai trò của CSS

Nội dung tài liệu: Đề cương ôn tập Tin học 12 (Kết nối tri thức) - Bài 13: Khái niệm, vai trò của CSS

1. BÀI 13 KHÁI NIỆM, VAI TRÒ CỦA CSS I. LÝ THUYẾT 1. Khái niệm mẫu định dạng CSS Khi xem mã nguồn (văn bản) của các trang web, em sẽ bắt gặp một số đoạn mã có dạng như dưới đây. Ví dụ mẫu định dạng Những đoạn mã này được gọi là mẫu định dạng (Cascading Style Sheet, gọi tắt là CSS). Mẫu định dạng được viết độc lập với mã nguồn của trang web và dùng để định dạng phần tử HTML tương ứng. Nhờ có CSS mà hạn chế số lần thiết lập các nội dung có cùng định dạng. CSS là định dạng độc lập với chuẩn HTML, được dùng để thiết lập các mẫu định dạng dùng trong trang web. Luyện tập Câu hỏi 1 Câu hỏi 2 Mẫu định dạng được dùng để làm gì sau đây? Chọn cụm từ thích hợp vào chỗ trống. A. Định dạng cấu trúc của mã HTML. CSS có thể được viết . với mã B. Định dạng nội dung của thẻ HTML. nguồn trong tệp HTML của trang web. C. Định dạng kiểu sử dụng thẻ HTML. tách biệt, đồng thời , gắn liền, độc lập D. Định dạng hình ảnh trên trang web. 2. Cấu trúc CSS Một mẫu định dạng CSS có hai phần: bộ chọn (selector) và vùng mô tả (declartion block). Vùng mô tả gồm nhiều quy định, mỗi quy định (là một cặp thuộc tính: giá trị) ngăn cách nhau bởi dấu chấm phẩy ";". Cấu trúc của một mẫu định dạng CSS Cấu trúc mẫu định dạng CSS với vùng chọn có nhiều quy định
2. Dưới đây là một số ví dụ về sử dụng mẫu định dạng. Thiết lập màu chữ đỏ cho các bộ chọn là tất cả các thẻ . Thiết lập màu chữ Thiết lập thụt lề dòng đầu và chữ màu xanh áp dụng cho tất cả các thẻ . Thiết lập màu và thụt lề Thiết lập màu chữ đỏ cho các thẻ , , . Thiết lập màu chữ cho cả 3 thẻ 2.1. Thiết lập CSS trong (internal CSS) Cách thiết lập này đưa toàn bộ các mẫu định dạng vào bên trong thẻ và đặt trong phần tử head của tệp HTML. Cách thiết lập CSS trong chỉ được áp dụng cho tệp HTML hiện thời. Ví dụ ở phần 1 là thiết lập CSS trong. 2.2. Thiết lập CSS ngoài (external CSS) Các mẫu định dạng CSS được viết trong một tệp CSS, bên ngoài tệp HTML. Tập css này sẽ bao gồm các mẫu định dạng như đã mô tả ở trên, theo ngôn ngữ CSS. Sau đó, cần thực hiện thao tác kết nối, liên kết tập HTML với tệp định dạng CSS. Tệp styles.css sau là ví dụ cách thiết lập tệp CSS ngoài. Các dòng chú thích dưới dạng / *....... * / và có thể trên nhiều dòng. Tệp chứa các mẫu định dạng style.css  Sử dụng thẻ link đặt trong vùng head của trang web, ví dụ: Sử dụng thẻ link để liên kết tệp css  Sử dụng lệnh @import trong phần tử style và nằm trong phần head của trang web, ví dụ: Sử dụng lệnh @import để liên kết tệp css Một tệp CSS có thể được thiết lập để đồng thời áp dụng cho nhiều trang web, giúp cho việc định dạng nhiều trang web thống nhất và khi cần chỉnh sửa định dạng thì chỉ cần sửa một lần trong tập định dạng css. 2.3. Thiết lập CSS nội tuyến (inline CSS)
3. Có thể định dạng CSS trực tiếp bên trong thẻ của các phần tử HTML bằng cách chỉ ra các thuộc tính và giá trị cho thuộc tính style. Cách làm này mất thời gian nhưng thời gian thực hiện sẽ nhanh. Luyện tập Câu hỏi 1. Phương án nào sau đây là lợi ích của việc sử dụng tệp CSS ngoài? Giảm dung lượng lưu trữ của tệp siêu văn bản. Hạn chế việc áp dụng định dạng cho các trang. Áp dụng định dạng đồng thời nhiều trang web. Chỉ áp dụng định dạng cho một thẻ duy nhất. Câu hỏi 2. Đoạn mã nào sau đây chèn tệp CSS ngoài vào trang HTML? . . style.css Câu hỏi 3. Một trong những lợi ích của việc sử dụng tệp CSS ngoài là chỉ áp dụng định dạng cho một thẻ duy nhất. dễ dàng cập nhật định dạng sau khi sửa đổi. hạn chế số tệp tin văn bản cần được sử dụng. giảm khả năng tái sử dụng các mã định dạng. 3. Vai trò, ý nghĩa của CSS CSS giúp định dạng nội dung trang web một cách nhanh chóng và đồng nhất. Định dạng trở nên khoa học, thuận tiện và chuyên nghiệp hơn. Tách biệt nội dung HTML và định dạng làm giảm khối lượng công việc nhập nội dung. CSS cho phép viết các mẫu định dạng trong phần head của trang HTML hoặc tệp CSS ngoài, áp dụng cho nhiều phần tử hoặc trang web. Điều này làm cho việc thay đổi định dạng trở nên dễ dàng và hiệu quả. Luyện tập CSS giúp giảm khối lượng công việc bằng cách nào sau đây? Tách biệt nội dung và định dạng. Tạo nhiều mẫu định dạng phức tạp. Giảm số lượng tệp HTML cần thiết. Tăng số lượng trang web. II. BÀI TẬP 1. Trắc nghiệm nhiều phương án lựa chọn Câu 1. Số cách để thiết lập CSS cho tệp HTML là: A. 5. B. 2. C. 3. D.4. Câu 2. Một phát biểu SAI về vai trò của CSS đối với trang web là:
4. A. giúp trang web hoạt động nhanh hơn. B. tối ưu số lần áp dụng mẫu định dạng. C. giảm thiểu thời gian sửa đổi định dạng. D. hỗ trợ định dạng nội dung trang web. Hướng dẫn giải: CSS có nhiệm vụ định dạng nội dung trên website, không giúp trang web hoạt động nhanh hơn. Trong một vài trường hợp, CSS có thể làm chậm quá trình hoạt động của trang. Câu 3. Chức năng của CSS đối với trang web là: A. Mã hóa nội dung của thẻ HTML B. Cố định vị trí của phần tử HTML C. Làm tăng tốc độ của trang web D. Định dạng nội dung trang web Câu 4. Thẻ nào sau đây dùng để liên kết một tệp CSS đến tệp HTML? A. B. C. D. Câu 5. Một ví dụ đúng về khai báo bộ chọn là: A. p{color:red;} C. p{color;red;} B. p{color:red,} D. p{red:color;} Câu 6. Một ví dụ về các bộ chọn có chung vùng mô tả (quy tắc định dạng) là: A. b. p. i {color: white; font-size: 6px;} B. b, p, i {color: white; font-size: 6px;} C. b, p, i {color: white. font-size: 6px.} D. b, p, i {color: white, font-size: 6px,} Câu 7. Một ví dụ đúng về khai báo bộ chọn có nhiều vùng mô tả (quy tắc định dạng) là: A. p {color: green. font-size: 15px.} B. p {color: green, font-size: 15px,} C. p {color: green: font-size: 15px:} D. p {color: green; font-size: 15px;} Câu 8. Một ví dụ về cách khai báo nhiều bộ chọn có cùng vùng mô tả (quy tắc định dạng) là: A. p, span {color: black} C. p. span {color: black} B. p; span {color: black} D. p span: {color: black} Câu 9. Phần mở rộng của tệp chứa các bộ chọn là: A. *.html B. *.css C. *.ext D. *.des Câu 10. Kí tự nào sau đây dùng để ngăn cách tên bộ chọn có cùng vùng chọn (danh sách phần tử)? A. * B. , C. . D. ; Câu 11. Mỗi phần tử trong vùng mô tả (danh sách) được ngăn cách nhau bởi kí tự nào sau đây?
5. A. : B. | C. , D. ; Câu 12. Kí tự nào sau đây được sử dụng để gán giá trị cho thuộc tính? A. : B. - C. * D. ; Câu 13. Một phát biểu KHÔNG đúng về chức năng của CSS đối với trang web là: A. Tăng tốc độ hiển thị nội dung trang web. C. Áp dụng định dạng cho nhiều phần tử. B. Định dạng các nội dung sẽ xuất hiện. D. Giảm thiểu số lần thiết lập các định dạng. Câu 14. Một phát biểu đúng về vai trò của CSS đối với trang web là: A. Giảm thiểu dung lượng lưu trữ tệp. C. Giới hạn số lần chỉnh sửa định dạng. B. Giúp trang web hoạt động nhanh hơn. D. Hỗ trợ định dạng nội dung trang web. Câu 15. CSS viết tắt của từ nào trong Tiếng Anh? A. Creative Style Sheets. C. Colorful Style Sheets. B. Computer Style Sheets. D. Cascading Style Sheets. Câu 16. Tại sao việc sử dụng CSS có lợi hơn việc định dạng HTML trực tiếp? A. CSS không cần phải viết mã B. CSS không hỗ trợ đa dạng kiểu định dạng C. CSS làm cho trang web không cần thiết phải định dạng D. CSS giúp tách nội dung và định dạng, giảm công việc và tăng tính đồng nhất 2. Trắc nghiệm Đúng/Sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai Câu 1. Mẫu định dạng (bảng định dạng) CSS được sử dụng để định dạng và trang trí nội dung trang web bằng cách chèn thêm các bộ chọn phần tử vào trong trang web thông qua một số cách lần lượt là inline CSS, internal CSS, external CSS. Hãy chọn câu nào đúng, câu nào sai? a) Trang web chỉ được sử dụng một cách chèn. b) Có hai cách chèn CSS không nằm trong tệp HTML. c) Cần tạo tệp *.css nếu dùng external CSS. d) Cấu trúc bộ chọn trong từng cách chèn là giống nhau. Đáp án: S-S-Đ-Đ Hướng dẫn giải: Chỉ có external CSS là CSS không nằm trực tiếp trong HTML. Một trang web có thể sử dụng cả 3 cách Câu 2. Xác định tính đúng/ sai của các phát biểu sau: a) CSS (Cascading Style Sheets) là một ngôn ngữ độc lập với HTML, dùng để thiết lập mẫu định dạng cho trang web. b) Cấu trúc của CSS bao gồm bộ chọn và vùng mô tả. Vùng mô tả có thể chứa một hoặc nhiều quy định. c) CSS có thể được thiết lập nội tuyến trực tiếp trong các thẻ HTML bằng thuộc tính style, ngoài cách thiết lập qua tệp CSS ngoài. d) Một tệp CSS có thể được áp dụng cho nhiều trang web, giúp đồng bộ hóa định dạng và tiết kiệm thời gian chỉnh sửa.
6. Đáp án: Đ-Đ-S-Đ Câu 3. Xác định tính đúng sai của các phát biểu sau: a) CSS nội tuyến là cách thiết lập CSS trực tiếp trong thẻ HTML bằng thuộc tính style. b) Để kết nối tệp CSS ngoài với tệp HTML, bạn có thể sử dụng thẻ hoặc lệnh @import. c) Cấu trúc CSS đơn giản nhất chỉ bao gồm bộ chọn mà không cần vùng mô tả. d) CSS trong là cách đưa toàn bộ mẫu định dạng vào bên trong thẻ và đặt trong phần của tệp HTML. Đáp án: Đ-Đ-S-Đ
7. BÀI 14 BÀI 14. ĐỊNH DẠNG VĂN BẢN BẰNG CSS I. LÝ THUYẾT 1. Định dạng văn bản bằng CSS 1.1. CSS định dạng phông chữ CSS hỗ trợ thiết lập các thuộc tính liên quan đến chọn phông (font-family), chọn cỡ chữ (font-size), chọn kiểu chữ (font-style), độ dày nét chữ (font-weight) và nhiều thuộc tính khác. font-family: Thiết lập phông được sử dụng. Mỗi phông chữ có một tên riêng, có thể được chia làm năm loại sau: serif (chữ có chân); sans-serif (chữ không chân); monospace (chữ có chiều rộng đều nhau); cursive (chữ viết tay); fantasy (chữ trừu tượng). Một số kiểu phông chữ Ví dụ về thiết lập phông cho thẻ h1 Sau thuộc tính font-family là một hay một danh sách các tên phông chữ. Nếu tên phông chữ có chứa dấu cách thì cần đặt trong hai dấu nháy kép (hoặc nháy đơn). Danh sách các phông chữ này thường cùng loại và tên của loại phòng đó ở vị trí cuối cùng. Nếu không tìm thấy phông chữ nào trong danh sách thì sẽ chọn phông cùng loại bất kì. font-size: Thuộc tính này sẽ thiết lập cỡ chữ cho nội dung của thẻ. Ví dụ về bộ chọn chứa quy định về cỡ chữ Cỡ chữ có thể là một trong những dạng sau: Đơn vị đo chính xác tuyệt đối, ví dụ: cm (centimét), mm (milimét), in (inch = 2,54 cm), px Đơn vị đo tương đối: em (so với cỡ chữ hiện thời của trình duyệt), ex (so với chiều cao chữ x của cỡ chữ hiện thời), rem (so với cỡ chữ của phần tử gốc html của tệp HTML). Đơn vị theo tỉ lệ phần trăm (%) cỡ chữ của phần tử cha. Đơn vị theo các mức Cỡ chữ mặc định là mediummedium. Mẫu CSS Ý nghĩa Thiết lập cho toàn bộ các phần tử p có cỡ chữ bằng 1,2 cỡ chữ p {font-size: 1.2em;} của trình duyệt hiện thời. html {font-size: Thiết lập cỡ chữ mặc định cho toàn bộ trang web theo chế độ 100%;} mặc định của trình duyệt. font-style: Thuộc tính này thiết lập kiểu chữ thường hay kiểu chữ nghiêng của văn bản. Thuộc tính này có hai giá trị là normal (thường) và italics (nghiêng).
8. font-weight: Thuộc tính này thiết lập kiểu chữ đậm. Giá trị của thuộc tính này có thể đặt bằng chữ là normal (bình thường), bold (đậm) hoặc đặt bằng các giá trị từ 100, 200,..., 900, trong đó các mức độ viết đậm từ 500 trở lên. 1.2. CSS định dạng màu chữ Thuộc tính color sẽ thiết lập màu chữ, một số giá trị màu cơ bản như sau: black (đen), white (trắng), purple (tím), blue (xanh dương), orange (cam), red (đỏ), green (xanh lá cây), yellow (vàng). Ví dụ về sử dụng bộ chọn màu Bộ chọn với kí tự * là tất cả các phần tử HTML của trang web. Khi áp dụng CSS trên thì các phần tử h1 có chữ màu đỏ, các phần tử em có chữ màu xanh lá cây, còn toàn bộ các phần tử còn lại có chữ màu đen. 1.3. CSS định dạng dòng văn bản Hai thành phần chính: đường cơ sở (baseline) và chiều cao dòng văn bản (line-height). • Đường cơ sở (baseline) là đường ngang mà các chữ cái đứng thẳng trên nó. • Chiều cao dòng văn bản là khoảng cách giữa các đường cơ sở của các dòng trong cùng một đoạn văn bản. Mặc định = 2em và thể hiện bằng cách bổ sung khoảng cách phía trên và dưới của văn bản. Đường cơ sở và chiều cao dòng văn bản line-height: Thiết lập chiều cao dòng cho bộ chọn của mẫu định dạng. Ngoài các đơn vị đo thông thường, còn có thể thiết lập các số đo tương đối. Sử dụng một số đơn vị đo tương đối cho line-height text-align: Thuộc tính này thiết lập căn lề cho các phần tử được chọn. Các kiểu căn hàng bao gồm: left, center, right, justify. text-decoration: Thuộc tính này thiết lập tính chất “trang trí” dòng văn bản bằng các đường kẻ ngang trên, dưới hay giữa dòng. Thuộc tính này sẽ thay thế và mở rộng cho thẻ u của HTML. Thuộc tính này có bốn giá trị thường sử dụng là none (mặc định, không trang trí), underline (đường kẻ dưới chữ), overline (đường kẻ phía trên chữ) và line- through (kẻ giữa dòng chữ). text-indent: Thuộc tính định dạng thụt lề dòng đầu tiên. Nếu giá trị lớn hơn 0 thì dòng đầu tiên thụt vào. Nếu giá trị nhỏ hơn 0 thì dòng đầu tiên lùi ra ngoài còn gọi là thụt lề treo (hanging indent). Minh họa thụt dòng đầu tiên với giá trị khác nhau
9. Luyện tập Câu hỏi 1: Cho mẫu định dạng sau: Phát biểu sau đâu đây ĐÚNG? Phần tử p sẽ căn giữa văn bản của phần tử con. Phần tử h1 sẽ có nền màu đỏ và thụt lùi đầu dòng. Phần tử h1 sẽ có chữ màu đỏ và căn giữa văn bản. Phần tử p sẽ có chữ màu đỏ và căn đều hai bên. Câu hỏi 2: Cần đặt tên phông chữ có chứa dấu cách trong cặp dấu nào dưới đây? Cặp dấu ngoặc tròn. Cặp dấu nháy đơn. Cặp dấu chấm phẩy. Cặp dấu ngoặc nhọn. 2. Tính kế thừa và cách lựa chọn theo thứ tự của CSS 2.1. Tính kế thừa của CSS Một tính chất rất quan trọng của CSS là tính kế thừa. Nếu một mẫu CSS áp dụng cho một phần tử HTML bất kì thì nó sẽ được tự động áp dụng cho tất cả các phần tử là con, cháu của phần tử đó trong mô hình cây HTML (trừ các trường hợp ngoại lệ, ví dụ các phần tử với mẫu định dạng riêng). Tạo bộ chọn cho thẻ body và h1 Phần tử là con của body sẽ thừa hưởng định dạng. Minh họa tính kế thừa CSS 2.2. Thứ tự ưu tiên khi áp dụng mẫu CSS Do được phép có nhiều mẫu định dạng CSS nên có thể xảy ra trường hợp nhiều mẫu cùng áp dụng cho một phần tử HTML. Khi đó trình duyệt sẽ thực hiện mẫu định dạng được viết cuối cùng (tính chất “cascading” của CSS). Trong ví dụ mẫu CSS sau có hai định dạng cùng được viết áp dụng cho h1, mẫu đầu quy định căn giữa, mẫu sau quy định căn trái.
10. Minh họa thứ tự ưu tiên của các mẫu CSS 2.3. Sử dụng kí hiệu * và !important Ý nghĩa của hai kí hiệu được mô tả như sau: • Nếu có một mẫu định dạng chứa kí hiệu * thì định dạng này sẽ áp dụng cho mọi phần tử mà chưa có trong bất cứ mẫu định dạng nào khác của CSS. Mức độ ưu tiên của * là thấp nhất. • Kí hiệu !important được sử dụng trong một mẫu định dạng thì mẫu này với thuộc tính tương ứng sẽ được ưu tiên cao nhất mà không phụ thuộc vào vị trí của mẫu trong CSS. Minh họa thứ tự ưu tiên các mẫu trong CSS Luyện tập Câu hỏi 1: Mẫu định dạng có kí hiệu nào dưới đây áp dụng định dạng cho phần tử chưa có định dạng? A. * B. ‘ C. / D. . Câu hỏi 2: Bộ chọn có tính chất nào dưới đây? A. Tính đơn trị. C. Tính đồng nhất. B. Tính đa năng. D. Tính kế thừa. II. BÀI TẬP 1. Trắc nghiệm nhiều phương án lựa chọn Câu 1. CSS có thể định dạng phông chữ như thế nào? A. font-family. B. font-size. C. font-weight. D. Tất cả các ý trên.
11. Câu 2. Định dạng nào sau đây được sử dụng để thiết lập màu chữ trong CSS? A. color. B. font-color. C. text-color. D. background-color. Câu 3. Trong CSS, thuộc tính line-height dùng để: A. Định nghĩa chiều cao của phần tử. C. Định nghĩa độ rộng của chữ B. Thiết lập khoảng cách giữa các dòng văn bản. D. Thiết lập khoảng cách giữa các ký tự Câu 4. Để căn lề dòng đầu tiên của đoạn văn bản trong CSS, ta dùng thuộc tính nào? A. text-align. B. margin. C. text-indent. D. padding. Câu 5. Tính kế thừa trong CSS có nghĩa là gì? A. Một thuộc tính chỉ áp dụng cho một phần tử cụ thể B. CSS chỉ áp dụng cho phần tử cuối cùng trong cây DOM C. Không có sự kế thừa trong CSS D. Một thuộc tính CSS áp dụng cho phần tử cha cũng được áp dụng cho các phần tử con, cháu Câu 6. Trong CSS, thuộc tính text-align: center; dùng để: A. Căn lề trái cho văn bản B. Căn lề phải cho văn bản C. Căn giữa văn bản D. Căn đều hai bên văn bản Câu 7. Ký hiệu trong CSS có nghĩa là gì? A. Áp dụng cho các phần tử đặc biệt B. Áp dụng cho tất cả các phần tử HTML C. Chỉ áp dụng cho phần tử cha D. Không có ý nghĩa gì trong CSS Câu 8. Thuộc tính nào có ưu tiên cao nhất trong CSS khi được sử dụng cùng với !important? A. color. C. margin B. font-size D. Tất cả các thuộc tính với !important Câu 9. Phần tử nào sau đây không phải là loại phông chữ trong CSS? A. Serif. B. Sans-serif. C. Monospace. D. Symbolic. Câu 10. Để thiết lập chiều cao dòng bằng 150% của chiều cao dòng phần tử cha, ta sử dụng: A. line-height: 150%; C. line-height: 150px; B. line-height: 1.5; D. Cả a và b đều đúng 2. Trắc nghiệm Đúng/Sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai. Câu 1. Đánh dấu Đúng hoặc Sai cho các phát biểu sau: a) CSS có thể định dạng phông chữ bằng cách sử dụng thuộc tính font-family. b) Phông chữ Monospace trong CSS có chiều rộng các ký tự khác nhau. c) Thuộc tính color trong CSS có thể được sử dụng để thiết lập màu nền của phần tử. d) CSS cho phép thiết lập độ dày nét chữ bằng thuộc tính font-weight. Đáp án: Đ-S-S-Đ Hướng dẫn giải:
12. a) Đúng - CSS sử dụng thuộc tính font-family để chọn phông chữ cho văn bản. b) Sai - Phông chữ Monospace có chiều rộng các ký tự đều nhau, không phải khác nhau. c) Sai - Thuộc tính color trong CSS được sử dụng để thiết lập màu chữ, không phải màu nền. Màu nền được thiết lập bằng thuộc tính background-color. d) Đúng - Thuộc tính font-weight trong CSS được sử dụng để thiết lập độ dày nét chữ. Câu 2. Đánh dấu Đúng hoặc Sai cho các phát biểu sau: a) Trong CSS, thuộc tính line-height dùng để thiết lập khoảng cách giữa các đường cơ sở của các dòng văn bản. b) Thuộc tính text-indent được sử dụng để căn giữa văn bản. c) Khi nhiều mẫu định dạng CSS áp dụng cho một phần tử HTML, thuộc tính được viết sau cùng sẽ được ưu tiên áp dụng. d) Ký hiệu !important trong CSS giúp tăng độ ưu tiên của một thuộc tính, bất kể thứ tự của nó trong tệp CSS. Đáp án: Đ-S-Đ-Đ Hướng dẫn giải: a) Đúng - Thuộc tính line-height thiết lập khoảng cách giữa các đường cơ sở của các dòng văn bản. b) Sai - Thuộc tính text-indent được sử dụng để thụt lề dòng đầu tiên, không phải để căn giữa văn bản. Căn giữa văn bản sử dụng thuộc tính text-align: center;. c) Đúng - Trong CSS, thuộc tính được viết sau cùng trong tệp sẽ được ưu tiên áp dụng khi nhiều mẫu định dạng cùng tác động lên một phần tử. d) Đúng - Ký hiệu !important trong CSS tăng độ ưu tiên của một thuộc tính, khiến thuộc tính đó được áp dụng bất kể vị trí của nó trong tệp CSS. a) CSS có thể định dạng phông chữ bằng cách sử dụng thuộc tính font-family. b) Phông chữ Monospace trong CSS có chiều rộng các ký tự khác nhau. c) Thuộc tính color trong CSS có thể được sử dụng để thiết lập màu nền của phần tử. d) CSS cho phép thiết lập độ dày nét chữ bằng thuộc tính font-weight.
13. BÀI 15 BÀI 15. TẠO MÀU CHO CHỮ VÀ NỀN 1. Hệ thống màu của CSS 1.1. Hệ màu RGB (Red - Green - Blue) Mỗi màu là một tổ hợp gồm ba giá trị (r, g, b), trong đó mỗi giá trị này là số nguyên nằm trong khoảng từ 0 đến 255, tức là một số 8 bit. Tổng số màu là 28 × 28 × 28 = 224 = 16 777 216 màu. Mỗi giá trị màu được thiết lập bởi một trong các cách sau: • rgb(x-red, x-green, x-blue): trong đó x-red, x-green, x-blue có thể nhận các giá trị độc lập từ 0 đến 255. • rgb(x-red%, x-green%, x-blue%): trong đó các tham số biểu thị giá trị phần trăm của 255. • #rrggbb: trong đó rr, gg, bb là giá trị trong hệ đếm hexa (hệ đếm cơ số 16). Minh họa tham số thiết lập màu trong CSS 1.2. Hệ màu HSL HSL (Hue, Saturation, Lightness) biểu thị thông qua: • H (Hue): là vòng tròn màu với giá trị từ 0 đến 360. • S (saturation): chỉ độ bão hoà hay độ đậm đặc của màu với giá trị từ 0% đến 100%. Màu sẽ biến mất chỉ còn xám khi độ bão hoà bằng 0%. Ngược lại, màu sẽ đầy đủ nếu độ bão hoà bằng 100%. • L (Lightness): là độ sáng với giá trị từ 0% đến 100%. Với 0% chỉ mức độ sáng thấp nhất, màu đen. Với 100%, độ sáng là lớn nhất, màu sẽ trắng. Như vậy, đặt lightness = 50% để có màu đúng. Mô hình hệ màu HSL 1.3. Hệ các màu sẵn có CSS còn thiết lập sẵn các tên màu để dễ dàng cho việc sử dụng. Phiên bản CSS2 thiết lập tên 16 màu chuẩn (CSS3 có 140 màu). Tên màu không phân biệt chữ hoa chữ thường. Ví dụ một số tên màu có sẵn: black, gray, white, red, green, orange, yellow, purple, blue, lime,... Lưu ý: Các màu xám (hay đen trắng) có thể được thiết lập theo các cách sau: • rgb(x,x,x) với các tham số r, g, b bằng nhau. • hsl(h,0%,x%) khi tham số saturation bằng 0%. Các phần tử HTML của trang web có thể được tô màu bằng các thuộc tính sau: • Thuộc tính color dùng định dạng màu chữ (màu nổi). • Thuộc tính background-color dùng để định dạng màu nền.
14. • Thuộc tính border dùng để định dạng màu khung viền quanh phần tử. 🔷Trong mẫu CSS sau, phần tử h1 được định dạng màu chữ, màu nền và màu của khung viền. Ví dụ định dạng màu viền, màu nền, màu chữ cho thẻ h1 🔷Trong mẫu CSS sau, định dạng khung viền, màu nền cho phần tử em, định dạng màu chữ cho phần tử p. Định dạng màu cho thẻ em và thẻ p Áp dụng hai định dạng cho văn bản thu được kết quả: Kết quả áp dụng các bộ CSS định dạng màu Lưu ý: Các thuộc tính định dạng màu chữ và màu nền đều có tính kế thừa, riêng thuộc tính border không có tính kế thừa. Luyện tập Câu hỏi 1. Tổng số màu của hệ RGB là: A. xấp xỉ 16 triệu màu. C. xấp xỉ 18 triệu màu. B. xấp xỉ 24 triệu màu. D. xấp xỉ 15 triệu màu. Câu hỏi 2. Số lượng màu có sẵn tên trong CSS3 là: A. 156 màu. B. 150 màu. C. 124 màu. D. 140 màu. Câu hỏi 3. Màu xám trong hệ HSL được viết dưới dạng nào sau đây? A. hsl(13, 7%, 11%). B. hsl(12, 0%, 16%). C. hsl(12, 1%, 15%). D. hsl(10, 3%, 17%). 2. Thiết lập bộ chọn là tổ hợp các phần tử có quan hệ Các bộ chọn có thể được ghép bằng các mối quan hệ, mô tả trong bảng dưới đây. Bộ Ý nghĩa Ví dụ chọn div p {color: blue; } Quan hệ con cháu. Áp dụng cho các phần tử F với điều kiện F lễ phần tử E F Áp dụng cho các phần tử p với điều con/cháu của E, tức là E phải ở phía kiện p phải là phần tử con/cháu trên F trong cây HTML. của div.
15. p > em {color: red;} Quan hệ cha con trực tiếp. Áp dụng cho E > F các phần tử F với điều kiện F là phần tử Áp dụng cho các phần tử em với điều con của E. kiện em phải là phần tử con của p. em + strong {color: red;} Quan hệ anh em liền kề. Áp dụng cho các E + F phần tử F là phần tử liền kề ngay sau E, Áp dụng cho phần tử strong nếu E và F phải có cùng phần tử cha. strong đứng liền kề ngay sau em. em strong {color: red;} Quan hệ anh em. Áp dụng cho các phần tử F là phần tử đứng sau, không cần E ~ F Áp dụng cho phần tử strong nếu liên tục với E, E và F phải có cũng phần strong đứng sau em, không cần liền tử cha. kề. Áp dụng bộ chọn trong bảng thu được các kết quả được mô tả dưới đây. Quan hệ của E và F trong các trường hợp a. Ví dụ cho trường hợp E F Ví dụ sử dụng bộ chọn E F b. Ví dụ cho trường hợp E > F Ví dụ sử dụng bộ chọn E > F c. Ví dụ cho trường hợp E + F Ví dụ sử dụng bộ chọn E + F d. Ví dụ cho trường hợp E ~ F Ví dụ sử dụng bộ chọn E ~ F
16. Luyện tập Câu hỏi 1. Quan hệ giữa các phần tử E và F trong bộ chọn "E F" là: A. tổ tiên. B. anh em. C. con cháu. D. con trực tiếp. Câu hỏi 2. Quy tắc CSS nào sau đây chọn tất cả các phần tử p bên trong một phần tử div và tô màu chúng thành màu xanh? A. p div {color: blue;} B. div p {color: blue;} C. div > p {color: blue;} D. p > div {color: blue;} Câu hỏi 3. Giải thích nào sau đây là đúng về bộ chọn p > em {color: red;}? A. Chọn tất cả các phần tử em bên trong các phần tử p và tô màu chúng thành màu đỏ. B. Chọn tất cả các phần tử em là con trực tiếp của các phần tử p và tô màu chúng thành màu đỏ. C. Chọn tất cả các phần tử p là con trực tiếp của các phần tử em và tô màu chúng thành màu đỏ. D. Chọn tất cả các phần tử p bên trong các phần tử em và tô màu chúng thành màu đỏ. Hướng dẫn giải: Bộ chọn dạng E > F thì F là con trực tiếp của E. II. BÀI TẬP. 1. Trắc nghiệm nhiều phương án lựa chọn Câu 1. Hệ màu nào được sử dụng trong CSS để biểu diễn màu sắc bằng ba giá trị số từ 0 đến 255? A. CMYK B. RGB C. HSL D. HEX Câu 2. Thuộc tính CSS nào được sử dụng để định dạng màu chữ? A. background-color B. color C. border D. font-color Câu 3. Trong hệ màu HSL, giá trị nào biểu thị độ bão hòa của màu? A. H (Hue) B. S (Saturation) C. L (Lightness) D. A (Alpha) Câu 4. Thuộc tính CSS nào sau đây không có tính kế thừa? A. color B. background-color C. border D. font-size Câu 5. Mã màu hexa #ff0000 biểu thị màu gì trong hệ RGB? A. Màu xanh lá B. Màu xanh dương C. Màu đỏ D. Màu đen cây Câu 6. Bộ chọn CSS nào áp dụng định dạng cho các phần tử là con trực tiếp của ? A. div p B. div > p C. div + p D. div ~ p Câu 7. Mã rgb(0, 255, 0) đại diện cho màu nào trong hệ màu RGB? A. Màu xanh lá cây B. Màu xanh dương C. Màu đỏ D. Màu vàng Câu 8. Để làm cho tất cả văn bản trong trang web có màu xám, bạn sử dụng thuộc tính CSS nào? A. background-color: gray; C. color: gray; B. border: gray; D. font-color: gray; Câu 9. Trong CSS, thuộc tính background-color được sử dụng để làm gì? A. Định dạng màu viền C. Định dạng màu chữ B. Định dạng màu nền D. Định dạng cỡ chữ
17. Câu 10. Để áp dụng một màu cụ thể cho tất cả các phần tử HTML trong trang, bạn sử dụng bộ chọn CSS nào? A. body B. * C. html D. all 2. Trắc nghiệm Đúng/Sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai Câu 1. Phát biểu sau đây đúng hay sai về Hệ màu CSS và các thuộc tính màu? a) Hệ màu RGB sử dụng ba giá trị từ 0 đến 255 để biểu diễn màu sắc. b) Mã màu hexa #rrggbb trong CSS biểu diễn màu sắc bằng hệ thập phân. c) Hệ màu HSL trong CSS có ba thành phần: Hue, Saturation, và Brightness. d) Thuộc tính background-color được sử dụng để thiết lập màu chữ. Đáp án: Đ-S-S-Đ Hướng dẫn giải: a) Đúng: Hệ màu RGB sử dụng ba giá trị số từ 0 đến 255 để biểu diễn màu sắc cho các kênh đỏ (Red), xanh lá (Green), và xanh dương (Blue). b) Sai: Mã màu hexa #rrggbb sử dụng hệ đếm cơ số 16 (hexa) để biểu diễn màu sắc, không phải hệ thập phân. c) Sai: Hệ màu HSL bao gồm ba thành phần: Hue (Sắc độ), Saturation (Độ bão hòa), và Lightness (Độ sáng). Không có thành phần Brightness. d) Sai: Thuộc tính background-color được sử dụng để thiết lập màu nền, không phải màu chữ. Màu chữ được thiết lập bằng thuộc tính color. Câu 2. Đánh dấu đúng hay sai về các bộ chọn CSS và ứng dụng của chúng? a) Bộ chọn div p áp dụng định dạng cho tất cả các phần tử là con trực tiếp của . b) Bộ chọn div > p áp dụng định dạng cho các phần tử là con trực tiếp của . c) Bộ chọn em + strong áp dụng định dạng cho phần tử ngay sau phần tử . d) Bộ chọn h1 ~ p áp dụng định dạng cho tất cả các phần tử sau phần tử , không cần phải là con trực tiếp của nó. Đáp án: S-Đ-Đ-Đ Hướng dẫn giải: a) Sai: Bộ chọn div p áp dụng định dạng cho tất cả các phần tử là con cháu của , không nhất thiết phải là con trực tiếp. b) Đúng: Bộ chọn div > p áp dụng định dạng cho các phần tử là con trực tiếp của . c) Đúng: Bộ chọn em + strong áp dụng định dạng cho phần tử ngay sau phần tử , nghĩa là hai phần tử này liền kề nhau. d) Đúng: Bộ chọn h1 ~ p áp dụng định dạng cho tất cả các phần tử sau phần tử , không cần phải là con trực tiếp của nó.
18. BÀI 16 BÀI 16. ĐỊNH DẠNG KHUNG I. LÝ THUYẾT 1. Phân loại phần tử khối và nội tuyến Thẻ HTML được chia thành hai loại chính là khối và nội tuyến. Các phần tử khối (block level) thường bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web. Các phần tử nội tuyến (inline level) là các phần tử nhúng bên trong một phần tử khác. Trong ví dụ ở dưới, cụm từ "Việt Nam" là một phần tử nội tuyến, được nhúng trong phần tử p. Dòng chữ "Thư Bác Hồ" gửi học sinh được thể hiện ở dạng khối. Phần tử khối và nội tuyến Sử dụng thuộc tính display để thay đổi loại phần tử HTML với ba giá trị đi kèm là: none (ẩn đi), inline (cùng dòng), block (một khối). Đoạn mã sử dụng thuộc tính display Chuyển đổi phần tử nội tuyến sang khối Luyện tập Câu hỏi 1 Câu hỏi 2 Áp dụng một bộ chọn có quy Phần tử nào dưới đây mặc định là display: định display: none; được hiểu là: inline;? A. hiển thị phần tử tương tự như một A. B. C. D. phần tử khối. B. loại bỏ phần tử khỏi không gian của nó trong tài liệu. C. hiển thị phần tử tương tự như một phần tử nội dòng. D. ẩn phần tử và giữ không gian của nó trong tài liệu. 2. Thiết lập định dạng khung bằng CSS Một phần tử HTML có cấu trúc cơ bản như dưới đây. Thông số chính của khung
19. Thông số nêu trên thể hiện đầy đủ trên phần tử dạng khối, phần tử nội tuyến không thiết lập được chiều cao, chiều rộng. Dưới đây là một số giải thích về thông số: • Lề khung (margin) là khoảng trống tự do kể từ viền ngoài (outer) của phần tử. • Khung (border) là phần bao quanh phần tử có độ dài tùy thuộc. • Vùng đệm (padding) là khoảng cách giữa border đến phần nội dung của phần tử. Bảng sau đây mô tả thuộc tính liên quan đến khung vừa nêu. Thuộc tính Ý nghĩa Chiều rộng của khung. Thuộc tính này chỉ áp dụng cho phần tử width dạng khối. Chiều cao khung. Thuộc tính này chỉ áp dụng cho phần tử dạng height khối. Vùng đệm, khoảng cách từ vùng text đến đường viền ngoài của padding khung. Lề khung, khoảng cách từ đường viền ngoài của khung đến văn bản margin xung quanh nếu có. border-color Màu viền của viền khung. border-witdh Độ dày của đường viền. border-style Kiểu đường viền khung. border Hỗ trợ gán tích hợp nhiều tham số. Dưới đây là một ví dụ cụ thể về sử dụng định dạng này. Thiết lập nội dung thẻ HTML Thiết lập bộ định dạng CSS Luyện tập Câu hỏi 1 Câu hỏi 2 Thuộc tính nào sau đây dùng để tạo Thuộc tính nào sau đây dùng để tạo khoảng khoảng cách bên trong viền của phần tử cách bên ngoài viền của phần tử? nhưng ngoài phần nội dung? A. margin. C. border. A. margin. C. border. B. width. D. padding. B. height. D. padding. 3. Một số bộ chọn đặc biệt của CSS 3.1. Thiết lập bộ chọn là một lớp các phần tử có ý nghĩa gần giống nhau .class {thuộc tính: giá trị;} Ví dụ, thiết lập bộ chọn lớp như sau:
20. Bộ chọn lớp .waring và .test Áp dụng lên thẻ HTML như sau: Áp dụng bộ chọn lớp lên thẻ HTML 3.2. Thiết lập bộ chọn riêng cho từng phần tử riêng biệt có mã định danh id #idname {thuộc tính: giá trị;} Áp dụng bộ chọn định danh cho thẻ HTML Mỗi phần tử được gán một mã định danh ở trên là duy nhất trong một trang web. 3.3. Thiết lập bộ chọn thuộc tính CSS Sử dụng bộ chọn này giúp thiết lập vào các thuộc tính của thẻ mà người lập trình mong muốn. Ví dụ về thiết lập bộ chọn thuộc tính Khi đặt tên cho id và class: • Tên của id và class phân biệt chữ in hoa, in thường. • Tên bắt buộc phải có ít nhất một kí tự không là số, không bắt đầu bằng số, không chứa dấu cách và các kí tự đặc biệt khác. • Một phần tử có thể thuộc nhiều lớp khác nhau. Để khai báo, chúng ta đặt các tên lớp cách nhau bởi dấu cách. Luyện tập Câu hỏi: Giải thích về bộ chọn div#bat_dau > p nào sau đây là đúng? A. Chọn tất cả các phần tử là con trực tiếp của phần tử có thuộc tính id là bat_dau. B. Chọn tất cả các phần tử và mà cả hai đều có chung cùng thuộc tính id là bat_dau. C. Chọn toàn bộ mọi phần tử nằm bên trong mọi phần tử có thuộc tính id là bat_dau. D. Chọn tất cả các phần tử có thuộc tính id là bat_dau và có chứa phần tử bên trong. II. BÀI TẬP 1. Trắc nghiệm nhiều phương án lựa chọn Câu 1. Trong CSS, thuộc tính nào được sử dụng để định dạng chiều rộng của một khung? A. width B. height C. border D. margin Câu 2. Thuộc tính nào trong CSS không được sử dụng để định dạng một khung? A. padding B. border-style C. background-color D. font-size