Sử dụng tệp portfolio.html chưa được định kiểu bằng CSS.
Nhiệm vụ 1. Định kiểu CSS cho vùng chọn là tên thẻ
Yêu cầu: Sử dụng vùng chọn để định kiểu cho các đề mục hi của tệp portfolio.html (Hình 4) theo các yêu cầu sau:
Phần văn bản có màu trắng, cỡ chữ 20, phông chữ Arial.
Phần nền của để mục h1 màu xanh, có độ rộng chiếm một nửa độ rộng của trang web, bo tròn góc trên và góc dưới ở bên phải.
Phần văn bản được căn phải đối với phần nền, có vùng đệm là 10 pixels.
Sử dụng tệp portfolio.html chưa được định kiểu bằng CSS.
Nhiệm vụ 1. Định kiểu CSS cho vùng chọn là tên thẻ
Yêu cầu: Sử dụng vùng chọn để định kiểu cho các đề mục hi của tệp portfolio.html (Hình 4) theo các yêu cầu sau:
Phần văn bản có màu trắng, cỡ chữ 20, phông chữ Arial.
Phần nền của để mục h1 màu xanh, có độ rộng chiếm một nửa độ rộng của trang web, bo tròn góc trên và góc dưới ở bên phải.
Phần văn bản được căn phải đối với phần nền, có vùng đệm là 10 pixels.
Quảng cáo
Trả lời:
Giải bởi Vietjack
1. Trong tệp portfolio.html, em chèn liên kết đến tệp style.css
<head>
<link rel="stylesheet" type="text/css" href="style.css"> </head>
2. Tạo tệp style.css nằm cùng thư mục với tệp portfolio.html. Tệp style.css sẽ chứa các khai bảo vùng chọn và mã lệnh CSS dùng để định kiểu theo yêu cầu.
3. Vì tất cả đề mục hi sẽ được định kiểu giống nhau nên ta khai báo vùng chọn là tên phần tử <h1>. Để đáp ứng những yêu cầu trên, các thuộc tính được sử dụng trong vùng chọn h1 gồm: Thuộc tính color dành cho màu của văn bản, nh cho cỡ chữ và nh cho phông chữ.
Thuộc tính background-color dành cho màu nền của đề mục, width dành cho độ rộng của nền và border-radius dành cho góc bo tròn.
Thuộc tính text-align dành cho việc căn phải và padding dành cho vùng đệm.
Như vậy, đoạn mã CSS được viết như sau:
h1 {
color: #ffffff;
}
background-color: #0053a0; width: 50%;
border-radius: 0px 10px 10px 0px;
text-align: right;
padding: 10px;
Đăng nhập để xem lời giải
Lưu tiến độ và luyện tập hiệu quả hơn. Hoàn toàn miễn phí!
Đang tải chế độ Học...
Hot: 1000+ đề thi giữa kì 1 lớp 1-12 đầy đủ các môn (Update 2026) (chỉ từ 60k). Tải ngay
Đăng ký VIP để học và luyện thi không giới hạn
Trọn bộ quyền lợi trên Vietjack, trong một tài khoản.
- Phòng luyện thi cấp tốc: ĐGNL - ĐGTD, Tốt nghiệp THPT, Ôn vào 10, Ôn vào 6, Ôn Giữa kì/Cuối kì
- Hơn 200K đề thi thử, đề minh hoạ, chính thức các năm
- Với 3tr+ câu hỏi theo các mức độ Nhận biết, Thông hiểu, Vận dụng
- Tải xuống đề thi [DOCX] với đầy đủ đáp án
- Xem hàng ngàn bài giảng đính kèm củng cố thêm kiến thức
- Bao gồm tất cả các bậc từ Tiểu học đến Đại học
- Chặn hiển thị quảng cáo tăng khả năng tập trung ôn luyện
- Đăng ký ngay
CÂU HỎI HOT CÙNG CHỦ ĐỀ
Đăng nhập để xem lời giải
Lưu tiến độ và luyện tập hiệu quả hơn. Hoàn toàn miễn phí!
Lời giải
0 Trong lập portfolio,html, đặt các ảnh vào cặp thẻ <div></div> như sau:
<div>
</div>
<img src="Images/Anh_1.jpg">
<img src="Images/Anh_2.jpg">
Các định kiểu từ bước này được đặt trong tập style.css. Định kiểu cho thẻ <div> bằng cách khai báo vùng chọn là lớp image-style như sau:
.image-style {
}
background-color: rgb(51, 51, 51); text-align: center;
Trong đó, thuộc tính background-color dùng để tạo nên màu tối và thuộc tỉnh text-align dùng để căn giữa cho ảnh.
Chỉ định tên lớp image-style cho thuộc tính class của thẻ <div);
<div class="image-style">
</div>
<img src="Images/Anh_1.jpg"> <img src="Images/Anh_2.jpg">
Vì các ảnh có kích thước lớn, có thể che mất phân nến, em thu nhỏ ảnh với khai báo vùng chọn kết hợp giữa lớp và thủ như sau:
.image-style img {
padding: 20px;
max-height: 75%;
}
max-width: 75%; Chan trời sang tạo
40px;
Trong đó, vùng chọn .image-style img được dùng để định kiểu cho các thẻ <img) nằm trong thẻ <div> mà có thuộc tính class là .image-style. Nói cách khác, các thẻ <img) không thuộc thẻ <div> này sẽ không được định kiểu theo vùng chọn này.
5 Nháy đúp chuột vào tệp portfolio.html để kiểm tra kết quả.
Đăng nhập để xem lời giải
Lưu tiến độ và luyện tập hiệu quả hơn. Hoàn toàn miễn phí!
Lời giải
Vùng chọn là khuôn mẫu dùng để chỉ ra phần tử HTML cụ thể được định kiểu.
Vùng chọn được dùng để áp dụng cùng một kiểu CSS cho một nhóm các phần tử xác định.
Đăng nhập để xem lời giải
Lưu tiến độ và luyện tập hiệu quả hơn. Hoàn toàn miễn phí!
Lời giải
Bạn cần đăng ký gói VIP ( giá chỉ từ 250K ) để làm bài, xem đáp án và lời giải chi tiết không giới hạn.
Đăng nhập để xem lời giải
Lưu tiến độ và luyện tập hiệu quả hơn. Hoàn toàn miễn phí!
Lời giải
Bạn cần đăng ký gói VIP ( giá chỉ từ 250K ) để làm bài, xem đáp án và lời giải chi tiết không giới hạn.
Đăng nhập để xem lời giải
Lưu tiến độ và luyện tập hiệu quả hơn. Hoàn toàn miễn phí!
Lời giải
Bạn cần đăng ký gói VIP ( giá chỉ từ 250K ) để làm bài, xem đáp án và lời giải chi tiết không giới hạn.
Đăng nhập để xem lời giải
Lưu tiến độ và luyện tập hiệu quả hơn. Hoàn toàn miễn phí!
Lời giải
Bạn cần đăng ký gói VIP ( giá chỉ từ 250K ) để làm bài, xem đáp án và lời giải chi tiết không giới hạn.
Đăng ký để học cùng Vietjack. Hoàn toàn miễn phí!
Bằng việc đăng ký, bạn đồng ý với Điều khoản sử dụng và Chính sách bảo mật của Vietjack.
Nhắn tin Zalo
Hỏi bài tập