Labi web dizains bieži ir par labu tipogrāfiju. Tā kā tik liela daļa tīmekļa lapas satura tiek parādīta kā teksts, spēja stilizēt šo tekstu gan pievilcīgi, gan efektīvi ir svarīga prasme, kas piemīt kā tīmekļa dizainerim. Diemžēl tiešsaistē mums nav tāda paša līmeņa tipogrāfiskās kontroles kā drukātā veidā. Tas nozīmē, ka mēs ne vienmēr varam tīmekļa vietnē tekstu droši veidot tādā pašā veidā, kā to varētu izdarīt iespiestā veidā.
Viens bieži sastopams rindkopu stils, kuru jūs bieži redzat drukātā veidā (un kuru mēs varam atjaunot tiešsaistē), ir šī rindkopas pirmā rindiņa cilnes vieta. Tas ļauj lasītājiem redzēt, kur sākas viena rindkopa un beidzas otra.
Šis vizuālais stils Web lapās nav tik daudz redzams, jo pārlūkprogrammās pēc noklusējuma tiek parādītas rindkopas ar atstarpi zem tiem kā veids, kā parādīt, kur beidzas viens un otrs, bet, ja vēlaties veidot lapu, lai tā būtu iedvesmots ievilkuma stils par rindkopām to var izdarīt ar teksta ievilkums stila īpašums.
Šī rekvizīta sintakse ir vienkārša. Lūk, kā jūs pievienotu teksta ievilkumu visām dokumenta rindkopām.
p {
teksta ievilkums: 2em;
}
Ievilkumu pielāgošana
Vienā veidā jūs varat precīzi norādīt atkāpes rindkopas, jūs varat pievienot klasi tām rindkopām, kuras vēlaties atkāpties, taču tas prasa rediģēt katru rindkopu, lai tai pievienotu klasi. Tas ir neefektīvi un nenotiek HTML kodēšana labākā pieredze.
Tā vietā jums vajadzētu apsvērt, kad atkāpjat rindkopas. Jūs ievilkat rindkopas, kas tieši seko citai rindkopai. Lai to izdarītu, varat izmantot blakus esošo brāļu un māsu selektoru. Izmantojot šo atlasītāju, jūs atlasāt katru rindkopu, kuras priekšā tieši ir cita rindkopa.
p + p {
teksta ievilkums: 2em;
}
Tā kā jūs ievilkat pirmo rindu, jums arī jāpārliecinās, ka jūsu rindkopās nav papildu atstarpes (kas ir pārlūka noklusējums). Stilistiski vajadzētu būt atstarpei starp rindkopām vai pirmās rindas atkāpe, bet ne abas.
p {
margin-bottom: 0;
polsterējums-dibens: 0;
}
p + p {
margin-top: 0;
polsterējums: 0;
}
Negatīvie ievilkumi
Varat arī izmantot teksta ievilkums īpašība kopā ar negatīvu vērtību, lai līnijas sākums virzītos pa kreisi, nevis pa labi, kā parasts ievilkums. To var izdarīt, ja rindiņa sākas ar pēdiņu tā, ka pēdiņā parādās pēdiņas raksturs neliela mala pa kreisi no rindkopas, un paši burti joprojām veido jauku kreiso pusi izlīdzināšana.
Piemēram, sakiet, ka jums ir rindkopa, kas ir bloka pēdiņas pēctecis, un vēlaties, lai tā tiktu negatīvi ievilkta. Jūs varētu uzrakstīt šo CSS:
blokķēde p {
teksta ievilkums: -.5em;
}
Tādējādi rindkopas sākums, kas, domājams, ietver sākuma pēdiņas rakstzīmi, būtu nedaudz pārvietots pa kreisi, lai izveidotu karājas pieturzīmes.
Attiecībā uz Margins and Padding
Bieži vien tīmekļa dizainā jūs izmantojat piemales vai pildījuma vērtības lai pārvietotu elementus un izveidotu atstarpi. Šīs īpašības tomēr nedarbosies, lai sasniegtu ievilkto rindkopu efektu. Ja rindkopai lietojat kādu no šīm vērtībām, viss šīs rindkopas teksts, ieskaitot visas rindas, tiks atstarpēts, nevis tikai pirmā rindiņa.