CSS svojstva teksta

CSS blok elementi


<h2>
    Naslov h2 je 150% veći od teksta odlomka.
</h2>
<p>
    Pozdrav svima koliko vas god ima.
</p> 

body {
  background-color: lime;
}
p {
  background-color: #FF0;
}

CSS oblikovanje fonta

  • font-family
  • font-size
  • font-style
  • font-weight

font-family


font-family: Tahoma, Arial, sans-serif;
Vrijednost svojstva font-family mora biti font instaliran na korisničkom računalu ili generički font.
Dopušteno je navesti popis fontova, odvojenih zarezom.
Vrijednosti font-family: naziv fonta | generički naziv
a) Naziv fonta su određeni fontovi, kao Arial, Verdana itd.
b) Generički nazivi su: serif | sans-serif | cursive | fantasy | monospace

CSS zadana veličina fonta


body {
  font-size: 100%;
  background-color: #FF0;
}

p {
  font-size: 16px;
  background-color: lime;
}

h2 {
  font-size: 150%;
}

CSS proporcionalne veličine


body {
  font-size: 62.5%;
  background-color: lime;
}

p {
  font-size: 16px;
  background-color: #FF0;
}

h2 {
  font-size: 24px;
}

CSS zadano i proporcionalno





CSS font-style

  • normal
  • italic
  • oblique

CSS font-weight

  • 100
  • 200
  • ...
  • 800
  • 900
  • normal
  • lighter
  • bold
  • bolder

CSS naslijeđivanje


<body>
  <ul>
    <li>
      Stavka popisa izvan i <span class="boja"> unutar </span> span elementa.
        <p> 
          Odlomak izvan i <span class="boja"> unutar </span> span elementa.
        </p> 
    </li>
  </ul>
</body>

CSS naslijeđivanje font


body {
	font-weight: bold;
}
li {
	font-style: italic;
}
p {
	font-weight: lighter;
}
.boja {
	font-weight: normal;
}

CSS oblikovanja teksta


  • text-indent
  • text-align
  • text-decoration
  • letter-spacing
  • text-transform
  • word-spacing
  • line-height

Uvlačenje teksta

<h2>Bez uvlake</h2> <h2 class="prvi">Uvučen 2em</h2> <h2 class="drugi">Uvučen 30px</h2> <h2 class="treci">Negativno -2em</h2> <h2 class="cetvrti">Uvučen 20%</h2>

text-indent


h2 {
    font-size: 150%;    
}
.prvi {
    text-indent: 2em;
}
.drugi {
    text-indent: 30px;
}
.treci {
    text-indent: -2em;
}
.cetvrti {
    text-indent: 20%;
}

Poravnanje teksta

<h2 class="prvi">Lijevo poravnato. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</h2> <h2 class="drugi">Desno poravnato. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</h2> <h2 class="treci">Središnje poravnato. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</h2> <h2 class="cetvrti">Obostrano poravnato. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>

text-align


.prvi {
    text-align: left;
}
.drugi {
    text-align: right;
}
.treci {
    text-align: center;
}
.cetvrti {
    text-align: justify;
}

Crta i tekst

<h2 class="prvi">Crta iznad</h2> <h2 class="drugi">Crta preko</h2> <h2 class="treci">Crta ispod</h2> <h2 class="cetvrti">Bez crte</h2>

text-decoration


.prvi {
    text-decoration: overline;
}
.drugi {
    text-decoration: line-through;
}
.treci {
    text-decoration: underline;
}
.cetvrti {
    text-decoration: none;
}

letter-spacing


  <h2>Razmak među slovima 5px.</h2>

h2 {
    letter-spacing: 5px;
}

Velika i mala slova

<h2 class="prvi">Prvo slovo u riječi veliko.</h2> <h2 class="drugi">Sva slova u rečenici velika.</h2> <h2 class="treci">Sva slova u rečenici mala.</h2> <h2 class="cetvrti">Slova ostaju nepromijenjena.</h2>

text-transform


.prvi {
    text-transform: capitalize;
}
.drugi {
    text-transform: uppercase;
}
.treci {
    text-transform: lowercase;
}
.cetvrti {
    text-transform: none;
}

word-spacing


  <h2>Razmak među riječima 8px.</h2>

h2 {
    word-spacing: 8px;
}

Visina retka

<h2>Normalna visina retka.</h2> <h2>Normalna visina retka.</h2> <h2 class="prvi">Visina retka 300%.</h2> <h2>Normalna visina retka.</h2> <h2>Normalna visina retka.</h2> <h2 class="drugi">Visina retka 25px.</h2> <h2>Normalna visina retka.</h2> <h2>Normalna visina retka.</h2>

line-height


.prvi {
    line-height: 300%;
}
.drugi {
    line-height: 25px;
}

Zadatak 1



Zadatak 2





Hvala na pozornosti!


Pitanja?