Izmantojot teksta ievilkuma īpašumu un blakus esošos brāļu atlasītājus
Labs tīmekļa dizains bieži vien ir par labu tipogrāfiju. Tā kā tik daudz tīmekļa lapas saturs tiek attēlots kā teksts, spēja šo tekstu padarīt gan pievilcīgu, gan efektīvu ir svarīga prasme ieņemt kā tīmekļa dizaineru. Diemžēl mums nav tāda paša līmeņa tipogrāfijas kontroles tiešsaistē, ko veicam drukā. Tas nozīmē, ka mēs ne vienmēr varam uzticami veidot tekstu tīmekļa vietnē tādā pašā veidā, kā mēs varētu to darīt drukātā veidā.
Viens kopīgs rindkopas stils, kuru jūs bieži redzat drukā (un ko mēs varam izveidot tiešsaistē) ir tas, kur šī punkta pirmajā rindiņā ir ievietota viena cilnes vieta . Tas ļauj lasītājiem redzēt, kur sākas viens punkts, bet otrs beidzas.
Jūs neredzat šo vizuālo stilu tik daudz tīmekļa lapās, jo pārlūkprogrammas pēc noklusējuma parāda punktus ar atstarpi zem tām, lai parādītu, kur viens beidzas, bet vēl sākas, bet, ja vēlaties veidot lapu, Paragrāfu iedvesmojošā atkāpes stila varat to izdarīt ar teksta ievilkuma stila īpašumu.
Šī īpašuma sintakse ir vienkārša. Šeit ir redzams, kā jūs pievienotu teksta ievilkumu visiem dokumenta punktiem.
p {teksta ievilkums: 2em; }Ievilkumu pielāgošana
Viens no veidiem, kā jūs varat precīzi norādīt punktus ievilkšanai, jūs varat pievienot klasi punktiem, kuriem vēlaties ievilkta, bet tam ir nepieciešams rediģēt katru rindkopu, lai to pievienotu. Tas ir neefektīvs un neatbilst labākajām HTML kodēšanas metodēm.
Tā vietā jums vajadzētu apsvērt, kad ievilkties punktus. Jūs ievietojat punktus, kas tieši attiecas uz citu punktu. Lai to izdarītu, varat izmantot blakus esošo dzimšanas valodu atlasītāju. Izmantojot šo selektoru, jūs izvēlaties katru rindkopu, kuram tieši priekšā ir cits punkts.
p + p {teksta ievilkums: 2em; }Tā kā jūs atdarina pirmo rindu, jums arī jāpārliecinās, ka starp punktiem starp punktiem nav papildu atstarpes (kas ir noklusējuma pārlūks). Stilistiski, jums vajadzētu būt atstarpes starp rindkopām vai ievilkumu pirmajā rindiņā, bet ne abos.
p (margin-bottom: 0; polsterējums-apakšā: 0; } p + p (margin-top: 0; polsterējums: 0; }Negatīva atkāpe
Varat arī izmantot teksta ievilkuma īpašumu kopā ar negatīvu vērtību, lai sāktu rindas virzīšanu uz kreiso pusi, nevis tāpat kā parasto ievilkumu. Jūs to varat izdarīt, ja rinda sākas ar pēdiņām, lai citā rakstzīme parādās nelielā malā, kas atrodas kreisajā rindkopā, un burti paši joprojām veido labu kreiso izlīdzinājumu.
Piemēram, teiksim, ka jums ir punkts, kas ir blokkūda pēctecis, un vēlaties, lai tas būtu negatīvi nošķelts. Jūs varētu uzrakstīt šo CSS:
blockquote p {text-indent: -5em; }Tas dotu rindkopas sākumu, kas, iespējams, ietver sākuma cenas simbolu, lai nedaudz virzītu pa kreisi, lai izveidotu piekārtotās pieturzīmes.
Attiecībā uz marginiem un polsterējumu
Bieži vien web dizains, jūs izmantojat margin vai padding vērtības, lai pārvietotu elementus un izveidotu atstarpi. Tomēr šīs īpašības nedarbosies, lai sasniegtu ievilkuma punkta efektu. Ja jūs piemēroat kādu no šīm rindkopas vērtībām, viss šī rindkopas teksts, ieskaitot katru rindiņu, tiks izvietots nevis tikai pirmajā rindiņā.