Css promjena boje teksta i pozadine : CSS vježba 1.3 : Bartol plus

Vježba 1.3

Preuzmite i spremite u mapu Vjezba 1 html datoteku:

rgba-boje-teksta-i-pozadine.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>CSS - RGBA boje teksta i pozadine</title>
  <style>
* {
  padding: 10px;
  margin: 10px;
}
body {
  background-color: rgba(0, 100, 0, 0.8);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
  border: 1px solid #555;  
  color: #F9E79F;
  background-color: gray;
  font-weight: 100;
  text-shadow: 2px 2px #2E4053;
}
section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  background-color: whitesmoke;
}
section hr {
  display: block;
  height: 1px;
  padding: 0;
  border: 0;
  border-top: 1px solid #333;
  margin: 1em 5em;
}
section h2 {
  color: #2E4053;
  font-size: 2em;
  font-weight: 100;
  text-shadow: 2px 2px #F9E79F;
}
section p {
  font-size: 1.5em;
  font-weight: 100;
}

/* dodajte obrub i pozadinsku boju za article elemente */

  </style>
</head>
<body>
  <h1>CSS - RGBA boje</h1>
  <section>
    <article class="column-1">
      <h2>1. HTML kôd</h2>
      <hr />
      <p>U izradi web stranica kôdiranje je uvijek prvi korak</p>  
    </article>  
    <article class="column-2">
      <h2>2. CSS stil</h2>
      <hr />
      <p>Vizualni izgled vaše web stranice određuju css stilovi</p>  
    </article>  
    <article class="column-3">
      <h2>3. JavaScript</h2>
      <hr />
      <p>Sva događanja na klijentskom računalu obrađuje JavaScript</p>  
    </article>  
    <article class="column-4">
      <h2>4.  Moj PHP </h2>
      <hr />
      <p>PHP se pokreće na serveru i pogodan je za web inženjering</p>  
    </article>  
  </section>
</body>
</html>

Preuzeti html kôd ne smijete mijenjati! Radite po predlošku sa slike 1.3.1.
Slika 1.3.1
Potrebno je vizualno oblikovati web stranicu, dodajući stilska pravila unutar <style> elementa.
Umetnite selektore za svaki article element. Postavite boju pozadine (engl. background-color) svakog pojedinog article elementa uporabom RGBA boja.
Osnovna boja pozadine koju trebate koristiti je: rgb(0, 100, 0). Mijenjajte samo vrijednost njezine prozirnosti (alpha vrijednost).
Umetnite selektor svih article elemenata. Koristeći RGBA boju, dodajte im obrub (engl. border).
Boja obruba (engl. border) neka bude osnovna boja article elementa, alpha vrijednosti 1 (neka bude neprozirna).
Primjer postavljanja obruba (engl. border) širine 1px, pune crte (engl. solid), plave boje (engl. rgba(0, 0, 255, 1))

 border: 1px solid rgba(0, 0, 255, 1);

Spremite html dokument u mapu Vjezba 1, pod imenom rgba-boje-teksta-i-pozadine.html.
Otvorite web stranicu rgba-boje-teksta-i-pozadine.html u web pregledniku i provjerite radi li dobro i je li izgled web stranice istovjetan onom na slici 1.3.1.

2. zadatak

Preuzmite i spremite u mapu Vjezba 1 html datoteku:

hsla-boje-teksta-i-pozadine.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>CSS - HSLA boje teksta i pozadine</title>
  <style>
* {
  padding: 10px;
  margin: 10px;
}
body {
  background-color: hsla(26, 100%, 50%, .4);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
  border: 1px solid #333;
  color: hsl(36, 100%, 75%);
  background-color: gray;
  font-weight: 100;
  text-shadow: 2px 2px #2E4053;
}  
section hr {
  display: block;
  height: 1px;
  padding: 0;
  border: 0;
  border-top: 1px solid #555;
  margin: 1em 5em;
}
section h2 {
  color: #2E4053;
  font-size: 2em;
  font-weight: 100;
  text-shadow: 2px 2px hsla(26, 100%, 50%, .4);
}
section p {
  font-size: 1.5em;
  font-weight: 100;
}
section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  background-color: whitesmoke;
}

/* dodajte obrub i pozadinsku boju za article elemente */

  </style>
</head>
<body>
  <h1>CSS - HSLA boje teksta i pozadine</h1>
  <section>
    <article class="column-1">
      <h2>1. HTML kôd</h2>
      <hr />
      <p>U izradi web stranica kôdiranje je uvijek prvi korak</p>  
    </article>  
    <article class="column-2">
      <h2>2. CSS stil</h2>
      <hr />
      <p>Vizualni izgled vaše web stranice određuju css stilovi</p>  
    </article>  
    <article class="column-3">
      <h2>3. JavaScript</h2>
      <hr />
      <p>Sva događanja na klijentskom računalu obrađuje JavaScript</p>  
    </article>  
    <article class="column-4">
      <h2>4.  Moj PHP </h2>
      <hr />
      <p>PHP se pokreće na serveru i pogodan je za web inženjering</p>  
    </article>  
  </section>
</body>
</html>

Preuzeti html kôd ne smijete mijenjati! Radite po predlošku sa slike 1.3.2.
Slika 1.3.2
Potrebno je vizualno oblikovati web stranicu, dodajući stilska pravila unutar <style> elementa.
Dodajte selektore za svaki article element. Zadajte im boju obruba (engl. border) i boju pozadine (engl. background-color) uporabom HSLA boja.
Osnovne boje možete izabrati između boja na donjoj poveznici:
Html izbor boja [html]
Osnovnoj boji pozadine (engl. background-color) postavite prozirnost između 0.3 i 0.5 (alpha vrijednost).
Boja obruba (engl. border) neka bude osnovna boja article elementa, alpha vrijednosti 1 (neka bude neprozirna).
Spremite html dokument u mapu Vjezba 1, pod imenom hsla-boje-teksta-i-pozadine.html.
Otvorite web stranicu hsla-boje-teksta-i-pozadine.html u web pregledniku i provjerite radi li dobro i je li izgled web stranice istovjetan onom na slici 1.3.2.
Pogledajte izvorni kôd načinjenih web stranice (html dokumenta) u web pregledniku, korištenjem prečaca na tipkovnici Ctrl + U.

Rješenje vježbe 1.3

Usporedite css oblikovanja, s oblikovanjima rješenja Vježbe 1.3

Rješenje vježbe 1.3: CSS boja teksta i pozadine

Vježba - CSS promjena boje teksta i pozadine

Vježba 1.3 - Cilj vježbe je naučiti promijeniti boju teksta i pozadine koristeći različite vrste oznaka boje.

Vježba 1.3

2. zadatak

Rješenje vježbe 1.3

Naši pokrovitelji

Naša preporuka

Besplatne usluge: