Stílus- az objektum külső reprezentációját meghatározó paraméterek halmaza. Tegyük fel például, hogy szeretnénk az összes első szintű címsort (címkéket

) az egyik oldalon piros, 24-es méretű és dőlt betűkkel, a másik oldalon kék színű, 12-es méretű lenne. A címünk egy tárgy, a szín, a méret és a stílus pedig opciók. Csak az objektumunk paraméterei eltérőek a különböző oldalakon, pl. stílusban különböznek egymástól.

Az oldal minden elemének saját stílusa lehet (bekezdések, címsorok, sorok, szöveg...). Az összes elem stíluskészletét ún stíluslap.

Ha egy elemhez több stílus is meg van adva (mint a címsoros példában), akkor a lépcsőzetes, amely meghatározza egy adott stílus prioritását.

A CSS előnyei

• A CSS lehetővé teszi a kód méretének jelentős csökkentését és olvashatóvá tételét.
• A CSS lehetővé teszi olyan paraméterek beállítását, amelyek nem állíthatók be egyedül HTML-ben. Például távolítsa el az aláhúzást a hivatkozásokról.
• A CSS megkönnyíti az oldalak megjelenésének megváltoztatását. Képzelje el, hogy készített egy 50 oldalas webhelyet, amelynek minden címe kék színű. Egy idő után változtatni akartál kék szín zöldre. Végig kell mennie mind az 50 oldalon, és meg kell változtatnia a színt a megfelelő attribútumban. A CSS használatával ezt csak egyszer kell megtennie, a stíluslapon.
• Az oldal úgynevezett blokk elrendezése a CSS-hez van társítva.

Vagy ha ismeri a HTML-t, és más forrásokból gyűjtötte össze a szükséges ismereteket, akkor ideje elkezdeni a CSS tanulását.

CSS (Cascading Style Sheets)- A lépcsőzetes stíluslapok stílusleírások, bizonyos HTML címkék (továbbiakban HTML elemek) gyűjteménye, amelyek egy címkére - egy elemre - és egyidejűleg az oldal összes oldalán lévő összes azonos elemre alkalmazhatók. A CSS lényegében a HTML kiegészítése, amely nagymértékben kibővíti a képességeit.

És akkor mi van? Azt kérdezed .. Miért van szükségem erre a hírhedt CSS-re? Nagyon jól jártam a HTML-lel tiszta formájában!

Számos okot fogok felhozni mellette CSS használatával:

A HTML tiszta formájában nagyon korlátozott eszközkészlettel rendelkezik, amelyek nem teszik lehetővé a webmester bizonyos tervezési és funkcionális elképzeléseinek megoldását. Nos, legalább például vegyük a kezdő webmesterek fájó pontját: "Hogyan távolítsuk el a hivatkozás aláhúzását?" vagy "Hogyan változtathatja meg a színét és kiemelheti, ha éppen erre a linkre viszi az egérmutatót?" erre nincs mód egyedül HTML-el!! És hány ilyen "fájdalmas kérdés" van még? - sötétség .. Itt jön a segítség a CSS, ami megoldja a legtöbb oldaltervezéssel kapcsolatos problémát.

Tegyük fel, hogy írtál egy 100 oldalas oldalt .. jó oldal, informatív, látogatják az emberek .. És hirtelen valamiért változtatni kellett a dizájnján, nem tudom, megváltozott a divat, te találtak jobbat tervezési megoldás, az ügyfélnek nem tetszett .. de soha nem tudhatod, miért .. Mennyi időbe és erőfeszítésbe kerül az oldal mind a 100 oldalának teljes újrakészítése? A CSS ésszerű megoldást kínál erre a problémára. De mi van, ha egyszer egy külön fájlban teljesen leírja a webhely teljes kialakítását? Mondjuk: minden fejléc

tedd pirossal, bekezdések

írd dőlt betűvel, linkeket ne húzd alá :) az összes oldal háttere zölddel van kitöltve, és így tovább... majd csak tedd ezt a 100 HTML oldalt hozzáférni a CSS fájlhoz, és kikaparja belőle a szükséges információkat? Most, amikor például úgy dönt, hogy átszínezi az összes címsort pirosról zöldre, nem kell megnyitnia mind a 100 oldalt, hogy címkéket találjon bennük.

és mindegyikben jelezd, hogy most nem piros, hanem zöld vagy! Csak meg kell nyitnia a fájl leírását, és módosítania kell a benne lévő elem színét

zölden és ennyi!! A webhely minden oldalán minden címsor zöldre vált, mintha varázsütésre lenne.

Tekintettel arra, hogy a CSS lehetővé teszi ugyanazon elemek ismétlődő stílusleírásainak egy fájlba helyezését, a HTML-dokumentumok jelentős "kiterhelése" történik, amivel mennyiséget, forgalmat, időt, pénzt takarítanak meg. A HTML kód könnyűvé, könnyen olvashatóvá válik és szerkessze.

Hogy van ez? Érdekelt? Ha igen, akkor azt javaslom, hogy folytassa a CSS közvetlen tanulását. Ennek az oktatóanyagnak a fejezeteiben megtanulhatja, hogyan ágyazhat be lépcsőzetes stíluslapokat webhelye oldalaiba, megismerkedhet az elemek alapvető stílustulajdonságaival a CSS használatával történő webhelykészítés példáján keresztül, valamint elmélyülhet a webhely bonyolultságaiban és trükkjeiben. ügy. Ha már ismeri a lépcsőzetes stíluslapokat, és csak a hivatkozási információk érdeklik, akkor javaslom, hogy nézze meg a CSS-referenciát, ahol a CSS-tulajdonságokat és azok lehetséges értékeit összegyűjtik és röviden leírják.

Helló. Ideje írni valamit a témában. A címből kiderül, hogy miről szól ez a bejegyzés, de egy kicsit pontosítanék.

Nem fogok nyelvi alapismeretekről tankönyvet készíteni a blogomból, nem fogok beszélni arról, hogy mi az osztály, a választó, az idézetek és a pontok. Annyi anyagot rágcsáltak már a weben, hogy egyszerűen nincs értelme megismételnem. Nem szeretném úgy elindítani a blogomat, hogy más oldalak cikkeit saját szavaimmal átírjam (ahogy a legtöbb "blogger" teszi).

De szívesen megosztok érdekes trükköket, trükköket és általában hasznos technikákat, amelyeket a munkám során használok!

Térjen a tárgyra

A definíciókat a Wikipédiából veszem:

HTML(az angol HyperText Markup Language nyelvből - "hiperszöveg jelölőnyelv";) - szabványos jelölőnyelv dokumentumokhoz A világháló... A legtöbb weboldal HTML (vagy XHTML) használatával készül. A HTML-t a böngészők értelmezik, és dokumentumként jelenítik meg emberbarát formában.

CSS(angol Cascading Style Sheets – lépcsőzetes stíluslapok) – formális leíró nyelv kinézet jelölőnyelvvel írt dokumentum. Főleg a HTML és XHTML jelölőnyelvekkel írt weboldalak megjelenésének leírására, díszítésére szolgál, de alkalmazható bármilyen XML dokumentumra, például SVG vagy XUL.

Annyira egyértelműnek tűnik mi az a HTML és CSS, de akkor is a saját szavaimmal mondom.

A HTML egyfajta építőanyag a weboldalak számára. A speciális címkék (parancsok, a böngésző számára különleges jelentéssel bíró szavak) beolvasásával a böngésző egy oldalt készít, amelynek ablakában szöveg, kép és egyéb tartalmak találhatók.

A CSS az a burkolóanyag, amely minden szépséget megtesz.

Nagyjából a HTML az mi legyen az oldalon, és a CSS felelős hogyan kell kinéznie... A CSS-nek köszönhető, hogy különféle effektusokat, animációkat és egyéb finomságokat láthatunk az oldalakon.

Egy kis történetem

Amit most írok, az már fent van az oldalon, de leírom mégegyszer és felteszem :)

2008-ban hoztam létre az első honlapomat. Ucoz rendszeren működik. Már nem emlékszem pontosan hogyan, de az egyik osztálytársam mesélt az Ucozról és arról, hogy milyen egyszerű ott saját weboldalt készíteni. Csodálkoztam. Nem tudom miért, de "menő" volt saját weboldalt készíteni. Ekkor tanultam meg a HTML-t. De tanultam, nem tanultam :) Úgy tűnik, a suli 9. osztálya volt. Jelentkezés által Alap tudás a photoshop és az Ucoz segítségével mégis sikerült weboldalt készítenem.

Sziklatelep. A fő hírfolyamon és egy hangulatos fórumon) Kár most megmutatni, de azt hiszem, lesz bátorságom a jövőben.

Életemben a címkék második említése az informatika első évében történt. Igen, sok abszurd feladat volt ebben a témában, és jobb lenne, ha az MS Access helyett AutoCAD-et tanulnánk (de várostervezők), de továbbra is hálás vagyok a feladatért, hogy néhány HTML oldalból weboldalt készítsek. . Eleinte tényleg nem törődtem vele, de tetszett, amikor leültem hozzá.

Felvettem az előadás jegyzeteit, és elkezdtem írni az oldal szerkezetét a tábláról másolt címkékkel, de... rájöttem, hogy nem tudok semmit sem csinálni, amit kitaláltam, és elkezdtem többet olvasni a html-ről. az internet (akkor még fogalmam sem volt a css-ről). Ennek eredményeként az én munkám volt a legjobb a csoportban, de sajnos ezt szinte senki sem értékelte, hiszen pontokat adtak, ha van munkám, de ha volt minősítés a munkára ...

Na jó, amúgy elégedett voltam magammal. Az előttem álló feladat az volt, hogy az elemeket úgy helyezzem el az oldalon, ahogy én szeretném, és ne úgy, ahogy az előadásjegyzetekből kiderült. A probléma az, hogy a HTML nem rendelkezik azzal a funkcióval, hogy egy elemet 20 pixelre helyezzen el a böngészőablak jobb szélétől. És akkor arra gondoltam... .mi lenne, ha egy táblázatba tenném a szükséges elemet, amit a főtábla cellájába teszek, aminek a széle nem látszik, de az egész oldalt elfoglalja és beállítja a méreteket cellák, el tudom helyezni azt az elemet 20px-es behúzással a jobb széltől ?? ... Kipróbáltam - működött!

Csak a CSS előtt tudtam meg, hogy ez általános gyakorlat volt, amikor elkezdtem komolyan foglalkozni a webes technológiákkal. Nem, nem dicsérném magam, de jó volt áthelyezni a jelentéseket, és eljutni ahhoz, hogy az emberek mit használnak a munkájuk során.

Mi kell ehhez?

2011 októberében elkezdtem komolyan tanulmányozni az egész ügyet, ami simán bekerült életem fő tevékenységébe. Weboldalakat akartam készíteni. Tudtam, hogy ehhez HTML-re van szükségem. Aztán találkoztam a CSS-re való hivatkozásokkal. Úgy döntöttem, kicsit részletesebben megértem, mi ez, és ... nagyon szoros volt! Azok az oldalak, ahova eljutottam, úgy tűnt, alapvető ismereteket adtak, de nem volt olyan pillanat, amely a tudatlanságtól az alapvető pontokig teljes teáskannát hozna. És akkor véletlenül belebotlottam ingyenes videók Jevgenyij Popov leckéi. Először is megzavart, hogy meg kell adni az e-mail címemet és a nevemet, hogy ingyenes videó tanfolyamot kaphassak. Hát a fenébe, spammelnek, vagy akár feltörik a leveleimet, nem akarom! De mégis úgy döntöttem)

De... semmi sem érkezett a postafiókomba (kapnom kellett volna egy linket, ahol ingyenes HTML és CSS tanfolyamokat tölthetek le). Így hát elmentem az ex.ua-ra és onnan letöltöttem őket :) Hősiesen gondolkodva arra gondoltam, hogy nem kell HTML tanfolyam, úgy tűnik, ismerem egy kicsit, de megnézem a CSS-t. Megnéztem az első leckét – rájöttem, hogy először meg kell néznem és megtanulnom a HTML-t.

Mit mondjak nektek, srácok... jobb, mint az összes oktatóoldal együttvéve. A szerző mindenhol a lehető legegyszerűbben ír, ahogy látja, de ez mégsem elég egy teáskannához. Csak hát a szerző el sem tudja képzelni, hogy „ezt” figyelmen kívül lehet hagyni. És E. Popov nem csak elmagyarázza, hogyan kell kicsinek és butának lenni, hanem megmutatja minden lépését, és pontosan ez az, amire szüksége van, ha HTML / CSS-t szeretne tanulni!

Semmi hasznomra nincs abból, hogy felajánlom ezt a tanfolyamot, de Eugene valószínűleg megteszi. És nem bánom. Neki köszönhetően könnyebben belevágtam a webfejlesztésbe.

De van egy kis "de". CSS-tanfolyamán egy szót sem ejtett a CSS3-ról – minden modern effektus alapjáról. De hidd el, ismerve és megértve, hogy mi az a CSS, nagyon könnyű lesz információt találni a CSS3-ról az interneten. Nos, és a különféle technikákat (ahogy fentebb mondtam) leírom a blogomban.

A kurzusok tanulmányozása után létrehoztam az első valódi webhelyemet (személyes tárhely stb. tekintetében). Igen, fogalmam sem volt, mi a PHP és a MySQL, meg a WordPress stb.

DE ez egy teljesen más történet...

Az interneten számos hasznos webhely található leckékkel, de ha igazán jó megoldásra van szüksége a kérdésére, akkor a legjobb, ha megnézi a habrahabr.ru webhelyet.

Kezdetben gyakran használtam csalólapot: egyet és kettőt.

Talán beszúrok ide néhány hasznos linket, vagy közzéteszem a cikk második részét, ezért javaslom, hogy iratkozzon fel a hírekre az alábbi űrlapon.

Sziasztok a blogoldal kedves olvasói. Ma szeretnék elkezdeni részletesen beszélni a CSS-ről (az anyagok felhalmozódnak a megfelelőben).

Itt az ideje, hogy rátérjünk a HTML megtanulása után. A stílusjelölő nyelv felelős a webhely oldalainak külső kialakításáért, és ennek megértése nélkül nagyon nehéz lesz valamit javítani, áthelyezni vagy igazítani.

Természetesen a Css a HTML-lel összehasonlítva sokkal bonyolultabbnak tűnik, de itt a böngészők közötti elrendezésről van szó, de ha a saját weboldalunk kialakításában kell valami apróságot javítani, akkor nem kell sok intelligencia. Általában megpróbáljuk részletesen szétszedni az alapjait, és máris filigrán használatuk árnyalatai megmaradnak az opcionális tanulmányozáshoz (opcionális). De minden webmesternek ismernie kell az alapfogalmakat.

Mi az a CSS és mire való?

A CSS rövidítés a Cascading Style Sheets (Cascading Style Sheets) rövidítése, vagy az orosz fordításban a lépcsőzetes stíluslapok rövidítése. Mi ez és miért találták fel egy időben ezt a nyelvet?

Tehát a kicsit korábban tanulmányozottak alapján elmondhatjuk, hogy egy webdokumentum jelölése ennek a nyelvnek a címkéivel történik. Azok. HTML segítségével elkészítjük dokumentumaink (weboldalaink) szerkezetét. A tiszta HTML-ben például a dokumentumszerkezet más elemeit is meghatározhatjuk, sőt a böngészőben olyan megjelenést adhatunk, amilyet szeretnénk.

De az idő megszabta, hogy egyre több vizuális tervezési attribútumot kell használni a HTML-ben, ami nagyon szennyezett. forrás... Ezzel kapcsolatban egy másik, ígéretesebb fejlesztési lehetőséget javasoltak - külön stílusjelölő nyelv létrehozása CSS. És ennek a lehetőségnek számos előnye volt a tervezési attribútumok számának egyszerű növelésével szemben.

Miért? Emlékszel, hogyan lehet színt beállítani egy szövegrészhez tiszta HTML-ben? Így van, segítséggel. Mi a teendő, ha egyszerre több bekezdést szeretne a kívánt színre festeni a szövegben?

Ezután be kell illesztenie a Font címkéket a kívánt értéket színek a Color attribútumban.

Mindez borzasztóan össze fogja zsúfolni a forráskódot, ami nagyon-nagyon nem kívánatos, mert az oldal betöltési sebessége csorbát szenved, és felesleges terhelés keletkezik az internet kommunikációs eszközein. A fejlesztők ezt nem tudták "elfogadni".

Ezért a következő kiutat találták ki ebből a helyzetből. A W3C fejlesztői úgy döntöttek, hogy egy webdokumentum összes vizuális megjelenítését egy speciális stílusú jelölőnyelv formájában tervezik meg, amelyet lépcsőzetes stíluslapoknak, vagy egyszerűen CSS-nek (c-es-es-nek) neveztek. Mi a technológia lényege?

A lényeg pedig a következő - ha a stílusjelölő nyelvet bármilyen dokumentumhoz (oldalhoz) kapcsoljuk, be tudjuk állítani az összes elem vizuális megjelenítését ( generált html címkék), amelyek ebben a dokumentumban fognak megjelenni.

Van egy forrás az interneten, amely segít nagyon világosan látni, hogyan változtathatja meg egy weboldal megjelenését csak azért, mert egy másik lépcsőzetes stíluslapfájl csatlakozik hozzá. Véleményem szerint ez lenne a legjobb válasz a következő kérdésre: mi az a CSS és miért van rá szükség.

A dokumentum (weboldal) alapnézetét erre a linkre kattintva tekintheti meg:

Semmi különös, de ha a bal oldali menüben a "Minden terv megtekintése" linkre kattintunk, akkor egy másik stílus (egy másik stíluslapfájl) összekapcsolásával ugyanarra a weboldalra több tucat vagy akár száz tervezési lehetőséget láthatunk.

Kérjük, vegye figyelembe, hogy az eredeti HTML-kód pontosan ugyanaz marad, de csak a CSS stílus változik... Elképesztő, nem?!

A CSS nem jelölőnyelv abban az értelemben, mint például a HTML. Ez a stílusjelölő nyelv - saját szintaxisa, saját belső tartalma van, és sok tekintetben nagyon különbözik a korábban tanulmányozottaktól.

Ezenkívül a HTML-hez képest a stílusnyelv sokkal összetettebb. Nagyon sok olyan árnyalat van benne, amit az alapfogalmakon kívül tudnia kell. A HTML-ben nem voltak különösebb árnyalatok - minden elemet tanulmányoztunk, és biztonságosan dolgozhat a kóddal. Számomra úgy tűnik, hogy a CSS-t a sakkhoz lehet hasonlítani – nem elég tudni, hogy az összes figura hogyan mozog, hanem játszani is tudni kell.

Tehát mi ez és miből áll? Ez az állítólagos nyelv lehet két részre osztani:

1. Szabályok, amelyek megmondják a böngészőnek, hogy egy elem hogyan jelenjen meg a képernyőn.
2. A szelektorok olyan címkék, amelyek segítségével a böngésző megértheti, hogy a HTML-kód mely elemeire kell alkalmaznia ezeket a szabályokat.

Most nézzük meg, hogyan kapcsolódik a stílus a weboldal forráskódjához. Három fő módja van CSS használatával HTML-lel együtt:

1. Melléklet – A CSS-kódot közvetlenül a kívánt elemcímkébe írják a Style attribútummal
2. Beágyazás – a webdokumentum összes stíluskódja a fejlécébe van írva (a Head címkék belsejében) a Style elem segítségével
3. Linkelés - minden CSS kód egy külön külső fájlba kerül (renderelve), amely a fejlécében található Link elem segítségével kapcsolódik a dokumentumhoz

Nos, látod, már sokat tanultunk a stílusjelölő nyelvről. Itt az ideje, hogy beszéljünk róla szintaxis... Általában nagyon egyszerű:

A CSS-kód egyik szabálya két elemből áll - egy tulajdonságból (példánkban ez) és annak értékéből (példánkban piros és #CCCCCC). Előfeltétel az kettősponttal választva el egy tulajdonságot az értékétől.

További. Az egyik szabályt el kell választani a másiktól. pontosvessző... Az utolsó szabály után már nem lehet pontosvesszőt tenni, de a túlzások elkerülése érdekében a legjobb, ha szabálysá teszi, hogy mindig tegye. ezek nem számítanak a CSS-kódban, és saját belátása szerint beállíthatja őket.

A Stílus használata a Css és a HTML kód összekapcsolásához

Nos, most nézzünk példákat a stílusszabályok dokumentumunkra való alkalmazásának mindazon módjaira, amelyek léteznek, és amelyeket a fentiekben általánosságban leírtunk.

Az első módszert módszernek nevezik css beágyazása html-be a Stílus attribútum használatával:

Nézzük meg, hogyan lehet ezzel a módszerrel beállítani egy bekezdés színét és hátterét:

Mi az a fészkelő módszer

Mint látható, egy enyhe húzással pirosra festettük a bekezdés szövegét (szín: piros), és egyben szürke hátteret tettünk alá (háttér: #cccccc). A stílus arra a hatra utal, amely abszolút bármilyen címkével együtt használható (ezek a képernyőkép alján vannak felsorolva):

A Css-ben is aktívan használjuk majd az univerzálist, de erről majd a következő cikkekben lesz szó, de egyelőre fontolóra vettük annak lehetőségét, hogy a Style segítségével összekapcsoljuk a stílustervezési szabályokat bizonyos elemeket Html kód... Lehetővé teszi, hogy ezeknek a szabályoknak a halmazát használja értékként (korlátlan mennyiségben).

A Style attribútumot használó beágyazási módszer nagyon könnyen megvalósítható a gyakorlatban, de ennek ellenére valós elrendezésben nagyon ritkán használják... De másrészt segítségével nagyon egyszerűen kipróbálhatsz és kísérletezhetsz valamit, és csak ezután viheted át ezeket a szabályokat külön fájl CSS stíluslapokkal.

A stílusjelölő nyelv összekapcsolásának következő módja a metódus CSS beágyazása html-be... Ez a módszer alapvetően különbözik a korábban tárgyalt beágyazási módszertől.

Ahelyett, hogy az oldal minden címkéjébe belefoglalnánk a stílusnyelvi szabályokat tartalmazó Style attribútumot, most egyetlen dokumentumba írjuk be az összes CSS-szabályt, amelyre szükségünk van ehhez a webdokumentumhoz. Stíluscímke, amely viszont a dokumentum fejlécében lesz elhelyezve (a Head elemek között).

Emlékszel, mi az a Head, és hol van írva egy webdokumentum szerkezetében? Ha nem emlékszik, nézze meg ezt a blokkdiagramot:

Azok. kódban így nézhet ki:

... ...

Nem egészen világos? Nos, egyelőre megpróbálom ezt illusztrálni:

Annak érdekében, hogy a böngésző ne vegye át a hipertext jelölőnyelv stílusszabályait, a szükséges attribútumot be kell írni a Style elembe Írja be a "text / css" értéket(médiatartalom fejléc lépcsőzetes stíluslapokhoz). Hogy. az elemen belüli kódot a böngésző CSS-ként értelmezi.

Nézzük tovább a fenti példát. Amint látja, a stílus uralkodik be van zárva kapcsos zárójel , előttük pedig az úgynevezett választó található a latin "P" betű formájában. Miért van szükség erre a választóra?

Ellenkező esetben elmondhatjuk a böngészőnek, hogy ezeket a CSS-szabályokat csak a webdokumentum bekezdéscímkéire (P választó) kell alkalmazni, semmi másra.

Itt ismét érintettük a szintaxis kérdését. A beágyazási és beágyazási módszerek használatakor minden CSL-szabályt kapcsos zárójelek közé kell tenni, és meg kell előznie feltétlenül álljon vagy több választó:

CSS-választó (Tulajdonság: Érték; Tulajdonság: Érték)

A beágyazási módszer alkalmazásakor nem alkalmaztuk a szelektort és a göndör kapcsos zárójelet, hiszen már a böngésző számára világos volt, hogy ezeket a CSS szabályokat pontosan arra a címkére kell alkalmazni, amibe a Style attribútumot írják.

A beágyazási vagy egymásba ágyazási módszer alkalmazásakor bonyolultabbá vált a helyzet annak meghatározásakor, hogy kiknek szólnak ezek a stílusszabályok, és szükségessé vált a kapcsos kapcsos zárójelek és a szelektorok használata. Hogy. közöljük a böngészővel, hogy ezt a CSS-szabálykészletet (kapcsos kapcsos zárójelek között) alkalmazza minden bekezdésre, és ez a készlet valami másra vonatkozik.

A legegyszerűbb esetben választóként használhatjuk annak a tagnek a nevét, amelyre a CSS nyelv szabályait alkalmazni kell, kapcsos zárójelek közé zárva, amelyek közvetlenül a választó neve után nyílnak meg. Példánkban a "P" bekezdéscímke nevét használjuk választóként. A stílusjelölő nyelv szelektorairól a következő cikkben (lásd a fenti linket) részletesebben fogunk beszélni.

Összefoglalva a CSS-kód HTML-dokumentumba való beágyazásának módszerét: a dokumentumhoz szükséges összes stílusszabály egyetlen stíluscímkében lesz leírva, és nem sok különböző elemben, mint a beágyazási módszer használata esetén. fentebb leírtuk.

A CSS-stíluslapok eltávolítása külön fájlba a Link segítségével

A stíluskód webdokumentumba való integrálásának utolsó módja az ún kötési módszer... Ennek a módszernek a legegyszerűbb bemutatása:

Legfőbb különbsége a fentebb tárgyalt módszerektől (beágyazás és beágyazás) az, hogy a linkelési módszer használatakor a CSS nyelv összes szabálya külön külső fájlba kerülnek... Ismét szöveges lesz (mint minden HTML-dokumentum), és általában .css kiterjesztések vannak hozzárendelve, így a helyi számítógépen a Windows vezérlés lehetne kinevezni speciális program ().

Külső CSS-fájl használatakor speciális Link címke, ami ismét a nyitó és záró Head elemek közé kerül a weboldal fejlécében. A link nem látható a böngészőben.

Ebben az esetben a böngésző megkeresi a megadott stíluslap fájlt (mielőtt a Link címke Href attribútumában megadná), betölti és a megadott CSS szabályokat alkalmazza az aktuális HTML dokumentum külső kialakításához.

Általánosságban elmondható, hogy a linkelés nagyon hasonlít a kicsit korábban ismertetett Style címke használatához, de lehetővé teszi a webhely oldalak betöltésének jelentős felgyorsítását és az internet kommunikációs berendezéseinek terhelésének csökkentését.

A Style elem (beágyazási mód) használatakor a böngészőnek minden alkalommal be kell töltenie a dokumentum HTML kódját és a hozzá beépített CSS-szabályokat és szelektorokat, külső stíluslapfájl használata esetén pedig a böngészőt. csak egyszer kell betöltenie a Style.css fájlt, és csak ezután kell kivennie a saját gyorsítótárából (egy terület a felhasználó számítógépének merevlemezén), amikor webhelye más oldalait tervezi.

A Link címke type = "text / css" attribútuma azt jelenti, hogy ez a médiatartalom nem más, mint egy stílusjelölő nyelv. De akkor is, ha CSS-fájlt és HTML-dokumentumot kapcsolunk össze egy Rel attribútum stíluslap értékkel... A lényeg az, hogy a Link (szolgáltatási hiperhivatkozás) teljesen más célokra használható.

Ha böngészőben megnézi ennek az oldalnak a forráskódját, látni fogja, hogy a Head területen egy csomó különböző linkcímke található:

Az egyes szolgáltatáshivatkozások célját pedig az érték határozza meg a Rel attribútum... Például a rel = "shortcut icon" a fájl elérési útját jelöli, a rel = "alternate" pedig egy oldal alternatív változatát (például egy HTML-dokumentum alternatív ábrázolása).

Nos, a rel = "stylesheet" attribútum használata esetén a Linkben beállítjuk a böngészőt stíluslapfájl elérési útja(a Href attribútumban ez az útvonal megadható abszolút vagy relatív formában). Azok. a Rel attribútum segítségével elmondjuk a böngészőnek, hogy hogyan fog kinézni a fájl, amelynek elérési útja a Href-ben van megadva (stíluslap - CSS-szel).

Az oldalakon a kötési módszert szinte mindig alkalmazzák CSS és HTML (külső stíluslapfájl). A stílusattribútumokat és címkéket általában csak tesztelésre használjuk, bár előfordulhatnak olyan konkrét feladatok, amikor ezek használata indokolt lesz (például tervezéskor). De az oldalakon végzett valódi munka során a külső fájlokat használják, pl. kötési módszer.

Ezért megengedem magamnak, hogy kivegyem a szabadságomat, és megígérem, hogy a folytatás a közeljövőben következik. Még egyszer megismétlem, hogy a CSS-t általában sokkal nehezebb megtanulni, mint a CTML-t, ezért igyekszem a lehető legrészletesebben és vizuálisan fogalmazni.

Sok szerencsét! Hamarosan találkozunk a blog oldalain

Lehet, hogy érdekel

Listastílus (típus, kép, pozíció) – Css-szabályok a listák HTML-kódban való megjelenésének testreszabásához
Megjelenítés (blokk, nincs, soron belüli) CSS-ben - állítsa be a megjelenítési típust Html elemek a weboldalon
Mire való a CSS, hogyan lehet a lépcsőzetes stíluslapokat csatlakoztatni HTML dokumentumés e nyelv szintaxisának alapjai
Háttér a CSS-ben (szín, pozíció, kép, ismétlés, melléklet) – minden a háttér vagy háttérszín beállításához html képek elemeket
Css prioritások és kiemelés fontos, választó kombinációval és csoportosítással, egyéni és szerzői stílusokkal
Magasság, szélesség és túlcsordulás – CSS-szabályok egy blokk-elrendezésben lévő tartalomterület leírására
Méretegységek (pixel, Em és Ex) és a CSS-szabályok öröklése Különböző stílus a belső és külső hivatkozásokhoz CSS-en keresztül
A pszeudoosztályok és pszeudoelemek választói a CSS-ben (hover, first-child, first line és mások), a kapcsolat html címkék kód
Float and clear CSS - blokk elrendezési eszközök