CSS-opas, CSS - Teksti

Teksti

Tekstin asemointiin www-sivulla tai elementin sisään (esim div) ja CSS-muotoilujen määritteet ja asetukset:
(taulukossa linkkejä esimerkkeihin)

Määrite Tarkoitus Asetukset
color TEKSTIN VÄRI Esimerkiksi
värin nimi
RGB-arvo
heksaluku
direction Tekstin esittämissuunta ltr - vasemmalta oikealle
rtl -oikealta vasemmalle
initial
inherit
letter-spacing KIRJAINTEN VÄLI normal
väli pikseleinä
initial
inherit
line-height TEKSTIRIVIEN VÄLI luku esim 0.7 - 1.9 väliltä
text-align TEKSTIN TASAUS , miten teksti sijoituu vaakasuunassa esim vasemmalle, keskelle tai oikealle left - vasemmalle
right - oikealle
center -keskelle
justify - tasaa molemmat reunat
initial
inhert
text-decoration TEKSTIN VIIVAUS , esimerkkinä alleviivaus none - muotoilematon teksti
underline -alleviivaus
overline - yliviivaus
line-trought - yläpuolelle viiva
initial
inhert
text-indent TEKSTIN ALOITUSKOHDAN SISENTÄMINEN , liitetään div-elementin avulla Asetetaan esimerkiksi
px - pikseinä
em - suhdelukuna
X% - prosenttilukuna
initial
inherit
text-shadow TEKSTIN VARJO Yleisesti varjon mitat X- ja Y- suuntaan sekä varjon väri.
Muut asetukset esitellään määrityksen kohdalla oppaassa.
text-transform TEKSTIN KIRJAIMET , sanojen muuttaminen suurilla tai pienillä kirjaimilla esitettäväksi tai sanojen ensimmäiset kirjaimet suurella kirjaimella. none
capitalize - Sanojen Ensimmäinen kirjain Isolla
uppercase - SANOJEN KIRJAIMET SUURELLA
lowercase - sanojen kirjaimet pienellä
initial
inherit
unicode-bidi Tekstin esittäminen oikealta vasemmalle. normal
embed
bidi-override
initial
inherit
(tutki tarvittaessa vaihto-ehtojen vaikutusta)
vertical-align Tekstin sekaan sijoitetun elementin pystysuuntainen sijoittuminen suhteessa tekstiin. Katso täältä baseline tai middle - tekstin keskiviivan kanssa samassa linjassa
sub tai text-bottom - tekstin keskilinjan alapuolelle
super tai tex-top - tekstin keskiviivan yläpuolelle
initial
inherit
white-space TEKSTIN RIVITTÄMINEN , rivinvaihto-asetuksia. normal - ei asetusta
nowrap - ei rivinvaihtoja
pre rivinvaihto jos se on kirjoitetussa tekstissä
pre-line - tyhjä rivi jos se on kirjoitettu tekstiin
pre-wrap - kokeile !!!
initial
inherit
word-spacing TEKSTIN SANOJEN VÄLI. normal - ei asetusta
20px - asetus pikseleinä (tai cm)
initial
inherit


TEKSTIN VÄRIN ASETTAMINEN

Esimerkkejä tekstin värin asettamisesta.

Tekstin väri nimellä, heksalukuna, RGB-lukuna ja HSL-arvona


  TEKSTIN VÄRI - CSS:

  .vari1 {
    color: RED;
  }
  #vari2 {
    color: #FF6347;
  }
  #vari3 {
    color: RGB(0,34,220);
  }
  #vari4 {
    color: HSL(89, 43%, 51%);
  }
 
  TEKSTIN VÄRI - HTML:

     <h3 class="vari1"> TEKSTIN VÄRI </h3> 
     <div id="vari2"> Väri heksalukuna </div>
	 <div id="vari3"> Väri RGB-arvolla </div>
	 <div id="vari4"> Väri HSL-arvolla </div>

Tulos www-sivulla:

TEKSTIN VÄRI

Väri heksalukuna
Väri RGB-arvolla
Väri HSL-arvolla


Haluttaessa asettaa www-sivulla olevalle tekstille väri, eli kaikissa body-elementin teksteissä käytettävä väri:


   Heksalukuna:
   body {color: #92a8d1;}
   
   RGB-arvolla:
   body {color: rgb(201, 76, 76);}
   
   RGBA-arvolla (taustan väri kuultaa läpi):
   body {color: rgba(201, 76, 76, 0.6);}
   
   HSL-arvolla:
   body {color: hsl(89, 43%, 51%);}
   
   HSLA-arvolla (taustan väri kuultaa läpi):
   body {color: hsla(89, 43%, 51%, 0.6);}

Esimerkissä laatikolle (box-model) on astettu taustaväri ja h1-otsikolle RGBA-asetuksella läpikuultava väri:

   
CSS-ohje:

   .Otsikko{
     color:RGBA(134,2,52,0.6);
   }

   HTML-koodaukseen liittäminen:

   <h1 class="Otsikko">CSS-ohje:</h1>


KIRJAINTEN VÄLI

Kirjainten väliä sanassa voidaan suurentaa tai pienentää:


  CSS-ohjeet:
  
  .suurempi {
    letter-spacing: 5px;
  }
  .pienempi {
    letter-spacing: -2px;
  }
 
  HTML-elementtiin liittäminen:
  
   <h3 class="suurempi"> SUUREMPI </h3>
   <h3> NORMAALI </h3>
   <h3 class="pienempi"> PIENEMPI </h3>

Tulos www-sivulla:

SUUREMPI

NORMAALI

PIENEMPI



TEKSTIRIVIEN VÄLI

Tekstirivien väliä voidaan suurentaa tai pienentää:


  CSS-ohjeet:
  
  p.alle_1 {
    line-height: 0.7;
  }

  p.yli_1 {
   line-height: 1.8;
  }
 
  HTML-elementtiin liittäminen:
  
  <p class="alle_1">
    Pieni tekstirivien väli.<br>
    Pieni tekstirivien väli.<br>
  </p>

   <p>
    Normaali tekstirivien väli.<br>
    Normaali tekstirivien väli.<br>
   </p>

   <p class="yli_1">
    Suuri tekstirivien väli.<br>
    Suuri tekstirivien väli.<br>
   </p>

Tulos www.sivulla:

Pieni tekstirivien väli.
Pieni tekstirivien väli.

Normaali tekstirivien väli.
Normaali tekstirivien väli.

Suuri tekstirivien väli.
Suuri tekstirivien väli.



TEKSTIN SIJAINTI - TASAUS

Teksti voidaan sijoittaa vasempaan reunaan, keskelle tai oikeaan reunaan:


  CSS-ohjeet:
  
  .keski_puna {
    text-align: center;
    color: red;
  }
  .vasen_sininen {
    text-align: left;
    color:blue;
  }
  .oikea_vihrea {
    text-align: right;
    color: green;
  }
 
  HTML-elementteihin liittäminen:
  
  <h2 class="keski_puna">Esimerkki otsikko keskellä</h2>
  <h2 class="vasen_sininen">Otsikko vasemmalla</h2>
  <h2 class="oikea_vihrea">Otsikko oikealla</h2>

Tulos www-sivulla:




TEKSTIN KOROSTUS VIIVALLA

Esimerkissä otsikkoihin liitetään alleviivaus kolmella tavalla:


  CSS-ohjeet:
  
  .alleviiva1 {
    text-decoration: underline;
    color: red;
  }
  #alleviiva2 {
    text-decoration: underline;
    color:blue;
  }

 
  HTML-elementteihin liittäminen:
  
  <h3 class="alleviiva1"> Alleviiva class-määritteellä </h3>
  <h3 id="alleviiva2"> Alleviiva id-määritteellä </h3>
  <h3 style="text-decoration:underline"> Alleviiva style-määritteellä </h3>

Tulos www-sivulla

Alleviiva class-määritteellä

Alleviiva id-määritteellä

Alleviiva style-määritteellä


ALOITUSKOHDAN SISENTÄMINEN

Tekstin aloituskohtaa voidaan sisentää sitä seuraavaa tekstiä enemmän:

( HUOM ! 1em = 16px joten 1.5em = 24px ) 


  CSS-ohjeet:
  
  .sisennys1 {
    text-indent: 50px;
    color: MediumSeaGreen;
  }
  #sisennys2 {
    text-indent: 2em;
    color:blue;
  }

 
  HTML-elementteihin liittäminen:
  
  <p class="sisennys1"> 
    Seitsemän veljestä on Aleksis Kiven kirjoittama romaani, 
    jota pidetään yhtenä suomalaisen kirjallisuuden suurimmista merkkiteoksista.
	Seitsemän veljestä ilmestyi keväällä 1870 Suomalaisen Kirjallisuuden Seuran 
	Novellikirjasto-sarjassa neljän vihon painoksena. 
	Romaanijulkaisu ilmestyi vasta vuonna 1873.
	(lähde: wikipedia)
  </p>
  
  <p id="sisennys2">
    Aleksis Kivi, oikealta nimeltään Alexis Stenvall, syntyi Nurmijärvellä 10.10.1834. 
	Luku- ja kirjoitustaidon alkeet hän sai kotoaan ja pitäjän kiertokoulumestarilta.
  </p>	
  <p id="sisennys2">	
	Muutettuaan Helsinkiin Kivi opiskeli pääosin itsenäisesti ja valmistui ylioppilaaksi vuonna 1857. 
	Kaksi vuotta myöhemmin Kivi kirjoittautui yliopistoon, jossa hän kuunteli luentoja lähinnä suomen 
	kielestä ja kirjallisuudesta suorittamatta kuitenkaan tenttejä. Tästä huolimatta hän luki 
	ahkerasti maailmankirjallisuuden klassikoita kuten esimerkiksi Cervantesia, Holbergia ja Shakespearea.
	(lähde: Jyväskylän yliopisto)
  </p>

Tulos www-sivulla

Seitsemän veljestä on Aleksis Kiven kirjoittama romaani, jota pidetään yhtenä suomalaisen kirjallisuuden suurimmista merkkiteoksista. Seitsemän veljestä ilmestyi keväällä 1870 Suomalaisen Kirjallisuuden Seuran Novellikirjasto-sarjassa neljän vihon painoksena. Romaanijulkaisu ilmestyi vasta vuonna 1873. (lähde: wikipedia)

Aleksis Kivi, oikealta nimeltään Alexis Stenvall, syntyi Nurmijärvellä 10.10.1834. Luku- ja kirjoitustaidon alkeet hän sai kotoaan ja pitäjän kiertokoulumestarilta.

Muutettuaan Helsinkiin Kivi opiskeli pääosin itsenäisesti ja valmistui ylioppilaaksi vuonna 1857. Kaksi vuotta myöhemmin Kivi kirjoittautui yliopistoon, jossa hän kuunteli luentoja lähinnä suomen kielestä ja kirjallisuudesta suorittamatta kuitenkaan tenttejä. Tästä huolimatta hän luki ahkerasti maailmankirjallisuuden klassikoita kuten esimerkiksi Cervantesia, Holbergia ja Shakespearea. (lähde: Jyväskylän yliopisto)




TEKSTIN VARJO

Tekstin varjoa käytetään tehosteena:


  CSS-ohjeet:
  
  .otsikko_varjo {
    text-shadow: 3px 2px Violet;
    color: SlateBlue;
  }
  .otsikko_varjo1 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
  }
  .otsikko_varjo2 {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  }
 
  HTML-elementteihin liittäminen:
  
  <h2 class="otsikko_varjo"> OTSIKOLLA varjo </h2>
  <h2 class="otsikko_varjo1"> OTSIKOLLA varjo </h2>
  <h2 class="otsikko_varjo2"> OTSIKOLLA varjo </h2>

Tulos www-sivulla:

OTSIKOLLA varjo

OTSIKOLLA varjo

OTSIKOLLA varjo


TEKSTIN KIRJAIMET

Tekstin kirjaimet voidaan muotoilu-asetuksella näyttää isoilla tai pienillä kirjaimilla:


  CSS-ohjeet:
  
  .isot {
    text-transform: uppercase;
    color: SlateBlue;
  }
  .pienet {
    text-transform: lowercase;
    color: Crimson;
  }
  #ekat_isot {
    text-transform: capitalize;
    color: SlateBlue;
  }

 
  HTML-elementteihin liittäminen:
  
  <h2 class="isot"> koodissa pienillä kirjaimilla </h2>
  <h2 class="pienet"> KOODISSA ISOILLA KIRJAIMILLA </h2>
  <p id="ekat_isot"> KOODISSA pienillä ja isoilla KIRJAIMILLA </p>

Tulos www-sivulla:

koodissa pienillä kirjaimilla

KOODISSA ISOILLA KIRJAIMILLA

KOODISSA pienillä ja isoilla KIRJAIMILLA


TEKSTIN RIVITTÄMINEN

Teksti voidaan asettaa vaihtamaan riviä esimerkiksi seuraavasti:


  CSS-ohjeet:
  
  p.ei_rivivaihtoa {
    white-space: nowrap;
	color: #9500ff;
  }
  p.normaali {
    white-space: normal;
	color: #7700cc;
  }
  p.koodauksen_mukaan {
    white-space: pre;
	color: #590099;	
  }

 
  HTML-elementteihin liittäminen:
  
  <h3>white-space: nowrap:</h3>
  <p class="ei_rivivaihtoa">
  Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.
  Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.
  Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.
  Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.
  </p>

  <h3>white-space: normal:</h3>
  <p class="normaali">
  Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.
  Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.
  Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.
  Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.
  </p>

  <h3>white-space: pre:</h3>
  <p class="koodauksen_mukaan">
  Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.
  Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.
  Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.
  Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.
  </p>

Tulos www-sivulla, kokeile vaikutusta pienentämällä "selaimen" kokoa:

white-space: nowrap:

Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.

white-space: normal:

Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.

white-space: pre:

Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä. Tässä testiin tekstiä.

TEKSTIN SANOJEN VÄLI

Tekstin sanojen väliin vaikkuttavia asetuksia:


  CSS-ohjeet:
  
  p.vakio { 
    word-spacing: normal;
    color: #590099;
  }
  p.pikselit { 
    word-spacing: 20px;
    color: #590099;
  }
  p.em_asetus { 
    word-spacing: 0.5em;
    color: #590099;
  }

 
  HTML-elementteihin liittäminen:
  
  <h3>word-spacing: normal:</h3>
  <p class="vakio">Tässä testiin tekstiä. Tässä testiin tekstiä.</p>

  <h3>word-spacing: 20px:</h3>
  <p class="pikselit">Tässä testiin tekstiä. Tässä testiin tekstiä.</p>

  <h3>word-spacing: 0.5em:</h3>
  <p class="em_asetus">Tässä testiin tekstiä. Tässä testiin tekstiä.</p>

Tulos www-sivulla:

word-spacing: normal:

Tässä testiin tekstiä. Tässä testiin tekstiä.

word-spacing: 20px:

Tässä testiin tekstiä. Tässä testiin tekstiä.

word-spacing: 0.5em:

Tässä testiin tekstiä. Tässä testiin tekstiä.

-- KESKEN TÄSSÄ--

Design and edit © player