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
