LAB 3: GIỚI THIỆU CSS

LAB 3: GIỚI THIỆU CSS

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

MỤC TIÊU:
Kết thúc bài thực hành này bạn có khả năng

 Biết cách sử dụng Inline, embed và external style

 Biết cách định nghĩa và sử dụng các selector cơ bản: HTML, class và id

BÀI 1 (4 Đ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

WEB1013 – XÂY DỰNG TRANG WEB TRANG 1

 LAB 3: GIỚI THIỆU CSS
<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 (3 ĐIỂM)
Hãy tạo một trang chứa một bài thơ khác có nội dung như sau
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

WEB1013 – XÂY DỰNG TRANG WEB TRANG 2

 LAB 3: GIỚI THIỆU CSS
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 (3 ĐIỂM) – GV CHO THÊM

WEB1013 – XÂY DỰNG TRANG WEB TRANG 3