20. lecke
»ASP kezdőknek
»Főoldal
»ASP kezdőknek
Styling web-oldalak
Az egyik fontos feltétele létre egy igazán jó honlap design minden web-oldalakat, amelyek egy része, ugyanabban a stílusban. Első pillantásra ez a feladat triviális. Valóban, mi sem könnyebb - beállíthatjuk, hogy ugyanazokat az értékeket valamennyi képi objektumok tulajdonságait. Azonban, ha nagy mennyiségű web-oldalak szerepel a projektben, a telepítés minden értéket vehet egy elég nagy idő. Szeretném, hogy automatizálják az ilyen tevékenységet. És itt jön a támogatás a technológia a Cascading Style Sheets - CSS (Cascading Style Sheets).
Ennél a technológiánál egy külön külső fájl, ami tartalmazza a szabályokat kijelző egy tag a böngészőben. Ezután a CSS-fájl köti össze web-oldal. Így könnyen elérni egységes stílus minden web-oldal, egy része a helyszínen.
Az első változat a CSS szabályai megjelenítésére Web-oldal szöveg, forgalomba szöveges tartalom az oldalon, és néhány részletet a megjelenítés és táblázatcellákhoz. A második változat több új funkciók, mint például a vizuális hatások, vagy az automatikus számozás elemekkel.
A stíluslap egy sima szöveges fájl egy speciális formátumban. Az előírások ezt a formátumot kijelölt szöveg / ess. rögzített leképezés szabályok egyes címkék a CSS-fájlt. Példa felvétel egy ilyen szabály tűnhet körülbelül a következő: a
Ez a szabály kimondja, hogy a szöveg tartalma Az összes tag <а>, amelyek szerepelnek a HTML hiperhivatkozások segítségével jelennek bármely rendelkezésre álló betűtípus Arial család, sötétkék (navy).
Miután a címke nevét rögzítik a zárójelek között általában hézag szöveges tartalom. Nézzük újra a példa.
egy (szín sötétkék; .. font-family Arial>
Mint látható, a fogszabályozó lehet rögzíteni több szabályt, elválasztva. A szabály maga két részből áll. Első felvett név kijelzés paraméter, például a betűtípust használják fel, akkor a kettőspont után, írunk ezt az értéket. A példában az összes ez elég jól látható.
Tehát, mint láttuk, a merevítők is írt néhány szabályok tartalom megjelenítése. De néha ez történik, és úgy, hogy több tag esetén ugyanazokkal a megjelenítési szabályokat. Nem tudjuk megmondani, hogy ugyanazokat a szabályokat minden tag külön-külön, és egyesíti a címkék az azonos csoportba, és állítsa be a leképezési szabályok minden tag egyszerre. Ugyanakkor egyesült neve címkéket vesszővel elválasztva. Ez látható az alábbi kivitelekben:
Ez a szabály kimondja, hogy a szöveg tartalma és hivatkozások fejlécét az első szint jelenik sötétkék.
Tudjuk, hogy a teljes neve a CSS - Cascading Style Sheets. Miért nevezik őket stíluslapok, már megvalósult. Van egy jogos kérdés, hogy mi a lépcsőzetes, és hogy általában azt jelenti?
A számítógép-ipar igen nagy fejlődési ütemére. Az eredmény egy sor a legkülönbözőbb irányzatok és áramlatok. Néhányan közülük meghal hamarosan, és néhány mozog a kategóriában trend a rangot ideológia. Az egyik ilyen irányzat a kód újrafelhasználásának, öröklődését korábban megállapított megoldásokat. CSS és ezért közvetlen kapcsolatot.
Mi nem szükséges minden dokumentumot csak egy stíluslapot. Mi lehet csatlakoztatni őket több. Például, amikor új dokumentumokat a helyszínen lesz, hogy új leképező szabályok, új stílus. Néha ez a korrekció a meglévő stíluslap de senki megtiltja nekünk, hogy további fájlt, és csatlakoztassa a dokumentumot. Ahogy az imént mondta, tudunk kapcsolódni több asztalt.
És egy további fájlt style2.css kijelentjük leképezést tételt, és része az elemek a következők:
Ha most csatlakozik a HTML-dokumentumban a két stílus fájlt, úgy tűnik, hogy két különböző megjelenítési vonatkozóak elem”. Az első stílus Kevesebb fájl meghatározza, hogy a szöveg elem „jelenik meg a kék, a második szabály fájl megadására használt tartalmának megjelenítéséhez ugyanaz az elem már zöld. Hogy milyen színű lesz használva valójában attól függ, hogy milyen sorrendben fájlok stíluslapok kapcsolódni fog az XML-dokumentum.
Ez használ mindig az utolsó szabály. Nevezetesen, ha először csatlakoztassa stílus Kevesebb fájlt, majd style2.css fájlt, a szöveg tartalmi elem elem jelenik meg a zöld.
De tudunk létrehozni egy speciális módosítót, hogy megjelenjen a szabályok arra fogja kényszeríteni a böngésző figyelmen kívül hagyni a összekapcsolásához stíluslap. Tehát, ha az árupiaci bármilyen szabályt regisztrálás fontos módosítót, akkor jelenítse meg a szöveges tartalom az elem akkor kell használni ezt a szabályt, függetlenül attól, hogy még mindig kapcsolatban szabályokat kijelző az azonos elem. Más szóval, a használata fontos kulcsszó lehetővé teszi, hogy bármilyen szabályt a kiváltságos szintre, és távolítsa el a hierarchia a CSS. Vegyünk egy példát. Vegye ki a megszokott stílust Kevesebb fájlt, és módosítsa a kódot egy kicsit. Mi így a következő sor leképezési szabályok:
Most, hogy a csatlakozási sorrendet stílus fájlokat és stílus Kevesebb style2.css, amit korábban tárgyaltuk, a szöveg tartalmi elem elem jelenik meg a kék.
Látható a példát, hogyan kell használni a fontos módosítót. Ha szükségünk van egy szabály Elsőbbségi teszünk után szimbólumává vált egy felkiáltójel, és levelet kulcsszót fontos, szóközzel elválasztva.
Azonban lehetséges, hogy van néhány szabály megjelenítésére CSS-fájlok ugyanaz az elem, és ezek közül több is fontos módosítót. Ebben az esetben előnyösebb hierarchiáját ezeket a szabályokat és megjelenítésére a legutóbbi kapcsolat szabályait.
Természetesen ahhoz, hogy sikeresen használ stíluslapot, meg kell tudni a nevét, a kép paramétereit. Nem fogjuk részletesen ismertetni ezeket a paramétereket, teljes leírása CSS lenne túl sok helyet, így azok, akik nem ismerik a stíluslapok kell konzultálni, hogy megtalálják a szakirodalomban, amelyben a stíluslapok tartják be részletesen. Azonban az alkalmazás egy listát a leggyakrabban használt megjelenítési lehetőségeket.
Tény, hogy ASP.NET alkalmazás fejlesztő lehet állítani, hogy mely paramétereket megjelenítő web-oldalak tartalmát anélkül stílus fay-, horgászat, közvetlenül a tulajdonságai különböző elemek. De akkor meg kell írni túl nagy mennyiségű kódot. Egy ilyen döntés nem nevezhető elegáns. Próbálja használni stíluslapok.
Kétféle módon használja CSS technológiával. Mi beállíthatják a stílus attribútum a tag a HTML-oldalak, társ-gtorye megy keresztül stilisztikai kezelést, vagy csatlakoztasson egy külső fájlt, amely tartalmazza a meghatározása a stíluslapot. Sajnos, ASP.NET nem teszi lehetővé pont csatlakozik egy stíluslap, mint a tulajdonságok oldalakon széllökések web-oldal. Ezért fogunk létrehozni egy stíluslapot, ahol a szabályokat a „kijelző társul nem a nevét a címkéket, és egy név-osztály szelektor. Minden egyes vizuális Webkomponens; Forms feltéve CssClass tulajdonság, amely meghatározza az osztály és a nevét a választó.
Tehát először létrehozunk egy CSS-fájlt. teljesítenie kell a Project menü parancsot felvétele a projekt a külső stílus fájl | Új elem hozzáadása (Project Új pont). Parancs futtatása után a képernyőn Új elem hozzáadása párbeszédablak jelenik meg (Új tétel). Under sablonok (sablonok), jelölje ki az elemet Style Sheet (Style). Ezt követően további fájl szerepel a projektben.
Alapértelmezésben által létrehozott stíluslapot tartalmazza készítmények hajformázó tervezett címkézni
, t. e. e szabály tudjuk meg leképezési szabályokat, ami hatással lesz a teljes dokumentumot.Új szabály a stíluslap design, akkor kattintson a Hozzáadás stílus szabály gombra (Szabály hozzáadása feldolgozás) található a műszerfalon Style Sheet (Style). Ebben az esetben Új stílus szabály párbeszédpanelen be van kapcsolva (Szabály hozzáadása regisztrációs), amelynek megjelenése ábrán látható. 3.21.
Mivel azt tervezzük, hogy hozzon létre szabályokat regisztráció a web-oldal tartalmát, amely az osztályok szelektor, meg kell választani a rádió gomb Class Name (az osztály neve). A kapcsolódó szövegbeviteli mezőbe írja be a nevét az osztály választó, amelyhez létre fog hozni egy leképezési szabályt. Miután az osztály nevet kell beírni, nyomja meg az OK gombot, hogy átkerüljön a stíluslap kódot sablon létrehozása A regisztráció feltételei a kívánt osztályban.
Miután létre az összes üres a mi osztályok, akkor lehetséges, hogy hozzon létre tervezési szabályokat. Ehhez helyezze a kurzort a választó, amelyre még feltételeket szab a regisztráció, és kattintson építsünk stílus gombot (New Style). Lehetővé teszi az interaktív Builder Style Style Builder párbeszédablak (Style Builder)
Segítségével építő párbeszédablak stílusok megadhatja megjelenítési szabályok az egyes osztályokra választó vizuális módban. Azonban senki sem tiltja a fejlesztők egyszerűen írja CSS szabályokat a kódot kézzel. Minden attól függ, személyes preferencia. De meg kell jegyezni, hogy amikor a Builder párbeszédablak stílusok akkor mindig látni, hogy a szöveg fog megjelenni, tekintettel az elfogadott szabályok a leképezési a párbeszédablakban van egy panel, amely egy példát mutat a szöveg abban a formában, amelyben úgy fog kinézni a végleges verzió Web-oldalt.
font-family: „Arial Black;
Miután a CSS-fájl jött létre, meg kell csatlakoztatni a web-oldal. Ehhez menj a web-oldal fejlesztés alatt áll, amelyhez fogunk csatlakozni a stíluslapot, és végrehajtja a Format menü | Dokumentumstílusok (Format | Styles dokumentum). Ez a parancs aktiválja a Document Stílusok ablak (Dokumentumstílusok). Ebben az ablakban nyomjuk meg az Új stílus Link gomb (link felvétele a stíluslap), amely kötődik az web-oldal egy már meglévő stílus fájlt. Ehhez Select Style Sheet (kiválasztása stíluslap), egy párbeszédablak fogják használni, amelynek megjelenése ábrán látható. 3.23.
Most minden stílus csatolt fájl ezen web-oldal. Ugyanakkor a saját HTML-kódot a dokumentum fejlécében vonal jelenik meg hasonló a következő:
Most már csak létre, hogy csatlakoztassa a CSS-táblázatot az összes web-oldalak a projekt, az értékeket a tulajdonságok cssciass szükséges alkatrészeket, és a feladat az stílus a helyszínen megoldani.