Mi a HTML stíluslap?
A HTML lépcsőzetes stíluslap egy szabályok és tulajdonságokkal rendelkező lap, amely megmutatja a böngészőnek, hogyan kell HTML-t megjeleníteni az összes megadott stílus felhasználásával.
A CSS az a stílus, amellyel bármilyen weboldalt megformázunk. A CSS minden olyan tulajdonsággal rendelkezik, mint a háttér, a színek, a betűtípusok, a távolság, a szegélyek stb., Amelyeket az oldalak minden elemére meghatározhatunk.
A HTML stíluslapokat az oldal elrendezésének beállításához is használják, például azt, ahová a fejlécet, a lábléceket vagy bármely más elemet el kell helyezni az oldalra. A CSS-ről mindig a HTML-sel együtt beszélnek, mivel stílus nélkül az oldalak nagyon halványak, nincs fejlécük kiemelve stb., És az oldal egészében azonos betűmérettel rendelkeznek, ami a felhasználók számára egyáltalán nem ad jó képet.
Hogyan kell használni a HTML stíluslapokat?
A múltban a stílusok, a szkriptek, a HTML mindent ugyanazon az oldalon írtak. Ez az oldalakat rendkívül hosszúnak és rendkívül nehezen olvashatónak és szerkeszthetővé tette. Ezután jött a módszer a HTML, a stílusok és a Javascript szétválasztására.
A HTML stíluslapok weblapra történő felvételének módjai:
Háromféle módon vonhatjuk be a stílusokat:
-
Inline stílus
Ez egy olyan módszer, amellyel stílusokat írhat magának a HTML-ben minden elemhez egy stílusú attribútumban.
Ezt a formázási módot egyáltalán nem ajánljuk, mivel a HTML rendetlennek néz ki, és nem követhetjük az „egyszer írj, sok helyen használd” megközelítést.
Eg: Hello World!
-
Belső stílus
Ez azt jelenti, hogy a stílusokat beillesztik egy stíluscímkébe, és egy weboldalon helyezik el a HTML tetején. Ez a stílusmód még mindig jobb, mint az inline stílus, mivel közös stílusokat is összeilleszthetünk, ha egyszerre több elemhez kell használni.
A fejlesztési szakaszban könnyebb a HTML fájl szerkesztése, és nem kell minden alkalommal megnyitnunk a megfelelő CSS fájlt, és minden alkalommal szerkesztenünk.
Eg:
container-block(
font-size: 10px;
margin-top: 10px;
)
Hello World!
-
Külső stílus
Ez a weboldalak stílusának leggyakoribb és legjobb módja. Ez hasonló a belső stílushoz, de a különbség az, hogy a stílusokat külön fájlba írják be .css kiterjesztéssel, és a hivatkozás a weboldal fejcímkéjébe kerül.
A weboldalon a CSS-fájl összekapcsolásának szintaxisa:
A stílusokat bele kell foglalni a fejcímkébe, amely a HTML testcímkéje (azaz a tényleges tartalom) felett van
Mi a prioritás az inline, a belső és a külső stílus között?
Az inline stílusok nagyobb prioritást élveznek, mint a belső, az utóbbi prioritás a külső stílus.
Inline> Belső> Külső
Legjobb gyakorlatok a CSS használata során:
- A CSS egyetlen fájl helyett több fájlra osztható.
- Az elkülönített CSS-fájlok egyenként beilleszthetők a fejcímkébe hivatkozási címkék használatával.
- Vagy egy CSS fájl több importálási nyilatkozattal is rendelkezhet a többi CSS fájl importálásához. Ez logikusan elválasztja a CSS-t, de végül minden stílus megjelenik ugyanazon fájlból.
Használat: @import './process.css';
- A stílusok a weboldal bármely elemére meghatározhatók, a választógombokkal, mint maga HTML címke, osztálynév, azonosító, bármilyen attribútumnév.
- Van néhány ál-választó eszköz, például:
- előtt
- utána
- n-ed gyermek
- első gyerek
- utolsó gyerek
- lebeg
- látogatott
Ez alapvetően a kiválasztott elemek állapota, és nem igazán a pontos elemek.
- Ha a sokszorosított CSS-fájlok szerepelnek az oldalon, akkor az utolsó a legmagasabb prioritást élvezi, és felülbírálja az azonos választóval rendelkező korábbi fájlok meglévő stílusait.
- A stíluslapokat a HTML elõtt kell használni, hogy a stílusok az oldal betöltésekor alkalmazandók legyenek. Ha a végén szerepel, a HTML először betölti, majd lassan alkalmazza a stílusokat, ami nagyon rossz élményt nyújt a felhasználó számára.
A HTML lépcsőzetes stíluslapok különféle jellemzői:
- A CSS animációkat nyújt : Korábban a javascriptet csak animációkhoz használták. De a legújabb CSS, azaz a CSS3 maga a tulajdonságok felhasználásával nyújt animációkat.
- Szállítói előtagok: Mielőtt a böngészők kiadják az új szolgáltatások szabványos verziószámát / tulajdonságnevét, a böngészők kísérletként egy ideig megadnak nekünk néhány gyártói előtagot. A fejlesztőknek meg kell várniuk, amíg a böngésző kiadja a szokásos verzióit, és addig a kísérleti funkciók felhasználhatók az eladó előtagokkal.
- CSS átalakítások: Az átmenetet arra használják, hogy egy tulajdonság egy megadott időtartamon belül fokozatosan az egyik értékről a másikra kerüljön.
Eg: -webkit-transition: width 2s, height 4s;
- CSS-transzformációk: A CSS-ben végrehajtott transzformációk lehetővé teszik az elemek fordítását, elforgatását, méretezését és eltorzítását.
Média lekérdezések:
A Mobil, az Asztali és az iPad készülékek eltérően viselkednek, azonban nem tudjuk ugyanúgy stílusolni az oldalakat. A korábbi webes szabványok úgy lettek kialakítva, hogy különféle CSS-ek voltak minden típusú eszközhöz.
A webes szabványok fejlődésével és az internet felépítésének módjával a böngészőket úgy fejlesztették ki, hogy egyetlen CSS-t kapjanak, amely bármilyen típusú eszközhöz felhasználható. Az eszközök stílusának a szélesség és a magasság alapján történő megváltoztatásához médialekérdezéseket használunk, amelyekkel megadhatjuk az eszköz minimális vagy maximális szélességét és az abban szereplő stílusokat.
Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)
A stílusok minden bizonnyal bátorságot jelentenek az interneten. Mivel a webfejlesztés az utóbbi időben exponenciálisan növekedett, a CSS3 határozottan nagy igényt vetett fel az oldalak rendkívül interaktív és intuitívvá tétele érdekében.
Ajánlott cikkek
Ez egy útmutató a HTML stíluslapokhoz. Itt megvitatjuk, hogyan lehet használni a HTML stíluslapokat, a különféle szolgáltatásokat és a CSS weboldalra való felvételének lehetőségeit. A következő cikkeket is megnézheti további információkért -
- Bevezetés a CSS-be
- A CSS előnyei a webdesignban
- Mi a CSS? | Hogyan kell használni?
- Érzékeny a CSS?
- Különböző HTML listastílusok