Konceptet themelore të CSS

Në CSS vlejnë 3 principe thelbësore:

  • Kaskadimi (Cascading)
  • Trashëgimia (Inheritance)
  • Specificiteti (Specificity)

Principi i kaskadimit

Nëse i kemi dy CSS rregulla, ai rregull që vie më pas, respektivisht ai që është më afër elementit – ai do të “fitojë”. Thënë ndryshe, një element e zbaton atë rregull që e ka më afër.

p { color: red; }
p { color: blue; }

Në këtë rast, elementi p (paragrafi) do të ketë ngjyrë të kaltër, për shkak se vie më vonë, pra është më afër elementit.

Rregullat e CSS mund të jenë të shënuara:

  • Në një fajll ekstern (External CSS),
  • Në seksionin head (Internal CSS), si dhe
  • Brenda elementit me atributin style (Inline CSS).

Edhe në këtë rast, ndiqet principi i kaskadimit: rregulli që vie më vonë – ai do të zbatohet, pra kështu inline CSS do të ketë prioritet më të lartë në raport me internal CSS, ndërsa internal CSS do të ketë prioritet më të lartë se external CSS.

Principi i trashëgimisë

Disa rregulla të CSS që zbatohen ndaj një elementi të jashtëm, automatikisht do të zbatohen edhe tek elementet e brendshme.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<style>
		#lajmi {
			font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
		}
	</style>
</head>

<body>
<div id="lajmi">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</body>
</html>

Duke e përdorur selektorin #lajmi, e kemi caktuar fontin për elementin div, mirëpo edhe elementeve të brendshme (në këtë shembull – paragrafët) do të shfaqen me po atë font.

Hape shembullin.

Principi i specificitetit

Në CSS, ekziston një hierarki në lidhje me atë se cili selektor do të mundësojë që një element ta zbatojë CSS rregullin e caktuar.

  • Tag
  • Klasat
  • ID
  • Stilet inline

Nëse një CSS rregull e kemi caktuar edhe me tag, edhe me klasë, do të zbatohet CSS rregulli i definuar me klasë, pra klasat kanë specificitet më të lartë. ID ka specificitet më të lartë se tag dhe klasa, ndërsa stilet inline kanë specificitet më të lartë se tag, klasa dhe ID.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
    color: green;
}
.lajmi {
    color: red;
}
#lajmi {
    color: orange;
}
</style>
</head>

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="lajmi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="lajmi" id="lajmi" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="lajmi" style="color: blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>

Hape shembullin.

All Rights Reserved Theme by 404 THEME.