Cascading Style Sheets

Cascading Style Sheets

CSS Stilski jezik. Određuje kako će HTML da se prikazuje.

Vrste CSS-a Inline - umetanje CSS stilova unutar HTML elemenata koje želimo formatirati pomoću atributa style. <p style="color:red;text-align:center"> Ovo je inline CSS </p> 2) Interni - koristimo HTML element <style>, koji postaje sadržaj HTML elementa <head>.Unutar elementa style moramo dodati i atribut type koji ima vrijednost "text/css". <head><style type="text/css"> p {color:red;}</style></head>

Vrste CSS-a 3) Eksterni - Ovajnačin je najčešći. Piše se u eksternomfajlu, koji ima ekstenziju.css. p { color:red; font-size:12px; }

Kreiranje .css : Postupak je sličan kreiranju dobro nam poznatog index.html dokumenta. Samo umjesto index.html imamo sljedeće

Povezivanje html dokumenta sa css-om: U html dokumentu potrebno je da unesemo sljedeći kod kojim ćemo izvršiti povezivanje: <head> <link href="style.css" rel="stylesheet"type="text/css" /> </head> Bitno! CSS se povezuje u head tagu.

Kako CSS dokument izgleda?

Sintaksa CSS-a: selector {property: value; } p { color: red; } Ovo znači da će svi paragrafi <p> biti crvene boje. Selector = HTML element/tag koji želimo definisati (body, font, h1, p, img...) Property = opcija, odnosno atribut koji želimo promijeniti Value = vrijednost koju može poprimiti opcija

Mogućnost grupisanja Selektori se mogu međusobno grupisati u jednu naredbu kojom se odjednom određujusvojstva koja će vrijediti za sve selektore: Svaki od naslova biće zelene boje h1,h2,h3,h4,h5,h6 { color: green; }

CSS selektori – klase i ID (.) class selektori – klase – služe da se dodijele stilovi različitim html elementima. Klase možemo ponavljati neograničen broj puta za razliku od ID. Kako to izgleda u CSS fajlu: (npr. Klasa koja se zove desno – primijetićete da imena klasa određujemo proizvoljno) .desno { text-align:right; } A u html dokumentu biće: <p class=“desno”>Ovaj paragraf će biti poravnat udesno.</p>

CSS selektori – klase Ako se klasa definiše bez naziva selektora, ona se može koristiti kao atribut kod bilo kojeg selektora. Npr. ako ne pišemo u css: p {text-align: center; } Nego, npr.: .centar {text-align: center; } Tada u html-u možemo ovo primijeniti na sve tagove: <p class=“centar”>Centrirani tekst</p> <h1 class=“centar”>Naslov centriran</h1>

CSS selektori – ID ID selektori takođe dodjeljuju izgled html elementima, ali oni se mogu ponoviti samo jednom, dakle, jedinstveni su. Njihova oznaka je # a zatim slijedi ime ID-a, npr. za ID zaglavlja u css dokumentu biće: #zaglavlje { width: 960 px; height: 200 px; background-color: #555555; float:left; } U html dokumentu će izgledati ovako: <div id=“zaglavlje”></div> Značenje jedinstvenosti za ID. To znači da ja ovo mogu još negdje pisati u kodu html-a ali se u browseru jednostavno neće vidjeti.

Stranica koju ćemo danas kreirati Z A G L A V L J E S A D R Ž A J P O D N O Ž J E ( F O O T E R )

Definisanje <div></div> taga u html-u Div tag predstavlja box-kutiju, prostor u kojem ćemo smjestiti tekst, slike, video, ili u kome ćemo napravit druge divove. Sam po sebi ništa ne znači, ali stvari se mijenjaju kad mu pridružimo CSS klasu ili ID. Prvo kreiramo u <body> tagu <div> za omotač stranice. U taj prostor ćemo staviti sve elemente stranice: zaglavlje (header), podnožje (footer), te sav sadržaj između toga.

Cascading Style Sheets