Azt már tudjuk, hogy ahhoz, hogy egy weboldal szép és stílusos legyen, a CSS fájllal kell dolgoznunk. És ahhoz, hogy a stílusaink érvényesek legyenek, kombinálnunk kell a HTML-fájlt és a CSS-fájlt.

A művelet végrehajtására több lehetőség is van: beágyazott stíluslapok, külső stíluslapok és soron belüli stílus használata.

Ma az utóbbi módszerről fogunk beszélni.

Stílus beillesztése HTML címkébe

A módszer lényege abban rejlik, hogy a címkén belül bevezetjük a szükséges dizájnt. Ehhez külön tulajdonság - stílus. Ez az attribútum alkalmazható bármely címkére, de csak a webhely törzsében, azaz testen belül. Ennek az attribútumnak az értéke az adott elemre alkalmazandó stílusutasítás.

Például állítsuk be különböző méretű betűtípus a szöveg két különböző bekezdéséhez:

< p style= "font-size:25px;" >Állítsa ezt a szövegrészt 25 képpont magasságra. < p style= "font-size:15px; color:#2400ff;"> Ez a szöveg pedig 15 pixel magas betűkkel lesz, és kékre is színezzük, hogy egyszerre több stílus használatát demonstráljuk.

Hibák

A példa tökéletesen bemutatja, hogy a stílusok ilyen felakasztása hogyan tömíti el az oldal kódját.

Megjegyezhet néhány hátrányt is ennek a stílustechnikának a használatának. Ezek közül az első a stílus terjedésének a dokumentumban, ami a jövőben időnként megnehezíti a szerkesztési folyamatot.

A nagy mennyiségű szöveg tervezése is nehézséget okoz. Szerintem senki sem örül annak, hogy minden bekezdéshez betűméretet kell előírni, különösen, ha 40 ilyen bekezdés van.

Még az inline stílusok használatakor is lehetetlenné válik az álosztályok használata, ami nagyon megköti a webdesignerek kezét.

Érdemes megjegyezni azt a zűrzavart is, amely a style attribútum használata során biztosan előjön. Ez a zavar a használatból fog eredni különböző idézetek stílusok hozzáadásakor.

Az érthetőség kedvéért nézzük meg az alábbi példát:

< div style= "font-family: "Roboto Condensed", sans-serif"> A bejegyzés helyes. < div style= "font-family: "Robot Condensed", sans-serif"> Tehát ez is helyes. < div style= "font-family: " Roboto Condensed ", sans-serif" >Ez nem helyes bejegyzés. < div style= "font-family: " Roboto Condensed ", sans-serif" >És ez sem igaz.

A fenti számításokat tekintve logikus következtetés az, hogy a beépített stílusok használata számos jelentős bonyodalmat és kellemetlenséget okoz.

Mikor kell használni a beépített stílust

Minden hiányosság ellenére a beépített stílust nem hiába találták ki. A webmesterek gyakran hivatkoznak rájuk programozott stílus esetén. Nézzük például ezt a kódot

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

Ennek a blokknak a kívánt szélességének felírása lenne a legegyszerűbb művelet.

Hasonló helyzet állhat elő, ha a rendszergazdai szerepkörben lévő felhasználó háttérképét (például) le kell cserélni. Ebben az esetben előfordulhat, hogy az img címke nem működik. Ezért érdemes a style attribútumra hivatkozni:

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

Ezenkívül a programozók gyakran hivatkoznak a belső stílusokra az előugró ablakok elrendezése során. Ez a folyamat gyakran a következőképpen zajlik: a tervezett blokk a display:block beállításra van állítva, a többi ablak pedig el van rejtve a display:none használatával, hogy ne zavarják vizuálisan a programozó munkáját. Íme egy példa:

< div class = "element" style= "display:block" >Felugró ablak, amelyen megjelenik Ebben a pillanatban

Eredmény

A beágyazott stílusok használata számos nehézséggel és kellemetlenséggel jár, azonban egyes elemek stílusának kialakítása során a webmesterek gyakran ezt a módszert használják munkájuk optimalizálása érdekében.

Ebben a fejezetben arról lesz szó, hogyan lehet CSS-t beágyazni egy HTML dokumentumba, vagyis egy elem stílusleírását közvetlenül magához az elemhez kapcsolni valamilyen HTML tag segítségével.

Ezt a feladatot háromféleképpen hajthatja végre:

• Írjon stílusleírást közvetlenül magára az elemre. Ez a módszer csak akkor jó, ha csak ilyen elem van benne HTML dokumentum e amelyhez külön stílusleírás szükséges.
• Írjon stílusleírást egy HTML dokumentum minden azonos eleméhez. Ez a módszer akkor indokolja magát, ha az oldal stílusa alapvetően eltér a webhely általános kialakításától (egymáshoz kapcsolódó oldalak csoportja).
• Helyezze át a HTML-elemek stílusleírását egy külön CSS-fájlba. Ez lehetővé teszi a teljes webhely kialakításának vezérlését, a webhely minden olyan oldalát, amelyen a CSS-fájlra való hivatkozás szerepel. Ez a módszer a leghatékonyabb módja a lépcsőzetes stíluslap használatának.

Nézzük meg közelebbről az egyes opciókat, és egyúttal ismerkedjünk meg a CSS írásának szintaktikai szabályaival.

stílus attribútum.

Szinte minden HTML címkének van attribútuma stílus, ami azt jelzi, hogy ehhez a címkéhez valamilyen stílusleírást alkalmaztak.

Így van írva:

style="">

Minden, ami az attribútum idézőjelei közé lesz írva stílusés stílusleírás lesz adott elem, jelen esetben az elem

Nos például:

style="color: #ff0000; font-size:12px"> ez egy egyéni stílusú bekezdés

Ebben az esetben azt határoztuk meg, hogy ez a bekezdés piros színben jelenjen meg, és 12 pixel betűmérettel kell rendelkeznie. A következő fejezetekben részletesen kitérek az idézőjelbe írt dolgokra, de most arról lesz szó, hogyan kell alkalmazni a CSS-t bármely HTML címkére.

Ugyanezen elv alapján szinte minden HTML-elemhez egyedi stílust adhat meg.

style="background-color: #c5ffa0">

style="color: #0000ff; font-size:18px">Mindent az elefántokról

Vegyél egy elefántot

style="color: #ff0000; font-size:14px">

style="color: #0000ff; font-size:16px"> Béreljen elefántot

style="color: #ff0000; font-size:14px">

De még egyszer mondom, ez a CSS-befecskendezési mód csak akkor jó, ha egy bizonyos stílust kis számra szeretne beállítani HTML elemek.

Címke (ne keverjük össze az azonos nevű attribútummal), amelyben a számunkra szükséges elemek leírása előfordul.

Vessen egy pillantást a példára, alább lesznek megjegyzések.

Mindent az elefántokról

Ezen az oldalon minden információt megtalál az elefántokról.

Vegyél egy elefántot

Itt megvásárolhatja a legjobb elefántokat versenyképes áron!!

Béreljen elefántot

Csak itt bérelhetsz elefántokat!!

Ahogy a példából is látható, pontosan ugyanazt az eredményt értük el, mint az első esetben, csak most nem minden elemhez külön-külön írunk elő stílust, hanem a dokumentum „fejébe” tesszük, ezzel jelezve, hogy minden címsorok

,

- kék lesz és bekezdések

- piros. Képzeljük el, hogyan könnyítené meg a munkánkat, ha száz ilyen bekezdés és körülbelül tizenöt címsor lenne az oldalon, és maga a dokumentum is kevesebbet nyomna, ha "eltávolítaná" az összes ismétlődő stílusleírást minden egyes elemről.

Most az ígért kommentek:

Címke létezik bizonyos HTML-elemek stílusának közvetlen deklarációja a következő szintaxis szerint:

Ha a stílusdeklarációs blokkban több elemtulajdonság van megadva, akkor azokat pontosvessző választja el.

CSS egy külön külső fájlban.

Hogy mennyi ideig és röviden, elérkeztünk a CSS véleményem szerint fő előnyéhez, mégpedig ahhoz, hogy az oldal kialakításával kapcsolatos összes információt egy külön külső fájlba lehet gyűjteni.

Tehát nyissa meg a Jegyzettömböt (vagy egy másik szerkesztőt), és írja be a következő szöveget:

Test (háttérszín: #c5ffa0)
a (szín:#000060; betűsúly: félkövér;)
a:hover (szín:#ff0000; betűsúly: félkövér; szövegdekoráció:nincs)
h1 (szín: #0000ff; betűméret: 18px)
h2 (szín: #ff00ff; betűméret: 16 képpont)
p (szín: #600000; font-size:14px)

Megpróbálom részletesen elmondani, mi olyan furcsa, amit ennek az oktatóanyagnak a következő fejezeteiben írtunk.

Összes! stílusleírást tartalmazó fájl létrehozva! Most már csak egy kicsit van hátra, mégpedig arra, hogy rákényszerítsük oldalunk szükséges oldalait, hogy információkat merítsenek ebből a fájlból.

Ez a címke használatával történik (kapcsolat). Címke többcélú, és egy HTML-dokumentum további külső fájlokkal való „összekapcsolására” szolgál a megfelelő működés biztosítása érdekében. Címke egyfajta hivatkozás, csak nem a felhasználóknak, hanem a böngészőprogramoknak (böngészőknek) szánják. Mert csak szolgáltatási információkat hordoz, a HTML dokumentum fejlécében található a címkék között és a böngészők nem jelenítik meg.

Címke attribútumokkal rendelkezik:

href- A fájl elérési útja.
rel- Meghatározza a kapcsolatot az aktuális dokumentum és a hivatkozott fájl között.

• parancsikon - Megadja, hogy a mellékelt fájl egy .
• stíluslap- Megadja, hogy a mellékelt fájl stíluslapot tartalmaz-e.
• application/rss+xml – Fájl be XML formátum a hírfolyam leírásához.

típus- A mellékelt fájl MIME adattípusa.

Mivel csatlakozunk mint külső fájl lépcsőzetes stíluslap, akkor szolgáltatásunk linkje a következő formában jelenik meg:

Megismétlem, az esetleges félreértések eloszlatása érdekében. Tulajdonság relértéket rendeljen hozzá stíluslap mivel külső fájlként egy lépcsőzetes stíluslapot is tartalmazunk, megadjuk a css fájl elérési útját (ebben a példában a fájl ún. mystyle.cssés azon HTML-dokumentum mellett fekszik, amelyben ez a hivatkozás szerepel) azt is jelezzük adott fájl szöveges és stílusleírást tartalmaz type="text/css"

Most beillesztjük ezt a sort webhelyünk oldalainak címsoraiba, és élvezzük az eredményt..

Fájl mystyle.css
test (háttérszín: #c5ffa0)
a (szín:#000060; betűsúly: félkövér;)
a:hover (szín:#ff0000; betűsúly: félkövér; szövegdekoráció:nincs)
h1 (szín: #0000ff; betűméret: 18px)
h2 (szín: #ff00ff; betűméret: 16 képpont)
p (szín: #600000; font-size:14px)
index.html fájl

Menü:

Mindent az elefántokról.
Vegyél egy elefántot.
Béreljen elefántot.

---

Mindent az elefántokról

Ezen az oldalon minden információt megtalál az elefántokról.

elefánt.html fájlt

Menü:

Mindent az elefántokról.
Vegyél egy elefántot.
Béreljen elefántot.

---

Vegyél egy elefántot

Itt megvásárolhatja a legjobb elefántokat versenyképes áron!!

elefánt1.html fájl

Menü:

Mindent az elefántokról.
Vegyél egy elefántot.
Béreljen elefántot.

---

Béreljen elefántot

Csak itt bérelhetsz elefántokat!!

A fenti példában az "elephant site" jelenleg három oldalt tartalmaz, amelyek mindegyike egyetlen külső css-fájlhoz, a mystyle.css-hez kapcsolódik. Így jelentősen "kiraktuk" és "mobillá" tettük a teljes oldal dizájnját. Képzeld el, hány kilobájtot nyernénk, ha száz teljes oldal lenne ezen az oldalon!? Illetve mennyi időt takarítana meg, ha valamit változtatnunk kellene a kialakításán!?

Ebben a fejezetben a CSS HTML dokumentumba való beágyazásának három módját vizsgáltuk. Melyiket érdemesebb használni?

• Attribútum használata stílus bármely elemhez, ha ez a többi elemtől eltérő stílusú elem az egyetlen az egész webhelyen.
• Használja a címkét . A gyakorlatban ez így néz ki:

  Íme egy példa: CSS-stílusok megjelenítése HTML-dokumentumban

  Ügyeljünk arra, hogy a címkén belül a szerinti kódot is írjuk css szabályokat segítségével kapcsos zárójel. A következő cikkekben részletesebben kitérek a CSS szintaxisának szabályaira.
  

  Több CSS-fájl csatolása egyetlen HTML-dokumentumhoz.

  A HTML-szabályok lehetővé teszik több CSS-fájl egyidejű felvételét. Sok webmester használja ezt: külön CSS-fájlokat hoz létre szövegekhez és képekhez. Vagy külön fájlokat az oldal fejlécéhez, láblécéhez és főtörzséhez. Lássuk, hogyan kell ezt megvalósítani.

  Számos fájlt készítünk CSS stílusokkal. Legyen a nevük style-1.css és style-2.css. Az első számú módszerhez hasonlóan ugyanabba a mappába helyezzük a HTML fájlt.

  Íme egy példa: CSS-stílusok megjelenítése HTML-dokumentumban

  Minden analóg módon történik az első módszerrel, csak ebben az esetben egyszerre két fájlra mutató hivatkozásokat jelezünk.

  CSS-fájl belső hivatkozása egy azonos típusú fájlra.

  Kivéve a fentieket felsorolt ​​módokon, van egy módja annak, hogy egy CSS-fájlon belül sok máshoz kapcsolódjon!

  Ennek végrehajtása a következőképpen történik:
  Először is legalább egy CSS-fájlt kell csatlakoztatnunk a kódhoz hasonló módon.

  Másodszor, a már csatlakoztatott fájlba beírjuk a következő kódot:

  @import url("stílus-2.css");

  Ez a sor csatlakozik a fájlunkhoz további fájl CSS. Ha nehézségei vannak a CSS felvételekor, kérdezze meg őket a megjegyzésekben.
  Ahogy az előző két leckéből megértettük, a CSS technológia az erős eszköz amelyet minden webmesternek el kell sajátítania! Az anyag asszimilációjának javítása érdekében úgy döntöttem, hogy hozzáadok egy oktatóvideót + egy tesztet, hogy megszilárdítsam az egyes órák végén kapott információkat.

  Anyagrögzítési teszt:
  

  Be kell adnunk a CSS-fájlt a HTML-fájlba való hivatkozással. Az alábbi módszerek közül melyik a helyes?

  1.opció:

  2. lehetőség:
  

  3. lehetőség:

  választási lehetőség 4:

  
  Elhelyezhetünk CSS-kaszkádokat közvetlenül a HTML-fájlban?

  A stíluslapok háromféleképpen adhatók hozzá egy weboldalhoz. különböző utak amelyek képességeikben különböznek egymástól.

  Kapcsolódó stíluslapok

  A webhely stílusainak és szabályainak meghatározásának leghatékonyabb és legkényelmesebb módja. A stílusok egy külön fájlban tárolódnak, amely bármely weboldalhoz használható. A címke a hivatkozott stíluslap összekapcsolására szolgál az oldal fejlécében (1. példa).

  1. példa: Hivatkozott stíluslap összekapcsolása

  Helló Világ!

  A stílusfájl elérési útja lehet relatív vagy abszolút, amint az ábra mutatja ezt a példát.

  Ennek a módszernek az előnyei

  1. Egy stílusfájl tetszőleges számú weboldalhoz használható, de más oldalakra is alkalmazható.
  2. A stíluslapot a weboldalak módosítása nélkül módosíthatja.
  3. Ha egyetlen fájlban módosítja a stílust, a stílus automatikusan alkalmazásra kerül minden olyan oldalra, ahol van rá hivatkozás. Kétségtelenül kényelmes. A betűméretet csak egy helyen adjuk meg, és oldalunk mind a száz vagy több weboldalán változik.
  4. A stílusfájl az első betöltéskor gyorsítótárban van a helyi számítógépen, külön a weboldalaktól, így a webhely gyorsabban betöltődik.

  Globális stíluslapok

  A stílust magában a dokumentumban határozzák meg, és általában a weboldal fejlécében található. Rugalmasságot és lehetőségeket tekintve ez a stílushasználati mód alulmúlja az előzőt, de lehetővé teszi az összes stílus egy helyen történő elhelyezését is. Ebben az esetben közvetlenül a dokumentum törzsében. A stílusdefiníciót a címke adja meg

  Helló Világ!

  Ez a példa a címsor stílusának megváltoztatását mutatja be

  . Egy weboldalon most elég csak ezt a címkét megadni, és a stílusok automatikusan hozzáadódnak hozzá.

  Belső stílusok

  A belső stílusok lényegében a weboldalon használt egyetlen címke kiterjesztései. A stílus attribútum a stílus meghatározására szolgál, értékeit pedig a stíluslap nyelve adja meg (3. példa).

  3. példa: Belső stílusok használata

  Helló Világ!

  Ehhez ajánlott a belső stílust használni egyetlen címkék vagy egyáltalán megtagadja a használatát, mivel számos elem megváltoztatása problémássá válik. A belső stílusok nem egyeznek egy szerkezeti dokumentum ideológiájával, ha a tartalom és a design elkülönül.

  Minden leírt módszer CSS használat használhatók önmagukban vagy egymással kombinálva. Ebben az esetben emlékezni kell a hierarchiára. Először mindig a belső stílus kerül alkalmazásra, majd a globális stíluslap, végül pedig a hivatkozott stíluslap. A 4. példa két módszert használ stíluslapok egyidejű hozzáadására a dokumentumhoz.

  4. példa: Kombináció különböző módszerek stíluskapcsolatok

  Helló Világ!

  Helló Világ!

  A fenti példában az első címsor pirosra van állítva 36 képponton, a következő címsor pedig zöldre és más betűtípussal.

  A CSS a "Cascading Style Sheets" rövidítése, ami azt jelenti, hogy "Cascading Style Sheets". Weboldalak tervezésére használják. Ha van tartalom a HTML-kódban (amit a böngésző megjelenít), akkor a CSS határozza meg a megjelenését (a böngésző hogyan fogja megjeleníteni). A CSS szépsége abban rejlik, hogy egy stílus segítségével egy oldal vagy egy teljes oldal minden azonos típusú elemét egyszerre tervezhetjük meg (összes hivatkozás, bekezdés, lista egyszerre). A CSS-stílussal egyszer meghatározza, hogyan nézzen ki ez vagy az az elem, például a képek, és ezek egyszerre változtatják meg a dizájnt az összes dokumentumban. Ha módosítani szeretné a szöveg formázását a webhelyen, csak egyszer kell módosítania a CSS-kódot.

  Alapvető CSS-elemek

  Ahogy a HTML címkékből, attribútumokból és értékekből áll, a CSS is saját elemeiből áll. A CSS-konstrukciók lényege a következőképpen magyarázható: "Adja meg, hogy az oldal melyik elemét kell stílusolni, és adja meg a stílust." Íme a CSS-konstrukció építőkövei.

  • Választó. Egy azonosító, amely megmondja a böngészőnek, hogy melyik oldalelemre alkalmazza a stílust. Neki köszönhetően a böngésző "megérti", hogy a stílust például listák vagy táblázatok tervezésére szánják.
  • Stílus deklarációs blokk. A választó után van írva, és göndör kapcsos zárójelek között. Beállítja az elem stílusát (megjelenését). A stílusdeklarációs blokk két részből áll.
  • Ingatlan. Analóg attribútum a HTML-ben. Meghatározza, hogy melyik megjelenési tulajdonság módosul.
  • Jelentése. Tulajdonságra állítva, kettősponttal elválasztva, és meghatározza, hogy a tulajdonság hogyan módosuljon.

  A stílusdeklarációs blokkban több tulajdonság és érték is szerepelhet, ilyenkor ezek pontosvesszővel elválasztva jelennek meg.

  Kiválasztó típusok

  Attól függően, hogy milyen oldalelemek tulajdonságait határozzák meg, a kiválasztók különböző típusúak.

  • Egyetemes. Szabályokat állít be minden olyan oldalelemhez, amelyhez nincs más szabály beállítva.
    A kód * (betűméret: 14 képpont;) beállítja a betűméretet 14 képpontra a dokumentum összes olyan eleménél, amelyre nincs más választókkal beállítva más szabály.
  • Címke. Ez a választótípus formázási szabályokat határoz meg egy adott HTML-címke tartalmához. A kiválasztó neve megegyezik a leíró nevével, csak szögletes zárójelek nélkül írják: p, h1, ul.
    Például kód h2 (piros szín;) zöld szövegszínt állít be minden második szintű címsorhoz, azaz a címketartalomhoz
    .
  • Tulajdonság. A szelektorok ezen csoportja segítségével meghatározhatja az összes olyan címke tartalmának stílusát, amelyhez adott attribútumkészlet tartozik. A szelektorok pontosabbak lehetnek, nem csak az attribútum nevét, hanem a hozzárendelt értéket, valamint a tartalmazó címke nevét is megadják. Ezzel személyesebbé tehetjük a tervezést.
  • osztály. Kiválasztók arra az esetre, amikor az azonos típusú címkék tartalmát másképpen kell stílusozni. Például azt szeretné, hogy a webhely alján lévő hivatkozások pirosak legyenek, míg a többi hivatkozás kék színű maradjon. Az osztályszabályok webhelyelemre való alkalmazásához meg kell adnia az osztály nevét az attribútumban osztály a megfelelő címkét.

  Tegyük fel, hogy az osztályt használja lépés egyedi elemek a bal oldali behúzást 15 képpontra kell állítani.

  A CSS kód a következő lesz:

  Lépés (margó balra: 15 képpont;)

  A HTML-kód, amely az elemet a szabályhoz köti, a következő lesz:

  Behúzott szöveg

  • ID. Attribútummal együtt használatos id HTML címke és akkor használatos, ha a tulajdonságokat egyetlen elemen kell beállítani. Az osztályválasztóval ellentétben, amelyet egy pont előz meg, a "rácson" keresztül írják:

  #exkluzív (szín:narancs;)

  • Kontextuális. A HTML-ben a címkék gyakran másokba vannak ágyazva, és a kontextuális szelektorok segítenek szabályokat meghatározni az ilyen esetekre. Ezekkel például formázhatja a számozott listákon belüli elemeket vagy a bekezdéseken belüli dőlt szöveget:

  Pi (fint-család: Century;)

  A többi szelektorcsoport a felsorolt ​​típusok kombinációján, valamint az öröklődés elvén alapul, amikor gyermek elem veszi a szülő tulajdonságait.

  A kiválasztók kombinálása és csoportosítása sok esetben hasznos. Például az osztályszabályok beállításához lépés csak hivatkozások esetén meg kell adnia mindkét választót ponttal elválasztva (először a címke, majd az osztály):

  A.step (margó balra: 15 képpont;)

  Hogyan adhatunk CSS-t a HTML oldalhoz?

  Számos módja van annak, hogy a webhelyépítő eszközöket kommunikálják egymással. A hozzáadási módszer szerint a stílusok a következő kategóriákba vannak osztva.

  Soron belüli stílusok

  A dokumentumban közvetlenül a HTML címkén belül vannak beállítva az attribútum használatával stílus. Nekik van a legmagasabb prioritás. Ez azt jelenti, hogy ha ugyanahhoz az elemhez más kialakítást adnak meg, akkor a címkén belüli szabályt részesítjük előnyben. A szövegközi stílus választója nem szükséges, mivel a stílus és a címke közötti kapcsolat nyilvánvaló - a címke kialakítása ebben van beállítva.

  A következő kód beállítja a címkén belüli szöveg betűméretét és színét

  Szöveg stílusa beépített stílussal.

  Globális stílusok

  Címke alapján beállítva …

  Kapcsolódó stílusok

  A legkényelmesebb, mert segítségükkel könnyedén megtervezheti az egész oldalt ugyanabban a stílusban. A hivatkozott stílus azt jelenti, hogy az összes CSS-stílus egy külön fájlban van a kiterjesztéssel .css.

  Ez a megközelítés azért is kényelmes, mert elválasztja az oldaltervezési szabályokat a tartalmuktól, a CSS-kód könnyen megváltoztatható anélkül, hogy a HTML-fájlokba beleavatkoznánk, és különösen nagy projekteknél nagyon fontos a kódleválasztás elve.

  Ha egy CSS-fájl szabályait egy HTML-oldalhoz szeretné kapcsolni, használja a címkét , hozzáadva a tartályhoz , és annak attribútumai.

  Itt található a fájl szabályait összekötő sor mystyle.css HTML oldallal:

  rel="stíluslap" megadja, hogy a címke stíluslapfájlra hivatkozzon, href="mysyle.css" beállítja a címét. A címzési szabályok ugyanazok, mint a normál hivatkozásoknál – az elérési út lehet abszolút, relatív stb.

  Importált stílusok

  A paranccsal @import stílusokat adhat hozzá egy CSS-fájlból az aktuális táblázathoz. Erre például akkor lehet szükség, ha ki szeretné egészíteni a dokumentum egyedi kialakítását, amelyet globális stílusok segítségével határoznak meg, egyetemes szabályok külön fájlból. A módszer nem használható beágyazott stílusokkal.

  Az alábbi kód importálja a fájltáblázatot a dokumentumba any.css, amely a szerkesztett HTML-dokumentumot tartalmazó mappában található:

  @import url(any.css);

  A parancsot a nyitó címke alatti sorba írjuk