LAB 3: GIỚI THIỆU CSS

--------------------

BÀI 1 ( ĐIỂM)
Thiết kế trang web trình bày bài thơ SAO như sau

Nhận xét:

 Nội dung bài thơ được in nghiêng, có 3 đoạn với 3 màu khác nhau (red,
green, blue)
 Chữ sao được nhấn mạnh in đậm và màu brown

Hướng dẫn:

 Xây dựng cấu trúc mã cho bài thơ như sau

TRANG 1
 <h2>Tiêu đề</h2>
<em>
Đoạn 1
</em>
<em>
Đoạn 2
</em>
<em>
Đoạn 3
</em>

 Trong phần nội dung

o Ngắt dòng với <br>
o In đậm với chữ sao bằng <strong>
 Tạo sao1.html, sử dụng định dạng CSS bằng inline style
o Thêm thuộc tính style=”color:?” vào các <em> của các đoạn
o Thêm style=”color:?” vào các <strong>
 Chép sao1.html thành sao2.html, sử dụng embed style và định nghĩa các
selector sau
o strong{color:?}
o em.doan1{color:?}, em.doan2{color:?}, em.doan3{color:?}
o Thêm các thuộc tính class=”doani” vào các <em> của các đoạn
 Chéo sao2.html thành sao3.html, sử dụng external style
o Tách CSS thành file sao.css
o Sử dụng thẻ <link> để liên kết css vào sao3.html

BÀI 2 ( ĐIỂM)
Hãy tạo một trang chứa một bài thơ khác có nội dung như sau

TRANG 2
ANH HỨA MÃI MÃI CHỈ YÊU EM

Em chẳng còn Con gái nữa đâu anh

Chữ trinh nguyên chẳng kịp dành anh nữa
Người đến trước trao em bao thề hứa
Cướp mất rồi, em khờ dại còn tin.

Em chẳng còn là đứa Con gái vẹn nguyên

Vẫn vui tươi, mộng mơ nhưng bình yên đã mất
Em sợ – Sợ một ngày sự thật
Chẳng giữ nổi anh, anh sẽ hận, sẽ cười.
Anh hứa mãi mãi chỉ yêu em

TRANG 3
 Em chẳng còn tự tin lúc bên người
Cái gia giáo, cái chữ trinh đè thân em trĩu nặng
Rồi một ngày biết em không còn trong trắng
Như anh vẫn chờ, anh có hết yêu em ?

Em vẫn cầu, vẫn nguyện ước bao đêm

Vẫn sợ lo anh sẽ xa em mãi
Bởi Con gái khi yêu luôn khờ dại
Anh có yêu nhiều để giữ chặt vòng tay?
Sử dụng sao.css đã định nghĩa để định dạng cho bài thơ như sau

 Nội dung các đoạn nghiêng

 Chữ anh và chữ em trong bài thơ được định dạng như chữ sao của bài 1
 Màu của các đoạn: 1,2,3 như 3 đoạn của bài sao riêng đoạn 4 giống đoạn 1
của bài 1

BÀI 3 ( ĐIỂM)
Định dạng bài thơ sao như hình sau

Định dạng bổ sung bài thơ sao trong bài tập 1 của lab3 theo hướng dẫn sau
TRANG 4
  Định nghĩa css cho em{}
o font-variant:small-caps;
o font-size:20px;
o word-spacing:2px;
o letter-spacing:1px;
o line-height:25px;
 Định nghĩa css cho h2{}
o color:white;
o text-shadow:0 0 5px red;
 Định nghĩa css cho body{}
o Text-align:center

BÀI 4 ( ĐIỂM)
Tạo trang web có menu liên kết như hình sau

Yêu cầu:

 Liên kết thường: màu blue, chữ hoa nhỏ, không gạch chân
 Liên kết đã nhấp vào: màu green
 Liên kết ở trạng thái có chuột: màu đỏ, có gạch chân

Hướng dẫn:

 Tạo danh sách liên kết

<div class="menu">
TRANG 5
 <a href="#">Trang chủ</a> |
...
</div>
 Định dạng liên kết
o .menu>a{}
 Font-variant:small-caps;
 Color:blue;
 Text-decoration:none;
o .menu>a:visited{}
 Color:green;
o .menu>a:hover{}
 Color:red;
 Text-decoration:underline;

TRANG 6