Ở bài trước tôi đã viết khá chi tiết về cách thêm CSS trong HTML. Để cho các bạn nhớ lâu hơn nên tôi viết thêm các bài tập về nó ở bài này.
1. Bài tập 1
Thay đổi màu nền (background color) của trang dưới đây sang màu vàng (yellow)
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:black}
</style>
</head>
<body>
<h1>Đây là tiêu đề</h1>
<p>Đây là một đoạn văn bản.</p>
</body>
</html>
Gợi ý của bài tập 1
Gợi ý: Thay đổi giá trị của thuộc tính background-color
Câu trả lời của bài tập 1
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:yellow}
h1 {color:blue}
p {color:black}
</style>
</head>
<body>
<h1>Đây là tiêu đề</h1>
<p>Đây là một đoạn văn bản.</p>
</body>
</html>
2. Bài tập 2
Thay đổi phông chữ của cả h1 và phần tử p thành phông “courier”.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:black}
</style>
</head>
<body>
<h1>Đây là tiêu đề</h1>
<p>Đây là một đoạn văn bản.</p>
</body>
</html>
Gợi ý của bài tập 2
Gợi ý: Sử dụng thuộc tính font-family.
Câu trả lời của bài tập 2
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;font-family:courier}
h1 {color:blue}
p {color:black}
</style>
</head>
<body>
<h1>Đây là tiêu đề</h1>
<p>Đây là một đoạn văn bản.</p>
</body>
</html>
3. Bài tập 3
Thay đổi màu sắc của tất cả các đoạn văn trong trang bên dưới.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
</style>
</head>
<body>
<h1>Thơ của binhnet</h1>
<p>Thức đêm mới biết đêm dài, thức ngày mới biết ngày dài hơn đêm.</p>
<p>Vạn sự khởi đầu nan, gian nan bắt đầu nản.</p>
<p>Hãy làm những gì mình thích, rồi bạn sẽ thành công.</p>
</body>
</html>
Gợi ý của bài tập 3
Gợi ý: Bên trong phần tử <style>, thêm thuộc tính màu (color) cho tất cả các phần tử <p>.
Câu trả lời của bài tập 3
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
p {color:blue}
</style>
</head>
<body>
<h1>Thơ của binhnet</h1>
<p>Thức đêm mới biết đêm dài, thức ngày mới biết ngày dài hơn đêm.</p>
<p>Vạn sự khởi đầu nan, gian nan bắt đầu nản.</p>
<p>Hãy làm những gì mình thích, rồi bạn sẽ thành công.</p>
</body>
</html>
4. Bài tập 4
Thêm một đường viền màu đỏ (red border) cho tất cả các đoạn văn.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
</style>
</head>
<body>
<h1>Thơ của binhnet</h1>
<p>Thức đêm mới biết đêm dài, thức ngày mới biết ngày dài hơn đêm.</p>
<p>Vạn sự khởi đầu nan, gian nan bắt đầu nản.</p>
<p>Hãy làm những gì mình thích, rồi bạn sẽ thành công.</p>
</body>
</html>
Gợi ý của bài tập 4
Gợi ý: Sử dụng thuộc tính border.
Câu trả lời của bài tập 4
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
p {border:1px solid red}
</style>
</head>
<body>
<h1>Thơ của binhnet</h1>
<p>Thức đêm mới biết đêm dài, thức ngày mới biết ngày dài hơn đêm.</p>
<p>Vạn sự khởi đầu nan, gian nan bắt đầu nản.</p>
<p>Hãy làm những gì mình thích, rồi bạn sẽ thành công.</p>
</body>
</html>
5. Bài tập 5
Thêm một id có giá trị “nguyenbinh” vào đoạn cuối cùng.
<!DOCTYPE html>
<html>
<head>
<style>
#nguyenbinh {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1>Thơ của binhnet</h1>
<p>Thức đêm mới biết đêm dài, thức ngày mới biết ngày dài hơn đêm.</p>
<p>Vạn sự khởi đầu nan, gian nan bắt đầu nản.</p>
<p>Hãy làm những gì mình thích, rồi bạn sẽ thành công.</p>
</body>
</html>
Gợi ý của bài tập 5
Gợi ý: Sử dụng thuộc tính id.
Câu trả lời của bài tập 5
<!DOCTYPE html>
<html>
<head>
<style>
#nguyenbinh {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1>Thơ của binhnet</h1>
<p>Thức đêm mới biết đêm dài, thức ngày mới biết ngày dài hơn đêm.</p>
<p>Vạn sự khởi đầu nan, gian nan bắt đầu nản.</p>
<p id="nguyenbinh">Hãy làm những gì mình thích, rồi bạn sẽ thành công.</p>
</body>
</html>
6. Bài tập 6
Thêm class với giá trị “binhnet” vào tiêu đề bên dưới
<!DOCTYPE html>
<html>
<head>
<style>
.binhnet {
background-color:black;
color:white;
border:1px solid grey;
padding:10px;
margin:30px;
font-size:150%;
}
</style>
</head>
<body>
<h1>Thơ của binhnet</h1>
<p>Thức đêm mới biết đêm dài, thức ngày mới biết ngày dài hơn đêm.</p>
<p>Vạn sự khởi đầu nan, gian nan bắt đầu nản.</p>
<p>Hãy làm những gì mình thích, rồi bạn sẽ thành công.</p>
</body>
</html>
Gợi ý của bài tập 6
Gợi ý: Sử dụng thuộc tính class.
Câu trả lời của bài tập 6
<!DOCTYPE html>
<html>
<head>
<style>
.binhnet {
background-color:black;
color:white;
border:1px solid grey;
padding:10px;
margin:30px;
font-size:150%;
}
</style>
</head>
<body>
<h1 class="binhnet">Thơ của binhnet</h1>
<p>Thức đêm mới biết đêm dài, thức ngày mới biết ngày dài hơn đêm.</p>
<p>Vạn sự khởi đầu nan, gian nan bắt đầu nản.</p>
<p>Hãy làm những gì mình thích, rồi bạn sẽ thành công.</p>
</body>
</html>
7. Lời cuối bài
Qua các bài tập này chắc các bạn đã củng cố được kiến thức của bài trước. Ở bài sau chúng ta sẻ cùng tìm hiểu về các liên kết (links), đường dẫn tuyệt đối (absolute path) và đường dẫn tương đối (relative path) trong HTML.
The post [HTML bài 16] Phần bài tập về cách thêm CSS trong HTML appeared first on Học online.
from WordPress http://ift.tt/2w7UQJJ
via IFTTT
Không có nhận xét nào:
Đăng nhận xét