HTML5 Hap Pas Hapi: Rregullimi i tekstit (CSS)

Autor: Skender Mustafi

Të mësuarit e etiketave bazë për rregullimin e tekstit në HTML është gjysma e punës. Në HTML5 rol kyç në rregullimin e përmbajtjeve tekstuale dhe të gjitha përmbajtjeve tjera në përgjithësi ka CSS, kodi për stilizimin dhe lehtësimin e menaxhimit të stilit të përmbajtjes.

Duhet theksuar gjithashtu se efekti i CSS stileve nuk është vetëm përbrenda një skede, por në tërë grupin e skedave të faqes, madje mund të thirret edhe nga burime të jashtme.

Ka tri mënyra të vendosjes së stileve në etiketa edhe atë:

1. Vendosja e stilit drejtpërdrejtë në etiketën e caktuar. Kjo bën që efektet e dhëna të veprojnë vetëm në atë etiketë dhe mbi përmbajtjen që ajo etiketë ka.
<p style=”font-family: arial; color: red; font-size: 20px; “>Përmbajtja e paragrafit</p>

2. Vendosja e stilit në kokën e faqes në të cilën punohet. Stili i caktuar ndikon mbi të gjitha etiketat e asaj faqeje. Le të marrim për shembull vendosjen e disa tipareve të etiketës <p> dhe <b>, si në shembullin e më poshtëm. Kudo që vendosim etiketa <p> dhe <b> do të jenë të ndikuara nga të dhënat e CSS.

<DOCTYPE! html>

<html>

<head>
<title>HTML5 Hap Pas Hapi: Rregullimi i Tekstit përmes CSS</title>
<style>
p {
color: blue;
font-size: 16px;
font-family: Arial;
}
b {
color: red;
text-decoration: overline;
font-family: Zapf-Chancery, cursive
}
</style>

</head>

<body>
<abbr title="World Wide Web">WWW</abbr>
<p>Tanimë programuam bazën mbi të cilën mund t'i hedhim elementet për të programuar ueb faqen tonë. <br>Në këtë mësim do të trajtojmë hedhjen, përpunimin dhe rregullimin e tekstit ku do të kemi rastin t'i mësojmë disa etiketa shumë me vlerë për t'i realizuar këto veprime.
</p>
<pre>
<b>fillojnë neveritjet</b>
<i>dhe e pyes</i>
<u>ç’bën ti përpara e shfrenuar</u>

<mark>qeshin edhe merimangat</mark>
nga pyetja
e çuditshme

pastaj për çudin time
sorrat vishen si nuse
në fund të ëndrrës
në mesditë
</pre>

</body>

</html>

3. Përpilimi i një skede të posaçme për stil e cila thirret nga faqet. Kjo mënyrë mund të shfrytëzohet për të pasur ndikim mbi të gjitha nyjet e një ueb faqeje. Nëse kemi skedat index.html, rrethNesh.html, kontakt.html e të tjera, dhe ky stil “thirret” në faqe, atëherë të gjitha etiketat e stilizuara do të ndikohen nga kjo skedë. Mënyra e implementimit të kësaj forme është e njëjtë sikur ajo më sipër, por që kodi i stilit në vend që të vendoset në kokë të faqes, vendoset në një skedë të posaçme me prapashtesën .css, shembull stilizimi.css. Thirrja e atij dokumenti nëpër faqe bëhet duke vendosur nyjën e mëposhtme mes etiketës <head></head>:
<link rel=”stylesheet” type=”text/css” href=”stilizimi.css”>

html css

Parametrat të cilët mund të vendosen për të rregulluar tekstin janë:

  • font-family që paraqet familjen e llojit të shkronjave e që standarde janë:
    • Arial Black, Helvetica Bold
    • Verdana, Geneva, Arial, Helvetica, sans-serif
    • Times New Roman, Times, serif
    • Courier New, Courier, monospace
    • Georgia, Times New Roman, Times, serif
    • Zapf-Chancery, cursive
    • Western, fantasy
      Shembull: font-family: Arial, Helvetica, sans-serif
  • font-size – që rregullon madhësinë e shkronjave. Ky parametër mund të marrë vlera relative dhe absolute.
    • Vlerat relative janë: xx-small, x-small, small, medium, large, x-large, ose xx-large
      Shembull: font-size: x-large;
    • Vlerat absolute janë dy lloje:
      • Vlera që rrisin shkronjat për çdo vlerë: font-size: 12px
      • Vlera që shumëfishojnë madhësinë e shkronjave nga madhësia standarde: font-size: 3em (rrit shkronjat 3 herë nga madhësia standarde)
  • color ose font-coro – cakton ngjyrën e shkronjave. Të dy parametrat kanë të njëjtin rol, por që shfletues të ndryshëm njohin njërin nga ato. Preferohet që të shtohen të dy me të njëjtat vlera në skedën e stileve: font-color: blue; color: blue; ose/dhe font-color: #fff345; color: #fffccc;
  • font-weight – bën trashjen e shkronjave: font-wight: bold; ose font-wight: normal;
  • font-style – bën pjerrësimin e shkronjave: font-style: italic; ose font-style: normal;
  • text-decoration – bën dekorimin e shkronjave: text-decoration: underline; text-decoration: line-through; text-decoration: blink; ose text-decoration: overline;
  • letter-spacing – rregullon hapësirën mes shkronjave: letter-spacing: 4px;
  • text-inden – zhvendos tekstin nga pozita e tij normale qoft në të majtë apo në të djathtë: text-indent: 20px;
  • text-align – rregullon shtrirjen e tekstit: text-align: justify;
  • text-align – rregullon pozitën e tekstit: text-align:center; (në mes) text-align: right; (djathtas) text-align: left; (majtas) vertical-align: middle; (pozita vertikale në mes) 

Të gjitha parametrat e më sipërm mund t’ia bashkëngjitni etiketave si <b>, <p>, <i>, <h1>-<h6> e të tjera, si dhe ID-ve të stileve për të rregulluar tekstin.

Shembulli i etiketës <h6> tek Fjalaime.ch.

Kodi i cili rregullon këtë etiketë është:

h6{ font-size: 16px; padding-left: 6px; background:#f6f6f6; border-bottom:3px solid #dbdbdb; border-top:1px solid #dbdbdb; font-family: ‘Droid Serif’, Arial; color: #222; line-height: 2;}

Po këto i keni lexuar?