Jūs varat formatēt rindkārtas vai tabulu šūnu saturu, pielāgojot to ar sekojošajām īpašībām. Šīs īpašības var piemērot arī visiem citiem elementiem, kuriem ir norādīta vai aprēķināta augstums vai platums.
Pirmās rindas atkāpums
Sākas ar īpašību text-indent. Ar to tiek noteikta pirmā rindkopa teksta atkāpe. Arī "atkāpe" pa kreisi ir iespējama, izmantojot negatīvu text-indent vērtību. (Detalizēta informācija par to, kad ekstrēma atkāpe var būt noderīga, sekos pēc tam). Jānorāda skaitliska vērtība.
Piemērs:
.absatz { text-indent: 2em; }
Pārlūkā tas izskatās šādi:
Izmantojot negatīvu vērtību, pirmajās plūstošā teksta rindās notiks teksta atkāpe.
.absatz {
text-indent: -2em;
}
Un šeit protams skats uz rezultātu pārlūkā:
Taču, ja vēlaties, lai teksts joprojām būtu pieejams meklētājprogrammām, saskarsieties ar dilemmas situāciju. Tādu dilemmu var atrisināt, izmantojot text-indent. Jo šī īpašība ļauj jums, kā zināms, pārvietot tekstus. Tāpēc jūs varat pazaudēt tekstu no apmeklētāju redzes lauka.
Plūsmas varianta text-indent priekšrocība: Teksts, kas jāaizstāj ar grafiku, paliek nepārprotami teksta avotā.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Šī sintakse piešķir fona grafiku h1 elementam. (Šajā sērijā background īpašība jau ir iepazīstinta). Ar text-indent: -99999px tekst no virsraksta tiek novietots 99999 pikseļus pa kreisi. Tādējādi teksts vairs nav redzams. Tagad faktiski parādās tikai attēls.
Noteikt rindu augstumu
font-size).Rindu augstumu var norādīt, izmantojot īpašību
line-height. Atļauti skaitliski norādījumi. Procentuālie vērtības ir arī iespējami. Tie attiecas uz elementa burtu izmēru, kuram norādīts rindas augstums. Pirms rindas augstuma definēšanas ņemiet vērā šādu lietu: var gadīties, ka pārlūks/ierīce piešķir rindas augstuma norādījumam priekšroku pār citām īpašībām un parāda elementus grieztos, ja tie ir augstāki. Tas var būt ļoti nepatīkami, it īpaši attiecībā uz grafikām. Tāpēc pārbaudiet rezultātus, pirms publicējat vietni tiešsaistē.Šis piemērs demonstrē, kā izmantot
line-height.
<p style="line-height:1.4em; font-size:1em;">Dažreiz jūs izveidojat lielisku izkārtojumu, bet vēl trūkst fotogrāfijas, un ja izmantojat tikai tukšas ailes, izkārtojums izskatās diezgan pliki. Tomēr tas var būt labāk:<br /> Šajā video apmācībā es jums parādīšu labākās tīmekļa adreses, lai ātri iegūtu bezmaksas piemērotas attēla ailes. Geniāla saraksta varat atrast, piemēram, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">šeit</a>.</p> <p style="line-height:2em;font-size:1em;">Dažreiz jūs izveidojat lielisku izkārtojumu, bet vēl trūkst fotogrāfijas, un ja izmantojat tikai tukšas ailes, izkārtojums izskatās diezgan pliki. Tomēr tas var būt labāk:<br /> Šajā video apmācībā es jums parādīšu labākās tīmekļa adreses, lai ātri iegūtu bezmaksas piemērotas attēla ailes. Geniāla saraksta varat atrast, piemēram, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">šeit</a>.</p> <p style="line-height:1em; font-size:1em;">Dažreiz jūs izveidojat lielisku izkārtojumu, bet vēl trūkst fotogrāfijas, un ja izmantojat tikai tukšas ailes, izkārtojums izskatās diezgan pliki. Tomēr tas var būt labāk:<br /> Šajā video apmācībā es jums parādīšu labākās tīmekļa adreses, lai ātri iegūtu bezmaksas piemērotas attēla ailes. Geniāla saraksta varat atrast, piemēram, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">šeit</a>.</p>
Še ir noteikti trīs teksta bloki, kuriem ir piešķirtas atšķirīgas rindu augstumi.
Kā jūs redzat, rindu augstums var ļoti būtiski ietekmēt teksta lasāmību. Tāpēc uzmanīgi iztērējiet line-height.
Beigās, protams, rodas jautājums, kādu rindu augstumu parasti vajadzētu izvēlēties. Parasti tiek ņemti rindu augstumi starp 130 un 150 procentiem.
p {
line-height: 150%;
}
Visbeidzot, labā teksta lasāmība tomēr ir atkarīga galvenokārt no fonta platības. Šeit noteikums ir šāds: rindu augstumam jābūt lielākam, jo garākas ir tekstarindas. Tāpēc noteikti pārbaudiet lapu, lai nodrošinātu, ka lasāmība tiešām ir saglabāta.
Horizontāla teksta līdzināšana
Izmantojot text-align īpašību, tiek noteikta teksta rindiņu un citu bloka elementos iekļauto tekstu virziens. text-align varat iestatīt sekojošos vērtības:
• left – pa kreisi līdzināts
• right – pa labi līdzināts
• center – centrēts
• justify – tiesāts gar malām
Atkal piemērs:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>
Un tā izskatās rezultāts pārlūkprogrammā:
Ņemiet vērā, ka text-align attiecas ne tikai uz tekstiem. Šī īpašība attiecas patiešām uz visiem inline elementiem. Tātad, ja ir iekļauts attēls, tad arī šim elementam būs jāievēro text-align.
Vēl viens padoms: text-align pēc oficiālā CSS specifikācijas nevajadzētu ietekmēt bloka elementus. (Neraugoties uz to, ka ir pārlūki, kuri to piemēro arī bloka elementiem). Ja vēlaties līdzināt bloka elementus, šajos gadījumos izmantojiet jau iepriekš minētās margin īpašības.
