Hogyan lehet css fájlokat egyesíteni egyetlen wordpress-be. WordPress: a téma css-fájlok egyesítése. Több CSS-fájl csatlakoztatása egyetlen HTML-dokumentumhoz
Üdvözlöm, az Üzleti anatómia projekt kedves olvasói. Alexander webmester veled van! Az utolsó cikkben megvitattuk, mik azok a CSS-stílusok, és mennyire fontosak a WEB-programozásban.
Nyilvánvaló, hogy ha a CSS-stílusok jelentős hatással vannak egy HTML-fájl megjelenítésére, akkor valamilyen módon össze kell kapcsolni őket. Ma négy fő módszert fogunk megvizsgálni a CSS-stílus és a HTML összekapcsolására.
Ne halogassuk, és kezdjük el!
Beleértve egy külön CSS fájlt!
Az egyik legkényelmesebb és egyszerű módokon A kapcsolati stílusok egy külön fájl összekapcsolása stílusokkal. Ehhez a szövegszerkesztő jegyzettömb ++ (vagy bármilyen más) segítségével hozzunk létre egy .css kiterjesztésű fájlt, és helyezzük el ugyanabba a mappába, mint ahová el szeretnénk helyezni.
Majd a HTML fájlban a címkék között
küldd el a következő kódot:
Most bontsuk fel, mit jelent ez az egész:
A # link angol fordításban azt jelenti, hogy "link". Így megmutatjuk a böngészőnek, hogy a továbbiakban a hivatkozásról fogunk beszélni. rel= # Ezzel az attribútummal megmutatjuk, hogy a CSS-fájl hogyan kapcsolódik a HTML-fájlhoz. "stylesheet" # nevezetesen, hogy a CSS-fájl egy lépcsőzetes stíluslap. type="text/css" # itt minden egyszerű: ez azt jelzi, hogy a fájl szöveges formátumban van írva, és .css kiterjesztéssel rendelkezik. href="style.css" # ez egy hivatkozás egy CSS-stílusú fájlra.
Véleményem szerint ez a legelőnyösebb módja a CSS-stílusok felvételének.
Stílusok írása közvetlenül a HTML-fájlban (első módszer)
A CSS-stílusok megadásának következő módja, ha közvetlenül a HTML-dokumentumba írjuk be őket. Ez így néz ki:
Ha megnézzük, hogy ez a HTML dokumentum hogyan fog megjelenni a böngészőben, látni fogjuk, hogy a címkék közötti szöveg vörös lett. A style attribútumot használva azt mondjuk, hogy a következőképpen megjelennek a megjelenítési stílusok. szín a színért felelős választó. Piros ennek a választónak az értéke. Így bizonyos típusú megjelenítéssel kiemelhetjük a szöveg egyes részeit.
Lépcsőzetes stíluslapok elhelyezése a HTML-ben (második út)
A CSS-stílusok egy másik módja az, hogy lépcsőzetes táblákat helyezünk el magában a HTML-fájlban. Véleményem szerint ez a módszer nem a legkényelmesebb, mert használatával a webhely kódjának elemzése nem lesz túl kényelmes. A CSS-stílusok írásának megkezdéséhez csak be kell illesztenie a címkéket a HTML-fájlba . A gyakorlatban ez így néz ki:
Íme egy példa: CSS-stílusok megjelenítése HTML-dokumentumban
Felhívjuk figyelmét, hogy a címkén belül a CSS szabályai szerint kódot is írunk, kapcsos zárójelekkel. 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.
A fenti módszerek mellett van egy mód, amellyel sok másra mutató hivatkozásokat helyezhet el egy CSS-fájlon belül!
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 egy további CSS-fájlt csatlakoztat a fájlunkhoz. 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 lecké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?
HTML, CSS és JavaScript egyesítése egy fájlban
A böngészőtől érkező további kérések elkerülése érdekében stílusokat és (vagy) szkripteket közvetlenül belefoglalhat magába a HTML-dokumentumba.
Itt érdemes elidőzni a következő ponton: ha a CSS (vagy JavaScript) fájl mérete meghaladja a 20%-ot (tömörített formában pedig több mint 5 KB), akkor érdemes külön komponensként kivenni. Ezzel beállítja a gyorsítótárat a webhely rendszeres felhasználói számára.
Csak akkor érdemes megfontolni az összes forrás beépítését az eredeti HTML oldalba, ha a látogatók kellően nagy százaléka (több mint 90%) érkezett az első és (esetleg) második alkalommal. utoljára. Akkor ez a technológia remekül fog működni: a gyorsítótárazás gyakorlatilag semmit nem ad, a szerverhez intézett további kérések pedig lelassítják az oldal sajátosságait nem ismerő új látogatók oldalbetöltését (ami döntő tényező lehet végső távozásukban).
Minden más esetben - amikor lehetséges elég nagy erőforrás-fájlok lefoglalása, vagy ha nem először érkezik elegendő számú felhasználó - ez a megközelítés nem alkalmazható.
Működő példaként megadhatjuk a Yandex és a Google főoldalait - ezek minimális külső erőforrást hívnak elő, és magában az oldalon szerepelnek a stílusszabályok.
A Computerra Magazin 2005. július 26-i 27-28. számából szerző Computerra magazin13. SZOBA: Kettő az egyben Az emberek hajlandóak nagylelkűen fizetni egy kis megtakarításért, sőt még az ilyenekre való lehetőségért is. Ezt a pszichológiai árnyalatot régóta használják a marketingesek, és erre számos példát találhat a számítógépiparban. Például, ha emlékszel a fő
Az Overclock your site könyvből szerző Matszijevszkij Nikolaj4.1. HTML és CSS fájlok kombinálása Egy oldal betöltésekor a kérések száma jelenti a legnagyobb szűk keresztmetszetet. A legújabb tanulmányok szerint a letöltési idő körülbelül 40%-a csak a szerverrel való új kapcsolatok kialakítására telik. Ennek fényében bármilyen módszer a szám csökkentésére
A mitikus emberhónap című könyvből [hogyan van szoftverrendszerek] szerző Brooks Frederick4.2. JavaScript fájlok kombinálása Az oldal összes külső JavaScript fájlja összevonható egy nagy fájlba, amely csak egyszer és örökre betöltődik. Ez nagyon kényelmes: a böngésző nem küld ezer kérést a szervernek egy oldal megjelenítésére, a letöltési sebesség drámaian megnő. A
A Windows Script Host for Windows 2000/XP című könyvből szerző Popov Andrej VladimirovicsA JavaScript és a CSS egyesítése egy fájlban A CSS-t azonban lehet kombinálni JavaScripttel, és a letöltések számát eggyel növelni. A technika azon alapul, hogy a CSS és a JavaScript elemző hogyan viselkedik az IE-ben és a Firefoxban. Amikor a CSS elemző HTML megjegyzés karakterrel találkozik ( Kinézet--> Szerkesztő --> Nézd meg a jobb oldali oszlopot.
Általában a CSS-fájlokat a téma tartalmazza a webhely fejlécfájljában - header.php. Keresse meg a fájlok jobb oldali oszlopában, és kattintson rá.
Ha megtaláljuk a szükséges CSS-fájlokat, nagyszerű.
A képen egy külső Google betűtípus kapcsolata látható. Ha nincs rá szükségünk, akkor ezt a sort töröljük, majd a tervezési téma CSS-styles fájljában mindenhol töröljük ennek a betűtípusnak az említését.
Mi van, ha a stílusfájlok nem találhatók? Ezután folytatni kell a keresést, a CSS-fájlok témától függően különböző helyeken csatlakoztathatók.
A képen egy példa látható, amikor a stílusfájl az init.php fájlhoz csatlakozik, és a csatlakozási mód eltér a webhely fejlécében szereplőtől:
Hogyan lehet hatékonyan keresni a CSS-fájlok között? Ehhez szükségünk van egy fájlkezelőre, például .
Az összes témafájlt a számítógépünkre másoljuk. Ezután lépjen a Total Commanderbe, és nyissa meg a téma mappáját. Kattintson a "Fájlok keresése" gombra, jelölje be a "Szöveggel" négyzetetés írja be a nevet kívánt fájlt stílusok:
A talált fájlok között lesz az, amelyikben a CSS-stíluslapunk is szerepel. Ha a fájl nem található, akkor a keresési lekérdezést egy egyszerűre bővítjük. css
Ezután megnyitjuk az egyes talált fájlokat, és megnézzük, hogy a benne lévő stílusfájl összekapcsolható-e.
3. Másolja a stílusokat a fő téma stílusfájljába.
Nem kapcsolhatjuk ki az összes felesleges CSS fájlt, különben elveszítjük az oldal stílusát. Először át kell másolnunk az összes tartalmát a fő téma stílusfájljába (általában stílus.css).
Az út mentén fekszik: /wp-content/themes/your_theme/ stílus.css
Megnézzük a webhely betöltési naplójában a többi betöltött CSS-fájlt, menjen a címre megadott elérési út, nyissa meg a fájlokat Jegyzettömbbel, másolja a tartalmukat egy fájlba stílus.css.
Mindent, lemásoltuk a stílusokat.
4. A téma felesleges CSS-fájljainak letiltása.
Most csak távolítsa el a korábban talált kódot, amelyben ezek a további stílusfájlok kapcsolódnak.
Távolítsa el a következő kódot:
1)
2) wp_register_style("elements_style", $directory_uri . "/elements/lib/css/elements.css");
wp_enqueue_style("elements_style");
3)
Csinálni ezt egyenként minden fájlhoz és minden egyes törlés után az oldal működőképességének ellenőrzéseés a benne lévő változások jelenléte. Ellenőrzés előtt Ne felejtse el törölni a böngésző gyorsítótárát és a webhely gyorsítótárát., különösen, ha gyorsítótár-bővítményeket használ (például a Hyper Cache).
Két vagy több cella egyesítéséhez használja a címke colspan és rowspan attribútumait
12.3. példa. Rossz cellaegyesítés
| 1. cella | 2. cella | |
| 3. cella | 4. cella | |
Ennek a példának az eredménye az ábrán látható. 12.5.
Rizs. 12.5. Egy további cella megjelenése a táblázatban
A példa első sora három cellát tartalmaz, amelyek közül kettő a colspan attribútummal van egyesítve, a második sorba pedig csak két cella van hozzáadva. Ez egy extra cellát eredményez a böngészőben. ábrán jól látható. 12.5.
A colspan és a rowspan attribútumok helyes használatát a 12-4. példa mutatja be.
12.4. példa. Cellák összevonása függőlegesen és vízszintesen
| Böngésző | internet böngésző | Opera | Firefox | ||||
|---|---|---|---|---|---|---|---|
| 6.0 | 7.0 | 7.0 | 8.0 | 9.0 | 1.0 | 2.0 | |
| Támogatott | Nem | Igen | Nem | Igen | Igen | Igen | Igen |
Ennek a példának az eredménye az ábrán látható. 12.6.
Rizs. 12.6. Táblázat egyesített cellákkal
Ez a táblázat nyolc oszlopból és három sorból áll. Az „Internet Explorer”, „Opera” és „Firefox” feliratú cellák egy része össze van vonva, hol kettő, hol pedig három. A "Böngésző" feliratú cella függőleges egyesítést alkalmaz.