abc HTML5 i CSS TUTORIAL

Interni CSS /INTERNAL CSS/ (u HEAD-u)


Slika 1. Korištenje atributa - Interni CSS /INTERNAL CSS/

Pri korištenju atributa /ATTRIBUTE/ uptorebom internog CSS-a /INTERNAL CSS/ definisanje atributa je u HEAD dijelu, upotreba u BODY dijelu HTML fajla:

  • HEAD dio Sintaksa: <style>TAG { ATRIBUT:Vrijednost_atributa; } <style>
  • BODY dio Sintaksa: <TAG>Sadržaj</TAG>

Oznake:
TAG - p | h1 | h2 | h3 | h4 | h5 | h6 | BODY | DIV | SPAN | Naziv- TAG može da primi jednu od navedenih vrijednosti
h1 | h2 | h3 | h4 | h5 | h6 - izaberi jedanu od navedenih oznaka (jedan od zaglavlja teksta)
BODY - Atribut u cijelom dokumentu
DIV - Atribut u cijeloj DIV sekciji
SPAN - Atribut u cijeloj SPAN sekciji background-color - Atribut za boju pozadine dokumenta
color - Atribut za boju teksta
Naziv - Termin koji bira koirsnik i upotrebljava se kao TAG sa definisanim atributima

Atribut se definiše unutar STYLE naredbi u HEAD dijelu. Više atributa jednog TAG-a se navodi unutar otvorenih i zatvorenih velikih zagrada { }. Ako atribut /ATTRIBUTE/ ima više od jedne riječi između njih je - (crtica) i čine cjelinu.
Atributi objašnjeni u ovom poglavlju:
text-align
background-color
color
font-family
font-size

Vrijednost_atributa - Skup vrijednosti zavisi do navedenog atributa.
Sadržaj - Sadržaj za izabrani tag - Navodi se sadržaj odgovarajući za TAG. Ovo je ujedno i područje važenja TAG-a.

Područje važenja atributa je unutar koda_ili_naziva u BODY dijelu.

Slijedeća animacija prikazuje kako se iz linijskog krerira interni css.

Kreiranje internog iz linijskog css-a /INTERNAL CSS FROM LINE CSS/ u BODY TAG-u, postupak :

  1. { } otukucati u HEAD dio između <> i </>.
  2. STYLE - Premjestiti u <> dobija te <STYLE>.
  3. STYLE - Kopirati (CTRL+DRAG&DROP) u </> dobija te </STYLE>.
  4. Provjeriti ispis (F5-REFRESH) nema više linijskog css-a /LINE CSS/ bijela pozadina.
  5. Atribut premjestitI ( background-color:red ) u vitičaste zagrade.
  6. TAG (BODY) kopirati u interni css.
  7. Obrisati višak znakova.
  8. Provjeriti ispis (F5-REFRESH) nema više linijskog css-a /LINE CSS/ crvena pozadina.

Slijedeća animacija prikazuje kako se iz linijskog krerira interni css za paragraf.

Kreiranje internog iz linijskog css-a /INTERNAL CSS FROM LINE CSS/ u paragrafu, postupak :

  1. { } otukucati u HEAD dio između <> i </>.
  2. STYLE - Premjestiti u <> dobija te <STYLE>.
  3. STYLE - Kopirati (CTRL+DRAG&DROP) u </> dobija te </STYLE>.
  4. Provjeriti ispis (F5-REFRESH) nema više linijskog css-a /LINE CSS/ crna slova.
  5. Atribut premjestitI ( color:red ) u vitičaste zagrade.
  6. TAG (P) kopirati u interni css.
  7. Obrisati višak znakova.
  8. Provjeriti ispis (F5-REFRESH) nema više linijskog css-a /LINE CSS/ crven tekst u svim paragrafima.

Primjer 1. Izbora fonta dokumenta /BODY FONT FAMILY/
Opis rješenja: Kad se ime fonta /FONT FAMILY/ navede u BODY TAG-u to ima za posljedicu da se u cijelom dokumentu koristi navedeni font. Izuzetak je DIV i SPAN.

R.br.

Sintaksa 

HTML5 kod

Ekran

Font:Comic Sans MS

 body { font-family: "Comic Sans MS"; } <!DOCTYPE html>
<html>
<head><title>Izbor fonta dokumenta</title>
<style>
  body { font-family: "Comic Sans MS"; }
</style>
</head>
<body>
<p>Ko se o mlijeko opeče, taj i u jogurt duva.</p>
<p>Drugi paragraf je isto uređen</p>
</body></html>

Ko se o mlijeko opeče, taj i u jogurt duva.

Drugi paragraf je isto uređen

Primjer 2. Veličina fonta definisan u BODY TAG-u.

R.br.

Sintaksa 

HTML5 kod

Ekran

Veličina fonta 1.2em

body { font-size: 1.2em; } <!DOCTYPE html>
<html>
<head><title>Izbor fonta dokumenta</title>
<style>
  body { font-size: 1.2em; }
</style>
</head>
<body>
<p>Ko se o mlijeko opeče, taj i u jogurt duva.</p>
<p style="font-size:0.8em;">znanje.org</p>
<p>Drugi paragraf je isto uređen</p>
</body></html>

Ko se o mlijeko opeče, taj i u jogurt duva.

znanje.org

Drugi paragraf je isto uređen

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index