Tải miễn phí mọi thứ có trên website: [CSS bài 7] Các bài tập về background trong CSS

Thứ Sáu, 1 tháng 9, 2017

[CSS bài 7] Các bài tập về background trong CSS

Bài này thuộc phần 7 của 7 trong series Học CSS cơ bản

Ở bài viết trước tôi đã viết rất kỹ phần lý thuyết, trong bài viết này là các bài tập về background. Nếu các bạn nào đã nắm chắc phần lý thuyết có thể đọc lướt qua bài viết này.

1. Bài tập 1

Đặt màu nền của trang là đỏ và màu nền cho <h1> là xanh nhạt (lightblue)

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
<p>Đoạn văn khác.</p>

</body>
</html>

Câu trả lời của bài tập 1

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: red;
}
h1 {
    background-color: lightblue;
}
</style>
</head>
<body>

<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
<p>Đoạn văn khác.</p>

</body>
</html>

2. Bài tập 2

Đặt một hình ảnh bất kỳ (chẳng hạn như http://ift.tt/2wvbeTa) làm hình nền của trang.

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
<p>Đoạn văn khác.</p>

</body>
</html>

Câu trả lời của bài tập 2

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("http://ift.tt/2wvbeTa");
}
</style>
</head>
<body>

<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
<p>Đoạn văn khác.</p>

</body>
</html>

3. Bài tập 3

Cũng như bài tập 2 nhưng làm cho hình nền đó chỉ lặp lại theo chiều dọc.

Câu trả lời của bài tập 3

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("http://ift.tt/2wvbeTa");
    background-repeat: repeat-y;
}
</style>
</head>
<body>

<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
<p>Đoạn văn khác.</p>

</body>
</html>

4. Bài tập 4

Cũng như bài tập 2 nhưng hình nền nên được hiển thị một lần, ở góc trên bên phải.

Câu trả lời của bài tập 4

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("http://ift.tt/2wvbeTa");
    background-repeat: no-repeat;
    background-position: top right;
}
</style>
</head>
<body>

<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
<p>Đoạn văn khác.</p>

</body>
</html>

5. Bài tập 5

Cũng như câu trả lời của bài tập 4 nhưng dùng cú pháp background rút gọn

Câu trả lời của bài tập 5

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background: url("http://ift.tt/2wvbeTa") no-repeat top right;
}
</style>
</head>
<body>

<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
<p>Đoạn văn khác.</p>

</body>
</html>

6. Lời cuối bài

Đến đây là kết thúc bài viết về các bài tập về background trong CSS. Qua bài sau tôi sẽ viết về cách tạo kiểu đường viền (border) trong CSS.

The post [CSS bài 7] Các bài tập về background trong CSS appeared first on Học online.

from WordPress http://ift.tt/2eriWWh
via IFTTT

Tải miễn phí mọi thứ có trên website