Câu hỏi trang 101
Trong trang web portfolio.html đã tạo ở những bài học trước, em hãy trình bày cách bổ sung mã lệnh để các đề mục đánh dấu bằng thẻ được tô màu xanh. Giả sử em muốn thay đổi màu sắc khác và đổ bóng để các đề mục nổi bật hơn. Có thuộc tính nào đáp ứng yêu cầu này không?
Phương pháp giải:
Xem lại các bài học trước để trả lời câu hỏi.
Có thuộc tính để thay đổi màu sắc và đổ bóng giúp đề mục nổi bật hơn.
Lời giải chi tiết:
Để tô màu và đổ bóng cho các đề mục đánh dấu bằng thẻ , chúng ta có thể sử dụng thuộc tính CSS color để thay đổi màu sắc và thuộc tính text-shadow để đổ bóng.
Câu hỏi trang 102
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.
Phương pháp giải:
Dựa vào khái niệm về CSS và tìm hiểu thêm thông tin trene internet để trả lời câu hỏi.
Lời giải chi tiết:
CSS giúp cho trang web thêm đẹp mắt và sinh động, đồng thời giúp cho việc kiểm soát bố cục và hình thức của trang web thuận tiện hơn
KP1
Em hãy định kiểu cho kích thước phông chữ của các phần tử trong tệp portfolio.html là 60 pixels.
Phương pháp giải:
Sử dụng thuộc tính font-size với giá trị là 60px.
Lời giải chi tiết:
Để định kiểu kích thước phông chữ của các phần tử trong tệp portfolio.html thành 60 pixels, bạn có thể sử dụng cách thứ hai, tức là chèn mã lệnh CSS vào thẻ và dặt vào giữa cặp thẻ .
Cách 3. Tạo tệp .css và tạo liên kết bằng thẻ đến tệp này, thẻ đặt vào giữa cặp thẻ .
LT3
Giả sử trong tệp .css, mã lệnh được viết là h1 { color: red; }, còn trong tệp html, thẻ được viết là
. Khi hiển thị, đề mục h1 này sẽ có màu gì?
Phương pháp giải:
Dựa trên quy ước mã lệnh của HTML và CSS để trả lời.
Lời giải chi tiết:
Khi hiển thị, đề mục sẽ có màu xanh lam (blue).
VD1
Chèn mã lệnh CSS để định kiểu cho tên của mình trong trang web portfolio.html với màu sắc, kích thước, hiệu ứng độ bóng và khoảng cách của các kí tự tuỳ ý sao cho nổi bật và đẹp mắt.
Phương pháp giải:
Sử dụng mã lệnh CSS để định kiểu cho tên trong “my-name”
Lời giải chi tiết:
Dưới đây là ví dụ về cách chèn mã lệnh CSS vào tệp portfolio.html để định kiểu cho tên của em:
Hiển thị:
VD2
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.
Phương pháp giải:
Sử dụng kết hợp các thuộc tính để thay đổi màu nền, màu chữ.
Lời giải chi tiết:
Đoạn mã sửa:
Kết quả sau khi sửa hiển thị:
Giải thích: Trong ví dụ trên, chúng ta đã thêm một lớp (class) mới là header cho hàng tiêu đề và sử dụng thuộc tính background-color để tô màu xanh (#0088bd) và color để đổi màu chữ thành trắng.
VD3
Chèn mã lệnh CSS để định kiểu cho các mục sao cho:
Các mục được đánh dấu đầu dòng bằng biểu tượng đĩa tròn; phần nội dung của mỗi mục được tô nền vàng nhạt và đóng khung viền vàng đậm, bo tròn 4 góc.
Hình 4 là một ví dụ kết quả sau khi định kiểu bằng mã lệnh CSS.
Phương pháp giải:
Gợi ý: Sử dụng thuộc tính list-style-type với giá trị circle để thay đổi biểu tượng đánh dấu đầu dòng; thuộc tính background-color và border lần lượt cho màu nền và viền của mỗi mục; thuộc tính border-radius với giá trị 10px để bo tròn 4 góc của khung. Ngoài ra, có thể thêm thuộc tính padding với giá trị 10px để tạo khoảng trống bao quanh phần văn bản nằm trong khung.
Lời giải chi tiết:
Dưới đây là mã lệnh CSS để thực hiện yêu cầu này:
English
French
Spanish
Russian