Sunday, March 28, 2021

CSS u HTML

CSS je Cascading Style Sheets.

Može se dodati na 3 načina u HTML dokument:

    Korišćenjem style atributa unutar HTML elementa

    Korišćenjem <style> taga unutar <head> sekcije

    Korišćenjem <link> taga koji pokazuje na CSS fajl gde se piše CSS kod


Primer 1:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


Primer 2:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Primer 3:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Imamo i fajl styles.css u sitom folderu sa sledećim sadržajem:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
{
  color: red;
}

Primer 4: Podešavanje colorfont-familyfont-size:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
{
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Primer 5: Podešavanje border-a:

{
  border: 2px solid powderblue;
}

Primer 6: Podešavanje padding-a

{
  border: 2px solid powderblue;
  padding: 30px;
}

Primer 7: Podešavanje margine

{
  border: 2px solid powderblue;
  margin: 50px;
}

HTML forma

1. Krenućemo od jednostavne forme u kojoj se unosi Ime i Prezime i koja te podatke prosleđuje PHP stranici.

Primer HTML koda je:

iframe element

 Ovim elementom možemo sadržaj sa druge web stranice da uključimo u našu stranicu.

Primer HTML koda:

HTML atributi id i class

id atribut se koristi da bi jednoznačno odredio HTML element.

class atribut može da se doda u više HTML elemenata.

Primeri za dodavanje ID i CLASS elemenata:

<h2 id="jedinstvenID">Beograd</h2>

<h2 class="klasa">Beograd</h2>

Najčešće se koriste se za formatiranje HTML elementa pomoću CSS-a.

Ideja je da se u CSS-u definiše formatiranje elemenata po id i class. To je predmet drugog kursa.

Blok i inline elementi

Blok elementi uvek počinju u novom redu.

Blok elementi uvek zauzmu celu dostupnu širinu.

Blok elementi imaju top i bottom marginu.

Blok elementi su:

Inline elementi ne počinju u novom redu.

Inline elementi zauzmu samo širinu koja im je neophodna za prikazivanje

Inline elementi su:



Liste u HTML-u

 Primer HTML koda:

Tabela u html-u

Tabela se definiše <table> tagom.

Red u tabeli se definiše <td> tagom.

Kolona u tabeli se definiše <th> tagom.

Primer tabele u HTML-u:

CSS u HTML

CSS je Cascading Style Sheets. Može se dodati na 3 načina u HTML dokument:     Korišćenjem  style  atributa unutar HTML elementa     Korišće...