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:
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:
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.
<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:
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:
Š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:
Kaip jau minėta, galite naudoti text-shadow nesijaudindami, kad naršyklės neinterpretuos. Tuomet tekstas bus tiesiog rodomas be šešėlio.
