File

Download Report

Transcript File 

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.
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.
CSS & Javascript ne DHTML
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
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 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>
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 casesensitive.
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”
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>
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. -->
<html><head>
<title> sample 204 - css example 1-4 </title>
Shembull <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>
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>
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
Serif
Sans-serif
Monospace
Familja e shkrimit
Pershkrimi
Times New Roman
Georgia
Arial
Verdana
Shkrimet Serif kane vija te vogla
ne fundet e disa karaktereve
"Sans" dmth “pa” – keto shkrime
nuk i kane vijat e vogla ne fund
te karaktereve
Te gjithe karakteret monospace
kane te njejten gjeresi
Courier New
Lucida Console
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|linethrough|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 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>
Shembull
<body>
<h1>this is sample 206</h1>
<div> This example focuses on demonstrating textdecoration, text-transform, text-align and lineheight.
</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>
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 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>
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 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>
<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
http://www.w3schools.com