SGK Tin học 12 Cánh diều Bài 10. Bộ chọn lớp, bộ chọn định danh có đáp án

Trong mộttrang web có 5 đoạnvănbản, emcóbiếtkhaibáo CSS nhưthếnàođểtrìnhbàyđoạnvănbảnđầutiêncuốicùngchữmàuđỏ, còncácđoạnvănbảncònlạimàuxanhdương? 

Em cóbiếtcáchkhaibáođịnhdạng CSS đểchỉápdụngchomộtphầntửcụthểtrêntrang web không? 

Khai báobộchọnlớp, bộchọnđịnhdanh, giátrịthuộctính class chophầntử body, id đểhoànthiện website cánhânđãcó ở cácbàihọctrước. 

Gợi ý thựchiện. 

– Mởtệp “style.css”: Khai báobộchọnlớpcótênbgđểthiếtlậpmàunền (vídụ: lighigrey). Khai báobộchọnđịnhdanhcótên submit đểtrìnhbàymàucủanút 

lệnh (vídụ: blue). 

- Bổ sung khaibáogiátrịthuộctính class chophầntử body củacáctệp “hobbies.html” và “album.html” là bg. 

- Bổ sung khaibáogiátrịthuộctính id chonútlệnh submit trongtệp "index.html" là submit. 

Em hãymởtệp “index.html” đểxem website cánhânvàtựđánhgiácóhàilòngvớithànhquảcủabảnthânkhông. 

Cho khaibáođịnhdạng CSS sau: 

a.xanh {color: blue; }. 

Trong cáckhaibáo HTML sau, khaibáonàosẽápdụngđịnhdạng CSS trên?  

A. <p class= "xanh">Học CSS</p> 

B.<pid= “xanh”>Học CSS</p> 

C. <a href="https://www.w3schools.com" id="xanh">Học CSS</a>  

D. <a href="https://www.w3schools.com" class="xanh">Học CSS </a> 

Côgiáoyêucầukhaibáovàápdụng CSS dễđịnhdạngvănbản HTML cónội dung như ở Hình 6a dểcókếtquảhiểnthịtrêntrìnhduyệt web như ở Hình 6b. Sau khitìmhiểu, cácbạnhọcsinhđãđưaracácgiảiphápsauđây. Em hãychobiếtmỗiphátbiểusaulàđúng hay sai: 

a) Khai báoCSS sửdụngbộchọnphầntửchophầntử h1 vìnội dung vănbản HTML chỉgồmcácphầntửtiêuđềmục h1. 

b) Thựchiệncácbướcsau: 

Bước 1. Khai báo CSS sửdụngbộchọnlớpđểđịnhdạngmàuchữkhácvớimàumặcđịnh. 

<style> 

tieudel {color: red;} 

tieude2 {color: blue;} 

</style> 

Bước 2. Khai báothuộctính class= “tieudel” chocáctiêuđềmụcchữcómàuđỏ, khaibáothuộctính class= “tieude2” chocáctiêuđềmụcchữcómàuxanh. 

c) Thựchiệncácbướcsau: 

Bước 1. Khai báo CSS sửdụngbộchọnđịnhdanhđểđịnhdạngtiêuđềmụcchữcómàuxanh, cáctiêuđềkhácsửdụngbộchọnphầntử h1. 

<style> 

#tieudel {color: blue;} 

hl {color: red;} 

</style> 

Bước 2. Khai báothuộctính class = “tieudel” chotiêuđềmụcchữcómàuxanh. 

d) Thựchiệncácbướcsau: 

Bước 1. Kếthợpkhaibáo CSS sửdụngbộchọnlớp, bộchọnđịnhdanh: 

<style> 

tieudel {color: red;} 

#tieude2 {color: blue;} 

</style> 

Bước 2. Khai báothuộctính class=“tieudel” chocáctiêuđềmụcchữmàuđỏ, khaibáothuộctính id= “tieude2” chocáctiêuđềmụcchữcómàuxanh.