Nội dung bài viết

    Xem thêm

    Lý thuyết Tin học 12 Bài 13 (Kết nối tri thức): Khái niệm, vai trò của CSS

    Tóm tắt lý thuyết Tin học lớp 12 Bài 13: Khái niệm, vai trò của CSS hay, chi tiết sách Kết nối tri thức sẽ giúp học sinh nắm vững kiến thức trọng tâm, ôn luyện để học tốt Tin học 12.

    1 371 16/10/2024
    Trang trước
    Chia sẻ
    Trang sau  

    Lý thuyết Tin học 12 Bài 13: Khái niệm, vai trò của CSS

    1. Khái niệm mẫu định dạng

    Trong đoạn mã nguồn ở Hình 13.2, các dòng từ 6 đến 10 là một loại ngôn ngữ đặc biệt dùng để thiết lập các mẫu định dạng cho trang web. Các mẫu định dạng này được gọi là Cascading Style Sheet và viết tắt là CSS.

    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.

    Lý thuyết Tin 12 Kết nối tri thức Bài 13: Khái niệm, vai trò của CSS

    CSS (Cascading Style Sheets) là định dạng độc lập với chuẩn HTML, dùng để thiết lập các mẫu định dạng cho trang web.

    Mẫu định dạng CSS là một công cụ hỗ trợ giúp định dạng nội dung trang web nhanh hơn, thuận tiện hơn bằng cách định nghĩa một lần và sử dụng nhiều lần. CSS sử dụng ngôn ngữ mô tả riêng, độc lập với HTML.

    2. Cấu trúc CSS

    Cấu trúc tổng quát của một mẫu định dạng CSS có hai phần: bộ chọn (selector) và vùng mô tả (declaration block). Vùng mô tả bao gồm một hay nhiều quy định có dạng {thuộc tính : giá trị ; }, các quy định được viết cách nhau bởi dấu “;”. Bộ chọn sẽ quy định những thẻ HTML nào được chọn để áp dụng định dạng này.

    Cấu trúc CSS có thể ở dạng đơn giản, trong đó vùng mô tả chỉ có một quy định:

    bộ chọn {thuộc tính: giá trị;}

    hoặc nhiều quy định ở vùng mô tả như sau: bộ chọn {

    thuộc tỉnh 1: giá trị 1;

    thuộc tỉnh 2: giá trị 2;

    thuộc tính n: giá trị n;

    Ví dụ 1: Mẫu CSS thiết lập màu chữ đỏ cho bộ chọn là tất cả các thẻ h1.

    h1 {color: red;}

    Ví dụ 2: Mẫu CSS gồm hai quy định, thụt lề dòng đầu và chữ màu xanh áp dụng cho bộ chọn là tất cả các thẻ p.

    p {text-indent: 15px; color: blue;}

    Bộ chọn có thể là một thẻ để áp dụng như hai ví dụ trên hoặc đồng thời nhiều thẻ. Cách viết này giúp cho CSS dễ thiết lập và áp dụng.

    Ví dụ 3: Mẫu CSS sau thiết lập định dạng chữ đỏ cho đồng thời các thẻ h1, h2, h3, Các thẻ này được viết cách nhau bởi dấu phẩy.

    h1, h2, h3 {color: red;}

    Có ba cách thiết lập CSS là CSS trong (internal CSS), CSS ngoài (external CSS) và CSS nội tuyến (inline CSS).

    a)Cách thiết lập CSS trong:

    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ẻ <style> và đặt trong phần tử <head> của tệp HTML. Các định dạng sẽ áp dụng cho tất cả các phần tử HTML trên trang web phù hợp với mô tả của bộ chọn CSS. Với cách thiết lập CSS trong, các mẫu định dạng CSS chỉ được áp dụng cho tệp HTML hiện tại. Cách thiết lập CSS trong ví dụ ở Hoạt động 1 là thiết lập CSS trong.

    b) Cách thiết lập CSS ngoài

    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.

    Cách kết nối tập HTML với CSS như sau:

    Cách 1: Sử dụng thẻ link đặt trong vùng head của trang web

    Cách 2: Sử dụng lệnh @import đặt trong phần tử style và nằm trong phần head của trang web

    Một tệp CSS có thể được thiết lập để á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 chỉ bằng cách sửa một lần trong tệp CSS.

    c)Cách thiết lập CSS nội tuyến:

    - Có thể định dạng CSS trực tiếp trong thẻ của các phần tử HTML bằng cách sử dụng thuộc tính `style`.

    - Cách này mất thời gian hơn khi viết mã nhưng có thể thực hiện nhanh chóng và có lợi ích riêng, sẽ được trình bày trong phần sau.

    ->Cấu trúc tổng quát của CSS bao gồm các mẫu định dạng dùng để tạo khuôn cho các phần tử HTML của trang web. Mỗi mẫu này bao gồm hai phần: bộ chọn và vùng mô tả. Có thể thiết lập CSS trong, ngoài thông qua tệp CSS hoặc đặt nội tuyến trực tiếp bên trong các phần tử HTML thông qua thuộc tính style.

    3. Vai trò, ý nghĩa của CSS

    Nếu không sử dụng CSS, việc định dạng nội dung trang web phải thực hiện bằng cách thiết lập các thuộc tính cho từng phần tử HTML, điều này tốn thời gian và có thể không đồng nhất nếu có nhiều trang web và phần tử HTML. CSS được thiết kế để định dạng trang web một cách thống nhất, nhanh chóng và thuận tiện.

    CSS giúp tách việc nhập nội dung HTML và định dạng thành hai công việc độc lập, giảm bớt công việc nhập nội dung và tăng tính chuyên nghiệp trong việc định dạng.

    - Các mẫu định dạng CSS có thể viết trong phần `<head>` của trang HTML, áp dụng cho tất cả các phần tử trong bộ chọn, và được sử dụng nhiều lần.

    - Các mẫu định dạng cũng có thể viết trong tệp CSS ngoài và kết nối vào bất kỳ trang web nào, cho phép áp dụng một lần cho nhiều trang web hoặc toàn bộ website. Thay đổi định dạng chỉ cần chỉnh sửa một lần.

    ->CSS được thiết lập với mục đích làm cho công việc định dạng nội dung trang web trở nên khoa học hơn, nhanh hơn, thuận tiện hơn. Với CSS, các mẫu định dạng được thiết kế độc lập, có thể viết ra một lần nhưng được áp dụng nhiều lần.

    Trắc nghiệm Tin học 12 Bài 13: Khái niệm, vai trò của CSS

    Câu 1: CSS viết tắt của từ nào trong tiếng Anh?

    A. Cascading Style Sheets

    B. Cascading Script Sheets

    C. Color Style Sheets

    D. Cascading Style Systems

    Đáp án: A

    Giải thích: CSS là viết tắt của "Cascading Style Sheets," là một ngôn ngữ dùng để định dạng các phần tử trên trang web.

    Câu 2: Trong cấu trúc CSS, phần nào xác định các thẻ HTML nào sẽ được áp dụng định dạng?

    A. Vùng mô tả

    B. Thuộc tính

    C. Bộ chọn

    D. Giá trị

    Đáp án: C

    Giải thích: Bộ chọn (selector) trong CSS quy định các thẻ HTML nào sẽ được áp dụng định dạng mà bạn đã thiết lập.

    Câu 3: Đoạn mã nào sau đây là ví dụ về CSS với nhiều quy định trong vùng mô tả?

    A. h1 {color: red;}

    B. p {text-indent: 15px; color: blue;}

    C. div {background: yellow;}

    D. a {font-size: 14px;}

    Đáp án: B

    Giải thích: Đoạn mã p {text-indent: 15px; color: blue;} là ví dụ về CSS với nhiều quy định trong vùng mô tả.

    Câu 4: Cách nào không phải là một cách thiết lập CSS?

    A. CSS trong

    B. CSS ngoài

    C. CSS nội tuyến

    D. CSS tích hợp

    Đáp án: D

    Giải thích: Các cách thiết lập CSS bao gồm CSS trong, CSS ngoài và CSS nội tuyến. "CSS tích hợp" không phải là một cách thiết lập CSS.

    Câu 5: Để kết nối tệp CSS với tệp HTML, bạn có thể sử dụng thẻ nào trong phần <head>?

    A. <script>

    B. <style>

    C. <link>

    D. <import>

    Đáp án: C

    Giải thích: Thẻ <link> được sử dụng trong phần <head> của tệp HTML để liên kết với tệp CSS bên ngoài.

    Câu 6: Cấu trúc của một mẫu định dạng CSS đơn giản nhất bao gồm phần nào?

    A. Chỉ bộ chọn

    B. Chỉ vùng mô tả

    C. Bộ chọn và vùng mô tả

    D. Bộ chọn, vùng mô tả và thuộc tính

    Đáp án: C

    Giải thích: Cấu trúc cơ bản của một mẫu định dạng CSS bao gồm bộ chọn (selector) và vùng mô tả (declaration block).

    Câu 7: Cách nào cho phép định dạng CSS trực tiếp trong các phần tử HTML?

    A. CSS trong

    B. CSS ngoài

    C. CSS nội tuyến

    D. CSS liên kết

    Đáp án: C

    Giải thích: CSS nội tuyến (inline CSS) cho phép bạn định dạng CSS trực tiếp trong thẻ HTML bằng thuộc tính style.

    Câu 8: Nếu bạn muốn định dạng tất cả các thẻ <h1>, <h2>, và <h3> cùng một lúc, bạn nên viết CSS như thế nào?

    A. h1 h2 h3 {color: red;}

    B. h1, h2, h3 {color: red;}

    C. h1 h2, h3 {color: red;}

    D. h1 h2 h3 {color: red;}

    Đáp án: B

    Giải thích: Để áp dụng định dạng cho tất cả các thẻ <h1>, <h2>, và <h3>, bạn nên viết CSS như h1, h2, h3 {color: red;}.

    Câu 9: Mẫu định dạng nào dưới đây là CSS nội tuyến?

    A. <style> p {color: green;} </style>

    B. <link rel="stylesheet" href="styles.css">

    C. <p style="color: green;">Text</p>

    D. h1 {color: green;}

    Đáp án: C

    Giải thích: CSS nội tuyến được áp dụng trực tiếp trong thuộc tính style của các thẻ HTML.

    Câu 10: 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 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

    C. CSS làm cho trang web không cần thiết phải định dạng

    D. CSS không hỗ trợ đa dạng kiểu định dạng

    Đáp án: B

    Giải thích: CSS giúp tách việc định dạng khỏi nội dung HTML, làm cho việc quản lý và duy trì trang web trở nên dễ dàng hơn và đồng nhất hơn.

    PHẦN II. Câu 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: Xác định tính đúng sai của các phát biểu sau:

    a) CSS là viết tắt của "Cascading Style Sheets", là một ngôn ngữ độc lập với HTML để thiết lập các mẫu định dạng cho trang web.

    b) Cấu trúc tổng quát của một mẫu định dạng CSS bao gồm bộ chọn và vùng mô tả, với vùng mô tả chứa ít nhất một quy định.

    c) CSS chỉ có thể được thiết lập qua tệp CSS ngoài, không thể được sử dụng nội tuyến trong các thẻ HTML.

    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.

    a) Đúng - 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) Đúng - 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) Sai - 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) Đúng - 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.

    Câu 2: 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ẻ <link> 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ẻ <style> và đặt trong phần <head> của tệp HTML.

    a) Đúng - CSS nội tuyến cho phép bạn áp dụng định dạng trực tiếp trong thẻ HTML thông qua thuộc tính style.

    b) Đúng - Để kết nối tệp CSS ngoài với tệp HTML, bạn có thể sử dụng thẻ <link> hoặc lệnh @import.

    c) Sai - Cấu trúc CSS đơn giản nhất vẫn bao gồm bộ chọn và vùng mô tả, mặc dù vùng mô tả có thể chỉ có một quy định.

    d) Đúng - CSS trong được thiết lập bằng cách đặt toàn bộ các mẫu định dạng vào bên trong thẻ <style> trong phần <head> của tệp HTML.

    PHẦN III. Câu trả lời ngắn. Thí sinh trả lời từ câu 1 đến câu 3

    Câu 1: CSS giúp ích gì cho việc định dạng trang web?

    Đáp án : CSS giúp định dạng trang web nhanh chóng và đồng bộ hơn bằng cách định nghĩa các mẫu định dạng một lần và áp dụng cho nhiều phần tử hoặc trang web.

    Giải thích: CSS giúp tách việc định dạng khỏi nội dung HTML, giảm bớt công việc và tăng tính nhất quán trong việc áp dụng định dạng cho nhiều trang hoặc phần tử.

    Câu 2: Cấu trúc tổng quát của một mẫu định dạng CSS bao gồm những phần nào?

    Đáp án: Cấu trúc tổng quát của mẫu định dạng CSS bao gồm bộ chọn (selector) và vùng mô tả (declaration block).

    Giải thích: Bộ chọn xác định các phần tử HTML nào được áp dụng định dạng, trong khi vùng mô tả chứa các quy định định dạng với thuộc tính và giá trị.

    Câu 3: Cách thiết lập CSS nội tuyến có điểm gì đặc biệt so với CSS trong và CSS ngoài?

    Đáp án: CSS nội tuyến được thiết lập trực tiếp trong các thẻ HTML bằng thuộc tính style, khác với CSS trong và CSS ngoài, nơi CSS được đặt trong thẻ <style> hoặc tệp CSS riêng biệt.

    Giải thích: CSS nội tuyến áp dụng định dạng trực tiếp vào các thẻ HTML qua thuộc tính style, trong khi CSS trong và CSS ngoài sử dụng cách thiết lập khác, giúp dễ quản lý hơn trên quy mô lớn.

    Xem thêm

    Tham khảo các loạt bài Tin học 12 khác:

    Bài viết cùng lớp mới nhất

    Xem thêm
    1 371 16/10/2024
    Trang trước
    Chia sẻ
    Trang sau  

    Xem thêm các chương trình khác: