Üdvözlet a remontcompa kedves olvasói! A nevem Roman Nahvat, és a CSS3 stílusú nyelvről szóló cikksor bemutatom a figyelmedet. A CSS rövidítése az angol lépcsőzetes stíluslapokból származik, ami lépcsőzetes stíluslapokat jelent. A stílus vagy a CSS a formázási beállítások halmaza, amelyet a HTML dokumentum elemeire alkalmaznak megjelenésük megváltoztatására. Maga a HTML csak a HTML-dokumentumok standard nyelve, és egy HTML-oldal tartalmának szerkezetére szolgál, így a HTML csak a webhelyek létrehozásának megtanulásának első lépése. A következő lépés a stílusok vagy a CSS megtanulása, ezt fogjuk csinálni. Többféle módon adhat hozzá stílusokat a weboldalhoz. Minden módszer különbözik képességei és célja alapján. Ebben a cikkben három módszert fogunk megnézni, hogyan lehet stílusokat hozzáadni egy HTML dokumentumhoz..

Csak a bonyolult vagy megtanulható CSS3 számára. 1. rész: A CSS fogalma. A CSS-stílusok HTML-dokumentumhoz történő csatlakoztatásának módjai

Hozzon létre egy szabványos HTML dokumentum-struktúrát az alább látható módon.

A címkék közé írja be a HTML dokumentum címét, például: "A CSS-stílusok összekapcsolásának módjai"

Címkék használata

és

adjon egy címet a weboldalhoz a "Mi az a CSS" szöveggel

A cím alatt címkékkel

és

hozzon létre egy kis bekezdést a szöveggel, az alább látható módon

Mentse el ezt a dokumentumot egy flash meghajtóra a CSS mappába a .html kiterjesztésű névindex alatt

Adja meg a név indexet, válassza a html fájltípust

A következőket kapjuk.

Megyünk a CSS mappába, ahol az elmentett HTML-dokumentum, az index nevű dokumentum található. Nyissa meg egy böngészőben

Mint láthatja, az általunk létrehozott weboldal tartalma megjelenik a böngészőablakban, nevezetesen a „Mi az a CSS” szöveggel, és a „CSS egy stílusnyelv, amely meghatározza…” szavakkal kezdődő bekezdéssel. ”

Az igazító attribútummal (a középső érték hozzárendelésével) a címet a weboldal közepén lévő „Mi az a CSS” szöveggel igazítottuk

A következőket kapjuk.

Változtassa meg a bekezdés szöveg színét normál feketeről egyre. A címkét használjuk

Sok html szín létezik, például az általunk létrehozott oldal bekezdésszövegéhez válassza ki a DeepSkyBlue színt

Állítsa a címke színjellemzőjét DeepSkyBlue értékre

Újra feltöltjük weboldalunkat, és látjuk, hogy a bekezdés szövege megváltoztatta a színét feketéről a megadottra

Ugyanígy változtassa meg a cím szövegét például pirosra.

A következőket kapjuk

Visszaállítjuk a weboldal fejlécének és bekezdésének szövegét az eredeti állapotába, azaz eltávolítjuk az igazítási attribútumot és a címkéket ...

A címkék és az igazítási attribútum eltávolítása után megkapjuk a weboldal eredeti megjelenését

Ha fent megváltoztattuk a weboldal fejlécének és bekezdésének színét és elrendezését html címkék használatával, most ugyanazt fogjuk tenni, de a CSS használatával. Mint fentebb említettem, ebben a cikkben három módszert fogunk megfontolni a weblapok stílusainak hozzáadására, nevezetesen: Belső stílusok hozzáadása a weboldalhoz; Globális stílusok hozzáadása egy weboldalhoz; Kapcsolódó stílusok hozzáadása egy weboldalhoz; Fontolja meg a belső stílus hozzáadását a weboldalhoz. A belső stílus a weboldalon használt egyetlen címke kiterjesztése. A stílus attribútumot a stílus meghatározására használják, és értéke egy bizonyos stílusszabály-halmaz. Változtassa meg a weboldal címének színét pirosra, és állítsa be a belső stílus használatával a középpontba. Címkézéshez

add hozzá a stílusattribútumot, majd felírjuk a stílus tulajdonságait, nevezetesen: text-allign: center, color: red

A következőket kapjuk.

Ennek eredményeként az index.html fájlt egy böngészőben megnyitva azt látjuk, hogy a weboldal címsora piros és közepén van.

Ugyanígy, a style attribútum használatával változtassa meg a bekezdés szövegét a fekete színről a deepskyblue színre

Töltsük újra az index.html oldalt, és megnézjük a bekezdés színének megváltozását.

Változtassa meg a weboldal címszínt pirosra és állítsa középre, ezúttal a globális stílus használatával. Ha globális stílust alkalmaznak, akkor a CSS tulajdonságai a és a címkék között helyezkednek el, és ők (és címkék) viszont a és a címkék között helyezkednek el .

A címkék között és a göndör zárójelben a weboldal fejlécének stílusjellemzőit (címke

) és a bekezdéshez (címke

): h1 szöveg-igazítás: központ; szín: piros - helyezze a címszöveget a weboldal közepére, és változtassa meg a színét pirosra p szín: deepskyblue - változtassa meg a bekezdés színét deepskyblue-re

Ennek eredményeként ugyanazt az eredményt kapjuk, mint a belső stílusok használatakor.

Fontolja meg a stílusok weboldalra történő felvételének utolsó módját, nevezetesen a kapcsolódó stílusok használatát. A kapcsolódó stílusok lényege, hogy a html dokumentumtól különálló fájlban vannak definiálva, és rendelkeznek .css kiterjesztéssel. Hozzon létre egy még üres dokumentumot, és mentse el a flash meghajtóra a CSS mappába, stílusnév és .css kiterjesztés alatt.

megtartása.

Készült stílusfájl .css kiterjesztéssel

Hagyja üresen a style.css fájlt.

A html dokumentum (esetünkben index.html) és a style.css stílusfájl összekapcsolásához a címkét használjuk. A címkenek a címkék belsejében kell lennie ... Írjuk a következő sort a címkék közé: ahol: rel = "stíluslap" - címkeattribútum, amely jelzi a böngészőnek, hogy a stílusok összekapcsolódnak; A href = "style.css" attribútum jelzi a style.css stílusfájl elérési útját

Stílusfájlok létrehozásakor be kell tartania az alábbi szabályokat (ugyanazokat a szabályokat kell követni a globális stílusok hozzáadásakor). A stílusfájl egyik fő eleme a választó. A választó meghatározza, hogy a html dokumentumban mely elemet kell alkalmazni bizonyos stílusparaméterekre. A választó címkék, osztályok és azonosítók. A választó megadása után a göndör zárójelekbe helyezik a stílustulajdonságot, majd megjelölik az értéket. Például a h1 html címkét választóként jelölik az alábbi ábra, szín: stílustulajdonságként a stílustulajdonság értéke kerül írásra.

Mivel a címszöveget (címke

) a weboldal közepén, és állítsa a szöveget pirosra, valamint a bekezdés szövegét (címke

) megjelenítés színes deepskyblue-ban, a style.css stílusfájlban a sorokat írjuk: h1 text-align: center; szín: piros és p szín: deepskyblue ahol: h1 szöveg-igazítás: középpont; color: red - igazítsa a fejléc szövegét ("Mi a CSS") a középpontban, és állítsa a szöveget pirosra p color: deepskyblue - állítsa be a bekezdésszöveget ("CSS az a stílusnyelv, amely meghatározza ...") a deepskyblue színhez

A style.css fájl és az index.html html dokumentum összekapcsolásának eredményeként azt látjuk, hogy a weboldal címszövege közepén van és piros színű. A bekezdések szövege színét deepskyblue-re is változtatta

Folytatás a cikkben: Csak a bonyolultról vagy a CSS3-ról. 2. rész. A CSS szelektorok típusai