Kodulehe loomine, 27. kord

5. Kujundus

Enne kujunduse juurde asumist, paar üldist märkust:

1. meie poolt tehtav kujundus saab paiknema failis mangukujundus.css
   • html-lehe päises on viide kujunduse failile (<link rel=”stylesheet” type=”text/css” href=”mangukujundus.css“>) ja
   • kujunduse jaoks tekitasime eraldi faili mangukujundus.css
2. vaikimisi on meie lehekujundus Bootstrap 5:
   • html lehe päises on viide sellele: ==> <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css” rel=”stylesheet”><script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js”></script> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></scrip>
   • kuna me soovime mõningaid asju muuta, siis kasutame stiili määramisel võimalust vaikimisi stiile üle kirjutada, lisades soovitud kujundusele märksõna !important

Teksti suurus ja vahe teiste elementidega

.elemendid, #andmed_sisse
{
 font-size: 35px !important;
 margin-bottom: 10px !important;
}

Eeltooduga kujundame elemente:

1. mille klass on elemendid (class=”elemendid”) (NB! punkt enne sõna elemendid)==> .elemendid
2. mille identifikaator on #andmed_sisse (id=”andmed_sisse) (NB! trellid enne sõna andmed_sisse) ==> #andmed_sisse

Kujundus siis järgmine:

1. tähesuurus (font-size) 35px, eirates vaikimisi stiili (!important) ==> font-size: 35px !important;
2. kaugus kasti alumisest servast (margin-bottom) järgmise elemendini 10px, eirates vaikimisi stiili ==> margin-bottom: 10px !important;

Teksti paigutus

#sona, #info, #andmed_sisse, #taht
{
  text-align: center !important;
}

Eeltoodud kujundatakse elemente, mille identifikaatorid on sona, info, andmed_sisse, taht.

Kujundus tulemuse paigutatakse tekst (text-align) kasti keskele (center), eirates vaikimisi kujundust (!important) ==> text-align: center !important;

Kasti suurus

#pildisisu
{
width: 200px !important;
height: 200px !important;
float: right !important;
}

Selle osaga määratakse elemendi, mille identifikaator on pildisisu, eirates vaikimisi kujundust:

• laiuseks (width) 200px ja
• kõrguseks (height) 200px

Lisaks paigatatakse element kasti paremasse serva, eirates vaikimisi kujundust:

• float: right !important;

Teksti värv ja teksti läbikriipsutamine

#tahed
{
 color: red;
 text-decoration: line-through;
}

Selle osaga määratakse elemendi, mille identifikaator on tahed:

• teksti värviks (color) punane (red) ja
• tekst kriipsutatakse läbi, kasutades omadust text-decoration ja määrates selle väärtuseks line-through.

Kasti suuruse, teksti ja kasti joonte vahelise kauguse määramine ning kaugus paremal paikneva elemendiga

#taht
{
width: 90px !important;
padding: 0px 25px 10px 25px !important;
margin-right: 10px !important;
}

Siinkohal määrame sisendkasti, mille identifikaator on taht, kujunduse, eirates vaikimisi stiil (!important):

• laiuseks (width) 90px
• vahe teksti ja kasti servade vahel (padding), ülevalt 0px, paremalt 25px, alt 10px, vasakult 25 px,
• vahe paremal paikneva elemendiga (margin-right) 10px

Vahemaa üleval paikneva elemendini

#nupp
{
margin-top: 7px !important;
}

Määratleme nupu, mille identifikaator on nupp vahe sellest üleval paikneva elemendini (margin-top) 7px, eirates vaikimis stiili.

Kokkuvõtvalt siis on kujundusfaili sisu selline:

.elemendid, #andmed_sisse
{
 font-size: 35px !important;
 margin-bottom: 10px !important;
}
#sona, #info, #andmed_sisse, #taht
{
 text-align: center !important;
}
#pilt
{
 width: 200px;
 height: 200px;
}
#tahed
{
 color: red;
 text-decoration: line-through;
}
#taht
{
 width: 90px !important;
 padding: 0px 25px 10px 25px !important;
 margin-right: 10px !important;
}
#nupp
{
 margin-top: 7px !important;
}