Jinsi Ya Kutengeneza Vizuizi Katika CSS

Orodha ya maudhui:

Jinsi Ya Kutengeneza Vizuizi Katika CSS
Jinsi Ya Kutengeneza Vizuizi Katika CSS

Video: Jinsi Ya Kutengeneza Vizuizi Katika CSS

Video: Jinsi Ya Kutengeneza Vizuizi Katika CSS
Video: Jinsi ya Kutengeneza Tovuti (Website) S01 2024, Mei
Anonim

CSS ni karatasi ya mtindo wa kuachia, ambayo ni lugha ya kuelezea kuonekana kwa kurasa za wavuti. Moja ya faida kuu ya CSS ni uwezo wa kubadilisha mpangilio wa meza na mpangilio wa block.

Jinsi ya kutengeneza vizuizi katika CSS
Jinsi ya kutengeneza vizuizi katika CSS

Ni muhimu

Kihariri cha msimbo wa HTML

Maagizo

Hatua ya 1

Unda kizuizi cha kwanza. Katika fomu ya HTML, itaonekana kama lebo ya div na id 'block01'. Hapa, kitambulisho cha block01 kinaonyesha kuwa katika maelezo ya CSS, mali zote za block hii zimeainishwa kwa kiteua # block01.

Hatua ya 2

Eleza kizuizi katika CSS. Katika mitindo ya CSS, taja jina la kitambulisho (# block01) na kwa brashi zilizopindika eleza vigezo vyake - upana, nafasi, kukabiliana, rangi ya asili, nk. Kwa mfano, inaweza kuonekana kama hii: # block01 {width: 150px; urefu: 150px; msimamo: kabisa; juu: 0px; kushoto: 0px; rangi ya asili: pinki}. Maelezo haya yanafikiria kuwa sanduku litakuwa na saizi 150 kwa muda mrefu na saizi 150 kwa upana, litasimamishwa vyema kwenye kona ya juu kushoto ya waraka huo, na asili yake itakuwa na rangi ya waridi.

Hatua ya 3

Patia kizuizi nafasi ya jamaa. Ikiwa hutumii kabisa, lakini nafasi ya jamaa katika maelezo ya CSS, basi unaweza kuweka vizuizi sio kwa kupiga ngumu kwenye gridi ya kuratibu, lakini ukilinganisha na vizuizi vingine vilivyopo. Ili kufanya hivyo, badilisha msimamo wa msimbo: kabisa; juu: 0px; kushoto: 0px kwa msimamo: jamaa; juu: 200px; kushoto: 100px.

Hatua ya 4

Toa kizuizi kizuizi. Katika CSS, taarifa ya mpaka wa eneo inawajibika kwa hii. Ongeza nambari ifuatayo kwenye laha yako ya mitindo: mpaka wa radius: 8px. Kizuizi sasa kitakuwa na pembe zenye mviringo. Ikiwa unataka tu kuzunguka pembe kadhaa, eleza eneo tofauti kwa kila mmoja wao: mpaka-radius: 8px 8px 0px 0px.

Hatua ya 5

Kutoa kuzuia kiharusi. Kuangazia muhtasari wa kizuizi na laini nyembamba, ongeza nambari ifuatayo kwa maelezo yake ya CSS: mpaka-juu: 1px imeangaza nyeusi. Maagizo haya inamaanisha kuwa mpaka wa block itakuwa nyeusi na itakuwa pixel moja kwa unene. Katika kesi hii, laini ya mtaro yenyewe itaonyeshwa kama laini iliyokatizwa (iliyokatwa - laini iliyotawaliwa, dotted - dots, solid - laini laini).

Hatua ya 6

Weka mali iliyobaki ya kuzuia. Bainisha katika maelezo ya CSS ni aina gani ya maandishi inayopaswa kutumiwa kwa maandishi ndani ya kizuizi, ukubwa wa fonti inapaswa kuwa nini, mpangilio na ujazo kutoka kwa kingo za block. Mali hizi zinaelezewa katika ufafanuzi font-familia, saizi ya fonti, upangaji wa maandishi, na padding.

Hatua ya 7

Unaweza kutumia mali ya kuelea ili kubadilisha mtiririko wa block moja juu ya nyingine. Ikiwa utaiweka "kushoto", basi vitu vingine vitatiririka karibu na kizuizi upande wa kushoto, na "kulia" - kulia. Ikiwa utaweka thamani ya kuelea kama "hakuna", mpangilio wa vizuizi hautawekwa. Mali iliyo wazi katika CSS inazuia kizuizi kutoka kwa kulia, kushoto, au pande zote mbili, na inapita maelezo ya kuelea.

Ilipendekeza: