Vježba - CSS model kutije

Vježba 2.1 - Cilj vježbe je naučiti promijeniti vrijednosti rubnice, obruba i odmaka koristeći skupna i pojedinačna svojstva modela kutije.

Vježba 2.1

Preuzmite i spremite u mapu Vjezba 2 html datoteku:

model-kutije-skupna-svojstva.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>CSS model kutije - skupna svojstva</title>
  <style>
* {
  padding: 0;
  margin: 0;
}
body {
  color: #fff;
  background-color: rgba(0, 100, 0, 0.8);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 20px;
  line-height: 1.5;
}
h1 {

  color: #F9E79F;
  background-color: gray;
  font-weight: 100;
  text-shadow: 2px 2px #2E4053;
}
h2 {
  width: 50%;
  
  background-color: hsla(14, 88%, 40%, 0.4);  
  font-weight: 100;
  text-shadow: 2px 2px #2E4053;
}
p {
  
  background-color: hsla(146, 64%, 23%, 0.4);
  letter-spacing: 1px;
}
article {
  
  color: #F9E79F;
  background-color: gray;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
}
li {
  min-height: 58px;
  
  background-color: hsla(251, 69%, 34%, 0.4);
  line-height: 58px;
}
code {
  
  color: black;
  background: white;
}
span {
  
  background-color: hsla(14, 88%, 40%, 0.4);    
}
</style>
</head>
<body>
  <h1>CSS Model kutije - skupna svojstva</h1>
  <p>Svaki element na web stanici ima svoju kutiju.</p>
  <p>I svakoj kutiji možemo postaviti vrijednosti:</p>
  <article>
    <ul>
      <li>Sadržaja</li>
      <li>Odmaka (engl. <span>padding</span>)</li>
      <li>Obruba (engl. <span>border</span>)</li>
      <li>Rubnice (engl. <span>margin</span>)</li>
    </ul>
  </article>
  <h2>Pozadina (za sada samo boja)</h2>
  <p>Boja pozadine (engl. <code>background-color</code>) prekriva područje sadržaja i odmaka (engl. <code>padding</code>).</p>
  <p>Boja pozadine rubnice (engl. <code>margin</code>) je boje pozadine roditeljskog elementa.</p>
</body>
</html>

Preuzeti html kôd ne smijete mijenjati! Radite po predlošku sa slike 2.1.1.
Potrebno je vizualno oblikovati web stranicu, rabeći samo css svojstva za skupno dodjeljivanje vrijednosti modela kutije (engl. padding, border i margin) unutar postojećih selektora koji se već nalaze u <style> elementu.
Pomoću selektora odlomka p dodijelite vrijednosti odmaka (engl. padding) i rubnice (engl. margin) u postotcima, a koristeći selektor stavki popisa li, dodijelite vrijednosti odmaka i rubnice u jedinicama vh i vw, za visinu odnosno širinu.
U ostalim selektorima možete dodijeliti vrijednosti u px.
Boje koje možete rabiti za obrub (engl. border) su: #555, hsla(14, 88%, 40%, 1), hsla(146, 64%, 23%, 1), hsla(251, 69%, 34%, 1) i black.
Spremite html dokument u mapu Vjezba 2, pod imenom model-kutije-skupna-svojstva.html.
Otvorite web stranicu model-kutije-skupna-svojstva.html u web pregledniku i provjerite radi li dobro i je li izgled web stranice istovjetan onom na slici 2.1.1.
Slika 2.1.1
Preuzmite i spremite u mapu Vjezba 2 html datoteku:

model-kutije-pojedinacna-svojstva.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>CSS model kutije - pojedinačna svojstva</title>
  <style>
* {
  padding: 0;
  margin: 0;
}
body {
  color: #fff;
  background-color: rgba(0, 100, 0, 0.8);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 20px;
  line-height: 1.5;
}
h1 {

  color: #F9E79F;
  background-color: gray;
  font-weight: 100;
  text-shadow: 2px 2px #2E4053;
}
h2 {
  width: 50%;
  
  background-color: hsla(14, 88%, 40%, 0.4);  
  font-weight: 100;
  text-shadow: 2px 2px #2E4053;
}
p {
  
  background-color: hsla(146, 64%, 23%, 0.4);
  letter-spacing: 1px;
}
article {
  
  color: #F9E79F;
  background-color: gray;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
}
li {
  min-height: 58px;
  
  background-color: hsla(251, 69%, 34%, 0.4);
  line-height: 58px;
}
code {
  
  color: black;
  background: white;
}
span {
  
  background-color: hsla(14, 88%, 40%, 0.4);    
}
</style>
</head>
<body>
  <h1>CSS Model kutije - pojedinačna svojstva</h1>
  <p>Svaki element na web stanici ima svoju kutiju.</p>
  <p>I svakoj kutiji možemo postaviti vrijednosti:</p>
  <article>
    <ul>
      <li>Sadržaja</li>
      <li>Odmaka (engl. <span>padding</span>)</li>
      <li>Obruba (engl. <span>border</span>)</li>
      <li>Rubnice (engl. <span>margin</span>)</li>
    </ul>
  </article>
  <h2>Pozadina (za sada samo boja)</h2>
  <p>Boja pozadine (engl. <code>background-color</code>) prekriva područje sadržaja i odmaka (engl. <code>padding</code>).</p>
  <p>Boja pozadine rubnice (engl. <code>margin</code>) je boje pozadine roditeljskog elementa.</p>
</body>
</html>

Preuzeti html kôd ne smijete mijenjati! Radite po predlošku sa slike 2.1.2.
Potrebno je vizualno oblikovati web stranicu, rabeći samo css svojstva za pojedinačno dodjeljivanje vrijednosti modela modela kutije (engl. padding-*, border-* i margin-*) unutar postojećih selektora koji se već nalaze u <style> elementu.
Pomoću selektora odlomka p dodijelite vrijednosti odmaka (engl. padding) i rubnice (engl. margin) u postotcima, a koristeći selektor stavki popisa li, dodijelite vrijednosti odmaka i rubnice u jedinicama vh i vw, za visinu odnosno širinu.
U ostalim selektorima možete dodijeliti vrijednosti u px.
Boje obruba koje možete rabiti su: hsla(14, 88%, 40%, 1), hsla(146, 64%, 23%, 1), #555, hsla(251, 69%, 34%, 1), black i hsla(14, 88%, 40%, 1).
Spremite html dokument u mapu Vjezba 2, pod imenom model-kutije-pojedinacna-svojstva.html.
Otvorite web stranicu model-kutije-pojedinacna-svojstva.html u web pregledniku i provjerite radi li dobro i je li izgled web stranice istovjetan onom na slici 2.1.2.
Slika 2.1.2
Pogledajte izvorni kôd načinjenih web stranice (html dokumenta) u web pregledniku, korištenjem prečaca na tipkovnici Ctrl + U.