1 / 36

Fletet e Stiluara ne Kaskade (Cascading Style Sheets - CSS)

Fletet e Stiluara ne Kaskade (Cascading Style Sheets - CSS). Leksion 3. CSS & Javascript ne DHTML. DHTML- Dynamic HTML Fjala “dinamike” nenkupton veprim, levizje ose pergjigje ndaj perdoruesit.

jaimie
Télécharger la présentation

Fletet e Stiluara ne Kaskade (Cascading Style Sheets - 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. Fletet e Stiluara ne Kaskade(Cascading Style Sheets - CSS) Leksion 3

  2. CSS & Javascript ne DHTML • DHTML- Dynamic HTML • Fjala “dinamike” nenkupton veprim, levizje ose pergjigje ndaj perdoruesit. • Cascading Style Sheets (CSS) dhe JavaScript jane ato qe i japin dinamizmin HTML-se Dinamike (DHTML). Ato ju lejojne qe te formatoni, te zbukuroni dhe te poziciononi permbajtjen e dokumentit ne menyre preçize. Gjithashtu mund te krijoni dokumente qe ndryshojne vete ose ne pergjigje te nderveprimit te perdoruesit. • Mund te zbukuroni permbajtjen e dokumentit duke bere zgjedhje stilistike persa i perket ngjyres, madhesise, trashesise dhe llojit te shkrimit si dhe aspekte te tjera te tekstit.

  3. CSS & Javascript ne DHTML • Me ane te stileve mund te percaktojme menyren se si do te paraqiten elementet HTML. • Ne skedaret CSS mund te ruhen stile te jashtme per faqet HTML, gje qe na kursen shume pune, sepse ne kete rast nuk eshte e nevojshme qe te percaktohet stili per secilin element HTML, brenda dokumentit HTML. • Ne kete menyre i gjithe formatimi mund te ruhet i veçuar nga dokumenti HTML. • Fletet e stileve te jashtme na mundesojne qe te ndryshojme paraqitjen te gjitha faqeve te nje Web siti, vetem duke edituar nje skedar te vetem.

  4. CSS & Javascript ne DHTML Mundteshtoni stile CSS per permbajtjen e dokumentit HTML ne ketomenyra: • Inline - duke përdoruratributin style nëelementet HTML • Brendshëm (Internal) - duke përdorurelementin <style> nëseksionin <head> • Jashtëm (External) - duke përdorurnjëskedartëjashtëm CSS Mënyra më e preferuar për të shtuar CSS në HTML, është që të vendoset sintaksa CSS në një skedar të veçantë CSS.

  5. Stilet Inline • Njëstil inline mundtëpërdoretnëseduhettëaplikohetnjëstilunikvetëmnjëherënënjë element. • Përtëpërdorurstilet inline, përdorniatributin style nëtagunpërkatës. Atributi style mundtëpërmbajëcdo property CSS. <p style="color:blue;margin-left:20px;"> This is a paragraph. </p>

  6. Stilet e Brendeshme • Një stil i brendshem mund të përdoret në qoftë se një dokument i vetëm ka një stil unik. Stilet e brendshme janë përcaktuar në seksionin e <head> një faqe HTML, duke përdorur tagun <style>, si vijon: <head><style type="text/css">body {background-color:yellow;}p {color:blue;}</style></head>

  7. Stilet e Jashtme • Njëstil i jashtëmështë ideal kurstiliaplikohetnëshumëfaqe. Me njëfletëstileshtëjashtëm, jumundtëndryshonipamjen e njëfaqeje Web tëtërë duke ndryshuarvetemnjëskedar. Çdofaqeduhettëlidhet me stilet CSS duke përdorurtagun <link>. Tagu <link> vendosetbrendaseksionit <head>: <head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

  8. CSS • Per te krijuar nje Cascading Style Sheet, perdoret sintaksa e CSS per te percaktuar parametrat e nje stili duke specifikuar elementin e HTML-se, te cilit doni t’i jepni kete stil dhe brenda kllapave {}, listohen çiftet emer atributi dhe vlere • emri i atributit dhe vlera ndahen me “:” si psh: emer:vlere • me pas secili çift emer:vlere ndahet me nje “;” si psh: • { emer:vlere; } • {emer:vlere; emer:vlere; emer:vlere } shembuj: • { color:red; } • { text-align:left; float:right; } • { background-color:purple; margin:10pt; border-style:ridge; } • h2 { font-size:14pt; color:aqua; }

  9. Shembull <html> <head> <title> sample 201 - css example 1-1 </title> <style type="text/css"> <!-- h2 { font-size: 14pt; color: aqua; } --> </style> </head> <body> <p> style sheet use: <h2>this is a level-two heading that is aqua and sized at 14 points.</h2> notice that this text which is not inside the h2 tags is rendered with the default colors of the body tag. </p> </body> </html>

  10. CSS - Kujdes! • Eshte shume e rendesishme qe te perdorni sintaksen ne menyre korrekte. Kushtojini shume kujdes vendosjes se “:” dhe “;” ne vendin e duhur, sepse ne kete menyre browseri arrin t’i dalloje pjeset e tekstit te zakonshem dhe sintakses se CSS. • MOS vendosni VLEREN brenda thonjezave siç beni per atributet e HTML-se. • Emrat e veçorive te Fleteve te Stiluara jane case-sensitive.

  11. Elementi <style> • Ne elementin <style> deklarohet dhe percaktohet nje Flete e Stiluar (Style Sheet). Ai vendoset gjithmone te koka e dokumentit, ndermjet tageve <head> </head> • Atributi type eshte i domosdoshem per tagun <style>, dhe vlera default e ketij atributi eshte "text/CSS", e cila percakton nje Style Sheet ne sintaksen e Cascading Style Sheet. Ky atribut mund te marre edhe vleren type="text/JavaScript"per te krijuar nje Style Sheet duke perdorur sintaksen e JavaScript-it. • Nje fjale kyçe shume e perdorur eshte allqe perdoret kur deshironi te percaktoni te njejtin stil per te gjithe elementet e HTML-se njeheresh. Mund edhe te percaktoni nga nje stil per secilin element HTML, brenda tageve <style>, prandaj edhe quhet “Flete me stile”

  12. Elementi <style> Sintaksa: <style type="text/css“ | "text/JavaScript" src="url"> [ Element { PropertyName: Value; } ] [ Element.className { PropertyName: Value;} ] [ #IDname { PropertyName: Value; } ] [ Element Element ... { PropertyName: Value; } ] ... </style>

  13. Elementi <style> Komentet: • Ne sintaksen e CSS /* This is a comment. It can be on as many lines as you need. */ • Ne sintaksen e JavaScript : /* This is a comment. It can be on as many lines as you need. */ // This is a comment that can only be on one line • Ne HTML: <!-- This is a comment. -->

  14. Shembull <html><head> <title> sample 204 - css example 1-4 </title> <style type="text/css"> <!-- /* the margin order is: top right bottom left */ body { margin: 50px 20px 25px 72px; font-family: Helvetica, Times, Geneva; font-size: 12pt; font-style: plain; background-color: yellow; } h1 { font-family: Moonlight, Clarendon, Palatino, Helvetica; font-size: 24pt; text-align: center; font-style: bold; color:#8800cc; /* real purple */ } div { font-family: Clarendon, Palatino, Helvetica; font-size: 14pt; font-style: bold; color: green; text-indent: 72px; } --> </style> </head>

  15. Shembull <body> <h1>This is Sample 204</h1> <div> The Style for the Division Element is Clarendon Font that is bold, green and sized at 14 pt. As you can see above the center aligned H1 Element is in Moonlight Font with Clarendon, Palatino and Helvetica as the backup fonts. The size is 24 pt in bold purple. The BODY Element has Helvetica as the first font choice and is in 12 pt plain with a yellow background color. </div><br/><br/> <hr/> <div>Also notice the text-indent Property in the Style for the DIV Element is set to 72 pixels which makes the first line of text be indented by 1 inch each time a DIV Element occurs. We finally have easy Tabs. </div><br/><br/> <hr/> This last paragraph is outside of both the H1 and DIV Elements so it is covered by the BODY Element. Notice the margins set in the BODY Element. If you resize the window you can see the bottom margin. </body> </html>

  16. Shembull

  17. Veçoria { font-size: } { font-size: absolute|relative|length|percentage; } Kategorite e kesaj veçorie jane: • absoluteperdor nje nga keto fjale kyçe si nje madhesi fikse per shkrimin: xx-small, x-small, small, medium, large, x-large, xx-large Nuk lejon perdoruesin qe te ndryshoje madhesine e tekstit ne browser. Madhesia absolute nevojitet kur dihet madhesia fizike e outputit. • relativeperdor nje nga fjalet larger, smaller per te krijuar nje madhesi qe eshte relativisht me e madhe ose me e vogel se madhesia e shkrimit ne elementin prind. Lejon perdoruesin qe te ndryshoje madhesine e tekstit ne browser.

  18. Veçoria { font-size: } { font-size: absolute|relative|length|percentage; } • lengthnje numer qe pasohet nga shkurtimi i nje njesie matese. Keto shkurtime te njesive matese ne CSS jane: • px pixels • in inches • cm centimeters • mm millimeters • pt points • pc picas • em gjatesia e shkrimit • en gjysma e gjatesise se shkrimit • percentageeshte nje numer qe pasohet nga shenja “%”, qe krijon nje madhesi qe eshte relative ndaj madhesise se shkrimit ne elementin prind.

  19. Veçoria { font-size: } Ketu jepen shembuj te perdorimit te seciles nga keto kategori: • absolute { font-size: xx-large; } • relative { font-size: smaller; } • length { font-size: 24pt; } • percentage { font-size: 150%; }

  20. Veçoria { font-family: } { font-family: Helvetica, Times, TimesRoman, serif; } Nese emri i shkrimit perbehet nga dy ose me shume fjale qe kane hapesira ndermjet tyre, atehere duhet qe i gjithe emri te vendoset brenda thonjezave teke (‘ ’) ose dyshe (“”) si me poshte: { font-family: "Brush Script"; } • Sintaksa CSS: { font-family: fontName; } { font-family: fontName1, fontName2, fontNameN; }

  21. Veçoria { font-family: } • Veçoria font-family duhettepermbajedisaemrashkrimesh. • Nesebrowserinuk e suportonshkrimin e pare, aiprovontedytin, e keshtu me rradhe. • Vendosnishkriminqedoniteparin, dhe ne fund vendosninjefamiljetepergjithshmeshkrimesh, ne menyreqebrowseritezgjedhenjeshkrimtengjashemngafamilja e pergjithshme, nesenuk ka shkrimetetjera ne dispozicion

  22. Veçoria { font-weight: } Perdoret per te percaktuar trashesine e tekstit. Mund te perdoren nje fjale kyçe bold ose nje numer te plote nga 100 ne 900 (qe rriten me 100) ku sa me i madh numri, aq me i trashe eshte teksti (400 eshte vlera per tekstin normal kurse 700 per tekstin bold ): { font-weight:bolder; } { font-weight:lighter; } { font-weight:500; } Sintaksa CSS: { font-weight: normal|bold|bolder|lighter| 100|200|300|400|500|600|700|800|900; }

  23. Veçoria { font-style: } • Perdoret per ta bere tekstin me shkronja te pjerreta (italic ose oblique) ose per ta kthyer ne normal { font-style:normal; } { font-style:italic; } { font-style:oblique; } Sintaksa CSS: { font-style: normal | italic | oblique; } Oblique eshte shume i ngjashem me italic vetem se eshte me pak i suportuar

  24. Veçoria {text-decoration:} Perdoret per te zbukuruar tekstin me nje nga vlerat e meposhtme: underline, line-through, overline, blink, ose vleren default none si me poshte: { text-decoration: underline; } Sintaksa CSS: { text-decoration: none|underline|line-through|overline|blink; }

  25. Veçoria {text-transform:} Perdoret per ta transformuar tekstin ne nje nga menyrat e meposhtme: • capitalizeben qe shkronja e pare e çdo fjale te jete shkronje e madhe • uppercaseben qe i gjithe teksti te jete me shkronja te medha • lowercaseben qe i gjithe teksti te jete me shkronja te vogla • noneben qe teksti qe kthehet ne normal. Vlera default eshte none. { text-transform: uppercase; } Sintaksa CSS: { text-transform: capitalize|uppercase|lowercase|none; }

  26. Veçoria {text-align:} Perdoret per drejtimin horizontal tetekstit, duke perdorurfjaletkyçeleft, right, center, justify. Vlera default eshteleft. { text-align: right; } Sintaksa CSS: { text-align: left|right|center|justify; }

  27. Shembull <html> <head> <title> Sample 206 - CSS Example 1-6 </title> <style type="text/css"> <!-- h1 { text-align: center; line-height: 50pt; text-decoration: line-through; text-transform: uppercase; color: red; font-family: Clarendon, Palatino, Helvetica; font-size: 24pt; } div { text-align: right; line-height: 32pt; text-decoration: underline; text-transform: capitalize; color: blue; font-family: Palatino, Clarendon, Helvetica; font-size: 14pt; } --> </style> </head>

  28. Shembull <body> <h1>this is sample 206</h1> <div> This example focuses on demonstrating text-decoration, text-transform, text-align and line-height. </div> <br/><hr/> <div> Notice that the line-height parameter causes the space between the lines to be greater than normal leading in the div tags. The div Elements are text-aligned to the right, blue, underlined and the first letter of each word is capitalized. </div> <br/><hr/> <div> Also Notice that the text in the h1 Element is all in uppercase letters even though when it was typed in they were all in lowercase letters. </div> </body> </html>

  29. Klasat e CSS Duke percaktuar nje style tek koka e dokumentit, mund te krijoni nje klase stilesh, qe mund te perdoret per t’i caktuar stile te ndryshme, te njejtit element, si me poshte: • Fillimisht, percaktoni nje klase stili me emrin bigRed dhe bashkengjitjani ate elementit h3, duke perdorur piken (.) h3.bigRed { font-size: 30pt; color: red; } Sintaksa: Element.EmerKlase{Percaktimi}. • Me pas percaktoni nje klase tjeter h3.bigBlue { font-size: 48pt; color: blue; } Keshtu keni dy klasa stili qe mund te aplikohen mbi elementin h3, por jo njekohesisht. Mund te perdorni vetem nje stil per çdo perdorim te elementit. • Me pas ne seksionin body te dokumentit krijoni dy elemente h3: <h3 class="bigRed">This is Heading h3 with class bigRed. </h3> <h3 class="bigBlue">This is Heading h3 with class bigBlue. </h3>

  30. Shembull <head> <title>Sample 225 - Example 1-25 class of style</title> <style type="text/css"> <!-- h3 { font-size: 14pt; color: yellow; } h3.bigRed { font-size: 30pt; color: red; } h3.bigBlue { font-size: 48pt; color: blue; } --> </style> </head> <body bgcolor="black"> <h3>this is a regular h3 heading with style. </h3><hr/> <h3 class="bigRed">This is heading h3 with class bigred. </h3><hr/> <h3 class="bigBlue">This is heading h3 with class bigblue. </h3> </body> </html>

  31. Percaktimi i nje klase pa e bashkengjitur ne nje element te caktuar Mund te caktoni te njejten klase per me shume se nje element, ne dy menyra: 1. Percaktohet nje klase pa e bashkengjitur ne nje element te caktuar, ne menyre qe te kete perdorim me te gjere, .unAttached1 { color: blue; font-size: 22pt; } Me pas mund te caktoni nje stil nepermjet emrit te klases ne atributin class si me poshte: <h1 class="unAttached1"> The text to render </h1>

  32. Percaktimi i nje klase duke perdorur “all” 2. Nepermjet fjales kyçe all mund te percaktoni nje stil per te gjithe elementet njeheresh: all.myCoolStyle { color: purple; background-color: black; } Keshtu percaktohet nje klase stilesh qe mund te perdoret nga te gjithe elementet e dokumentit duke perdorur atributin class all.global { color:black; font-size:14pt; margin:2em; } • Kujdes: Vetem fakti qe keni perdorur all nuk do te thote qe nuk duhet te percaktoni stilin per atributin class per elementet qe ndodhen ne seksionin body . Kujtoni qe stilet me klasa trashegojne veçorite e stilit nga elemetet prinder te tyre.

  33. <html> <head> <title> sample 228 - example 1-28 class of style</title> <style type="text/css"> <!-- body { color: aqua; background-color: gray; margin: 2em; font-size: 14pt; font-family: Palatino, Clarendon, serif; text-indent: 40px; line-height: 125%; } h1.greenSpeak { color: green; background-color: lime; font-size: 24pt; font-family: Clarendon, serif; line-height: 125%; } h1.aquaSpeak { color: aqua; background-color: blue; font-size: 24pt; font-family: Blackoak, serif; line-height: 150%; } --> </style> </head>

  34. <body> <p> This example shows style inheritance from the parent BODY Element to the child Elements it contains. Notice that only the first two H1 Headings have a CLASS Style applied to them and all the other Elements inherit the style from the BODY Element. Also notice the amount of space between the lines of text in this paragraph and that it's 125% bigger than the size of the font. Regarding the text-indent Property, you should remember that by definition only the first line of the first Element will be indented which in this case is this paragraph because it's the first item to occur in the BODY Element. </p> <h1 class="greenSpeak"> This is Sample 228<br/> and has CLASS greenSpeak </h1> <h1 class="aquaSpeak"> This has CLASS aquaSpeak. </h1> <h1> This Heading has style inherited from the BODY element. </h1> <a href="Sample227.html">This takes you to the last Sample 227 and also has style inherited from the BODY Element.</a> </body> </html>

  35. Tutoriale Tutoriale dhe referenca per CSS, XHTML, Javascript, etj. i gjeni tek http://www.w3schools.com

More Related