Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ

Krijimi i stilit css. Stilet bazë CSS të gatshme për përdorim

29.06.2020 Windows 10

Ne e dimë tashmë që në mënyrë që faqja e internetit të duket bukur dhe elegante, duhet të punojmë me një skedar CSS. Dhe që stilet tona të aplikohen, duhet të lidhni skedarin HTML dhe skedarin CSS.

Ka disa opsione për kryerjen e këtij operacioni: përdorimi i fletëve të stileve të ndërlidhura, fletëve të stilit të jashtëm dhe stilit inline.

Sot do të flasim për metodën e fundit.

Stilimi i etiketës HTML

Thelbi i kësaj metode është që ne vendosim dizajnin e nevojshëm brenda etiketës. Për këtë, një i veçantë atribut - stil... Ky atribut mund të aplikohet për çdo etiketë, por vetëm brenda trupit të faqes, domethënë brenda trupit... Vlera e këtij atributi është deklaratat e stilit që duhet të aplikohen në elementin e specifikuar.

Për shembull, le të vendosim madhësi të ndryshme të shkronjave për dy paragrafë të ndryshëm të tekstit:

< p style= "font-size:25px;" >Jepini kësaj pjese të tekstit një shkronjë të lartë prej 25 piksele. < p style= "madhësia e shkronjave: 15 px; ngjyra: # 2400ff;"> Dhe ky tekst do të jetë me shkronja, lartësia 15 piksel, dhe gjithashtu do ta ngjyros atë blu për të demonstruar aplikimin e disa stileve në të njëjtën kohë.

Të metat

Shembulli tregon në mënyrë të përkryer se si ky lloj stilimi bllokon kodin e faqes.

Ju gjithashtu mund të vini re disa disavantazhe të tjera të përdorimit të kësaj teknike stilimi. E para prej tyre mund të quhet përhapja e stilit në të gjithë dokumentin, e cila në këndvështrimin e redaktimit do ta ndërlikojë procesin herë pas here.

Do të jetë gjithashtu e vështirë të formatoni vëllime të mëdha teksti. Unë mendoj se askush nuk është i kënaqur me mundësinë e përcaktimit të një madhësie fonti për çdo paragraf, veçanërisht nëse ka 40 paragrafë të tillë.

Edhe kur përdorni stile inline, bëhet e pamundur përdorimi i pseudo-klasave, të cilat kryesisht i lidhin duart e një projektuesi në internet.

Vlen gjithashtu të theksohet konfuzioni që me siguri do të shfaqet në përdorimin e atributit të stilit. Ky konfuzion do të lindë nga përdorimi i thonjëzave të ndryshme gjatë shkrimit të stileve.

Për qartësi, le të hedhim një vështrim në shembullin e mëposhtëm:

< div style= "font-family:" Roboto Condensed ", sans-serif"> Hyrja është e saktë. < div style= "font-family:" Roboto Condensed ", sans-serif"> Kjo është gjithashtu e saktë. < div style= "font-family: " Roboto Condensed ", sans-serif" >Ky nuk është një hyrje e vlefshme. < div style= "font-family: " Roboto Condensed ", sans-serif" >Dhe as kjo nuk është e vërtetë

Duke parë llogaritjet e paraqitura më sipër, përfundimi logjik sugjeron vetë se përdorimi i stileve inline shoqërohet me një sërë ndërlikimesh dhe shqetësimesh të rëndësishme.

Kur të përdoret stili inline

Pavarësisht të gjitha të metave, stili inline nuk u shpik për asgjë. Webmasterët shpesh u referohen atyre për stilimin programatik. Për shembull, le të shohim këtë kod.

< div id= "productRate" > < div style= "width: 40%" >

Shkrimi i gjerësisë së kërkuar për këtë bllok do të jetë operacioni më i thjeshtë.

Një situatë e ngjashme mund të lindë kur është e nevojshme të zëvendësohet imazhi i sfondit (për shembull) i një përdoruesi nën rolin e administratorit. Në këtë rast, etiketa img mund të mos funksionojë. Prandaj, ia vlen t'i referohemi atributit të stilit:

< div style= "background:url(fon.jpg)" >

Gjithashtu, programuesit shpesh kthehen në stile inline kur dizajnojnë dritare pop-up. Shpesh ky proces shkon si më poshtë: bllokut, në hartimin e të cilit po punohet, i caktohet ekrani: bllok, dhe pjesa tjetër e dritareve fshihen nga ekrani: asnjë, në mënyrë që të mos ndërhyjnë vizualisht në punën e programuesit. . Ja një shembull:

< div class = "element" style= "display:block" >Dritarja kërcyese që po jepet aktualisht

Rezultati

Përdorimi i stileve inline shoqërohet me një sërë vështirësish dhe shqetësimesh, megjithatë, në procesin e stilimit të disa elementeve, webmasterët shpesh i drejtohen kësaj metode për të optimizuar punën e tyre.

Çdo etiketë mund të ketë një individ, ngjyrë, sfond, kufi dhe veti të tjera. Formati vizual quhet css (Cascading Style Sheets), që do të thotë "fletë stili në kaskadë".

Në këtë artikull, ne do të shqyrtojmë 3 mënyra se si të lidhni stilet css me kodin html të një faqe siti për të ndryshuar pamjen.

Metoda 1. Përfshini një skedar të veçantë css në kodin html të faqes

Ky skedar përmban vetitë për etiketat. Kjo është mënyra më e përshtatshme dhe praktike për të vendosur stilet css për html, veçanërisht nëse faqja ka më shumë se 1 faqe. Duke ndryshuar vetëm 1 skedar, mund të ndryshoni dizajnet e të gjitha faqeve në të cilat është lidhur. Mundohuni të shkruani vetitë në një skedar të veçantë.

Si të vendosni skedarin e stileve css në html

Ju mund të vendosni stilet css në kodin html të faqes së faqes nga një skedar duke përdorur etiketën të cilat duhet të vendosen ndërmjet etiketave dhe... Zgjerimi i zakonshëm i skedarit: .css .

Shembull i lidhjes së një skedari (kodi i faqes.html)








Përmbajtja e tekstit




Shembull i kodit të vetë skedarit të stileve (kodi i faqes.css)

P (ngjyra: jeshile;)

Në shembullin e mësipërm, skedari quhet my_style.css dhe ndodhet në dosjen / my_css.

Ky skedar përmban një veti për etiketën

Kodi p (ngjyra: jeshile;) do të thotë: bëje tekstin me ngjyrë brenda etiketës

E gjelbër. Në këtë shembull, vetëm një skedar është i lidhur, por nëse është e nevojshme, mund të lidhni një numër të pakufizuar prej tyre.

Metoda 2. Shkruani në fillim të faqes vetë

Kjo metodë është pothuajse identike me lidhjen e një skedari, por ka një pengesë të rëndësishme - nëse keni disa faqe, atëherë për të ndryshuar modelin e tyre vizual, duhet të ndryshoni secilën prej tyre. Ka kuptim të përdoret kjo metodë vetëm nëse:

Ju keni një faqe interneti me një faqe;

Ky dizajn vizual është menduar vetëm për faqen aktuale. Për shembull, për dizajnin vizual të elementeve që nuk janë në faqe të tjera.

Në raste të tjera, është më mirë të shtoni stilet css në faqe duke përdorur një skedar të veçantë sipas metodës së përshkruar më sipër. Por edhe një pamje individuale është në shumë raste më e përshtatshme për t'u vendosur në një skedar të veçantë, kështu që kjo metodë mund të mos përdoret fare.

Si të shtoni stile css në kodin html të një faqe interneti

Ju mund të shtoni stile ccs në faqen html të faqes në të njëjtën mënyrë si në skedar, përkatësisht midis dhe... Vetëm etiketat shkruhen në vend të lidhjes me skedarin, brenda së cilës janë shkruar vetë stilet.

Shembull i shtimit të veçorive të etiketës së pari (kodi i faqes.html)








Përmbajtja e tekstit





Metoda 3. Shkruani stilin në atributin stil për secilën etiketë veç e veç

Kjo metodë përdoret gjerësisht kur brenda një faqeje ka elementë që nuk ndryshojnë shumë nga njëri-tjetri, për shembull, vetëm në ngjyrë (dhënia, madhësia, etj.). Në këtë rast, është më e shpejtë dhe më e përshtatshme të përfshini një stil të përgjithshëm css në html duke përdorur një skedar të veçantë dhe të shtoni ndryshime të vogla për elementë specifikë. Atributi stil ka përparësinë më të lartë, kështu që etiketa do të marrë të gjitha vetitë e specifikuara në stil, edhe nëse ato janë specifikuar më parë në një mënyrë tjetër.

Në fakt, logjika është si më poshtë: ne shkruajmë stilet e përgjithshme dhe më të përdorura në skedar (1 mënyrë), dhe rregullimet e detajuara në vetë elementët. Për shembull, nëse keni 5 tituj në faqe që ndryshojnë në ngjyra, atëherë është më mirë të shkruani vetitë e përgjithshme në skedar që përcaktojnë madhësitë dhe dhëmbëzimin e këtyre titujve dhe ngjyrën në vetë elementët, sipas kësaj metode. në etiketë

Metoda 3 ka përparësinë më të lartë, kështu që etiketa do të marrë vetitë e specifikuara në atributin style = "", edhe nëse ato janë specifikuar më parë duke përdorur një metodë tjetër.

Fletët e stilit Cascading janë një standard stili i shpallur nga W3C. Afati kaskadë tregon mundësinë e bashkimit të llojeve të ndryshme të stileve dhe trashëgiminë e stileve nga etiketat e brendshme nga ato të jashtme.

CSS është një gjuhë që përmban një grup karakteristikash për përcaktimin e pamjes së një dokumenti. Specifikimi CSS përcakton vetitë dhe një gjuhë përshkruese për t'u lidhur me elementët HTML.

CSS është një abstraksion në të cilin pamja e një dokumenti Web përcaktohet veçmas nga përmbajtja e tij.


Disa stile nuk mbështeten nga të gjithë shfletuesit. Megjithatë, mund të caktoni çdo stil, sepse stilet e pambështetura thjesht do të injorohen.


Ju gjithashtu mund të keni nevojë:


Ekzistojnë tre lloje stilesh që dallohen nga metodat e shtimit të stileve në një dokument.

Stilet e brendshme

Stilet e brendshme përcaktohen nga atributi stil etiketa specifike. Stili i brendshëm prek vetëm elementët e përcaktuar nga etiketa të tilla. Kjo metodë ndryshon pak nga HTML tradicionale.

Shembull

Një paragraf me tekst në ngjyrë blu

REZULTATI:

Një paragraf me tekst në ngjyrë blu

Paragraf me tekst të kuq

Nuk duhet të përdorni shumë shpesh stilet e brendshme, pasi kjo mund të mbingarkohet me kod dhe pamja e tij është e vështirë të ndryshohet.

Stilet globale

Stilet globale CSS janë të vendosura në një enë , i vendosur nga ana e tij në enë ... .


atribut lloji = "tekst / css", e kërkuar më parë për etiketën .........

Teksti gri në të gjithë paragrafët e një faqe interneti

REZULTATI:

Teksti gri në të gjithë paragrafët e një faqe interneti

Teksti gri në të gjithë paragrafët e një faqe interneti

Stilet e jashtme (të lidhura).

Stilet e jashtme (të lidhura) përcaktohen në një skedar të veçantë me shtesën css... Stilet e jashtme lejojnë që të gjitha faqet në faqen tuaj të duken të qëndrueshme.

Për t'u lidhur me skedarin në të cilin përshkruhen stilet, përdoret etiketa ndodhet në enë ... .

Ky etiketë duhet të ketë dy atribute: rel = "fletë stili" dhe href duke specifikuar adresën e fletës së stilit.

Shembull
......... ......... .........

Stilet e lidhjes

Rregulli për lidhjen e stileve globale dhe të jashtme përbëhet nga përzgjedhës dhe deklaratat e stilit.

Zgjedhësi në anën e majtë të rregullit identifikon elementin (et) për të cilët është vendosur rregulli. Më pas, deklaratat e stilit janë renditur në kllapa kaçurrelë, të ndara me pikëpresje. Për shembull:

P (indenti i tekstit: 30 px; madhësia e shkronjave: 14 px; ngjyra: # 666;)

Një deklaratë stili është një palë Vetia CSS: Vlera CSS.

Për shembull: ngjyra: e kuqe

Kur lidhni stilin nga brenda, rregulli CSS që është vlera e atributit stil, përbëhet nga deklarata stilesh të ndara me pikëpresje. Për shembull:

Përzgjedhës CSS

PërzgjedhësiPërshkrimMë shumë detaje
* Çdo element
EElementi i identifikuar nga etiketa E
E # miidElementi E me identifikuesin "myid"
E.myclassElementi E i klasës "myclass"
EZgjedhësi i ekzistencës së atributit
EZgjedhësi i barazisë së atributeve
EZgjedhësi i atributeve me një listë vlerashZgjedhësit e atributeve
EZgjedhësi i prefiksit të atributit
EZgjedhësi i prapashtesës së atributit
EZgjedhësi i nënvargut të atributit
E: lidhjeElementi E është një lidhje e pa vizituar ende nga përdoruesiPseudo-klasa dinamike
E: vizituarElementi E është një lidhje e vizituar tashmë nga përdoruesiPseudo-klasa dinamike
E: rri pezullElementi E kur rri pezull mbi të me treguesin e miutPseudo-klasa dinamike
E: aktiveElementi i aktivizuar nga përdoruesi EPseudo-klasa dinamike
E: fokusElementi E në fokusPseudo-klasa dinamike
E: objektiviElementi E që është objektivi i lidhjesPseudo-klasa e synuar
E: gjuhaElementi E i shkruar në gjuhën e specifikuarPseudo-klasa e gjuhës
E: aktivizuarElementi E është një element i aksesueshëm i formësPseudoklasa shtetërore
E: me aftësi të kufizuaraElementi E - Element i paarritshëm i formësPseudoklasa shtetërore
E: kontrolluarElementi E - Kutia e kontrollit të aktivizuar ose butoni i radiosPseudoklasa shtetërore
E: e papërcaktuarElementi E - kutia e kontrollit ose butoni i radios i papërcaktuarPseudoklasa shtetërore
E: rrënjëElementi E, rrënja e dokumentitPseudo-klasa strukturore
E: fëmija i nëntë (n)Elementi E, fëmija i n-të i prinditPseudo-klasa strukturore
E: fëmija i n-të i fundit (n)Elementi E, fëmija i n-të i prindit, duke numëruar nga fundiPseudo-klasa strukturore
E: e n-të e llojit (n)Elementi i n-të i tipit EPseudo-klasa strukturore
E: lloji i n-të i fundit (n)elementi i n-të i tipit E, duke numëruar nga fundiPseudo-klasa strukturore
E: fëmija i parëElementi E, fëmija i parë i prinditPseudo-klasa strukturore
E: fëmija i funditElementi E, fëmija i fundit i prinditPseudo-klasa strukturore
E: e para e llojitElementi i parë i tipit EPseudo-klasa strukturore
E: e fundit e llojitElementi i fundit i tipit EPseudo-klasa strukturore
E: fëmijë i vetëmFëmija i vetëm i prinditPseudo-klasa strukturore
E: vetëm e llojitElementi i vetëm prind i tipit EPseudo-klasa strukturore
E: boshElementi E pa fëmijëPseudo-klasa strukturore
E: jo (X)Elementi E që nuk përputhet me përzgjedhësin e thjeshtë XPseudo-klasë mohimi
E :: rreshti i parëRreshti i parë i elementit EPseudo-elemente
E :: shkronja e parëShkronja e parë e elementit EPseudo-elemente
E :: më parëPërmbajtja para elementit EPseudo-elemente
E :: pasPërmbajtja pas elementit EPseudo-elemente
E :: përzgjedhjaPërzgjedhja në elementin EPseudo-elemente
E FElementi F që ndodhet brenda elementit E
E> FNjë element F që ndodhet direkt brenda një elementi E
E + FElementi F që pason menjëherë elementin E
E ~ FElementi F që pason elementin E

Zgjedhës universal

Përzgjedhësi universal përputhet me çdo element në dokumentin html.

Simboli i yllit (*) përdoret për të treguar një përzgjedhës universal.

Përdoret kur ju duhet të vendosni të njëjtin stil për të gjithë elementët e një faqe interneti. Për shembull:

* (diferencë: 0; mbushje: 0;)

Në disa raste, ylli (*) mund të hiqet:
* .klasa ime dhe .klasa ime ekuivalentet,
* # myid dhe #myid janë ekuivalente

Përzgjedhësit e etiketave

Përzgjedhësi mund të jetë çdo etiketë html për të cilën janë përcaktuar rregullat e stilit. Për shembull:

H1 (ngjyra: e kuqe; rreshtimi i tekstit: në qendër;)

Nëse disa elementë kanë një stil të përbashkët, atëherë përzgjedhësit përkatës mund të renditen në fletën e stilit të ndarë me presje. Për shembull:

H1, h2, h3, h4 (ngjyra: e kuqe; rreshtimi i tekstit: në qendër;)

Përzgjedhës të ID

HTML ofron mundësinë për të caktuar një identifikues unik për çdo etiketë. Identifikuesi specifikohet nga atributi id... Për shembull:

...

Vlera e identifikuesit duhet të fillojë me një shkronjë latine dhe mund të përmbajë shkronja (,), numra (), "vizore" (-) dhe "nënviza" (_).

Vlerat e të gjitha atributeve id në html-dokument duhet të jetë unik. Nëse takohen id me të njëjtat vlera, këta identifikues injorohen dhe kodi i faqes së internetit bëhet i pavlefshëm.

Në kodin CSS, zgjedhësi i identifikuesit shënohet me një shenjë paund (#). Që nga identifikuesi id vlen vetëm për elementët unikë, emri i etiketës përpara shenjës së paundit (#) zakonisht hiqet:

Div # a1 (ngjyra: jeshile;)

në mënyrë të ngjashme

# a1 (ngjyra: jeshile;)

Është e këshillueshme të përdoret id jo për stilimin e një elementi, por për aksesimin e tij nëpërmjet skripteve ose ndjekjes së një lidhjeje.

Përzgjedhës të klasave

Zgjedhësit e klasave përdoren më së shpeshti për stilim. Klasa për etiketën përcaktohet nga atributi klasës... Për shembull:

...

Emri i klasës duhet të fillojë me një shkronjë latine dhe mund të përmbajë shkronja (,), numra (), viza (-) dhe nënvizime (_).

Nëse atributi id përdoret për identifikim unik, pastaj duke përdorur atributin klasës një etiketë i përket një grupi të caktuar.

Në kodin CSS, një përzgjedhës identifikues shënohet me një pikë (.). Etiketa të ndryshme mund t'i caktohen të njëjtës klasë. Në këtë rast, emri i etiketës hiqet përpara shenjës me pikë (.):

I. jeshile (ngjyra: # 008000;) b. e kuqe (ngjyra: # f00;) .blu (ngjyra: # 00f;)

Për një etiketë, mund të specifikoni disa klasa në të njëjtën kohë, duke i renditur ato në atribut klasës të ndarë nga një hapësirë. Në këtë rast, stilet e secilës prej klasave të specifikuara aplikohen në element.

...

Nëse disa nga këto klasa përmbajnë të njëjtat veti stili, por me vlera të ndryshme, atëherë do të aplikohen vlerat e stilit të klasës, i cili ndodhet më poshtë në kodin CSS.

Zgjedhësit e atributeve

Ka shumë përzgjedhës të atributeve që mund t'i përdorni për të stiluar një etiketë bazuar në atributet e tij.


h1 (ngjyra: # 800000;) / * një element h1 që ka një atribut titulli * /
hyrje (kufiri: 1px solid # ccc; mbushja: 4px 6px; gjerësia: 300px;)
a (dekorimi i tekstit: asnjë; kufiri-fund: 1px solid # 06c; ngjyra: # 06c;)
span (ekrani: blloku i brendshëm; imazhi i sfondit: url ("/ img / icon_sprite.png");
a, a (sfondi: url ("pic.gif") poshtë majtas pa përsëritje; ekrani: blloku i linjës; gjerësia: 32 px;)
(ekrani: bllok; notimi: majtas; gjerësia: 280 px;)

Nuk duhet të ketë hapësirë ​​midis emrit të etiketës dhe kllapave katrore ([)!


Përzgjedhësit gjenerikë, përzgjedhësit për etiketat, identifikuesit, klasat dhe atributet, dhe pseudo-klasat janë të gjithë përzgjedhës të thjeshtë.

Përzgjedhës të thjeshtë mund të lidhen me zinxhirë në sekuenca specifike bazuar në marrëdhëniet e elementeve në pemën e dokumentit në ueb. Ndërtime të tilla quhen kombinatorë.

Përzgjedhës kontekstualë

Një nga kombinatorët më të përdorur është përzgjedhësi i kontekstit.

Përzgjedhësit kontekstualë ose pasardhës përcaktojnë elementë të shumtë, njëri prej të cilëve është brenda tjetrit. Në një përzgjedhës kontekstual, përzgjedhësit e thjeshtë ndahen nga një hapësirë.

Shembull
  1. Pushkin A.S.
    • "E shtënë"
    • "Blizzard"
    • "Dubrovsky"
  2. Gogol N.V.
    • "Inspektor"
    • "Taras Bulba"
    • "Shpirtrat e vdekur"
  3. Tolstoi L.N.
    • "Luftë dhe paqe"
    • Anna Karenina
    • "ringjallja"

REZULTATI:

  1. Pushkin A.S.
    • "E shtënë"
    • "Blizzard"
    • "Dubrovsky"
  2. Gogol N.V.
    • "Inspektor"
    • "Taras Bulba"
    • "Shpirtrat e vdekur"
  3. Tolstoi L.N.
    • "Luftë dhe paqe"
    • Anna Karenina
    • "ringjallja"

Përzgjedhës për fëmijë

Një përzgjedhës fëmijë përcakton drejtpërdrejt një element që ndodhet brenda një tjetri. Në një përzgjedhës fëmijë, përzgjedhësit e thjeshtë ndahen me një shenjë më të madhe se (>).

Shembull
  1. Pushkin A.S.
    • "E shtënë"
    • "Blizzard"
    • "Dubrovsky"
  2. Gogol N.V.
    • "Inspektor"
    • "Taras Bulba"
    • "Shpirtrat e vdekur"
  3. Tolstoi L.N.
    • "Luftë dhe paqe"
    • Anna Karenina
    • "ringjallja"

REZULTATI:

  1. Pushkin A.S.
    • "E shtënë"
    • "Blizzard"
    • "Dubrovsky"
  2. Gogol N.V.
    • "Inspektor"
    • "Taras Bulba"
    • "Shpirtrat e vdekur"
  3. Tolstoi L.N.
    • "Luftë dhe paqe"
    • Anna Karenina
    • "ringjallja"

Përzgjedhës të afërt

Zgjedhësi ngjitur përcakton një shenjë plus (+) që ndan dy sekuenca të përzgjedhësve të thjeshtë. Elementet e përfaqësuara nga këto sekuenca përmbahen brenda një kontejneri dhe menjëherë pasojnë të parin, të pandarë nga ndonjë etiketë tjetër.

Shembull

REFLEKSOLOGJIA

REZULTATI:

REFLEKSOLOGJIA

Përzgjedhës të afërt

Një përzgjedhës ngjitur përcakton një karakter tilde (~) që ndan dy sekuenca të përzgjedhësve të thjeshtë. Artikujt e përfaqësuar nga këto sekuenca janë brenda një kontejneri dhe ndjekin të parin (jo domosdoshmërisht drejtpërdrejt) nga i dyti.

Shembull

REFLEKSOLOGJIA

"Të gjitha aktet e jetës së vetëdijshme dhe të pavetëdijshme sipas mënyrës së origjinës janë reflekse." ATA. Seçenov

Refleksologjia - trajtimi i sëmundjeve përmes kontrollit të reflekseve. Përdoret me sukses në programe komplekse trajtimi ose si teknikë individuale.

REZULTATI:

REFLEKSOLOGJIA

"Të gjitha aktet e jetës së vetëdijshme dhe të pavetëdijshme sipas mënyrës së origjinës janë reflekse." ATA. Seçenov

Refleksologjia - trajtimi i sëmundjeve përmes kontrollit të reflekseve. Përdoret me sukses në programe komplekse trajtimi ose si teknikë individuale.



Në këtë tutorial, ne do të përdorim redaktuesin Notepad ++ për të krijuar skedarë HTML dhe CSS, ai është i destinuar për përdoruesit Microsoft Windows dhe të gjithë shembujt do të ekzekutohen në të.

Nëse keni një Mac, atëherë mund t'i ekzekutoni shembujt në redaktorin Brackets, si p.sh Notepad ++ absolutisht falas. Sa për redaktorin Kllapa, atëherë është i përshtatshëm edhe për përdoruesit Microsoft Windows, më vonë mund të zgjidhni atë që është më afër jush.

Krijimi i një fletë stili të brendshëm

Le të shohim një shembull në të cilin do të krijoni fletën tuaj të parë të stilit të brendshëm.

Hapi 1: Hapni një redaktues teksti

Shtypni butonat WIN + R në të njëjtën kohë (analog Start - Run) kjo do të hapë një dialog "Vrapo" shkruani dhe shtypni Enter (programi do të hapet ), ose ekzekutoni programin përmes etiketës së saj.

Dritarja kryesore e programit do të hapet para jush:

Hapi 2: Krijoni strukturën e dokumentit

Kopjoni ose vendosni kodin e mëposhtëm HTML në redaktuesin:

</span> Fletë stili e brendshme

Në kodin për shembujt në këtë tutorial, unë do të jap komente shtesë të theksuara me jeshile të hapur. HTML përdor një etiketë të veçantë për të krijuar komente në kodin tuaj, teksti brenda një elementi të tillë nuk shfaqet nga shfletuesi. Në kodin CSS, për të shtuar një koment, duhet të vendosni tekstin e komentit në ndërtimin e mëposhtëm: / * teksti i komentit * /... Ju mund të bëni komente në kodin CSS si brenda stileve inline ashtu edhe në ato të jashtme (në një skedar të veçantë).

Hapi 3: Shtoni Stilet Inline

Hapi tjetër është të shtoni stile inline në faqen tuaj: për titullin e nivelit të parë, ngjyra e tekstit është e kuqe (ngjyra: e kuqe) dhe për paragrafët është blu (ngjyra: blu). Përveç kësaj, për titullin e nivelit të parë, ne do të bëjmë rreshtimin në qendër të tekstit (tekst-align: qendër). Sigurohuni që çdo pronë CSS dhe vlera e saj të ndahen me dy pika dhe të ketë një pikëpresje në fund të çdo deklarate.

</span> Fletë stili e brendshme

Është mirë që jam i angazhuar në vetë-zhvillim.

Do të mësoj CSS brenda një muaji ose edhe më shpejt

Hapi 4: Shikoni faqen HTML në një shfletues

Hapni shembullin në një shfletues dhe verifikoni që dalja e shembullit tonë përputhet me imazhin:

Lidhja e një fletë stili të jashtëm

Tani do të krijojmë një skedar të veçantë me ju që do të përmbajë fletën e stilit dhe do ta lidhim atë me dokumentin tonë HTML.

  1. Në Notepad ++, krijoni një skedar të ri bosh dhe ruajeni si page.css (kur ruani skedarin, duhet të zgjidhni Fletët e stileve të kaskadës * .css) në të njëjtën dosje ku keni krijuar dokumentin tuaj HTML.
  2. Mbani kodin CSS nga shembulli i mëparshëm (përmbajtja e etiketës