1 / 102

Kaj je CSS?

Kaj je CSS?. CSS osnova za C ascading S tyle S heets Slogi definirajo kako prikazati HTML elemente Slogi so dodani na HTML 4.0 s katerimi rešujemo posamezne probleme Z CSS definiramo izgled internetne strani Style Sheets Zunanji iz gled strani je shranjen v CSS datoteki.

naasir
Download Presentation

Kaj je CSS?

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Kaj je CSS? • CSS osnova za CascadingStyleSheets • Slogi definirajo kako prikazati HTML elemente • Slogi so dodani na HTML 4.0 s katerimi rešujemo posamezne probleme • Z CSS definiramo izgled internetne strani StyleSheets • Zunanji iz gled strani je shranjen v CSS datoteki

  2. Primeri dokumenta po slogih

  3. Primer dokumenta po slogu 2

  4. Primer dokumenta po slogu 3

  5. Primerjava HTML kode in CSS kode

  6. Primerjava kode v praksi

  7. KAJ SO SLOGOVNE PREDLOGE Slogovna predloga (ang. CascadingStyleSheets - CSS) je mehanizem, ki pove spletnemu brskalniku kako naj prikaže HTML dokument. CSS struktuira vsebino HTML dokumenta in ji da želeno obliko.

  8. Zakaj UPORABIT CSS Če ste pred nekaj leti izdelovali spletne strani, ste uporabljali značke <font> in druge, da ste lahko oblikovali spletne strani. Te so vam omogočile, da so dokumenti izgledali tako, kot ste si želeli. Če pa ste se kasneje odločili zamenjati izgled vseh strani v spletišču (četudi samo barvo ozadja), ste morali popraviti vsako stran posebej.

  9. Kako izgleda CSS predloga? h2 { font-family: Arial; font-style: italic; color: green } • Najprej je napisana lastnost (npr. font-style ), nato dvopičje, za njim pa vrednost (npr. italic ). V primeru, da je napisanih več pravil, jih je potrebno med seboj ločiti s podpičji. • V zgornjem primeru font-style: italic določa poševno besedilo (nekoč značka <i> v HTML), font-family: Arial vrsto pisave in color: green zeleno barvo pisave.

  10. Sintaksa CSS • Pravilo CSS ima dva glavna dela: • Izbirnik običajno HTML kot element določanja sloga. • Vsaka del je sestavljen iz posameznih vrednosti. • Osnoven je slog kot atribut, ki ga želite spremeniti. Vsaka lastnost ima vrednost.

  11. Primer CSS • Primer CSS • CSS ukaz se vedno konča s podpičjem, in nastavitvijo, ukaz so zaključene z zavitimi oklepaji: • p (Barva: rdeča; text-align: center;)

  12. CSS primer

  13. CSS za ozadje dokumenta

  14. Možnosti besedila

  15. Barve texta

  16. Direction oz. izbiranje smeri teka texta

  17. Letter-spacing

  18. Text-align

  19. Dekoracija texta

  20. Text-indent

  21. Text-transform

  22. Unicode-bidi

  23. White-space

  24. Word-spacing

  25. Fonti

  26. Primer večih si lastnosti • Skupna lastnost font • Skupna lastnost font omogoča hkratno spreminjanje večjega števila lastnosti pisav. Ta lastnost nam omogoča, da enostavneje in krajše opišemo lastnosti nekega elementa. Na primer, če želimo odstavku (<p>) spremeniti več lastnosti pisave to enostavneje storimo z lastnostjo font. • Primer • a { font: italicsmall-caps 900 11px Verdana } • → Primer skupne lastnosti font

  27. Ozadja

  28. Primeri ozadij • Primeri • body { background: blue } p { background: url("image_name.gif") gray 50% repeatfixed } #druga { url(/ozadje.gif) fixed no-repeat top center} #druga { url(/ozadje.gif) fixed no-repeat top center} pomeni isto: • #druga { background-image: url(/ozadje.gif); background-attachment: fixed; background-repeat: no-repeat; background-position: top center }

  29. Seznami

  30. Izdelava seznama

  31. Izdelava plasti • Plast ustvarimo tako, da uporabimo individualno imenovan slog in vanj vključimo lastnosti za položaj, ki je določen z relativno ali absolutno vrednostjo. • Pravila za slog lahko ustvarimo v glavi dokumenta ali v ločeni datoteki. Najprej poimenujemo PLAST. To ime je v slogni desno od simbola #. Nato se določijo lastnosti, ki bo imela plast. Uporabi se običajna sintaksa, ki je potrebna za izdelavo slognih predlog:

  32. Plasti v praksi • #prva_PLAST { position:relative; color:blue; font-size:50pt; } #druga_PLAST { position:absolute; left:20px; top:200px; color:red; font-size:20pt; } Nato je potrebno vključiti plast v telo dokumenta z blokovnim elementom, ki ima atribut id (običajno je to div) tako, da bo plast vstavljena in bodo njene lastnosti vsebovane v kontekstu tega elementa, npr.: • <div id="prva_PLAST"> To je test. </div><iv id="druga_PLAST"> In še en test. </div>

  33. VIZUALNI MODEL OBLIKOVANJA Pot teh prostih mest je odvisna od: • dimenzije prostora in tipa • pozicije sheme (normalna velikost ali apsolutna velikost) • med elementom in drevesno strukturo • zunanjosti informacije (vidno velikost, dimenzijo slike, ipd.)

  34. Anonimni blok

  35. Obrobe

  36. Oblike elementov

  37. Z-index

  38. vertical-align • Določa navpično poravnavo elementov znotraj elementa, v katerem je vsebovan. • vrednost opis NN IE CSS dolžina Vrednost poviša ali zniža element zgoraj ali spodaj osnovne linije (baseline) za določeno vrednost. Negativne vrednosti se poravnajo pod osnovno linijo (baseline), pozitivne pa nad njo. Lahko uporabimo katerokoli od sedmih enot. 6 4 2 odstotki Vrednost je določena z višino linije. Linija bottom (baseline) je na 0% top pa na 100%. Odstotki so lahko pozitivni ali negativni in lahko presežejo vrednost 100%. Negativne vrednosti se poravnajo pod osnovno linijo (baseline), pozitivne pa nad njo. 6 4 2 baseline Osnovna vrednost je že privzeta vrednost, ta poravna tekst na baseline linijo (bottom

  39. Absolutni in relativni požaj

  40. Kaj je PHP? • PHP je kratica za PHP: HypertextPreprocessor • PHP je skriptni jezik na strani strežnika, kot so ASP • PHP skripte se izvajajo na strežniku • PHP podpira številne baze podatkov (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, itd) • PHP je open source programske opreme • PHP je brezplačno prenesete in uporabo

  41. Kaj je PHP File? • PHP datoteke lahko vsebujejo besedilo, HTML oznake in skripte • PHP datoteke se vrnejo v brskalniku kot golo HTML • PHP datoteke imajo končnico datoteke v ". Php", ". Php3", ali ". Phtml"

  42. Značilnosti PHP-ja PHP je skriptni, interpreterski jezik. V nasprotju z običajno HTML stranjo, PHP strežnik skripte ne pošlje neposredno brskalniku, ampak jo pred tem prevede pogon PHP in nato pošlje brskalniku rezultat. PHP se izvaja na spletnem strežniku in ne tako kot CSS ali JavaScript, ki se izvajata na strani uporabnika. Ena od najboljših lastnosti PHP-ja je tudi ta, da je enostaven za učenje in da je neodvisen od okolja, tako da ista koda deluje v Windows-ih, OS X-u ali Linux-u.  

  43. Vsak ukaz pove PHP pogonu, da naj izvede želeno akcijo. Posamezne skupine ukazov ločimo s podpičjem na način:<?phpnaredi to;nato nekaj drugega;na koncu to;?>

  44. Kaj potrebujete? • Vendar pa, če vaš strežnik ne podpira PHP, morate namestiti PHP. • Tukaj je link za dober tutorski s PHP.net o tem, kako umestiti PHP5: http://www.php.net/manual/en/install.php • Download PHP • Download PHP brezplačno tukaj: http://www.php.net/downloads.php • DownloadMySQLDatabase • DownloadMySQL brezplačno tukaj: http://www.mysql.com/downloads/index.html • DownloadApache Server • DownloadApache brezplačno tukaj: http://httpd.apache.org/download.cgi

  45. PHP je Ohlapno natipkan jezik • V PHP, spremenljivke ni treba razglasiti pred dodajanjem vrednost. • V zgornjem primeru, vidite, da vam ni treba povedati, PHP, ki podatkovni tip spremenljivke. • PHP samodejno pretvori spremenljivko na pravo vrsto podatkov, glede na njegovo vrednost. • V močno tipizira programski jezik, boste morali prijaviti (opredelite) obliko in ime spremenljivke pred njegovo uporabo. • V PHP, se spremenljivi prijavljeni samodejno, ko ga uporabljate

  46. StringVariables in PHP • String spremenljivke se uporabljajo za vrednosti, ki vsebujejo znake. • V tem poglavju se bomo pogled na najbolj pogostih funkcij in operaterji uporabljajo za manipulacijo tetiva v PHP. • Potem ko smo ustvarili niz smo lahko manipulirajo. Niz se lahko uporabi neposredno na funkcijo ali se lahko shrani v spremenljivko. • Spodaj, scenarij PHP prenese besedilo "HelloWorld" za niz spremenljivko imenovano $ txt: • <? Php$ Txt = "HelloWorld";echo $ txt;?>

  47. Komentiranje kode Najbolj pogosta metoda dodajanja enovrstičnega komentarja je ta, da spredaj dodaš dve poševnici. Vse, kar se nahaja desno od dveh desnih poševnic, PHP pogon prezre:$nekaj = 2007;    //  to je komentarNamesto dveh poševnic se lahko uporabi tudi znak za lojtro (#). Ker ta znak zelo izstopa, če jih je napisanih več skupaj, se uporablja za označitev različnih delov daljše skripte, na način:######### Uvod  #########Za komentiranje večih vrstic se uporabljata znaka /* in */./* To je komentarčez več vrstic.*/

  48. Sporočila o napakah Struktura tipičnega sporočila o napaki je naslednja:-    resnost napake,-    kaj je šlo narobe in-    kje je šlo nekaj narobe.Napaka leži pred vrstico, v kateri je PHP odkril problem. Sporočila o napakah vedno dodajo PHP-jevim elementom, ki so izpisani v sporočilu o napaki, predpono T_.

  49. Napake Obstajajo štiri glavne kategorije napak:-    usodna napaka (ang. fatalerror): XHTML izhod pred to napako bo prikazan, toda ko do napake pride, se izvajanje skripte ustavi. Usodna napaka je ponavadi posledica navezovanja na neobstoječo datoteko ali funkcijo.-    napaka v razčlenitvi (ang. parseerror): prišlo je do napake v kodi, kot je npr. nezaključen narekovaj ali manjkajoče podpičje. Tako kot pri usodni napaki, se tudi tu skripta ustavi in ne dovoli izpis XHTML-ja.

More Related