Cheat Sheet: Nola testu CSS koskatzeko

Web baliabide erabiltzaileek baloratzen bere ikusmen-errekurtsoa da. Beraz, nahiz eta erabilgarria testu Informazio ezin da irakurri, izan ere, hori da gaizki diseinatuta dago. Ondorioa - arretaz eta adi ez bakarrik orrien eduki semantikoa, baina, halaber, bere aurkezpen bisuala beharra. CSS teknologia etorrerak erakargarriak artikulu bat sortzeko aukera handitu. koska CSS testua - ezaugarriak, xedea idatzitako pertzepzioa errazteko bat.

Marjina eta betegarria: zer diferentzia da?

testua formateatzeko Hasi aurretik, zer marjinak eta betegarria ulertu behar duzu. Izan ere, markaketa kasu batzuetan elementu horiek itxura bera erabiltzaileari arren, badira haien arteko oinarrizko desberdintasunak:

• : Marjina - eremu padding jabetza, koska ezartzen
• eremu dagoen edukia eta bloke muga, espazio bat artean hutsune bat zehazten - ondoko bloke mugak artean;
• eremu tamainaren elementu bat (zabalera eta altuera), eta ez jo daiteke.

marjina jabetza

Beraz, horizontal edo bertikala padding CSS testu ezartzeko, diseinu marjina erabili. Jabetza hori etiketan

dokumentu paragrafoan maisu aplikatzen. kasu errazena, gisa da idatzi daiteke:

marjina: 12px.

Lerro honek esan nahi du, testu (edo beste edozein bloke) alde guztietatik bloke baten inguruan dago koska jarritako 12 pixel. tartea handitzeko, adibidez, hiru aldiz nahikoa idatzi da:

marjina: 36px.

Baina zer tartea blokeak arteko alde bakoitzean desberdina izan behar du? Web garatzaileei erregistroen hainbat forma erabiltzen dituzte:

1. marjina: 11px 22px.
2. marjina: 11px 22px 33px.
3. marjina: 11px 22px 33px 44px.

Lehenengo adibidean, koska 11 pixel beheko eta goiko bloke mugak egindako, blokea aldeetan - 22 pixel. goiko ertza eta edukia arteko errekorra bigarren unitate baten arabera 11 pixel izango da, behe arteko - 33 alde bakoitzean pixel - 22 pixel. Hirugarren kasuan CSS koska testuan goitik 11 pixel, eskuinaldean 22 pixel, 33 pixel eta beheko ezkerreko eta 44 pixel balioa izango du.

marjina-top, margin-bottom: Eskuragarri baita alde bakarretik bloke muga distantzia grabatzeko gaitasuna da , marjina-ezker, marjina-eskuin. Errusiako hizkuntzan propietate izenak itzultzea, erraza, beren hitzordua buruz asmatzen da. Adibidez, honako sarrera adieraziko eskuinaldetik koska hori berdina izango da 22 pixel honetara:

marjina-eskuin: 22rh.

Gainerako gain hartu bloke alboetan inguruan distantzia For guraso elementu balioa berdina izan behar du.

Marjina jabetza hori sustatzailearen denean CSS testua koska bertikalean erabiltzen ari gogoratu beharra ezaugarriak ditu. ondoko elementuen tarteak ez dira laburbildu, eta elkar gainean jarriko da. Adibidez, demagun unitate bat margin-bottom bat du: 15px, eta aldameneko blokea marjina-top azpitik: 35px. Eskola aritmetika eta sen ezartzen haien arteko tartea guztira diren 50 pixel izango da. Praktikan, ez da. jabetza marjina «enara" bere bizilaguna balioa handi batekin bloke bat. Ondorioz, elementuen arteko tartea 35 pixel da.

"Red" line

dokumentua egitea testu editore batean, erabiltzaileek nahiago du "gorri" lerro batekin paragrafo berri bakoitza eskatzeko. erabilera testu-koska diseinua - CSS testua koska erabiliz ezkerrean erraza egin behar da. Idatzia honela:

Testu-koska: 11px.

Hau da paragrafoa lehen lerroan desplazatzen da ezker 11 pixel marjina erlatiboa. web orriko testuaren begiratu editorean dokumentu bat bezala gehiago egiteko, justifikazio gehigarri bat instalatu behar duzu, hau da, idatzi:

Testu-koska: 11px;

Testu-lerrokatzea: justifikatzeko.

pixel gain, beste marka-unitateak erabiltzea deskribapena - hazbeteko ehuneko erreklamazioak. Demagun unitatea CSS testua% 10eko koska bat du. Noiz 500 pixel bloke zabalera, marra gorria 50 pixel (500% 10) izango da.

Jabetza honetarako ikusgai egon daiteke balio oinordetzan. Erregistro hau dio unitatea antzeko guraso unitatea Jabetza bat erabiltzen duen.

Testu-koska: oinordetzan.

Harrigarria bada ere, koska balioak negatiboak hartu ahal! Kasu honetan, proiekzioak deiturikoak arabera eratzen dira, hau da, oinarrizko testuaren tokian jarraitzen du, eta lehen lerroan dago ezkerrera desplazatzen 22 pixel arabera:

Testu-koska: -22px.

Letrak ez dira ezker nabigatzaileak muga gaindituz, testu-koska erabili behar eremuaren egitura definitzeko gain:

padding-left: 22px.

lagungarria aholku

CSS oinarrizko propietate hauek testuaren formatuaren jotzen dira. Eta zuzendu horiek laguntza praktika. Hona hemen ikasi web garapenean materiala nola aplikatu final bat aholku batzuk:

• marra gorria eta testuaren koska - kontzeptu ezberdinak, eta euren orientazio erabilitako propietate desberdinak;
• koska bertikala arauak ez aplikatzeko matematika - tarteak bata bestearen gainean, orduan eta balio handiagoa elementu "irabazi";
• koska negatiboa irudi bat paragrafo baten lehen lerroa adierazteko erabiltzen da.