Giải SGK Tin học 12 CTST Bài F8. Một số thuộc tính cơ bản của CSS có đáp án

Mã lệnh CSS để định kiểu cho những thành tích đạt được còn lại trong mục Các hoạt động đã tham gia với những giá trị khác cho các thuộc tính: ta dùng các thuộc tính color, font-family, font-size, font-style, font-weigth.

$<$h1 style="color: #87e3cd;">Các hoạt động đã tham gia</h1>

Thực hiên viết mã lệnh CSS để định kiểu cho các hoạt động đã tham gia thành chữ in hoa và khoảng cách giữa các kí tự là 2 pixcel:

$<$h1style="color: #87e3cd; text-align: center; text-transformation">Các hoạt động đã tham gia</h1>

Để định kiểu CSS cho nền, em sử dụng các thuộc tính background-color, background-image, opacity, background-repeat.

$<$div style="background: #0; height: 100px>

$<$ul>

…..

</ul>

</div>

Em hãy kể tên một số thuộc tính dùng để định kiểu:

- Phông chữ: n phông chữ, cỡ chữ, kiểu in nghiêng và độ đậm nhạt.

- Văn bản: sử dụng thuộc tính text-align, vertical-align…

- Nền: thuộc tính background-color, background-image…

- Đường viền: thuộc tính boder

- Lề và vùng đệm: thuộc tính magrin và padding..

Một số đơn vị có thể được dùng để định kiểu kích thước cho những thành phần trong trang web:

- Màu sắc của chữ: sử dụng thuộc tính color. Màu sắc của chữ nói riêng và các thành phần khác của trang web nói chung có thể được chỉ định bởi những giá trị như: từ khoá tên màu (red); mã màu(#ff0000); hàm mô tả màu(grba(255,0,0,0.3) gồm ba tham số đứng đầu với các thành phần RGB, tham số thứ tư là độ trong suốt.

- Màu nền của văn bản: background-color, nhận các giá trị tên màu, mã màu hoặc các hàm mô tả màu rgb, rgba, hsl…

1. Em đặt các thông tin cá nhân vào cặp thẻ $<$div>/div>.

Để căn phải cho phần thông tin cá nhân, trong thuộc tính style của thẻ $<$div>, em chỉ định giá trị cho thuộc tính text-align là right.

2. Giả sử tệp ảnh làm nền có tên là hinhnen.jpg.

Để tạo nền là ảnh, em viết thêm một cặp thẻ $<$div></div> bên ngoài phần mã lệnh trên và chỉ định giá trị cho thuộc tính background-image là tệp ảnh đặt trong hàm url().

Đoạn mã CSS được viết như sau:

$<$h1>Giới thiệu chung</h1>

$<$div style="background-image: url('hinh_nen.jpg'); background-size: cover;">

$<$div style="color: #ffffff; text-align: right; height: 540px; padding: 50px 100px;"> $<$p>...</p>

</div>

</div>

Trong đó:

background-size: cover, có thể kéo giãn ảnh để phủ hết độ rộng của trang web.

color: #ffffff, giúp văn bản có màu trắng, tăng độ tương phản cho ảnh nến.

padding: 58px 199px, giúp tạo vùng đệm để văn bản không nằm sát cạnh phải của trang web và cạnh trên của ảnh nền, cụ thể là 50 pixels cho vùng đệm trên và dưới, 100 pixels cho vùng đệm trái và phải.

Em đặt nội dung của mỗi mục Sở thích vào cặp thẻ $<$div></div>. Trong thuộc tỉnh style của mỗi thẻ hợp với các yêu cầu:

Dùng thuộc tính border để tạo đường viền và thuộc tỉnh background-color để tạo nền trắng.

Dùng thuộc tỉnh height và width để định kiều lần lượt chiều cao và độ rộng của khung, trong đó giá trị của width là 50%.

Dùng thuộc tính border-radius để bo tròn 4 góc của khung.

Dùng thuộc tính margin và padding để định kiểu lần lượt cho lề và vùng đệm, trong đó ứng với mỗi thuộc tính, em chỉ định giá trị là 20px cho cả bốn bên: trên, dưới, trái và phải. Đoạn mã CSS cho sở thích môn học được viết như sau:

$<$div style="border: 1px solid #e5e5e5; background-color: #ffffff; height: 30px; width: 50%; border-radius: 10px; margin: 20px; padding: 20px;">Môn học: Tin học, Toán, Ngoại ngữ</div>

Thực hiện định kiểu cho các thông tin cá nhân bằng phông chữ Georgia, họ tên có kích thước 24 pt, các thông tin còn lại có kích thước 20 pt.

- Em đặt các thông tin cá nhân vào cặp thẻ $<$div>/div>.

Để căn phải cho phần thông tin cá nhân, trong thuộc tính style của thẻ $<$div>, em chỉ định giá trị cho thuộc tính text-align là right.

- Giả sử tệp ảnh làm nền có tên là hinhnen.jpg.

Để tạo nền là ảnh, em viết thêm một cặp thẻ $<$div></div> bên ngoài phần mã lệnh trên và chỉ định giá trị cho thuộc tính background-image là tệp ảnh đặt trong hàm url().

Đoạn mã CSS được viết như sau:

$<$h1>Giới thiệu chung</h1>

$<$div style="background-image: url('hinh_nen.jpg'); background-size: cover;">

$<$div style="color: #ffffff; text-align: right; height: 540px; padding: 50px 100px;"> $<$p>...</p>

</div>

</div>

Thực hiện tăng hoặc giảm tuỳ ý độ trong suốt của ảnh nền ở mục Giới thiệu chung để được kết quả như Hình 9:

$<$div style ="background: # b1ffb1; height:100px; opacity:0">

$<$ul>

…

(/ul>

</div>

Đối với mỗi ảnh trong mục Nội dung yêu thích, thực hiện định kiểu bo tròn 4 góc của ảnh để được kết quả như Hình 10:

$<$div style="border: 1px solid #00a2d3; border-radius: 10px; margin: 20px 50px 50px 250px; padding: 20px; background: #b1ffb1; height: 100px; width: 500px; ">

$<$ul>

</div>

</ul>