Kurs: Core Web Application Technologies
Modul: Kontrolisanje izgleda veb aplikacije
Autor: Marko Stojićević
Naziv jedinice: Primena stilova i tema
Materijali vezani uz ovu lekciju:
-
Test primena stilova i tema -
Primena stilova i tema (PDF dokument)
Cascading Style Sheets (CSS)
CSS je skup specifikacija (pravila) koje omogućavaju kontrolu nad prikazom elemenata veb strane. Najjednostavniji način je ubacivanje pravila za prikaz unutar glavnog dela strane (zaglavlja) tj. tzv. ubacivanje Stylesheet-a. Pravilo unutar stila je instrukacija za pozicioniranje ili formatiranje. U primeru unutar zaglavlja strane ubačen je css što je specificirano Tag-om <style type="text/css">. Unutar stila definisan je stil za zaglavlje h1 i stil za paragraf.
<head runat="server">
<title>Ubaceni Cascading Style Sheet (CSS)</title>
<style type="text/css">
h1
{
color:blue; font-size:40px; font-family:verdana
}
p
{
color:white; background:green; font-family:helvetica;
text-indent:2cm
}
</style>
</head>
Dodavanje CSS stilova na veb stranu
Postoji tri osnovna načina dodavanja stilova veb strani: ubacivanje Style Sheet-a (formatiranje na nivou strane) tj. <style></style> elementa unutar zaglavlja veb strane kao u primeru, dodavanje linka na eksterni Style Sheet tzv. globalno formatiranje i dodavanje Inline stilova tj. formatiranje za konkretan HTML element.
Dodavanje linka na eksterni CSS fajl
U okviru zaglavlja dodaje se link na eksterni fajl koji ima ekstenziju css. CSS fajl se može kreirati grafički u Visual Web Designer-u. Desni klik na ikonicu veb sajta u Solution Explorer-u pa se odabere opcija Add New Item. Od ponuđenih templejta odabere se Stylesheet. Klikom na ikonicu Build Style... mogu se podesiti osobine stila. Kao svojstvo Style Sheet veb strane (document elementa) odabere se kreirani css fajl čime se automatski kreira referenca na taj fajl odnosno kreira se <link…> Tag kao u primeru.
<head runat="server">
<title>Linked Cascading Style Sheet (CSS)</title>
<link href="stilovi.css" rel="stylesheet" type="text/css" />
</head>
Na gornjoj slici prikazan je prozor VS2008 okruženje u kome je kao templejt odabran StyleSheet. Odabirom ovakvog šablona kreira se css fajl sa definisanim Body Tag-om, za koji treba definisati formatiranje. Editor za kreiranje css fajla prikazan je na donjoj slici.
Dodavanje css fajla u VS2008 projekat:
Editor za kreiranje CSS fajla:
Dodavanje Inline stilova
Inline stil je stil koji se primenjuje na određeni HTML element odnosno na određenu kontrolu. Ukoliko postoji definisano više stilova u veb sajtu tada najveći prioritet ima Inline, zatim formatiranje na nivou strane i na kraju dolazi globalno formatiranje. Na slajdu je prikazan Inline stil primenjen na paragraf.
<p style="background-color: #ffff66; font-style: italic; color: blue;">
Ovo je zuti paragraf
<p>
Korišćenje klasa stilova
Klase stilova omogućavaju da se primeni isto formatiranje na različite HTML elemente. Klasa stila kreira se unutar eksternog css fajla ili unutar ubačenog stila. Naziv klase treba da počinje sa tačkom. Stil koji je definisan klasom, implementira se za određeni HTML element primenom atributa CssClass.
.mojaKlasa
{
color: white;
font-family: Georgia;
background-color: Lime;
}
<asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 30px; POSITION: absolute; TOP: 66px" runat="server“ Width="67px" CssClass=" mojaKlasa ">Proba
</asp:Label>
<asp:TextBox id="TextBox1" style="Z-INDEX: 102; LEFT: 28px; POSITION: absolute; TOP: 132px" runat="server“CssClass=" mojaKlasa ">Proba
</asp:TextBox>
Kreiranje klasa stilova
Klase stilova unutar eksternog css fajla mogu se kreirati grafički primenom StyleBuilder-a. Definiše se naziv klase stila i klikne unutar vitičastih zagrada gde se definiše stil, a zatim se klikne na ikonicu Build Style.. Otvara Style Builder u kome se mogu definisati karakteristike stila, vrsta i veličina fonta, orjentacija teksta, boja pozadine i sl. U primeru na slajdu definisane su dve klase stilova critical i normal između Tag-ova <style> i </style> unutar glavne sekcije HTML dokumenta. Stilovi su zatim primenjeni na paragrafe.
<style type="text/css">
.critical {color:red; font-size:18pt; font-weight:bold}
.normal {color:black; font-size:12 pt}
</style>
<p class="critical"> This is red, 18 point, bold face </p>
<p class="normal"> This is black 12 point text </p>
Teme
Omogućavaju da se na jednostavan način definiše izgled kontrola i stranica na veb sajtu. Smešta se u
App_Themes folderu koji se nalazi unutar
Root direktorijuma aplikacije. Pojam teme je blisko povezan sa pojmom teme u
Windows XP okruženju. Tema se primenjuje podešavanjem odgovarajućeg svojstva. Tema se sastoji od: CSS fajlova, Skin fajlova koji sadrže definicije kontrola koje se mogu naći na veb strani i slika.
Pridruživanje teme veb strani
Postavlja se Theme svojstvo odgovarajućeg document objekta na odgovarajuću temu čime se dodaje odgovarajući atribut Page direktivi:
<%@ Page Language="C#" Theme="ExampleTheme" %>.
Definisanje teme za sve strane veb sajta može se izvršiti u fajlu web.config:
<system.web>
<pages theme="ExampleTheme"/>
</system.web>
Onemogućavanje teme za kontrolu vrši se postavljanjem svojstva EnableTheming na vrednost false.
Imenovani skinovi unutar teme
Skin fajl sadrži definicije kontrola koje se mogu naći u veb sajtu i na koje je primenjeno odgovarajuće formatiranje. Kada se doda kontrola na veb stranu koja implementira temu, ona će preuzeti formatiranje iz skin fajla. Moguće je kreirati više definicija jedne kontrole unutar skin fajla. U primeru na slajdu unutar skin fajla dva puta je definisana labela, podrazumevana labela ne sadrži SkinID atribut. Druga Labela ima SkinID atribut postavljen na vrednost "Blue".
<asp:label runat="server" font-bold="true" forecolor="orange" />
<asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" />
Kada se instancira nova kontrola, ukoliko se ne naznači, koristi se podrazumevani skin. U protivnom, potrebno je naznačiti o kom se skinu radi.
<asp:Label ID="Label2" runat="server" Text="Hello 2"
SkinID="Blue" /><br />
Tema može sadržati više skin fajlova. Ne sme se ponoviti definicija iste kontrole unutar dva skin fajla, oni se moraju razlikovati bar po SkinID atributu.
Dodavanje CSS fajlova i slika u temu
Tema može sadržati jedan ili više css fajlova koji se referenciraju korišćenjem link elementa.
<link href="App_Themes/MojaTema/StyleSheet.css" rel="stylesheet" type="text/css" />
Unutar skin fajla može se definisati <asp:Image …> Tag.
<asp:Image SkinID="Warning" ImageUrl="Images/Warning.gif" runat="server"/>
Može se definisati i poseban skin fajl koji će sadržati definiciju ovog elementa. Uobičajeno je da se slike smeštaju u poseban folder.
<asp:Image ID="Image1" SkinID="Warning" runat="server" />
