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 ir CSS pradedantiesiems (30 dalis): Gražus tekstas naudojantis CSS (2)

Visi pamokos vaizdo įrašai

Raštų spalvą galima nurodyti naudojant color. Nurodyti tikėtina spalvos reikšmę.

p { 
   color: red; 
}

Kaip reikšmė, galite nurodyti spalvų pavadinimus arba šešioliktainį spalvų kodą.

Nurodyti rašymo kryptį

Naudojant savybę direction, galima priversti elementus rašyti tam tikra kryptimi. Įdomu atvirkštinė rašymo kryptis taikant tam tikras kalbas, kuriose rašoma iš dešinės į kairę.

Taip pat galima nustatyti, iš kurios pusės bus apkarpyti didelio dydžio turinys su trūkumu.

• ltr – iš kairės į dešinę

• rtl – iš dešinės į kairę

Štai kaip galima naudoti šią savybę.

.normal {direction:ltr;} 
.rueckwaerts {direction:rtl;}



Čia apibrėžti du klasės.

<p class="normal">Tekstas, kuris rašomas iš kairės į dešinę. 1 2 3 4 5 6 7 8 9 0</p> 
<p class="rueckwaerts">Tekstas, kuris rašomas iš dešinės į kairę. 1 2 3 4 5 6 7 8 9 0</p>

Rezultatas naršyklėje atrodo taip:

HTML ir CSS pradedantiesiems (30 dalis): Gražus tekstas naudojant CSS (2)

Horizontalus tekstų išlyginimas

Naudojant savybę text-align, nustatoma horizontali teksto eilutės ir kitų išlygintų teksto arba įtrauktų į blokų elementus elemento išlyginimo kryptis. Numatytoji nustatymo reikšmė, be abejo, yra kairysis išlyginimas.

• left – kairysis išlyginimas

• right – dešinysis išlyginimas

• center – centruotas

• justify – išdėstyti kaip blokas

Pavyzdys:

<p style="text-align:right;">
    Sveiki atvykę
</p>



Rezultatas atrodo taip:

HTML & CSS pradedantiesiems (dalis 30): Gražus tekstas naudojant CSS (2)

Vertikalus išlyginimas

Naudodamiesi savybe vertical-align, galite nustatyti vertikalų teksto išlyginimą eilutėje atsižvelgiant į eilutės aukštį. Nurodymas visada taikomas į tėvinį elementą, kuris turi būti inline elementas. Be to, tekstą galima išlyginti lentelese.

Prieinami šie variantai:

• sub – žemesnio lygio

• super – aukštesnio lygio

• baseline – išlyginama pagal pagrindo liniją

• top – išlyginimas pagal tėvinio elemento viršų

• bottom – išlyginamas pagal tėvinio elemento apačią

• middle – išlyginama tarp viršutinio ir apatinio tėvinio elemento krašto

• text-top – viršutinis teksto kraštas

• text-bottom – apatinis teksto kraštas

• Ilgio nurodymas – teigiamas arba neigiamas reikšmė poslinkio elementą virš arba žemyn pagrindo linijos.

• Procentų nurodymas – teigiamas arba neigiamas reikšmė poslinkio elementą virš arba žemyn pagrindo linijos.

Pavyzdys:

.baseline { 
   vertical-align: baseline; 
}



Atkreipkite dėmesį, kad vietos nuostatos dėl vertical-align skirtinguose naršyklėse labai nelygios. Būtinai patikrinkite rezultatus prieš publikuodami svetaines.

Nustatyti teksto dekoraciją

text-decoration naudojama priskirti tekstams ar hiperlinkams papildomas savybes.

• none – jokio teksto dekoravimo

• underline – pabrauktas

• overline – viršutinis pabraukimas

• line-through – perbraukimas

• blink – mirksintis

Pavyzdys:

a:link { 
   text-decoration: none; 
}



Dėl to puslapio hiperlinkai nebeturi apbrėžimo linijos.

HTML ir CSS pradedantiesiems (dalis 30): Gražus tekstas naudojant CSS (2)

<span style="word-spacing:0.5em">Sveiki atvykę į PSD-Tutorials.de!</span><br />
<span style="word-spacing:1em"> Sveiki atvykę į PSD-Tutorials.de!</span>



Tikimasi skaitinės reikšmės. Procentinės reikšmės nėra galimos.

Panašus į word-spacing yra letter-spacing. Tačiau, naudojamu letter-spacing nustatomas atstumas tarp atskirų teksto raidžių. Taip pat vartojami skaitiniai dydžiai, tačiau ne procentų nurodymai.

<span style="letter-spacing:0.1em">Pavyzdinis tekstas su raidžių atstumu 0.1em</span><br> 
<span style="letter-spacing:0.3em">Pavyzdinis tekstas su raidžių atstumu 0.3em</span><br>



Naudodami savybę text-transform galite nustatyti, ar tekstas bus didžiosiomis ar mažosiomis raidėmis. Ir tai nepriklausomai nuo tikrosios žymėjimo šaltinyje. Be to, galima priversti naudoti tik didžiųjų raidžių forma.

• lowercase – mažosios raidės

• uppercase – didžiosios raidės

• capitalize – pradinių žodžių didžiosios raidės

• none – jokios teksto transformacijos

Pavyzdys:

.mažas { 
   text-transform: lowercase; 
}

Naršyklėje rezultatas atrodo taip:

HTML ir CSS pradedantiesiems (30 dalis): Gražus tekstas naudojant CSS (2)

Tarpo ir ženklų perkėlimas į naują eilutę

Naudodami savybę white-space nustatote, kaip naršyklėje turėtų būti vaizduojami tarpo ir eilučių perkėlimai iš šaltinio kodo.

• normal – automatiškai įterpiamas eilutės pabaigos simbolis. Be to, kelios tarpai bus sujungti į vieną.

• pre – eilučių perkėlimai bus rodomi taip, kaip yra šaltiniame kode.

• nowrap – automatinio eilutės perkėlimo nevyksta.

• pre-line – kelios tarpai bus sujungti į vieną. Be to, jei ekranas neatitiks reikalingo dydžio, įvyks eilutės perkėlimas.

• pre-wrap – jei ekranas neatitiks reikalingo dydžio, įvyks eilutės perkėlimas.

Štai pavyzdys:

<pre class="brush:xml;"><!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
   font-family:"Courier New", Courier, monospace;
   font-size: 200%;
}
body p {
   color:#0066FF;
}
</style>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<div>
  <p>Absatz 4</p>
</div>
</body>
</html></pre>

Naršyklėje tai atrodo taip:

HTML ir CSS pradedantiesiems (30 dalis): Gražus tekstas naudojant CSS (2)

Šešėlio savybės pritaikymas

Naudodami savybę text-shadow galite priversti tekstą turėti šešėlį. Turėkite omeny, kad ši savybė yra palaikoma tik naujausiose naršyklėse. Naršyklės, kurios negali interpretuoti text-shadow, rodo tekstą be šešėlio.

text-shadow naudojamas taip:

text-shadow: hV vV blur #xxxxxx;



O štai ką reiškia šie parametrai:

• hV – Horizontalus poslinkis

• vV – Vertikalus poslinkis

• blur – Neryškumas

• #xxxxxx – Šešėlio spalva

Šiame pavyzdyje pateikiamas tipiškas panaudojimas text-shadow.

.šešėlis {
   color: #444;
   font-size: 34px;
   text-shadow: 2px 2px 3px #333;
}



Sukurtas klasės apibrėžimas vėliau taikomas pirmo lygio antraštėje.

<h1 class="šešėlis">PSD-Tutorials.de</h1>

O ir štai rezultatas:

HTML ir CSS pradedantiesiems (dalis 30): Gražus tekstas naudojant CSS (2)



Kaip jau minėta, galite naudoti text-shadow nesijaudindami, kad naršyklės neinterpretuos. Tuomet tekstas bus tiesiog rodomas be šešėlio.
Į ankstesnį teksto vadovėlį HTML & CSS pradedantiesiems (dalis 29): Gražus tekstas naudojant CSS (1)
HTML ir CSS pradedantiesiems (31 dalis): Spalvos ir fono paveiksliukai Prie sekantis teksto vadovas