Bài 1:
Thiết kế trang web trình nội bài thơ Tre Việt Nam với các yêu cầu:
- Sử dụng css inline
- Tiêu đề dùng thẻ h2
- In nghiêng toàn bộ bài thơ (thẻ em), màu chữ red
- Chữ "tre" màu chữ blue, in đậm
Kết quả:
Tre Việt Nam
Tre xanh,
Xanh tự bao giờ?
Chuyện ngày xưa... đã có bờ tre xanh.
Thân gầy guộc, lá mong manh,
Mà sao nên luỹ nên thành tre ơi?
Ở đâu tre cũng xanh tươi,
Cho dù đất sỏi đất vôi bạc màu.
...
Bài 2:
Thiết kế trang web trình nội bài thơ Hoa hồng Bungari – của Tế Hanh với các yêu cầu:
- Sử dụng internal css
- Tiêu đề dùng thẻ h2
- In nghiêng toàn bộ bài thơ (thẻ em), màu chữ green
- Chữ "hoa" màu chữ hotpink, in đậm
Kết quả:
Hoa hồng Bungari – Tế Hanh
Hoa Hồng Bungari
Ôi! Loài hoa diệu kì!
Hoa ở đâu chẳng biết
Theo người hay gió bay
Từ thế kỷ mười bảy
Hoa về mọc nơi đây.
Giữa bốn bề núi dựng
Một thung lũng hoa hồng
Mỗi năm một lần nở
Trời đất bắt đầu xuân.
...
Bài 3: (external css)
Thiết kế trang web trình nội bài thơ "Bài thơ Cô giáo lớp em" với các yêu
cầu:
Định dạng ban đầu:
- Tiêu đề dùng thẻ h2
- In nghiêng toàn bộ bài thơ (thẻ em, đoạn 1,2 chung class, đoạn 3 định dạng giống đoạn 1)
- Chữ "cô" màu in đậm (thẻ strong)
- Thẻ p bao nội dung "Tác giả: Nguyễn Xuân Sanh"
- Thẻ span bao nội dung "Nguyễn Xuân Sanh"
Định dạng css:
Thẻ em:
font-variant: small-caps;
font-size: 20px;
word-spacing: 2px;
letter-spacing: 1px;
line-height: 25px;
Thẻ h2:
color: white;
text-shadow: 0 0 5px red;
Thẻ body:
text-align: center; /* căn giữa */
Thẻ em.doan1:
color: red;
Thẻ em.doan2
color: blue;
Thẻ strong:
color: green;
Thẻ span:
color: brown;
font-style: italic;
font-weight: bold;
Kết quả:
Bài thơ Cô giáo lớp em
Sáng nào em đến lớp
Cũng thấy cô đến rồi
Đáp lời “Chào cô ạ!”
Cô mỉm cười thật tươi
Cô dạy em tập viết
Gió đưa thoảng hương nhài
Nắng ghé vào cửa lớp
Xem chúng em học bài
Những lời cô giáo giảng
Ấm trang vở thơm tho
Yêu thương em ngắm mãi
Những điểm mười cô cho.
Tác giả: Nguyễn Xuân Sanh
THỰC HIỆN
Bài 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tìm hiểu CSS | CSS Inline </title>
</head>
<body>
<h2>Tre Việt Nam</h2>
<em style="color: red;">
<strong style="color: blue;">Tre</strong> xanh, <br>
Xanh tự bao giờ? <br>
Chuyện ngày xưa... đã có bờ <strong style="color: blue;">tre</strong> xanh. <br> <br>
Thân gầy guộc, lá mong manh, <br>
Mà sao nên luỹ nên thành <strong style="color: blue;">tre</strong> ơi? <br>
Ở đâu <strong style="color: blue;">tre</strong> cũng xanh tươi, <br>
Cho dù đất sỏi đất vôi bạc màu. <br>
... <br>
</em>
</body>
</html>Bài 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tìm hiểu CSS | CSS Internal </title>
<style>
.kieu2{
color: green;
}
strong{
color: hotpink;
}
</style>
</head>
<body>
<h2>Hoa hồng Bungari – Tế Hanh</h2>
<em class="kieu2">
<strong>Hoa</strong> Hồng Bungari <br>
Ôi! Loài <strong>hoa</strong> diệu kì! <br> <br>
<strong>Hoa</strong> ở đâu chẳng biết <br>
Theo người hay gió bay <br>
Từ thế kỷ mười bảy <br>
<strong>Hoa</strong> về mọc nơi đây. <br> <br>
Giữa bốn bề núi dựng <br>
Một thung lũng <strong>hoa</strong> hồng <br>
Mỗi năm một lần nở <br>
Trời đất bắt đầu xuân. <br>
... <br>
</em>
</body>
</html>Bài 3:
- css
- html
em{
font-variant: small-caps; /* Chuyển đổi kiểu chữ (thường thành hoa). */
font-size: 20px; /* font-size với cỡ chữ chỉ rõ theo đơn vị px, em, rem ... */
word-spacing: 2px; /* Tăng hoặc giảm khoảng cách giữa các từ trong đoạn văn bản */
letter-spacing: 1px; /* Tăng hoặc giảm khoảng cách giữa các ký tự. */
line-height: 25px; /* Tăng hoặc giảm khoảng cách giữa các dòng, đơn vị có thể là px, em, %, ... */
}
h2{
color: white;
text-shadow: 0 0 5px red;
/*
1. vị trí của bóng theo chiều ngang,
2. vị trí của bóng theo chiều dọc
3. Xác định khoảng cách độ nhòe của bóng
4. màu của bóng
*/
}
body{
text-align: center; /* căn giữa */
}
em.doan1{
color: red;
}
em.doan2{
color: blue;
}
strong{
color: green;
}
span{
color: brown;
font-style: italic; /* in nghiêng */
font-weight: bold; /* in đậm */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tìm hiểu CSS | CSS external </title>
<link rel="stylesheet" href="css/bai4.3.css">
</head>
<body>
<h2>Bài thơ Cô giáo lớp em</h2>
<em class="doan1">
Sáng nào em đến lớp <br>
Cũng thấy <strong>cô</strong> đến rồi <br>
Đáp lời “Chào <strong>cô</strong> ạ!” <br>
<strong>Cô</strong> mỉm cười thật tươi <br> <br>
</em>
<em class="doan2">
<strong>Cô</strong> dạy em tập viết <br>
Gió đưa thoảng hương nhài <br>
Nắng ghé vào cửa lớp <br>
Xem chúng em học bài <br> <br>
</em>
<em class="doan1">
Những lời <strong>cô</strong> giáo giảng <br>
Ấm trang vở thơm tho <br>
Yêu thương em ngắm mãi <br>
Những điểm mười <strong>cô</strong> cho. <br><br>
</em>
<p>Tác giả: <span>Nguyễn Xuân Sanh</span> </p>
</body>
</html> Xong!
No comments:
Post a Comment