CSS својства – задаци¶

Задатак 2.2.1

У следећем HTML/CSS кôду можете да испробавате подешавање својстава margin и padding у стиловима наслова и параграфа. За све елементе је постављен и оквир, да би се јасније видело дејство различитих подешавања својстава margin и padding.

Испробајте и посебно подешавање ових својстава за сваку страну елемента: margin-top, margin-bottom, margin-right, margin-left за растојање споља (margin), односно padding-top, padding-right, padding-bottom, padding-left за растојање изнутра (padding).

<html>
    <style>
        * { border: 1px solid #ff0000; }
        h1 {
            margin: 15px;
            padding: 3px;
        }
        h2 {
            margin: 10px;
            padding: 2px;
        }
        p {
            margin: 5px;
            padding: 10px;
        }
    </style>
    <body>
        <h1>Наслов</h1>
        <h2>Први поднаслов</h2>
        <p>
            Произвољан текст који служи да попуни параграф. Овај текст
            не трба да читате, нити да у њему тражите скривене поруке.
        </p>
        <p>
            Ако ипак читате, можете да станете овде, јер се испод следећег
            наслова текст понавља. Мада, ако сте читали довде, вероватно ћете
            проверити и наставак.
        </p>
        <h2>Други поднаслов</h2>
        <p>
            Произвољан текст који служи да попуни параграф. Овај текст
            не треба да читате, нити да у њему тражите скривене поруке.
        </p>
        <p>
            Ако ипак читате, можете да станете овде, јер се испод следећег
            наслова текст понавља. Мада, ако сте читали довде, вероватно ћете
            проверити и наставак.
        </p>

</body>
</html>

Задатак 2.2.2

Да бисте проверили колико сте овладали подешавањем ових својстава, у прозору испод слике дефинишите стил параграфа тако да буде што приближнији стилу параграфа на овој слици (боју позадине не треба подешавати):

<html>
    <body>
        <h1>Главни наслов</h1>
        <p>
            Први параграф први параграф први параграф први параграф први параграф први параграф први параграф.
        </p>
        <p>
            Други параграф други параграф други параграф други параграф други параграф други параграф други параграф други параграф други параграф други параграф други параграф други параграф други параграф.
        </p>
        <h2>Први поднаслов</h2>
        <p>
            Први параграф први параграф први параграф први параграф први параграф први параграф први параграф.
        </p>
        <p>
            Други параграф други параграф други параграф други параграф други параграф други параграф други параграф други параграф други параграф други параграф други параграф други параграф други параграф.
        </p>
        <p>
            Трећи параграф трећи параграф трећи параграф трећи параграф трећи параграф трећи параграф трећи параграф трећи параграф трећи параграф трећи параграф трећи параграф трећи параграф трећи параграф.
        </p>
    </body>
</html>

Претходна лекција Следећа лекција

Слова