Do të mësojmë se çfarë janë fletët e stilit kaskadë, çfarë është stili CSS dhe do të mësojmë se si ta vendosim atë për elementët HTML.
Për këtë artikull ju tashmë keni mirëkuptim i qartë që gjuha e shënjimit të hipertekstit përdoret për të përshkruar përmbajtjen e një faqeje interneti. Kur lundrojmë në internet, vërejmë se faqet duken ndryshe: ngjyra, shkronja, të ndryshme ndarja e vijave, imazhet e sfondit dhe madje edhe animacion. Pa e vendosur në një kuti të largët, dua t'ju shpjegoj menjëherë se mënyra se si do të duken këto faqe, ndikohen nga fletët e stilit kaskadë (Fletët e stilit të kaskadës - CSS). Si pjesë e tutorialit HTML, ne do të shikojmë shkurtimisht përdorimin e fletëve të stilit kaskadë, mund t'i studioni ato në detaje pas këtij kursi në seksionin e tutorialit CSS.
Çfarë është stili? Komplete stilesh pamjençdo element të faqes, d.m.th. përafërsisht, është një rregull që i tregon shfletuesit se si të formatojë një element të caktuar (për shembull, të ndryshojë ngjyrën e sfondit ose të shkronjave).
Çdo element HTML ka stili i paracaktuar... Ndryshimi i stilit të paracaktuar në një element HTML mund të bëhet duke përdorur atributin e stilit global. Atributi specifikon të ndërtuara (ne rresht) Stili CSS për elementin. CSS inline përdoret për të aplikuar një stil unik në një Elementi HTML... Në kuadër të mësimi i HTML ne do të mbulojmë vetëm duke përdorur CSS inline.
Këshillë: Ky shembull përdor ngjyrat e mëposhtme: të bardhë(e bardhë), kaki(kaki), gri(gri). Për tekstin e poezisë përdoret fonti Verdana.
Nëse keni ndonjë vështirësi në përfundimin e detyrës, atëherë inspektoni kodin e faqes duke hapur shembullin në dritare e veçantë duke klikuar mbi imazhin.
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 në mënyrë që stilet tona të aplikohen, është e nevojshme të lidhemi skedar HTML dhe një skedar 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ësive të ndryshme font për dy paragrafë të ndryshëm të tekstit:
< p style= "font-size:25px;" >Vendoseni këtë segment të tekstit në një lartësi prej 25 pikselësh. < 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 të ngjyroset 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 zhvillohet si më poshtë: një bllok, mbi dizajnin e të cilit punë në vazhdim, ekrani: shkruhet blloku, 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.
Ka katër mënyra për të vendosur CSS stil për etiketat HTML.
1) Stili inline.
2) prezantuar stil
3) I importuar stil.
4) Stil nga skedari.
Dhe në këtë artikull do të shqyrtojmë të katër metodat.
Si fillim, mënyra e parë është stil inline... Ky stil specifikohet drejtpërdrejt në vetë etiketën. Për shembull:
teksti
V në këtë rast ne vendosëm elementin në " teksti"do të jetë në madhësi 150% dhe në linjë me qendër... Ky është një shembull stil inline.
Mënyra e dytë është e ngulitur Stili CSS, pra stili që vendoset në kokën e dokumentit, në etiketë ... Për shembull, si kjo:
Këtu do të ndodhë si më poshtë: për të gjithë elementët brenda etiketës
do të bëhet si më poshtë: ngjyra e tyre do të jetë e kuqe dhe diferenca e sipërme do të jetë 100 piksele.
Mënyra e tretë e detyrës Stilimi CSS- atë stilet e importuara... Ata janë gjithashtu si të ngulitura janë vendosur në kokën e dokumentit, por tashmë nga një dosje. Ja një shembull:
Këtu stilet nga skedari do të aplikohen në të gjithë faqen " my.css".
Dhe vështrimi i fundit Stilet CSS janë stilet nga skedari. Kjo metodëështë më i zakonshmi dhe konsiston në përfshirjen e skedarit të stilit përmes etiketës në kokën e dokumentit. Për shembull, në këtë mënyrë:
Kjo metodë është shumë e ngjashme me mënyra e mëparshme por etiketa nuk përdoret këtu
Nëse shkruani kod si ky midis etiketave ... , atëherë të gjithë titujt e nivelit të parë do të jenë blu. Me këtë metodë, stilet vendosen duke përdorur etiketa ... Gjithashtu tegu , por jo siti në tërësi.
Titulli i nivelit të parë
Titulli i nivelit të tretë me qendër në dokumentin html
Titulli i nivelit të gjashtë, i rreshtuar djathtas në faqen e internetit
Pas kësaj ne krijojmë skedar i ri përmbajtje të tillë:
H1 (ngjyra: blu;)
H3 (ngjyra: e kuqe;)
H6 (ngjyra: jeshile;)
Dhe ruajeni si stil me shtrirje * css... Shihni rezultatin. Ky është skedari ynë html me kokë. Le të analizojmë tani se si funksionon ky ndërtim. Në një dokument html me tituj, ne jemi midis etiketave ... shkroi rreshtin e mëposhtëm:
Këtu duke përdorur etiketën ne po lidhim fletët e stilit me dokumentin html. atribut href i referohet vendndodhjes ku ndodhet fleta e stilit, ky është një atribut i kërkuar. atribut lloji ne tashmë e dimë se ai specifikon llojin e fletës së stilit. atribut rel tregon lidhjen e skedarit të përfshirë me dokumentin html të dhënë. Në rastin tonë, vlera e atributit rel = "fletë stili" tregon se kemi shtuar kryesor fletë stili. Avantazhi i kësaj metode të specifikimit të fletëve të stilit është se nëse dëshironi të ndryshoni dizajnin e faqes në tërësi, duhet të ndryshoni vetëm një skedar me fletë stilesh.
