Standardizacija in kakovost informacijskih sistemov

1. Standardizacija in kakovost informacijskih sistemov CSS (Cascading Style Sheets)

2. CSS • Površno: • CSS definira, kako naj se prikaže, kar je označeno kot H1, H2, B, UL (LI), CODE... • Ideja: • ločiti vsebino strani od oblike • avtomatizirati oblikovanje - pišemo le osnovni HTML, oznake (tagi) določajo bolj pomen (skoraj kot v XML) kot obliko (klasični HTML) • centralizirati definicijo oblike • omogočiti več oblikovanja, kot ga premore osnovni HTML • Osnovna oblika definicij: selektor { lastnosti } selektor { lastnosti } H1 { font-size: 24pt; font-family: Verdana}

3. Dobre in slabe lastnosti CSS • močno poenostavijo (centralizirajo) oblikovanje spletnih strani • standard CSS je preprost in se ga naučimo v pol ure (ali na enem predavanju SKIS) • CSS ni XML (komu mar?) • sestavljamo ga ročno, torej je bolj prijetno, da ni XML • z branjem se muči browser, torej so to sprogramirali drugi, ne mi • med brskalniki obstajajo velike razlike glede tega, kaj podpirajo in kako • najboljši Safari (MacOS), Prince (XML2PDF), Opera (Acid2 od marca 2006) • Firefox dober in napreduje • IE 6.0 prepričljivo najslabši (čakamo 7.0, a MS pravi, da jim združljivost s standardom ni cilj) • standard oblikuje standardizacijska organizacija (W3C) in ne razvijalci brskalnikov • to zavira Microsoftovo vsiljevanje svojega standarda • vendar potencialno dela standard nepraktičen (kako sicer razložiti tolikšne odklone in nezdružljivost)

4. Kam postavimo definicije stilov? • V datoteko, ki jo v navedemo v glavi HTML <link rel="stylesheet" href="recept1.css“type="text/css" > Tako je preprosto določati in spreminjati obliko vseh strani hkrati. • V glavo HTML <style type=“text/css”> h2 { font-weight: bold; } </style> Primerno kvečjemu v kombinaciji s prvim načinom, a samo za strani, ki imajo kake “posebnosti”. V splošnem se je temu modro izogibati. Tako tipično delajo programi za telebansko (WYSIWIG) postavljanje strani • Neposredno v elemente <h2 style=“font-weight: bold”> Smiselno le v posebnih primerih. Tudi temu se izognemo, če se le da.

5. Selektorji: oznake, razredi, id-ji • Oznake (h1, h2, b ...) • Razredi (class) – ni vsak h1 enak drugim h1, vsak ul drugim ul Imejmo posebenulza sestavine, takole <ul class=“sestavine> <li>manjšo èebulo</li> <li>2-3 manjše buèke</li> </ul> V stilu potem definiramo ul.sestavine { background-color: #ff6600; } in to se nanaša na ul z razredom “sestavine” Če pa bi rekli.sestavine { background-color: #ff6600; } bi se to nanašalo tudi na, denimo, <H2 class=“sestavine”>,če bi ga uporabili • Id-ji • kot razredi, le da ima določen ID le en element na strani • za uporabo IDjev ni posebnega razloga

6. Selektorji: sestavljeni selektorji h1 strong { font-family: Courier; } strong znotraj h1 bo izpisan v pisavi Courier, npr. <h1>Tole je zares <strong>pomembno</strong></h1> ul.sestavine li { background-color: #ff6600; } To se nanaša na vse li znotraj ul v razredu sestavine, npr. <ul class=“sestavine”> <li><li>manjšo èebulo</li> <li>2-3 manjše buèke</li> </ul>

7. Selektorji: psevdo-razredi pri povezavah a:link, a:visited, a:hover, a:active Takole pravi glavni css strani www.ailab.si: A:link { color: #07009A; text-decoration: none; } A:visited { color: #07009A; text-decoration: none; } A:hover { text-decoration: underline; }

8. Selektorji: psevdo-elementi • :first-line, :first-letter p:first-letter { font-size: 30pt } p:first-line { font-weight: bold}

9. Selektorji: psevdo-elementi • :before, :after • precej neuporabni, ker brskalniki ne podpirajo generiranja vsebin

10. Selektorji: direktni nasledniki • Podobno kot sestavljeni selektorji (“strong znotraj H1”), a z več kontrole h1 > strong izbere strong le, če je neposredno znotraj h1, npr. <h1>Tole je strong>pomembno</strong></h1> ne pa tudi, če je vmes še kaj <h1>Tole je <em><strong> pomembno</strong></em></h1> • Te selektorji brskalniki slabo podpirajo.

11. Selektorji: prvi otroci ul.sestavine li:first-child { font-weight: bold } Prviliznotrajuliz razredasestavinebo odebeljen. li:first-child { font-weight: bold } Vsak prvi element kateregakoli seznama bo odebeljen... • Tudi ta selektor je slabo podprt (v FireFoxu deluje, v IE ne)

12. Selektorji: sosednost ol + p {} Ta selektor se nanaša na odstavek (p), ki direktno sledi oštevilčenemu seznamu (ol). Koristno za nastavljanje razmikov.

13. Selektorji: povzetek • Oznake • Razredi in IDji • Psevdo-razredi povezav • Psevdo-elementi • Direktni nasledniki • Prvi otroci • Sosedne oznake • Sestavljeni selektorji (kombinacije vsega s tega seznama)

14. Lastnosti • Lastnosti imajo obliko lastnost: vrednost font-face: Verdana • Vrednost je po potrebi zaprta v narekovaje font-face: “Times New Roman” • Lastnosti ločimo s podpičji font-face: Verdana; font-size: 12pt in jih smemo pisati v več vrstic

15. Lastnosti: oblika besedila • barva: font-color font-color: #00ff00 font-color: rgb(0, 255, 0) font-color: green • teža: font-weight font-weight: normal /* bold, lighter, bolder */ font-weight: 800 • normal pomeni težo 400, možne vrednosti so med 100 in 900 • bolder je 100 več, lighter je 100 manj • brskalnik lahko različne teže podpira ali pa tudi ne

16. Lastnosti: oblika besedila • Pisava: font-family • Lahko naštejemo več možnih pisav (ločimo jih z vejico) in brskalnik bo uporabil prvo pisavo, ki jo pozna • Različica: font-variant • normal ali small-caps • Slog: font-style • normal ali italic • Dekoracija: font-decoration • none, underline, overline, line-through, blink

17. Lastnosti: razporeditev besedila • letter-spacing • word-spacing • line-height • vertical-align • text-indent • text-align • direction

18. Lastnosti: ozadje • background-color (kot prej) • background-image (url slike) • background-attachment (fixed, scroll) • background-repeat (repeat, repeat-x, repeat-y, no-repeat) • background-position

19. Lastnosti: robovi • Nastavljamo lahko posamezne lastnosti • border-width (thin, medium, thickali širina (v pikslih)) • border-color • border-style (none, dotted, dashed, solid, double, groove, ridge, inset, outset) • Ali vse tri hkrati, npr border (thin red dotted) • Gornje lastnosti se nanašajo na vse robove, lahko pa jih nastavljamo tudi za posamezen rob • border-top-width, border-right-width, border-bottom-width, border-left-width • border-top, border-right, border-bottom, border-left

20. Lastnosti: odmiki in dimenzije • Spet nastavimo vse odmike hkrati • margin (odmik od sosednih elementa) • padding (razdalja med robom elementa in vsebino) • Ali vsakega posebej • margin-left, margin-right, margin-top,margin-bottom • padding-left, padding-right, padding-top,padding-bottom • Dimenzije: • width, height • min-width, max-width, min-height, max-height

21. Lastnosti: postavitev • Štirje možni načini postavljanja • statično: tako so elementi postavljeni, če se v to ne vtikamo • absolutno: kje naj bo element glede na očeta • fiksno: glede na okno • relativno: glede na statično (ne glede na očeta!) • z-index določa, kateri element je “nad” katerim (torej viden) • ... • Nasvet: pusti pri miru, če se le da!

22. Koristne povezave • Za vse potrebe zadovoljiva literatura o CSS: • http://www.westciv.com/style_master/house/tutorials/ • Vsakega malo, ničesar res dovolj: • http://www.w3schools.com • Test skladnosti brskalnika s CSS: • http://www.webstandards.org/files/acid2/test.htm