Quảng cáo
Trả lời:
Giải bởi Vietjack
Các cách chèn mã lệnh CSS vào trang web:
Cách 1. Chèn trực tiếp mã lệnh CSS vào các thẻ mở của phần tử HTML thông qua thuộc tính style theo cú pháp:
«tên_thẻ_HTML style="thuộc_tính_CSS: giá_trị; thuộc tính_CSS: giá_trị;">
Ví dụ 1: Để tô màu xanh và đổ bóng cho để mục Giới thiệu chung, em chèn thuộc tính style vào thẻ <h1> của tệp portfolio.html.
<h1 style="color: #006bbe; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);">Giới thiệu chung</h1>
Thuộc tính color dùng để tô màu xanh cho chữ (mã màu #996bb0), thuộc tính text-shadow dùng để đổ bóng, với 1 pixel theo chiều ngang (hưởng sang phải), 1 pixel theo chiều dọc (hướng xuống dưới), 2 pixels làm mờ và màu xám rgba(0, 0, 0, 0.5) (Hình 1).
Cách này giúp định kiểu nhanh và trực tiếp cho một phần tử HTML cụ thể. Tuy nhiên, cách này có nhiều hạn chế, chẳng hạn như khó khăn bảo trì hoặc không thể tái sử dụng mã lệnh CSS.
Cách 2. Chèn cặp thẻ <style></style> kèm mã lệnh CSS vào giữa cặp thẻ <head></head> của tệp portfolio.html. Phần mã lệnh CSS trong thẻ <style> được viết theo cú pháp: tên_kiểu {thuộc_tính_CSS: giá trị; thuộc tính_CSS: giá_trị; }
Ví dụ 2:
<head>
<style>
h1 {
}
</style>
</head>
color: #006bb0;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
Một trong những ưu điểm của cách này là tách rời phẩn mã lệnh CSS với phần nội dung nằm trong thẻ <body> và giúp định kiểu toàn cục cho các phần tử HTML liên quan. Cụ thể trong Ví dụ 2, không chỉ để mục Giới thiệu chung, mà tất cả để mục <h1> khác của lập portfolio.html đều được tô màu xanh và đổ bóng.
Cách 3. Tạo tệp mã lệnh CSS riêng biệt và chèn vào trang web một liên kết đến tệp CSS bằng thẻ <link> đặt vào giữa cặp thẻ <head></head>. Thẻ <link> dược viết theo cú pháp: <link rel="stylesheet" type="text/css" href="dưỡng dẫn tẹp CSS">
Ví dụ 3: Các bước cụ thể của cách 3 được thực hiện như sau:
D Trong Visual Studio Code, tạo tập style.css trong cùng thư mục với tập portfolio html Sau đó, nhập đoạn mã CSS dưới đây:
h1 {
}
color: #006bb0;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
Trong tập portfolio.html, chèn thẻ <link> vào cặp thẻ <head></head> để liên kết đến tập style.css, cụ thể:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Cách này cũng đem lại kết quả tương tự như cách 2. Một số ưu điểm của cách này là tách rời các thành phần của một trang web, hỗ trợ khả năng làm việc cộng tác, khả năng bảo trì và tái sử dụng mã lệnh.
Nhà sách vietjack
Hot: 500+ Đề thi thử tốt nghiệp THPT các môn, ĐGNL các trường ĐH... file word có đáp án (2025). Tải ngay
Bình luận
CÂU HỎI HOT CÙNG CHỦ ĐỀ
Câu 1:
Em hãy trình bày một số lợi ích của CSS trong việc xây dựng các trang web.
Em hãy trình bày một số lợi ích của CSS trong việc xây dựng các trang web.
Xem đáp án »
11/07/2024
1,654
Câu 2:
Giả sử trong tệp .css, mã lệnh được viết là h1 {color: red;}, còn trong tệp .html, thẻ <h1> được viết là <h1 style="color: blue"). Khi hiển thị, để mục hi này sẽ có màu gì?
Giả sử trong tệp .css, mã lệnh được viết là h1 {color: red;}, còn trong tệp .html, thẻ <h1> được viết là <h1 style="color: blue"). Khi hiển thị, để mục hi này sẽ có màu gì?
Xem đáp án »
13/07/2024
1,381
Câu 3:
Bài thực hành này áp dụng cho trang web portfolio.html.
Nhiệm vụ 1. Định kiểu CSS cho các phần tử <h1>
Yêu cầu: Viết mã lệnh CSS để định kiểu cho các phần tử <h1> thoả các yêu cầu:
Phòng chủ là Arial, kích thước 32 pt và in đậm.
Màu chữ là xanh dương, có độ bóng.
Độ giãn cách giữa các kí tự là 4 pixels.
Bài thực hành này áp dụng cho trang web portfolio.html.
Nhiệm vụ 1. Định kiểu CSS cho các phần tử <h1>
Yêu cầu: Viết mã lệnh CSS để định kiểu cho các phần tử <h1> thoả các yêu cầu:
Phòng chủ là Arial, kích thước 32 pt và in đậm.
Màu chữ là xanh dương, có độ bóng.
Độ giãn cách giữa các kí tự là 4 pixels.
Xem đáp án »
11/07/2024
925
Câu 4:
Chèn mã lệnh CSS để tô màu xanh cho hàng tiêu đề của bảng trong Nhiệm vụ 2 ở THỰC HÀNH đồng thời thay đổi màu chữ thành màu trắng.
Chèn mã lệnh CSS để tô màu xanh cho hàng tiêu đề của bảng trong Nhiệm vụ 2 ở THỰC HÀNH đồng thời thay đổi màu chữ thành màu trắng.
Xem đáp án »
12/07/2024
506
Câu 5:
Em hãy thay đổi màu cho riêng đề mục Giới thiệu chung từ màu xanh sang một màu sắc tuỳ ý.
Em hãy thay đổi màu cho riêng đề mục Giới thiệu chung từ màu xanh sang một màu sắc tuỳ ý.
Xem đáp án »
12/07/2024
347
Câu 6:
Em hãy định kiểu cho kích thước phông chữ của các phần tử <h1> trong tệp portfolio.html là 60 pixel. Gợi ý: Sử dụng thuộc tính trị là 60px.
Em hãy định kiểu cho kích thước phông chữ của các phần tử <h1> trong tệp portfolio.html là 60 pixel. Gợi ý: Sử dụng thuộc tính trị là 60px.
Xem đáp án »
12/07/2024
200
🔥 Đề thi HOT:
-
15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 19 có đáp án
-
15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 23 có đáp án
-
15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 24 có đáp án
-
15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 22 có đáp án
-
15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 25 có đáp án
-
15 câu Trắc nghiệm Tin học 12 Cánh diều Giới thiệu trí tuệ nhân tạo có đáp án
-
15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 21 có đáp án
-
15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 18 có đáp án
Hãy Đăng nhập hoặc Tạo tài khoản để gửi bình luận
-
-
Bình luận