Használata Cascading Style Sheets, és a
Bekezdés 1. Cascading Style Sheets
Cascading Style Sheets (CSS vagy leírás -Cascading Style Sheets) ad a programozó teljes ellenőrzése alatt a prezentáció elemeit a HTML-jelölés egy weblapon. A stíluslapok segítségével meghatározhatja a betűtípus, szín és stílus szöveg töredékek, és módosíthatja a beállításokat egy szöveg blokk, hogy összehangolják a szövegdoboz képest más blokkok és az oldal elemek. A jelenléte mindezen funkciókat lehetővé teszi, hogy beszélni CSS eszközeként elválasztó logikai dokumentum struktúráját és űrlapküldési. A logikai felépítése a dokumentum elemei által meghatározott HTML-jelölést, míg a bemutatása minden egyes ilyen elemek adják CSS-leíró elemet.
A Visual Studio Net használata nyújtja a CSS, és nem csak az alkalmazás elemeinek HTML jelölőnyelv. Annak igazolására, a használata CSS funkciók egy egyszerű megoldás webhely (Fájl menü / Új / Web Site). A Solution Explorer jelölje ki a projektet a helyszínen a helyi menüben a sor „Új tétel” és a „sablonok” box set „Új elem” választani „Style Sheet”. Megnyomása után a „Hozzáadás” gombra a „stylesheet.css” fájl bekerül a projekt helyszíni megoldások, amelyek tartalma az, hogy létre egyetlen üres szabályt. Stíluslapnyelv általában tartalmaz egy sor olyan formázási szabályok, amelyek csatlakoztathatók különböző elemek az oldalon.
Minden szabályt kell egy leíró nevet, amely állhat egy vagy két részből áll, elválasztva dot. A bal oldalon az elem lehet egy fogantyút, amely a szabályt kell alkalmazni. Ha a leíró nincs jelen, a szabály alkalmazható bármely elemét. A jobb oldalon a pont az osztály van írva a neve az azonosító szabályokat. Bent a merevítők találhatók formázási szabályok ezt a szabályt. formázási elemek pontosvesszővel elválasztva. Egy példát a szabályok az alábbiakban mutatjuk be:
Az első esetben ez elegendő ahhoz, hogy helyezze a kurzort belül a zárójelek szabályok és nyomja meg a „Ctrl” plusz „Space”. A prompt (1.) Jelenik meg az összes lehetséges elemet formázási szabályokat. Miután kiválasztott egy elemet helyezünk a formában, általában kettőspont követ figyelmeztetés jelenik meg a lehetséges típusokat és paraméterekkel.
A második esetben, az egérmutató is helyezni a merevítések szabályok és építsünk stílus kiválasztott elemet a helyi menüben. Gombra a varázsló stílus Builder fut a kialakulását számos elemét a formátumot a szabályt.
2. ábra. A varázsló Builder
3. ábra. Hozzáadása Style Sheets
A fenti példában a szabály karosszériaváltozatokat fájlleírókkal alkalmazott összes elemet automatikusan (alapértelmezett). Ezen elemek formájában, amit szeretnénk, hogy a különböző típusról az alapértelmezett stílus, kifejezetten meg kell adnia a szabály CssClass tulajdonság (4. ábra).
4. ábra. A stíluslap szabályok
A három lehetőség, hogy alkalmazza a szabályokat CSS egy Címkeelem az 5. ábrán látható. Ügyeljen arra, hogy a fontos tényt - ha az irányítást egyértelműen meghatározott szabály CssClass tulajdon, a formázási elemet e szabály felülírja a szabályokat az elemek az alapértelmezett. Ha a szabályokat nem szorítja egy elemet, az elem alkalmazza az alapértelmezett szabály.
5. ábra. A stíluslap szabályok
2. bekezdés témák
2.1. A koncepció a szálak. Helyileg konkrét témák
Gyakorlatok - a létrehozása egy speciálisan összeállított egy szöveges fájl, amely viszont lehet venni a helyszínen döntést. A fájl tartalmát tükrözi a tervezés és a magatartása helyszínen elemek (kiegészíti vagy helyettesíti azok egyes tulajdonságok). Szálak kerülnek a cél könyvtár a fájlrendszer. Így a helyi szálakat helyezünk egy speciális mappát „App_Themes” a gyökérkönyvtárban megoldásokat oldalon. Ezen túlmenően, a szálak lehet meghatározni a szerveren, és helyezzük a globális katalógus a (várakozás, hogy egy kicsit később). Kezdetben úgy véljük, a használata a helyi szinten meghatározott, vagy másként a döntés egy adott honlapon.
További bemutató példákat hozzon létre egy egyszerű megoldás, hogy a helyszínen, és hogy két ellenőrzés címke az űrlapon. Ezután hozzunk létre, amely, és indítsa el a „App_Themes” mappát.
A Visual Studio, hozzon létre egy mappát „App_Themes”, és a téma két módja van:A Solution Explorer helyi menüjében a honlap az oldatot azonnal jelölje ki az elemet az „Új tétel”, és a dobozban „Új elem” - „Skin File” (a fájl nevét, hogy ki lehet választani az akarat, vagy alkalmas a célra, például a „Címkék”). Ennek eredményeként a „App_Themes” node jön létre egyszerre, a téma mappa „címkék”, és a téma fájlt (6. ábra)..
6. ábra. Hozzon létre egy könyvtárat „App_Themes” és témák
Minden mappát a könyvtárban App_Themes kezelik külön téma. A melléklet nem engedélyezett. Minden téma állhat egy vagy több fájl kiterjesztése „.skin”. Ezen kívül a könyvtár „App_Themes” fájlok lehetnek jelen a Cascading Style Sheets, képek és más típusú fájlokat, amelyeket a design elemek ( „.skin” fájlokra stíluslapok általában található a gyökérkönyvtárban a téma, és a képeket a könyvtárban " képek „). a különböző témák lehet határozni oldalakat a webhelyen, de aktív egy adott pillanatban csak egy. és ezért az egyik fajta kontroll célszerű létrehozni egyetlen „.skin” fájlt. Minden „.skin” fájl olyan nyilatkozatot is tartalmazhat dekoráció a különböző ellenőrzéseket. Ezt a nyilatkozatot dekorációk (tervsablonok vagy irha megadva) olyan tulajdonságokat tartalmaz, amelyeket alkalmazni lehet irányítani, és meg fogja határozni a megjelenése a kontroll által végrehajtott vizsgálati adatok futási megoldásokat.
Tekintsük a tartalom által generált varázsló „Labels.skin” file:
A javasolt szabályozás regisztrációs mintát, majdnem úgy néz ki, mint egy megfelelőségi nyilatkozatot és ellenőrzés „.aspx” fájlt. Megjegyzés jelenléte az attribútum runat = „server” attribútumot és a hiányzó „ID”. Ezen túlmenően, a design sablon tartalmazhat „SkinId” attribútummal. Annak érdekében, hogy tisztázza a célja, hogy létrehozza ezt „.skin” design sablon fájlt a Label (még anélkül, hogy »SkinId« attribútum):
A Default.aspx fájl úgy van beállítva, összekötő szálak webhely oldalaira irányelv ( „oldal”, az attribútum „téma” vagy „StylesheetTheme”):
Megjegyezzük, hogy a Default.aspx fájl Címkevezérlők meghatározása a következő:
Mi felel meg a döntést a helyszínen, és figyelni, hogy az eredmény (7. ábra, balra).
7. ábra. témák segítségével
Írja be az attribútum „SkinId” a leírás a tétel ( „Labels.skin” fájl):
Ha szabályozni Label1 (Default.aspx) SkinID tulajdonság (az Label1 csak) van beállítva, hogy a meghatározott értéket a tárgy (SkinID = „Label1”).
Mi felel meg a döntést a helyszínen, és figyelni, hogy az eredmény (7. ábra, középen).
Hozzáadott másik megvalósítása a téma, a Label c attribútum SkinId = „címke2”, és egy nyilatkozatot BackColor = „Red” a leírás ( „Labels.skin” fájl):
Ha szabályozni Label2 (Default.aspx) tulajdonság "SkinID" érték megállapítása az alanyban (SkinID = "címke2").
Mi felel meg a döntést a helyszínen, és figyelni, hogy az eredmény (7. ábra, jobbra). Az eredmények összehasonlításából arra lehet következtetni, hogy ha nem használja a tulajdonság „SkinID”, majd az összes lap címke elemek az oldalon jelenik meg, mivel van beállítva, hogy a hajlék egy fájlba csatlakoztatott témákban ( „Labels.skin”), amelynek típusa egybeesik a típusát elem weblapot. Tulajdonságokra „SkinID” lehetővé teszi, hogy kötődnek egy adott definíciója tervezés-ellenőrzés.
2.2. A globális katalógus
Bemutatunk egy szándékos hiba a Default.aspx fájl helyett a nevét a Theme = „Címkék” Theme = „Labels1”, és megpróbál eleget a határozatban az oldalon. A fordítóprogram jelenteni:
Ebből az következik, hogy a téma kérik nemcsak a döntést az igazgató, hanem a globális katalógusban. Az egyik ilyen könyvtár:
Forgalomba szálak a könyvtárat szeretne létrehozni Témák mappát ebben a könyvtárban. Akkor lehet, hogy a téma a mappában, mint mi, ha az „App_Themes” könyvtárba.
Kijavítjuk szándékos hibát, és mozog (ez fog mozogni) Címkék könyvtár "App_Themes" C: \ WINDOWS \ Microsoft.NET \ Framework \ Version \ ASP.NETClientFiles \ témák. Ismét eleget a határozatban. Az eredmény ugyanaz lesz, mint a 7. ábra mutatja.
2.3. Prioritásának beállítása használatáért szálak
A téma lehet venni a projekt fájlt könyvtár oldal .aspx két attribútumok: Téma és StylesheetTheme. Ha a téma attribútum a fájl leírását dekoráció szálak prioritása magasabb, mint a leírás, a tulajdonságokat az ellenőrzéseket. Ha StylesheetTheme attribútum, hogy ellenőrizzék a tulajdonságok magasabb prioritású, mint a szálak. Ezen túlmenően, a használata StyleSheetTheme tulajdonság, szemben a segítségével téma atribeta, megtudhatja, hogy a végrehajtás a tesztelés során a design. Tehát, ha StyleSheetTheme, háttér ellenőrzések egyezik a megadott színt nyersbőr témák, amelyekhez tartoznak.
Felhívjuk a figyelmet, hogy egy kivétellel. Tegyük fel, hogy két szál az ugyanazon névvel megadott (Címkék). Helyi leírja a design Label1, és a téma a globális katalógus - leírása tervezés Label1 és Label2. A tervezés szakaszában kérünk a neve a téma a Default.aspx fájlt az irányelvben oldal (téma vagy StyleSheetTheme = „Címkék”). Az első design, akikkel társult Label1 (SkinID = „Label1”) kerül sor a téma App_Themes könyvtár és alkalmazni fogják Label1. Mert Label2 SkinID = „címke2” összeköti a leírás regisztráció a Label2 téma „Címkék” globális katalógust. A tervezés szakaszában látunk két kontroll egy színösszeállítás (a fenti példában), amely meghatározott mind a „.skin” a fájlokat. Azonban, ha a helyszíni megoldások, Label2 kívül marad a befolyása a téma a globális katalógus (egyébként, nem nem téma kerül alkalmazásra, az az oka, hogy csak egy téma lehet aktív bármikor).
Térjünk is megjegyezni, hogy a lehet, megengedett és tiltott. Erre a célra a tulajdonságokat befolyásoljuk EnableTheming.
EnableTheming - ingatlan kaszkád, és kiterjed az összes gyermek. Az oldal irányelv EnableTheming tulajdonság kiterjed valamennyi elemét az oldalt. Ami a jövőt illeti, azt is megjegyezni, hogy EnableTheming = false nem működik, ha a kapcsolat attribútum „StylesheetTheme”. Sőt, ez nem attól függ, hogy az adatok csatlakozik a témában. Hogy figyelmen kívül hagyja a létesítmény, beleértve azokat is készült styleSheetTheme attribútumot, akkor meg kell adni az oldal vagy StyleSheetTheme = „” konfigurációs fájl direktívával (használatára vonatkozó konfigurációs fájlok, lásd a 2.4 ..) a következő definíció:
2.4. Beállítása egy témát minden helyszínen szerver vagy az egész oldal
Témák lehet állítani nemcsak szinten fájl oldalak, hanem a szinten a kiszolgáló és helyén. Az első esetben, a globális machine.config konfigurációs fájl, a második - a web.config az oldalon. Attribútumai csatlakozómenetekkel megegyeznek szoktunk csatlakozni oldal szinten: téma és styleSheetTheme.
Megjegyezzük, hogy a megjelölt témákat az oldal, elsőbbséget élveznek a meghatározás a web.config fájlt.
2.5. CSS segítségével témák
Cascading Style Sheets lehet használni részeként. Ha meghatározzuk a téma csak bizonyos szerver oldali elemek tulajdonságainak, amelyeket nem lehet beállítani a CSS segítségével, és minden egyéb tulajdonságok meg a stíluslapot, akkor bizonyos esetekben, jelentősen csökkentheti a forgalmat a szerver-kliens mennyiségének csökkentésével kódot generációs oldalán szerver.
A stílus lehet használni a témák állományokat, azok leírását ki kell egészíteni, hogy a téma mappát (a fájl lehet egy vagy több). ASP.NET használ fájlok stíluslapokban oldalakról, amelyek a kiválasztott témát és az oldal elemek. Ez automatikusan történik, beleértve a CSS fájlt egy oldalon a szokásos módon az oldalakat (irányelv A címke
- minden asztalon Visual Studio stílust adjunk hozzá egy irányelvet feltéve, hogy a címke attribútum runat = "server" oldal).Mi hozzá döntésünkben két fájl StyleSheet1.css stílusok telek és StyleSheet2.css (helyi menü a csomópont témák címkék, kattintson az „Új elem”, válassza a „Style Sheet”, adja meg a nevét, majd kattintson a „Hozzáadás” gomb). Típusa megoldások mutatja (8. ábra).
8. ábra. helyszíni megoldását a mellékelt téma és CSS
Felhívjuk a figyelmet arra, hogy az irányelv oldal attribútum jelen Címkék fonal használata és irányelvek címke
sz.A StyleSheet1.css StyleSheet2.css fájlt, és adja hozzá a megfelelő szöveg formázási szabályok:
Labels.scin kép, mint korábban, bejegyzéseit tartalmazza két héj. Új, hogy mi teszi a sablonok - CssClass attribútum hivatkozik egy specifikus CSS stílus:
Meg kell felelni a döntést. Az eredmény a 9. ábrán látható.
9. ábra. Határozat végrehajtása
Ha megnézzük a forráskódot (böngésző Nézet menü / Forrás), azt látjuk, hogy a két file Visual Studio stílusok adunk egy oldalt, mint ahogy tettük a fenti 1-es szám, és címke elemek konkrét utalást tartalmaznak a CSS osztály normál HTML oldalak:
2.6. Dinamikus terhelés a
Asp.Net betölti menet után azonnal generációs PreInit eseményeket. Így annak érdekében, hogy képes legyen megváltoztatni a program témája, végre kell hajtania azt Page_PreInit esemény.
Elvégzett gyakorlatokat egyszerűen. Az előző példában eltávolítja az irányelv „oldal” attribútum téma = „Címkék”; és helyezze a kódot a felvezető PreInit eseményeket. Az eredmény ugyanaz lesz, mint láttuk, a 9. ábrán.
Letiltani témák, mint korábban, akkor kell használni egy feladat értéke üres értéket témák:
Az egyik alkalmazása a dinamikus feladat - az, hogy a felhasználó kiválaszthatja a design az oldalaihoz. Elég feltenni néhány témát, és töltsd fel a felhasználó által kiválasztott témát. Azonban letölti a téma csak akkor lehetséges, az eseménykezelő PreInit. Témaválasztása lehetséges sokkal később PreInit eseményeket. A a probléma megoldását az lenne, hogy ülés (akkor is használ cookie, profilok és egyéb rendelkezésre álló tárhely).
Emlékezzünk, hogy az ülés vagy az ülés kezdődik, amikor a felhasználó először kér egy oldalt a függelékben (oldalt az oldal), és akkor végződik, amikor az alkalmazás (honlap), hogy kifejezetten lezárja a munkamenetet, vagy ha túl egy meghatározott várakozási idő. Ez lehetővé teszi, hogy tárolja a Session objektum lényeges információt helyszínen aktivitás és férhetnek hozzá a különböző oldalakon a webhelyen.
Ugyanakkor, a munkamenet tárgyak állnak csak az ismételt belépési az oldalra. Ha úgy döntünk, a lista nevét a téma, és tartsa a Session objektum (felvezető megnyomott egy gombot, például), majd PostBack oldal újratöltés, ha menteni újra később jönnek PreInit eseményeket. Mivel a kiutat e - hívja magát az oldalt. Ezután a felvezető a gomb megnyomása után mentheti meg a munkamenet nevét, és miután a visszahívás az oldalon, használja a tárolt információk az ülésen.
10. ábra. oldat oldalon
Az eredmény a képen látható kódot az a 11. ábrán.
11. ábra. Teljesítő helyszíni megoldását
2.7. Képek használata a témákat
Rajzok lehetne használni a témához, akkor hozzá kell adni az oldathoz vagy állnak URL. Rajzokat helyezni egy külön mappába témák könyvtárban. Egy mappa (a helyi menüben a csomópont Címkék téma, kattintson a „Mappa hozzáadása” kérni „képek” mappát). Tedd meg bármilyen képet (például cat.gif és dog.gif).
Fájl hozzáadása Labels.skin korábbi határozat két nyersbőr - Kép:
Hozzá a korábbi határozatot két ellenőrzés Image:
Meg kell felelni a döntést. Az eredmény a 10. ábrán látható.
10. ábra. Határozat végrehajtása
Így akkor is rajzokat ImageButton, TreeView, Menü és egyéb elemek a weblapokat.
Tekintsük a képesség, hogy dinamikusan szabályozza a kijelző grafika. Képcímkék Defaul.aspx eltávolítani a fájlt, és meghatározza a nyersbőr kép (vagy inkább kiegészíti azokat eltérő a különböző sablonok fényképek SkinID - „macska” és a „kutya”):
A következő példa bemutatja, hogyan lehet dinamikusan változtatni a minta meghatározott tárgy (változás következik be, frissítse az oldalt, és függ az időzítő érték):
A következő kód azt mutatja, hogyan kell ellenőrizni a kijelző elemek felhasználásával ViewState (kép változik a gomb minden egyes megnyomásakor):
irodalom
Értékeljük ha elér a kereső - látogasson el a honlapon
Webtárhely uCoz