CSS Besedilo

V HTML-dokumentu lahko oblikujemo besedilo z uporabo različnih CSS lastnosti. Naučili se bomo poravnave besedila, slogovnih sprememb, preoblikovanja, razmikov in senčenja. Vsak blokovni HTML-element privzeto zavzame celotno razpoložljivo širino (razteza se levo in desno); če pa nastavimo širino in višino, preprečimo, da bi se element raztegnil do robov.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>CSS Besedila</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 30px;
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        .container {
            max-width: 100%;
            margin: 0 auto;
        }
        .primer {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
            color: #333333;
            -webkit-text-fill-color: #333333;
        }
        .opis {
            font-style: italic;
            color: #666;
            margin-bottom: 10px;
        }
        
        /* primeri različnih lastnosti besedila */
        .barva-besedila {
            color: #2196F3;
        }
        .poravnava-besedila {
            text-align: center;
        }
        .dekoracija-besedila {
            text-decoration: underline wavy red;
        }
        .transformacija-besedila {
            text-transform: uppercase;
        }
        .razmik-crk {
            letter-spacing: 3px;
        }
        .razmik-besed {
            word-spacing: 10px;
        }
        .senca-besedila {
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        .prelom-besedila {
            word-wrap: break-word;
            width: 150px;
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS Lastnosti za Oblikovanje Besedila</h1>
        
        <div class="primer">
            <div class="opis">Barva besedila (color):</div>
            <p class="barva-besedila">To besedilo je obarvano v modro barvo.</p>
        </div>

        <div class="primer">
            <div class="opis">Poravnava besedila (text-align):</div>
            <p class="poravnava-besedila">To besedilo je sredinsko poravnano.</p>
        </div>

        <div class="primer">
            <div class="opis">Dekoracija besedila (text-decoration):</div>
            <p class="dekoracija-besedila">To besedilo ima valovito rdečo podčrtavo.</p>
        </div>

        <div class="primer">
            <div class="opis">Transformacija besedila (text-transform):</div>
            <p class="transformacija-besedila">to besedilo je pretvorjeno v velike črke</p>
        </div>

        <div class="primer">
            <div class="opis">Razmik med črkami (letter-spacing):</div>
            <p class="razmik-crk">Besedilo z razmakom med črkami</p>
        </div>

        <div class="primer">
            <div class="opis">Razmik med besedami (word-spacing):</div>
            <p class="razmik-besed">Besedilo z večjim razmikom med besedami</p>
        </div>

        <div class="primer">
            <div class="opis">Senca besedila (text-shadow):</div>
            <p class="senca-besedila">Besedilo s senco</p>
        </div>

        <div class="primer">
            <div class="opis">Prelom dolgih besed (word-wrap):</div>
            <p class="prelom-besedila">Tojezelodolgabesedakisenemorezlomitivnovivrstici</p>
        </div>
    </div>
</body>
</html>

REZULTAT

Lastnost	Primer	Opis
Barva in Pisave
`color`	`color: #333;`	Nastavi barvo besedila
`font-family`	`font-family: Arial, sans-serif;`	Določi pisavo besedila
`font-size`	`font-size: 16px;`	Določi velikost pisave
`font-style`	`font-style: italic;`	Določi slog pisave (normal, italic, oblique)
`font-weight`	`font-weight: bold;`	Določi debelino pisave (normal, bold, 100-900)
`font`	`font: 16px Arial;`	Kratka sintaksa za vse font lastnosti
Poravnava
`text-align`	`text-align: center;`	Določi poravnavo besedila (left, right, center, justify)
`text-align-last`	`text-align-last: right;`	Določi poravnavo zadnje vrstice odstavka
`vertical-align`	`vertical-align: middle;`	Določi navpično poravnavo inline elementov
`text-indent`	`text-indent: 20px;`	Določi zamik prve vrstice besedila
Razmiki
`line-height`	`line-height: 1.6;`	Določi navpični razmik med vrsticami
`letter-spacing`	`letter-spacing: 2px;`	Določi razmik med črkami
`word-spacing`	`word-spacing: 5px;`	Določi razmik med besedami
Dekoracija in Pretvorba
`text-decoration`	`text-decoration: underline;`	Določi okras besedila (underline, overline, line-through)
`text-transform`	`text-transform: uppercase;`	Pretvori črke (uppercase, lowercase, capitalize)
`text-shadow`	`text-shadow: 2px 2px 4px #000;`	Doda senco besedilu
Prelomi in Odhodki
`text-overflow`	`text-overflow: ellipsis;`	Določi, kako označiti odrezano vsebino (clip, ellipsis)
`word-break`	`word-break: break-all;`	Določi pravila preloma besed ob robu
`overflow-wrap`	`overflow-wrap: break-word;`	Dovoli prelom predolgih besed v naslednjo vrstico
`clear`	`clear: both;`	Lastnost za razporejanje elementov ob plavajočih elementih

CSS Pisave

CSS pisave določajo krepkost, velikost in slog besedila. Izbira prave pisave močno vpliva na to, kako bralci doživljajo spletno mesto. Prava pisava lahko ustvari močno identiteto vaše spletne strani (naj bo to trgovina, predstavitev podjetja, blog itd.). Pomembna je uporaba berljive pisave, saj pisava doda vrednost vašemu besedilu.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Družine pisav</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
            line-height: 1.6;
        }
    
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
    
        table thead th {
            background-color: #339af0;
            color: #333333;
            -webkit-text-fill-color: #333333;
        }
    
        /* Barva besedila v sodih vrsticah */
        table tbody tr:nth-child(even) {
            color: #fe5849;
            font-weight: bold;
            -webkit-text-fill-color: #fe5849;
        }
    
        th, td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }
    
        .sample {
            font-size: 18px;
            margin: 10px 0;
        }
    
        /* --- Družine pisav ----------------------------------- */
        .lucida-handwriting { font-family: cursive; }
        .brush-script { font-family: cursive; }
        .papyrus { font-family: fantasy; }
        .copperplate { font-family: fantasy; }
        .courier-new { font-family: "Courier New", monospace; }
        .lucida-console { font-family: monospace; }
        .helvetica { font-family: sans-serif; }
        .verdana { font-family: "Verdana", sans-serif; }
        .georgia { font-family: "Georgia", serif; }
        .times-new-roman { font-family: "Times New Roman", serif; }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Družina pisav</th>
                <th>Slog</th>
                <th>Primer</th>
            </tr>
        </thead>
        <tbody>
            <!-- Cursive -->
            <tr>
                <td>Cursive</td>
                <td>
                    <code>font-family: "Lucida Handwriting", cursive</code><br>
                    <code>font-family: "Brush Script MT", cursive</code>
                </td>
                <td>
                    <div class="sample lucida-handwriting">Lucida Handwriting</div>
                    <div class="sample brush-script">Brush Script MT</div>
                </td>
            </tr>
    
            <!-- Fantasy -->
            <tr>
                <td>Fantasy</td>
                <td>
                    <code>font-family: "Papyrus", fantasy</code><br>
                    <code>font-family: "Copperplate Gothic Light", fantasy</code>
                </td>
                <td>
                    <div class="sample papyrus">Papyrus</div>
                    <div class="sample copperplate">Copperplate Gothic Light</div>
                </td>
            </tr>
    
            <!-- Monospace -->
            <tr>
                <td>Monospace</td>
                <td>
                    <code>font-family: "Courier New", monospace</code><br>
                    <code>font-family: "Lucida Console", monospace</code>
                </td>
                <td>
                    <div class="sample courier-new">Courier New</div>
                    <div class="sample lucida-console">Lucida Console</div>
                </td>
            </tr>
    
            <!-- Sans‑serif -->
            <tr>
                <td>Sans‑serif</td>
                <td>
                    <code>font-family: "Helvetica", sans-serif</code><br>
                    <code>font-family: "Verdana", sans-serif</code>
                </td>
                <td>
                    <div class="sample helvetica">Helvetica</div>
                    <div class="sample verdana">Verdana</div>
                </td>
            </tr>
    
            <!-- Serif -->
            <tr>
                <td>Serif</td>
                <td>
                    <code>font-family: "Georgia", serif</code><br>
                    <code>font-family: "Times New Roman", serif</code>
                </td>
                <td>
                    <div class="sample georgia">Georgia</div>
                    <div class="sample times-new-roman">Times New Roman</div>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

REZULTAT

Pomembno je tudi izbrati pravilno barvo in velikost besedila. Na spletu ni priporočljivo uporabljati več različnih pisav hkrati; lahko uporabimo eno pisavo za naslove in drugo za odstavke. Zakaj navedemo več pisav? Če brskalnik ne podpira prve pisave, poskusi z naslednjo iz seznama. Danes je to zaradi široke podpore modernih pisav manj pomembno, vendar je dobra praksa še vedno koristna.

Lastnost	Primer	Opis
Osnovne lastnosti pisave
`font-family`	`font-family: Arial, sans-serif;`	Določi pisavo in nadomestne pisave
`font-size`	`font-size: 16px;`	Določi velikost pisave (px, em, rem, %)
`font-style`	`font-style: italic;`	Določi slog pisave (normal, italic, oblique)
`font-weight`	`font-weight: bold;`	Določi debelino pisave (normal, bold, 100-900)
`font-variant`	`font-variant: small-caps;`	Določi varianto pisave (normal, small-caps, all-small-caps)
`font`	`font: italic bold 16px Arial;`	Kratka sintaksa za vse font lastnosti
Zunanje pisave
`@import`	`@import url("https://fonts.googleapis.com/css2?family=Roboto");`	Uvozi zunanjo pisavo (npr. Google Fonts)
`@font-face`	`@font-face { font-family: "MyFont"; src: url("font.woff2"); }`	Definira lastno pisavo z lokalno datoteko
Barve in ozadja
`color`	`color: #333;`	Določi barvo besedila
`background-color`	`background-color: #f0f0f0;`	Določi barvo ozadja besedila
Hover efekti
`:hover`	`a:hover { color: red; font-weight: bold; }`	Spremeni lastnosti ob prehodu miške

CSS Besedilo

CSS Pisave

Vadnica.org

Povezave

Podpora