Korrikula e Trajnimit
-
Hyrje në HTMLLeksioni1.1
-
Tekstet dhe ListatLeksioni1.2
-
Linqet dhe ImazhetLeksioni1.3
-
Detyra për ushtrime – Pjesa ILeksioni1.4
-
Tabelat dhe FormatLeksioni1.5
-
Tagje dhe funksionalitete tjeraLeksioni1.6
-
Video dhe AudioLeksioni1.7
-
Detyra për ushtrime – Pjesa IILeksioni1.8
-
Kuizi – HTMLLeksioni1.9
-
Hyrje në CSSLeksioni2.1
-
Prapavija dhe veçoritë për teksteLeksioni2.2
-
Hapësirat, kufizimet dhe dimensionetLeksioni2.3
-
Detyra për ushtrime – Pjesa ILeksioni2.4
-
Linqe, Lista, Tabela dhe FormaLeksioni2.5
-
Pseudo class | elementet , float dhe pozicionimiLeksioni2.6
-
Detyra për ushtrime – Pjesa IILeksioni2.7
HTML 9
CSS 7
HTML & CSS Projekti 1
Pseudo class | elementet , float dhe pozicionimi
Psedudo class & element
Pseudo-classes dhe Pseudo-elements – përdoren për me ju dhënë efekte specifike disa selektorëve.
CSS pseudo-element përdorët për të dhënë stil pjesëve specifike të elementit. Sintaksa për pseudo-elemets: slector:pseudo-element{property:value;}
P.sh. p::first-letter{color:red} – ndryshimi i shkronjës së parë, h1::selection{background-colod:red; color:#fff;}
| Selektori | Shembulli | Përshkrimi |
| ::after | p::after | Vendos diçka pas përmbajtjes se <p> elementit |
| ::before | p::before | Vendos diçka para përmbajtjes se <p> elementit |
| ::first-letter | p::first-letter | Apliko stil në shkronjën e parë të <p> elementit |
| ::first-line | p::first-line | Apliko stil në rreshtin e parë të <p> elementit |
| ::selection | p::selection | Apliko stil në pjesën e zgjedhur të <p> elementit |
CSS pseudo-class përdorët për të definuar stil për një gjendje speciale të elementit. Sintaksa për pseudo-elemets: slector:pseudo-element{property:value;}
P.sh. linku i ka disa gjendje fillestare a:link {color:#FF0000;}, gjendje pasi te klikohet linku a:visited {color:#FF0000;}, gjendja kur është aktiv a:active{color:#FF0000;} dhe gjendja ku e kalojmë mausin mbi a:hover{color:#FF0000;}.
| Selektori | Shembulli | Përshkrimi |
| :active | a:active | Zgjedh linqet aktive the active link |
| :checked | input:checked | Zgjedh secilin <input> që është i klikuar |
| :disabled | input:disabled | Selects every disabled <input> element |
| :empty | p:empty | Selects every <p> element that has no children |
| :enabled | input:enabled | Selects every enabled <input> element |
| :first-child | p:first-child | Selects every <p> elements that is the first child of its parent |
| :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
| :focus | input:focus | Selects the <input> element that has focus |
| :hover | a:hover | Selects links on mouse over |
| :in-range | input:in-range | Selects <input> elements with a value within a specified range |
| :invalid | input:invalid | Selects all <input> elements with an invalid value |
| :lang(language) | p:lang(it) | Selects every <p> element with a lang attribute value starting with “it” |
| :last-child | p:last-child | Selects every <p> elements that is the last child of its parent |
| :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
| :link | a:link | Selects all unvisited links |
| :not(selector) | :not(p) | Selects every element that is not a <p> element |
| :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent |
| :only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent |
| :only-child | p:only-child | Selects every <p> element that is the only child of its parent |
| :optional | input:optional | Selects <input> elements with no “required” attribute |
| :out-of-range | input:out-of-range | Selects <input> elements with a value outside a specified range |
| :read-only | input:read-only | Selects <input> elements with a “readonly” attribute specified |
| :read-write | input:read-write | Selects <input> elements with no “readonly” attribute |
| :required | input:required | Selects <input> elements with a “required” attribute specified |
| :root | root | Selects the document’s root element |
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
| :valid | input:valid | Selects all <input> elements with a valid value |
| :visited | a:visited | Zgjedh të gjith linqet e vizituara |
Ushtrimi për pseudo klasa dhe pseudo elemente në CSS – pseudoklaselement.html
<html>
<head>
<style>
p:first-child i{color:blue;}
.pc::first-line {
color: #ff0000;
}
p::first-letter {
color: #ff0000;
font-size: 20px;
}
p::selection {
background-color:red;
color:#fff;
}
a:hover{
color: #ff0000;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<a href="www.probit-ks.com">Probit</a>
<p class="pc">You can use the ::first-line pseudo-element to add a special effect to the first line of a text.
Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.
You can use the ::first-line pseudo-element to add a special effect to the first line of a text.
Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.
</p>
</body>
</html>
Float përdoret kur një elementi dëshirojmë ta vendosim në të majtë ose të djathtë të një elemenit tjetër.
- float:left;
- float:right;
- float:none;
- float:inherit;
Elementet që përdorën pas elementeve ku është përdoru float afrohen afër tyre. Për të fshir këtë veti përdoret veçorin clear.
Ushtrimi për float në CSS – float.html
<!doctype html>
<html>
<head>
<title>Floating</title>
<meta charset="utf-8" />
<style type="text/css">
p {
font-size:28px;
}
.kuti-kuq {
background-color:red;
width:200px;
height:200px;
<!--float:left;-->
}
.kuti-kalter {
background-color:#295715;
width:300px;
height:100px;
<!--float:right;-->
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="kuti-kuq">
<p>This is some text.</p>
</div>
<div class="kuti-kalter">
<p style="color:white;">This is some more text.</p>
</div>
<!--div class="clear"></div-->
<p>The third wordin this paragraph is underlined.</p>
</body>
</html>
Pozicionimi
Position veçori cakton llojin e pozitës që do ketë një html element, ka katër vlera static që është dhe vlera fillestare e elementeve, relative, fixed, absolute.
Position static – është vlera fillestare e çdo elementi, elementet pozicionohen sipas asaj pozite që vendosen në web faqe.
Këtu elementit nuk mund të i caktojmë pozitë speciale, ai ka pozitë normale sipas rrethjes së ueb faqes.
div.static{position: static;border: 3px solid #73AD21;}
Position relative – elementi ka pozitë relative të vendosjes dhe atë mund ta zhvendosim në pjesë të caktuara në web faqe me anën veçorive top, left, right, bottom.
div.relative{position: relative;left:30px;border: 3px solid #73AD21;}
Position absolute – elementi me pozicion absolut del jashta rrjedhjes normale të pozicionimit që përmendem(ai aktron sikurse të mos ketë tagje tjera) . Me anën e top, left, right, bottom rregullohet ku do të vendoset elementi.
div.absolute {position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21;}
Position fixed – është lloj i pozicionimit absolute, me vlerë fixed. Paraqitja e tij lidhet me dritaren ku hapet dhe nuk ndryshon në cdo lëvizje që bëhet në dritare. Me anën e që top, left, right, bottom rregullohet ku do të vendoset elementi.
div.fixed{position: fixed; bootom:0; right:0; width:300px; border: 3px solid #73AD21;}
Ushtrimi për pozicionimin në CSS – pozicionimi.html
<html>
<head>
<style>
body{
width:800px;
font-family: Arial, Verdana,sans-serif;
color:#665544;
}
h1{
background-color:#efefef;
padding:10px;
}
p{
width:500px;
}
</style>
</head>
<body>
<h1>Position Static</h1>
<p>
In normal flow, each block level element sits on top of the next one.
Since this is the default way in which browser treat HTML elements,
you do not need a CSS property to indicate that elements shold appear in normal flow,
bur the syntax would be position:static.
</p>
<br>
<br>
<hr>
<h1>Position Relative</h1>
<p style="position:relative; top:10px; left:80px;">
In relative postition, moves an element in relation to where it would have been in normal flow.
For example you can move it 10 pixels lower than it would have been in normal flow or 20 pixels
to the left.
To move an element horizontaly you can use proporties left or right,
for verticaly you can use top or bottom.
</p>
<br>
<br>
<hr>
<h1 style="position:absolute; top:120px; left:600px; width:300px;">Position Absolute</h1>
<p>
When the position property is given a value of absolute, the element is taken out of normal flow
and no longer affects the position of the other elements on the page(They act like is not
there).
To move an element horizontaly you can use proporties left or right,
for verticaly you can use top or bottom.
</p>
<br>
<br>
<hr>
<h1 style="position:fixed; top:10px; left:300px; width:80%;">Position Fixed</h1>
<p>
Fixed position is type of absolute positioning that requires the position property fixed.
It position the element in the relation to the browser window.
<br>
Therfore, when a user scrols down the page, it stays in the exact same place.
It is a good idea to try this example in your browser to see the effect.
<br>
<br>
<br>
Fixed position is type of absolute positioning that requires the position property fixed.
It position the element in the relation to the browser window.
<br>
Therfore, when a user srols down the page, it stays in the exact same place.
It is a good idea to try this example in your browser to see the effect.
</p>
</body>
</html>