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. 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.

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.

Mund te shtoni stile CSS per permbajtjen e dokumentit HTML ne keto menyra: Inline - duke përdorur atributin style në elementet HTML Brendshëm (Internal) - duke përdorur elementin <style> në seksionin <head> Jashtëm (External) - duke përdorur një skedar të 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.

Stilet Inline Një stil inline mund të përdoret nëse duhet të aplikohet një stil unik vetëm një herë në një element. Për të përdorur stilet inline, përdorni atributin style në tagun përkatës. Atributi style mund të përmbajë cdo property CSS. <p style="color:blue;margin-left:20px;"> This is a paragraph. </p>

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>

Stilet e Jashtme Një stil i jashtëm është ideal kur stili aplikohet në shumë faqe. Me një fletë stilesh të jashtëm, ju mund të ndryshoni pamjen e një faqeje Web të tërë duke ndryshuar vetem një skedar. Çdo faqe duhet të lidhet me stilet CSS duke përdorur tagun <link>. Tagu <link> vendoset brenda seksionit <head>: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

CSS shembuj: { color:red; } { text-align:left; float:right; }
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; }

Shembull <html> <head>
<title> sample css example 1-1 </title> <style type="text/css">  </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>

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.

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 all qe 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”

Sintaksa: <style type="text/css“ | "text/JavaScript" src="url"> [ Element { PropertyName: Value; } ] [ Element.className { PropertyName: Value;} ] [ #IDname { PropertyName: Value; } ] [ Element Element ... { PropertyName: Value; } ] ... </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 that can only be on one line Ne HTML:

Shembull <html><head>
<title> sample css example 1-4 </title> <style type="text/css">  </style> </head> Shembull

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. 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>

Shembull

Veçoria { font-size: } { font-size: absolute|relative|length|percentage; } Kategorite e kesaj veçorie jane: absolute perdor 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. relative perdor 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.

Veçoria { font-size: } { font-size: absolute|relative|length|percentage; } length nje 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 percentage eshte nje numer qe pasohet nga shenja “%”, qe krijon nje madhesi qe eshte relative ndaj madhesise se shkrimit ne elementin prind.

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%; }

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; }

Veçoria { font-family: }
Veçoria font-family duhet te permbaje disa emra shkrimesh. Nese browseri nuk e suporton shkrimin e pare, ai provon te dytin, e keshtu me rradhe. Vendosni shkrimin qe doni te parin, dhe ne fund vendosni nje familje te pergjithshme shkrimesh, ne menyre qe browseri te zgjedhe nje shkrim te ngjashem nga familja e pergjithshme, nese nuk ka shkrime te tjera ne dispozicion Familja e pergjithshme Familja e shkrimit Pershkrimi Serif Times New Roman Georgia Shkrimet Serif kane vija te vogla ne fundet e disa karaktereve Sans-serif Arial Verdana "Sans" dmth “pa” – keto shkrime nuk i kane vijat e vogla ne fund te karaktereve Monospace Courier New Lucida Console Te gjithe karakteret monospace kane te njejten gjeresi

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; }

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

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; }

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

Veçoria {text-align:}
Perdoret per drejtimin horizontal te tekstit, duke perdorur fjalet kyçe left, right, center, justify. Vlera default eshte left. { text-align: right; } Sintaksa CSS: { text-align: left|right|center|justify; }

Shembull <html> <head>
<title> Sample CSS Example 1-6 </title> <style type="text/css">  </style> </head> Shembull

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. </body> </html>

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>

Shembull <head>
<title>Sample Example 1-25 class of style</title> <style type="text/css">  </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>

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>

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.

<html> <head> <title> sample example 1-28 class of style</title> <style type="text/css">  </style> </head>

<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>

Tutoriale Tutoriale dhe referenca per CSS, XHTML, Javascript, etj. i gjeni tek

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

Similar presentations

Presentation on theme: "Fletet e Stiluara ne Kaskade (Cascading Style Sheets - CSS)"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

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

Similar presentations

Presentation on theme: "Fletet e Stiluara ne Kaskade (Cascading Style Sheets - CSS)"— Presentation transcript:

Similar presentations

About project

Feedback