Ang CSS ay isang sheet style na cascading, na isang wika para sa paglalarawan ng hitsura ng mga web page. Ang isa sa mga pangunahing bentahe ng CSS ay ang kakayahang palitan ang layout ng talahanayan na may block layout.
Kailangan iyon
HTML code editor
Panuto
Hakbang 1
Lumikha ng unang bloke. Sa form na HTML, magiging hitsura ito ng isang div tag na may id na 'block01'. Dito, ipinapahiwatig ng tagakilala ng block01 na sa paglalarawan ng CSS, ang lahat ng mga pag-aari ng bloke na ito ay tinukoy para sa tagapili ng # block01.
Hakbang 2
Ilarawan ang bloke sa CSS. Sa mga istilong CSS, tukuyin ang pangalan ng identifier (# block01) at sa mga kulot na brace ay ilarawan ang mga parameter nito - lapad, pagpoposisyon, offset, kulay ng background, atbp. Halimbawa, maaaring ganito ang hitsura: # block01 {width: 150px; taas: 150px; posisyon: ganap; itaas: 0px; kaliwa: 0px; background-color: pink}. Ipinapalagay ng paglalarawan na ang kahon ay magiging 150 pixel ang haba at 150 mga pixel ang lapad, ito ay mahigpit na nakaposisyon sa kaliwang sulok sa itaas ng dokumento, at ang background nito ay magiging kulay rosas.
Hakbang 3
Bigyan ang bloke ng isang kamag-anak na pagpoposisyon. Kung hindi ka gagamitin ng ganap, ngunit kamag-anak na pagpoposisyon sa paglalarawan ng CSS, pagkatapos ay maaari kang maglagay ng mga bloke hindi sa isang matibay na pag-snap sa isang grid ng mga coordinate, ngunit may kaugnayan sa iba pang mayroon nang mga bloke. Upang magawa ito, baguhin ang posisyon ng code: absolute; itaas: 0px; kaliwa: 0px ayon sa posisyon: kamag-anak; itaas: 200px; kaliwa: 100px.
Hakbang 4
Bigyan ang bloke ng isang pag-ikot. Sa CSS, responsable dito ang pahayag ng border-radius. Idagdag ang sumusunod na code sa iyong styleheet: border-radius: 8px. Ang bloke ay magkakaroon na ng mga bilugan na sulok. Kung nais mo lamang na bilugan ang ilang mga sulok, ilarawan nang hiwalay ang radius para sa bawat isa sa kanila: border-radius: 8px 8px 0px 0px.
Hakbang 5
Bigyan ang bloke ng isang stroke. Upang mai-highlight ang balangkas ng isang bloke na may isang manipis na linya, idagdag ang sumusunod na code sa paglalarawan ng CSS nito: border-top: 1px black dash. Nangangahulugan ang tagubiling ito na ang hangganan ng bloke ay magiging itim at magiging isang pixel sa kapal. Sa kasong ito, ang linya ng tabas mismo ay ipapakita bilang isang linya na may gitling (dashing - isang tuldok na linya, tuldok - tuldok, solid - isang solidong linya).
Hakbang 6
Itakda ang natitirang mga pag-aari ng block. Tukuyin sa paglalarawan ng CSS kung anong typeface ang dapat gamitin para sa teksto sa loob ng bloke, kung ano ang dapat na laki ng font, pagkakahanay at indentation mula sa mga gilid ng bloke. Ang mga katangiang ito ay inilarawan sa mga kahulugan ng font-pamilya, laki ng font, text-align, at padding.
Hakbang 7
Maaari mong gamitin ang float property upang ipasadya ang daloy ng isang bloke sa isa pa. Kung itinakda mo ito sa "kaliwa", pagkatapos ay ang natitirang mga elemento ay dadaloy sa paligid ng bloke sa kaliwa, at "kanan" - sa kanan. Kung itinakda mo ang halaga ng float bilang "wala", hindi maitatakda ang pagkakahanay ng block. Pinipigilan ng malinaw na pag-aari sa CSS ang pag-block mula sa dumadaloy sa kanan, kaliwa, o sa magkabilang panig, at pinalampasan ang float statement.
