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

Shtimi i stileve css. Si të përfshini CSS

css qëndron për "Cascading Style Sheets" (nga anglishtja. Cascading Style Sheets). CSS është një grup parametrash që shfaqin një element në një faqe interneti. Këto parametra mund të specifikohen si në një skedar të veçantë, ashtu edhe mund të shkruhen drejtpërdrejt në kodin HTML të faqes. Për shembull, faqja jonë e internetit mund të përmbajë elementët e mëposhtëm: titullin e artikullit, paragrafët, citatet, fusnotat, fotografitë, videot, lidhjet. Mund të vendosni një stil specifik të ekranit - madhësinë, ngjyrën, trashësinë e kufirit, etj.

Kur punoni me sitin, rekomandohet të përdorni një skedar të veçantë me stile, dhe jo të futni kodin me cilësimet e stilit në faqe të veçanta. Kjo do të zvogëlojë ndjeshëm kohën - kur e dini vendndodhjen e fletës së stilit, gjithmonë mund të gjeni shpejt një stil specifik dhe ta modifikoni atë. Skedari i stilit ka zgjerimin .css, emri i saj është zakonisht stil.css.

Përfshirë një skedar CSS

Ka disa mënyra për të përfshirë një skedar CSS. Ne do të flasim për dy metoda që përdoren më shpesh gjatë krijimit të faqeve të internetit:

1. Lidhja. Kjo metodë përdoret kur është e nevojshme të vendosni stile për të gjitha faqet e faqes në një skedar. Kjo metodë përdoret shpesh kur krijoni një faqe. Për të përfshirë një fletë stili përdorni komandën , i cili duhet të vendoset në trupin e etiketës .

Dy vetitë e para i tregojnë shfletuesit që faqja përdor CSS, pastaj specifikohet adresa e skedarit me stile.

2. Vendosja në etiketat e dokumenteve. Me këtë metodë, stili për një element të veçantë të faqes vendoset drejtpërdrejt në kodin HTML. Për shembull:

Këtu kemi shkruar stilet në përputhje me rrethanat për kontejnerët

Dhe . Këto stile do të zbatohen ekskluzivisht për to.

Le të japim një shembull të një fletë stili - krijoni një skedar stil.css dhe shkruani stilet:

trupi ( font-familja: Arial, Verdana, Sans-serif; /* Font-family */ madhësia e shkronjave: 12pt; /* Madhësia kryesore e shkronjave në pika */ ngjyra e sfondit: #f0f0f0; /* Ngjyra e sfondit të faqes së internetit * / ngjyra: #000000; /* Ngjyra e trupit */ ) h1 ( ngjyra: #a52a2a; /* Ngjyra e kokës */ madhësia e shkronjave: 24 pt; /* Madhësia e shkronjave në pika */ font-familja: Georgia, Times, serif ; /* Font-family */ font-weight: normal; /* Pesha normale e tekstit */ )

Këtu kemi stiluar trupin e faqes. dhe për kokën

. Ju gjithashtu mund të vendosni stile specifike për çdo element tjetër të faqes së internetit.

Tani le të lidhim fletën tonë të stilit me sitin:

Lidhja e CSS me sitin

Përshendetje Botë!

Kjo është faqja ime e parë me stile css

Kështu, ne e kuptuam çfarë është css, pse përdoret kjo teknologji, mësuam se si të lidhim stilet me sitin. Ky tutorial është një lloj hyrjeje në fletët e stilit Cascading. Në mësime të tjera, ne do të flasim për teknologjinë CSS në më shumë detaje.

Lidhja CSS ndodh në disa mënyra, të cilat përdoren në varësi të situatës. Tani do t'i shqyrtojmë këto metoda në më shumë detaje. Do të ketë mjaft informacion, kështu që as mos u përpiqni ta mësoni përmendësh, por sigurohuni që të përpiqeni të kuptoni se çfarë është.

Po, dhe një pikë tjetër që u prek tashmë në mësimin e mëparshëm, por do ta përsëris përsëri. Shpesh, shumë fillestarë tashmë kanë frikë nga fraza "Fletët e stilit kaskadë" ose thjesht "fletët e stilit", prandaj, kur hasin shprehje të tilla në tekst, në mënyrë të pandërgjegjshme u duket se nuk e kuptojnë atë që thuhet. Pra, në fakt, nuk ka tabela në formën që jeni mësuar - jo. Dhe këto fjalë përshkruajnë vetëm një gjë - gjithçka që lidhet me CSS, domethënë rregulla të ndryshme CSS, veti, vlera, etj. Në përgjithësi, gjithçka që do të studiojmë në këtë libër shkollor. Nga rruga, vetëm fjalët "CSS" dhe "stilet" gjithashtu mund të atribuohen këtu.

Stilet e linjës

Lidhja e stileve inline (inline) është të aplikoni atributin e stilit në një etiketë specifike në faqe. Në këtë rast, vlera e atributit është një ose më shumë (të ndara me një pikëpresje) me vlerat përkatëse. Si rregull, kjo metodë përdoret në rastet kur është e nevojshme të ndryshohen karakteristikat e një elementi të veçantë në një faqe të veçantë.

Sintaksë e përgjithshme

<тег style="свойство:значение; свойство:значение; ...">...

Një shembull i përfshirjes së stileve inline në CSS

Lidhja e stileve inline

Paragrafi 1

Paragrafi 2

Rezultati në shfletues

Paragrafi 1

Paragrafi 2

Stilet e brendshme

Stilet e brendshme specifikohen në "header" të dokumentit dhe lidhen duke përdorur etiketën. Në këtë rast, CSS nuk prek më një element, por të gjithë elementët e specifikuar në stilet që janë në këtë faqe. Në mënyrë tipike, kjo metodë përdoret kur është e nevojshme të ndryshohen stilet e disa elementeve identikë në të njëjtën kohë brenda një faqeje HTML.

Një shembull i përfshirjes së stileve të brendshme në CSS

Lidhja e stileve inline

Paragrafi 1

Paragrafi 2

Rezultati në shfletues

Paragrafi 1

Paragrafi 2

Stilet e jashtme

Stilet e jashtme përfshihen në një skedar të veçantë duke përdorur . Në këtë rast, të gjitha stilet janë të vendosura në një skedar teksti të thjeshtë me shtesën .css dhe ndikojnë në elementët e të gjitha faqeve me të cilat është i lidhur ky skedar. Zakonisht, krijimi i stileve të faqeve fillon me këtë metodë, pasi vetëm me ndihmën e saj ndjehen të gjitha avantazhet e CSS, sepse duke ndryshuar të dhënat në vetëm një skedar, mund të kontrolloni shfaqjen e një numri të madh faqesh menjëherë. Dhe tashmë në procesin e punës në sit, shtohen stile të brendshme ose të integruara, nëse është e nevojshme.

Kur përdorin stile të jashtme, autorët veprojnë në mënyra krejtësisht të ndryshme. Disa ruajnë të gjitha stilet e faqeve në një skedar, të tjerët - në disa. Për shembull, një skedar përmban stile për të gjithë sitin dhe është i pranishëm në të gjitha faqet, një tjetër - i lidhur gjithashtu vetëm me seksione të caktuara, i treti - me nënseksione të caktuara, etj. Se si do të veproni varet nga ju.

Një shembull i përfshirjes së stileve të jashtme në CSS

Lidhja e stileve të jashtme

Paragrafi 1

Paragrafi 2

Përmbajtja e skedarit style.css

Trupi ( sfondi: #ccccff; /* ngjyra e sfondit të faqes */ ) p ( ngjyra: e kuqe; /* ngjyra e tekstit të paragrafit */ font-familja: Helvetica, sans-serif; /* tipi i paragrafit */ madhësia e shkronjave: 150 % ; /* madhësia e shkronjave */ rreshtimi i tekstit: në qendër; /* në qendër të tekstit */ kufiri: 5 px jeshile dyfish; /* stilet e kufirit */ )

Rezultati në shfletues

Paragrafi 1

Paragrafi 2

Siç mund ta shihni, gjithçka është shumë e thjeshtë. Në përgjithësi, me emrat e pothuajse të gjitha pronave CSS, tashmë mund të kuptoni se çfarë lloj ndryshimesh bëjnë ata, natyrisht, nëse dini të paktën pak anglisht.

Në shumicën e shembujve të kësaj CSS tutorial Unë do të përdor stilet e brendshme pasi ato janë më përshkruesit për t'u demonstruar. Për studime të mëtejshme, është më mirë që ju të krijoni menjëherë një skedar të stileve të jashtme dhe të mësoheni me përdorimin e tyre. Për shembull, bëni një nënfolder stili, krijoni një skedar style.css në të dhe përfshijeni në faqen tuaj HTML.

Përfshirë CSS nëpërmjet rregullit @import

Një mënyrë tjetër për të përfshirë stilet që janë në skedarë të veçantë është përdorimi i rregullit . Ky rregull përdoret për të kombinuar disa fletë stili në një, gjë që ndonjëherë është mjaft e përshtatshme. Lidhja ndodh në fletët e stilit të jashtëm ose të brendshëm, për këtë, pas emrit të rregullit, shkruhet konstrukti url (), ku thonjëzat (" ") tregojnë adresën e skedarit me CSS. Ose url () nuk shkruhet fare, por thonjtë dhe adresa e skedarit shkojnë menjëherë. Sintaksa e përgjithshme është si më poshtë.

Në një fletë stili të jashtëm

@import url ("adresa e skedarit"); @import "adresa e skedarit"; ...

Në të brendshme

Le të shohim përdorimin e këtij rregulli në fletët e stilit të jashtëm, për këtë unë do t'ju jap dy shembuj për krahasim.

Shembulli 1: Normale duke përfshirë stilet e jashtme

Stilet e jashtme

Përmbajtja e faqes.

Shembulli 2: Përfshirja e stileve të jashtme me një rregull @import CSS

Stilet e jashtme me @import

Përmbajtja e faqes.

Përmbajtja e skedarit style1.css

@import url ("style/style2.css"); @import url ("style/style3.css"); Më poshtë këtu, përveç kësaj, mund të shkojnë stile të zakonshme me veti, vlera etj.

Për të sunduar punuar si duhet, duhet të specifikohet që në fillim të fletës së stilit. Përjashtimi i vetëm këtu është rregulli , e cila vjen gjithmonë e para, edhe pse në praktikë përdoret rrallë fare.

Unë nuk ju rekomandoj që të përdorni menjëherë gjithë këtë shumëllojshmëri mënyrash për të përfshirë CSS - përqendrohuni në fletët e zakonshme të stilit të jashtëm, pasi ky është opsioni kryesor. Nëse ka një dëshirë, atëherë, natyrisht, mund të eksperimentoni, por asgjë më shumë. Në përgjithësi, gjithmonë mund të vendosni se si të përfshini CSS, gjëja kryesore do të ishte se çfarë të përfshini. :)

Stilet e personalizuara

Në shumë shfletues, është e mundur që përdoruesit të përfshijnë një skedar CSS në mënyrë që ata të mund të ndryshojnë pamjen e faqeve që shohin, siç thonë ata, "për veten e tyre". Për shembull, ndryshoni madhësinë e shkronjave dhe tekstin, ngjyrën e tekstit dhe sfondit të disa elementeve, etj. Natyrisht, në këtë rast, stilet krijohen nga vetë përdoruesi. Për shembull, në Internet Explorer, mund të lidhni stile të personalizuara duke shkuar te: Mjetet → Opsionet e Internetit → Të përgjithshme → Paraqitja.

Në këtë tutorial do të mësoni se si të shtoni css në html. Konsideroni disa opsione me shembuj. Do të flasim gjithashtu për ngarkimin asinkron të stileve dhe hakimeve për shfletues të ndryshëm.

Si të lidhni css me html në një skedar të veçantë

Tani do t'ju tregoj se si të lidhni css me html me një fletë stili të veçantë. Krijohet një skedar i veçantë css. Më tej, me ndihmën e komandave speciale, lidhet me dokumentet e nevojshme. Ky lloj quhet fletë stili i jashtëm.

Kjo metodë është më e preferuara. Kjo ju lejon të zhvilloni stile faqesh veçmas nga dokumentet HTML. Stilimi mund të përdoret më pas në një skedar të vetëm style.css në shumë faqe.

E shkruajmë shtegun vetëm në etiketën e kokës. Ai specifikon të gjithë informacionin e nevojshëm të sistemit për të shfaqur faqen. Ajo lidhet si kjo:

Ka edhe mënyra të tjera për t'u lidhur. Përdorni ato vetëm si një opsion shtesë.

Vlen të thuhet se stilet inline kanë përparësinë më të lartë. Edhe nëse përfshini css të jashtëm, shfletuesi do t'u japë përparësi stileve inline për një etiketë specifike. Në vendin e dytë në prioritet janë stilet e brendshme. Ato janë inferiore ndaj të integruara, por superiore ndaj atyre të jashtme.

Në përgjithësi, si një opsion shtesë, mund t'ju duket e dobishme të përdorni stile inline ose të brendshme. Kjo është shumë e dobishme nëse dëshironi të stiloni disa elementë në një faqe specifike pa ndikuar në skedarin kryesor css.

Në kapitullin e parë, mësuat se dizajni i faqes në internet është krijuar duke përdorur CSS. Për një kuptim më të mirë se çfarë dhe çfarë të përdorim, le të shohim një shembull të mirë. Imagjinoni që HTML është korniza e strukturuar bardh e zi e një shtëpie pa dekorime, dhe CSS është ajo që ne përdorim për të krijuar një pamje unike.

Siç mund ta shihni, shtëpia në të djathtë tani ka ngjyra, materiale dhe dekorime shtesë. E njëjta gjë ndodh në një faqe interneti: me ndihmën e rregullave të CSS, ngjyrat, indencat shfaqen në të, stili i shkronjave dhe madhësitë e elementeve ndryshojnë, krijohet një stil i tërë dhe i plotë.

Fletë stili e thjeshtë

Le të hedhim një vështrim se si duket fleta më elementare e stilit dhe nga cilat elementë përbëhet. Ky është një shembull i stilit CSS për të gjitha etiketat

Të cilat janë në faqen e internetit:

Si do të duket teksti tani?

Në shfletues dhe çfarë do të thotë çdo rresht? Është shumë e thjeshtë: fonti do të jetë i theksuar dhe me ngjyrë #1E824C (kodi heksadecimal i ngjyrave) dhe do të shfaqet në një madhësi prej 1em (një njësi relative e barabartë me madhësinë e paracaktuar të shkronjave të shfletuesit).


Stili i mësipërm, si çdo tjetër, përfshin një grup elementësh që kanë emrat e tyre. Mësojini përmendësh në mënyrë që kur të lexoni kapitujt e mëposhtëm, të kuptoni se çfarë është në rrezik.

Përzgjedhësi Duke e specifikuar atë, ne i tregojmë shfletuesit se për çfarë saktësisht duam të aplikojmë stilin. Në rastin tonë, zgjedhësi është p. Blloku i deklarimit Ky është emri i të gjithë përmbajtjes midis kllapave kaçurrelë () pas përzgjedhësit. Vetia e stilit Kjo është një komandë që specifikon formatimin e dëshiruar (për shembull, dëshironi të ndryshoni peshën e shkronjave, ngjyrën, madhësinë e shkronjave, etj.). Emri i pronës duhet të pasohet me dy pika. Në vijim, do të njiheni me më shumë veti CSS. Vlera e pronës Pas dy pikave, shkruhet vlera e vetë pronës, të cilën e përcaktoni vetë, duke krijuar kështu stilin tuaj. Në varësi të pronës, duhet të specifikoni vlerën e duhur për të.

Për shembull, stili i shkronjave përcaktohet nga fjalët kyçe të theksuara, më të theksuara, etj., ngjyra përcaktohet nga një vlerë heksadecimal, RGB(A), HSL(A) ose fjalë kyçe e kuqe, portokalli, e bardhë, etj., font madhësia përcaktohet nga njësitë CSS (përqindje % , piksele px, pikë pt, font-lartësia) ose konstantet e vogla , të mesme , të mëdha , etj. Vlera e vetive ndiqet nga një pikëpresje.

Për shkak se CSS është e pandjeshme ndaj ndërprerjeve të rreshtave, hapësirave, skedave dhe rasteve, ju mund ta stiloni kodin tuaj në mënyrë që të jetë i lehtë për t'u lexuar dhe modifikuar më vonë. Për shembull, ne mund të shkruajmë kodin e mësipërm në një rresht:

P (pesha e shkronjave: bold; ngjyra:#1E824C; madhësia e shkronjave: 1em;)

Gjithashtu funksionon, por a është e lehtë ta kuptosh? Sidomos kur kodi CSS është mjaft i gjatë. Sigurisht që nuk do të dëmtonte ta ndanit të paktën me hapësira. Ka disa rregulla të sjelljes së mirë, dhe nëse i mësoni ato menjëherë, do t'i thoni vetes "faleminderit" në të ardhmen.

Shumë shpesh, kur përshkruhet një stil, përdoret një shënim kompakt, në të cilin të gjitha vetitë për një përzgjedhës specifikohen në një bllok:

P (pesha e shkronjave: bold; ngjyra: #1E824C; madhësia e shkronjave: 1em; )

Dhe kjo formë e shkrimit është shumë e rëndë, megjithëse funksionon:

P (pesha e shkronjave: bold;) p (ngjyra: #1E824C;) p (madhësia e shkronjave: 1em;)

Për ta bërë më të lehtë navigimin në kod, rekomandohet të shkruani çdo pronë në një rresht të ri dhe të përdorni skedat ose hapësirat kur listoni vetitë. Ndonjëherë ka një hapësirë ​​midis zorrës së trashë dhe vlerës së pronës, por këtu mund të vendosni se cila është më e përshtatshme për ju.

Për lehtësi të shtuar, mund të shtoni komente direkt në CSS. Në to mund të shkruani shpjegime, shënime që ju ndihmojnë të lundroni në fletët e stileve.

Komentet në CSS shkruhen midis /* dhe */. Ato nuk shfaqen në faqen e internetit në shfletues dhe janë të dukshme vetëm në kod. Zhvilluesit gjithashtu shpesh përdorin komente për të fshehur një seksion përkohësisht të panevojshëm të kodit CSS. Komentet duken kështu:

/* Stili për tekstin e trupit */ p (pesha e shkronjave: bold; ngjyra: #1E824C; madhësia e shkronjave: 1em; )

Fletët e stilit të brendshëm dhe të jashtëm

Pasi të keni krijuar fletën tuaj të stilit, mund të zgjidhni se si ta bashkëngjitni atë në faqen tuaj të internetit. Ekzistojnë dy opsione për tabelat - të brendshme, të cilat shtohen drejtpërdrejt në faqe dhe të jashtme, të cilat janë në një skedar të veçantë me shtesën .css dhe lidhen me faqen duke përdorur një lidhje.

Fletët e brendshme të stilit shkruhen në dokumentin HTML midis etiketave. Ju duhet të shtoni një fletë stili në çdo faqe interneti. Nëse faqja ka një numër të madh faqesh që kanë nevojë për të njëjtin dizajn, atëherë shtimi dhe redaktimi i stileve bëhet një punë e pafalshme - procesi do të marrë shumë kohë. Prandaj, fletët e brendshme të stilit konsiderohen të papërshtatshme.

Fletët e stilit të jashtëm janë shumë më të zakonshme. Ju vetëm duhet të lidhni tabelën me të gjitha faqet e nevojshme të internetit duke përdorur etiketën me atributin rel (përcakton marrëdhënien ndërmjet faqes dhe skedarit të përfshirë) dhe vlerën e fletës së stilit, që do të thotë se skedari i përfshirë përmban një fletë stili. Atributi href është shtegu (URL) për në skedarin tuaj .css:

Duke redaktuar vetëm një skedar, ju mund të ndryshoni stilin për të gjithë faqen menjëherë, pavarësisht sa faqe ka. Kjo është shumë e përshtatshme, veçanërisht për burime të mëdha.

Mësimi: Krijoni një fletë stili

Meqenëse fletët e stilit të jashtëm janë më të përshtatshmet dhe të përdorura gjerësisht në zhvillimin e dizajnit, ne do të mësojmë se si t'i krijojmë ato. Ju mund të shkarkoni arkivin me skedarë për këtë mësim në këtë faqe.

Në dosje do të gjeni një dokument HTML me një shembull të thjeshtë faqeje dhe një imazh (për t'u përdorur në tutorial). Hapni dokumentin HTML në një shfletues. Do të shihni që faqja duket krejtësisht normale. Për t'i dhënë asaj një pamje më tërheqëse, le të shkruajmë një stil për të.

Tani për tani, nuk keni nevojë të futeni shumë thellë në kuptimin e kësaj apo asaj pjese kodi. Tani ju duhet të kuptoni vetë parimin e punës. Le të fillojmë.

Lidhja e CSS me HTML

Për të filluar, hapni çdo redaktues teksti në kompjuterin tuaj (notepad do ta bëjë) dhe krijoni një skedar bosh të quajtur style, duke e ruajtur atë me një shtesë .css (duhet të përfundoni me një skedar style.css). Ruani skedarin në të njëjtën dosje si dokumenti HTML i shkarkuar.

Hapni dokumentin HTML në një redaktues teksti, si dhe në një shfletues (për ta bërë më të lehtë shikimin e ndryshimeve në pamjen e faqes). Shtoni midis etiketave kodin e mëposhtëm:

Shkurtimisht për atë që sapo keni bërë. Duke ngjitur këtë kod në një dokument HTML, ju:

  • ofroi një lidhje me një font të quajtur Roboto Condensed, i cili do të merret nga serveri i Google (ne do të flasim më shumë për fontet e Google më vonë);
  • përfshinte stilin tonë të jashtëm të fletës së stilit.css (deri më tani bosh).

Shkrimi i stilit CSS

Ruani ndryshimet në dokumentin HTML dhe shkoni te skedari bosh .css që keni krijuar. Le të stilojmë faqen:

Html (mbushje-lart: 5px; sfond-imazh: url(background.jpg); )

Ruani ndryshimet tuaja. Urime, ju keni shkruar rregullin e parë - ka të bëjë me etiketën . Vetia e parë, padding-top, do të shtojë një mbushje të sipërme 5 pikselësh midis dritares së shfletuesit dhe përmbajtjes së faqes së internetit. Me veçorinë e dytë, background-image , ju keni përfshirë një imazh për sfondin e të gjithë faqes duke specifikuar shtegun drejt skedarit të imazhit (i vendosur në të njëjtën dosje si dokumenti HTML).

Rifresko faqen e hapur të internetit në shfletues. Nëse gjithçka është bërë në mënyrë korrekte, do të shihni se sfondi është shfaqur në faqe dhe dhëmbëzimi midis pjesës së sipërme të dritares dhe tekstit është rritur pak.

Trupi (gjerësia: 75%; mbushja: 40 pikselë; diferenca: 15 px automatike; ngjyra e sfondit: #EBEBEB; rreze-kufi: 30 px; )

Ruani ndryshimet në skedar. Tani ti:

  • caktoni zonën për përmbajtjen e etiketës , që është e barabartë me 75% të gjerësisë së dritares së shfletuesit;
  • ofroi një mbushje prej 40 pikselësh nga të gjitha anët e zonës së përmbajtjes;
  • pozicionoi zonën në qendër të faqes, dhe gjithashtu futi pjesën e sipërme dhe të poshtme të 15 pikselëve;
  • vendosni ngjyrën e sfondit në #EBEBEB për zonën e përmbajtjes;
  • rrumbullakosi qoshet e një zone drejtkëndore, duke specifikuar një rreze rrumbullakimi prej 30 pikselësh.

Përditësoni përsëri dokumentin HTML. Në të njëjtën kohë, sigurohuni që cache është i çaktivizuar ose ringarkoni faqen me përditësimin e të gjithë skedarëve të lidhur me të, duke përdorur një kombinim të veçantë çelësash (për shembull, për Chrome kjo është Ctrl+F5).

Do të shihni se në qendër të faqes është shtuar një zonë drejtkëndore me qoshe të rrumbullakosura. Ky është rezultati i veprimeve tuaja në skedarin CSS. Mund të provoni gjithashtu ta bëni dritaren e shfletuesit më të vogël dhe të shihni se si gjerësia e zonës drejtkëndore përshtatet me madhësinë e saj. Kjo për faktin se gjerësia është vendosur si përqindje.

Ndryshoni fontin me CSS

Është koha për të dekoruar tekstin tonë. Shtoni këtë kod në fletën tuaj të stilit dhe ruani ndryshimet tuaja:

h1 ( ngjyra: #E87E04; madhësia e shkronjave: 2em; margjina-majtas: 20 px; font-familja: "Roboto Condensed", sans-serif; ) h2 (ngjyra: #E87E04; madhësia e shkronjave: 1.7em; margjina majtas : 20 px; font-familja: "Roboto Condensed", sans-serif; ) p (ngjyra: #22313F; lartësia e rreshtit: 150%; margjina sipër: 20 px; margjina majtas: 20 px; font-familja: "Roboto Condensed ", sans-serif;)

Pasi e keni shkruar këtë, ju vendosni ngjyrat e shkronjave për etiketat h1, h2, p, specifikuat madhësitë e tyre, shtoni një diferencë prej 20 pikselësh nga skaji i majtë dhe gjithashtu për

Bëmë një hapje të sipërme prej 20 pikselësh dhe vendosëm lartësinë kryesore të rreshtit (hapësira e rreshtave të tekstit) në 50% më shumë se standardi. Për më tepër, ju keni lidhur fontin Roboto Condensed me të tre etiketat (kjo është arsyeja pse në fillim ishte e nevojshme të specifikoni një lidhje me të në skedarin HTML).

Rifresko faqen në shfletuesin tuaj dhe admironi rezultatin e punës suaj. Në këtë tutorial, ne do të provojmë edhe një gjë. Shtoni këtë kod në CSS:

Theksimi (pesha e shkronjave: bold; )

Ruani dhe rifreskoni faqen në shfletues. Do të shihni që në paragrafin e fundit, fonti në një pjesë të tekstit është bërë i theksuar. Për të kuptuar se çfarë ndodhi, shkoni te dritarja e redaktuesit të tekstit ku hapët skedarin HTML që në fillim. Hidhini një sy paragrafit të fundit: një pjesë e fjalisë është e mbështjellë me një etiketë me theksin e klasës. Kështu, ju keni shkruar një stil për një rresht të vetëm teksti në një paragraf. Ne do të flasim më shumë për klasat në kapitullin tjetër.

Në fund, duhet të keni një faqe si kjo:



Si praktikë, provoni të ndryshoni madhësinë e tekstit për

(le të themi 1.1em) dhe rrisni mbushjen ndërmjet

Dhe skaji i majtë i zonës së përmbajtjes me 10 piksele të tjera.

konkluzionet

Ky kapitull ka mbuluar sintaksën e CSS, si dhe mënyrën e krijimit të një fletë stili rudimentare. Ju keni mësuar se si të përfshini CSS në një faqe HTML dhe gjithashtu keni mësuar se si të krijoni stile të thjeshta. Këtu janë gjërat kryesore që duhen mbajtur mend nga ky kapitull:

Çdo stil CSS përbëhet nga disa elementë: një përzgjedhës, një veti stili dhe vlera e asaj vetie.

Të gjitha vetitë dhe vlerat e tyre shkruhen në një bllok deklarimi midis dy kllapave kaçurrelë () pasi të specifikohet zgjedhësi.

Duhet të ndiqni me kujdes shenjat: dy mbajtëse kaçurrelë (hapen në fillim të bllokut të deklarimit dhe mbyllen në fund). Pa këto kllapa, CSS nuk do të funksionojë siç duhet.

Është e detyrueshme vendosja e dy pikave pas pronës dhe pikëpresjes pas vlerës.

Për lehtësi dhe lexueshmëri më të mirë të kodit CSS, shkruani secilën veçori në një rresht të ri dhe mos kurseni në hapësirat dhe skedat.

Diten e mire! Në këtë artikull, unë do të tregoj metoda të ndryshme për përfshirjen e CSS në HTML. Unë gjithashtu do të shpjegoj hollësitë dhe nuancat e ndryshme të mënyrave të ndryshme të lidhjes së stileve.

Lidhja e brendshme

Një fletë stili e brendshme është një grup stilesh, pjesë e kodit të një faqeje interneti, që duhet të shfaqet gjithmonë midis etiketave hapëse dhe mbyllëse. Kodi HTML, në etiketën e trupit të një faqe interneti. Shembull:

Lidhja e brendshme e stileve

Teksti i verdhë me fontin Verdana