Aukštos kokybės šablonai, lengvai pritaikomi Atsisiųskite turinį nedelsiant Daugiau nei 10 000 patikrintų atsiliepimų Kokybė gaminta Vokietijoje
Išbandykite dabar
HTML & CSS pradedantiesiems.

HTML & CSS pradedantiesiems (dalis 33): Valdyti teksto srautą

Visi pamokos vaizdo įrašai

Galite nustatyti atkarpas arba lentelės langelių turinį, naudodamiesi šiomis savybėmis savo poreikiams. Šias savybes taip pat galima pritaikyti visiems kitiems elementams, kuriems galima priskirti apibrėžtą ar apskaičiuotą aukštį ar plotį.


Pirmosios eilutės atitraukimas

Pradėkime su savybe text-indent. Čia nustatoma, kaip pirmoji paragrafo eilutė turėtų būti atitraukta. Taip pat galimas "ištiestumas" į kairę. Tam reikia naudoti neigiamą text-indent reikšmę. (Išsamesnė informacija apie tai, kada ekstremalus "ištiestumas" gali būti naudingas, pateikta toliau). Tikimasi skaitinio įvertinimo.

Pavyzdys:

.atkarpa { text-indent: 2em; }



Naršyklėje tai atrodo taip:

HTML ir CSS pradedantiesiems (Dalis 33): Valdyti teksto srautą.



Naudodami neigiamą vertę, pirmoje teksto eilutėje bus atliktas teksto "ištaisymas".

.atkarpa {
   text-indent: -2em;
}



Taip pat žvilgtelėkite į rezultatus naršyklėje:

HTML ir CSS pradedantiesiems (dalis 33): Valdyti teksto srautą



Tai taip pat įmanoma. Norėdami nustatyti ištiestumus, atkreipkite dėmesį, kad turinys būtų skaitomas, jei taip norima. Iš tikrųjų, text-indent gali tapti įdomus dėl paieškos sistemos optimizavimo. Todėl kartais pageidaujama rodyti vaizdus vietoj teksto.

Bet jei teksto vis tiek norite, kad jis būtų matomas paieškos sistemoms, iškilsta tam tikras dilema. Įsprukti į dilemą galima naudojant text-indent. Ši savybė jums leidžia, kaip žinome, perkelti tekstus. Taigi, galite priversti tekstus išnykti iš lankytojų lauko.

text-indent varianto privalumas: Tekstas, kurį norite pakeisti grafiku, išlieka nepakeistas šaltiniame kode.

<h1>PSD-Tutorials.de</h1>
...
h1 {
   background: url(logo.png) 0 0 no-repeat;
   text-indent: -99999px;
   height:200px;
}



Šiuo sintaksės pavyzdžiu h1-elementui priskiriama fonografinė grafika. (Šiame serijos pristatyme buvo aptarta background savybė). Nustatyta text-indent: -99999px tekstą virš vekselio 99999 pikselių kairėn. Taigi, tekstas nebematomas. Taigi, dabar rodomas tik vaizdas.

HTML ir CSS pradedantiesiems (Dalis 33): Valdyti teksto srautą



Išjungus stilų lentelę, tekstas vėl normaliai matomas.

Nustatyti eilutės aukštį

font savybės kontekste. Šiame etape šiek tiek išsamesnis šio temos aptarimas. Įdomu eilutės aukščio nustatymas, susietas su šrifto dydžiu (font-size).

Eilutės aukštį nustatyti galima per savybę line-height. Leidžiami skaitiniai rodikliai. Taip pat galimi procentiniai matavimai. Šie rodikliai remiasi elemento šrifto dydžiu, kuriam nurodytas eilutės aukštis. Prieš nustatydami eilutės aukštį, atkreipkite dėmesį į tai, kad naršyklė/irenginys gali pirmenybę teikti aukščio rodikliui prieš kitas savybes ir taip gali atvaizduoti apkarptus elementus, jei jie yra aukštesni. Tai gali būti gėda, ypač jei tai susiję su grafikomis. Pabandykite rezultatus prieš patalpinant svetainę internete.

Šis pavyzdys parodo, kaip naudoti line-height. 
<p style="line-height:1.4em; font-size:1em;">Kartais sukūrėte puikų maketą, bet trūksta nuotraukų, o jei naudojate tuščius rėmus, maketas vis tiek atrodo gana nuogas. Tai galima padaryti geriau:<br />
Šiame vaizdo mokymesi parodysiu jums geriausias tinklalapių adresais, kad greitai gautumėte nemokamas tinkamas paveikslėlių rezervacines vietas. Genialų sąrašą rasite pvz. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">čia</a>.</p>

<p style="line-height:2em;font-size:1em;">Kartais sukūrėte puikų maketą, bet trūksta nuotraukų, o jei naudojate tuščius rėmus, maketas vis tiek atrodo gana nuogas. Tai galima padaryti geriau:<br />
Šiame vaizdo mokymesi parodysiu jums geriausias tinklalapių adresais, kad greitai gautumėte nemokamas tinkamas paveikslėlių rezervacines vietas. Genialų sąrašą rasite pvz. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">čia</a>.</p>

<p style="line-height:1em; font-size:1em;">Kartais sukūrėte puikų maketą, bet trūksta nuotraukų, o jei naudojate tuščius rėmus, maketas vis tiek atrodo gana nuogas. Tai galima padaryti geriau:<br />
Šiame vaizdo mokymesi parodysiu jums geriausias tinklalapių adresais, kad greitai gautumėte nemokamas tinkamas paveikslėlių rezervacines vietas. Genialų sąrašą rasite pvz. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">čia</a>.</p>

Čia buvo nustatyti trys teksto blokai, kuriems buvo priskirtos skirtingos eilučių aukščiai.



Kaip matote, eilučių aukštis labai stipriai veikia teksto skaitytumą. Taigi būkite atsargūs su line-height.

Taigi, galiausiai kilo klausimas, koks iš tikrųjų turėtų būti pasirinktas eilučių aukštis. Paprastai, eilučių aukštis svyruoja tarp 130 ir 150 proc.

p {
  line-height: 150%;
}



Tačiau geras tekstą skaitytumas priklauso, visų pirma, nuo šrifto spacijos. Čia tinka taisyklė: kuo ilgesnės yra teksto eilutės, tuo didesnė turėtų būti eilučių aukštis. Todėl būtinai patikrinkite puslapį, kad skaitymas išliktų tinkamas.

Horizontalaus teksto išlyginimas

Per text-align savybę nustatoma teksto blokų, ir kitų blokiruose esančių teksto blokų arba eilučių elementų, horizontali išlyginimas. Galima nustatyti šiuos text-align reikšmes:

• left - kairysis išlyginimas

• right - dešinysis išlyginimas

• center - centruotas

• justify - išdėstyti kaip blokai

Taip pat pateikiame pavyzdį:

 <! 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>

Ir taip rezultatas atrodo naršyklėje:

HTML ir CSS pradedantiesiems (Dalis 33): Valdyti teksto srautą.



Atkreipkite dėmesį, kad text-align neturi taikytis tik į tekstinius turinius. Šio savininko taikoma savybė iš tiesų tinka visiems eilutės elementams. Taigi, jei įtraukiamas vaizdas, taikoma text-align apibrėžtis taip pat šiam elementui.

Dar vienas pastabas: text-align - bent jau pagal oficialią CSS specifikaciją - neturėtų turėti įtakos blokuose. ELEMENTS (nors yra tam tikrų naršyklių, kurie taip pat tai taiko blokiniams elementams). Jei norite išlyginti blokinius elementus, šiais atvejais naudokite jau pristatytas margin savybes.
Į ankstesnį teksto vadovėlį HTML & CSS pradedantiesiems (Dalis 32): Išoriniai atstumai ir išoriniai kraštai
HTML & CSS pradedantiesiems (34 dalis): Rėmelis Prie sekantis teksto vadovas