Személyre szabni a helyszínek
Modern böngésző sok hasznos funkciók, amelyek közül néhány úgy tűnik, túl bonyolult megérteni. Egy példa az ilyen „nehéz” lehetőség az egyéni stílusok telek. Ebben a cikkben a cikkben megpróbálom megmutatni, hogy milyen állat, és miért eszik.
Mi a stílus?
Style - egy leírást a megjelenése egy oldalon eleme. Korábban, amikor stílusok ritkán használják, minden hézag nehéz kódolni a szövegben az oldal. Ha a kódoló kellett választani egy szöveget piros, majd ezt írta:
Figyelem! Ez egy nagyon fontos szöveget!
Amikor megnyitja ezt az oldalt a böngészőben, úgy nézett ki, mint az várható volt:
Figyelem! Ez egy nagyon fontos szöveget!
Természetesen ez a módszer egyszerű, de kényelmetlen: ha egy piros szöveg már használtak több száz oldalt a helyszínen, majd úgy döntöttek, hogy cserélje ki, mondjuk, a magenta? Csere kellene költeni az összes oldalon. Ezért meglehetősen logikus megoldás az volt, hogy szét az oldal tartalmát, és a maga nemében: felelős a tartalmát a HTML szabványt. és a távolság - CSS. Most már csak a stílus neve van írva az oldal kódja:
Figyelem! Ez egy nagyon fontos szöveget!
És egy külön fájlban tulajdonságait ismerteti figyelmeztetés stílus:
Most, ha szükség van változtatni a színét az összes ezeket a szövegeket, meg kell szerkeszteni egy fájlt. Ez megkönnyíti a DTP szakemberek - és mi, a felhasználók számára.
Belső oldalak eszköz
Minden blokk képviseli néhány tartalom a címkék közötti
Éppen ezek a paraméterek használhatók megváltoztatni a megjelenését a blokk. Például, hogy a változás a stílus egyszerre minden blokkot az osztály hsz kell írni a stílus a felhasználói kódot, mint ez:
Felhívjuk figyelmét, hogy a név az elem div és az osztály neve ponttal elválasztva hsz. Ha a blokk van beállítva, hogy a nevet (id), ahelyett, hogy a rács kerül - ebben az esetben, a stílus is érvényes lesz az adott egységet, akkor is, ha az oldal olyan egységet azonos stílus:
Mit lehet tenni a blokk?
Ha a blokk el van rejtve, a másik blokk, a következő kódot oldalakat a készülék megpróbálja átvenni a helyét, de néha ez nem kapunk, és az üres tér marad a helyén mezőbe.
Újabb lépés - az újrafestés blokk háttér más színű. Ha a tervező vette a háttér színe, amely megnehezíti olvasni a szöveget, meg lehet változtatni a háttér színét a tulajdonság background-color:
div.adv
Színének megváltoztatása a szöveg, akkor a szín tulajdonság:
Képesség text-dekoráció lehetővé teszi, hogy a szöveg aláhúzott (aláhúzás), vagy éppen ellenkezőleg, feszültségmentes (nincs):
div.adv
Font-weight tulajdonság lehetővé teszi, hogy a szöveg félkövér (ha az érték egy merész), vagy alacsony zsírtartalmú (abban az esetben a normál érték):
Egyéb elemek az oldal
Amellett, hogy a blokkokat, meg lehet változtatni a stílusát szinte minden eleme az oldalt. Ehhez csak meg kell változtatni a stílusát állandó eleme:
- szerv - a megjelenése az egész oldal;
- Egy - a megjelenése hivatkozások;
- a: hover - megjelenés linkek az egérrel rámutat rajta;
- td - a megjelenése táblázat sejtek;
- h1. h6 - a megjelenése fejlécek 1-6 szinten.
Természetesen az elemek sokkal egyszerűbben, ezek a leggyakoribb.
Ha egy elem a megadott attribútum, a kiválasztás lehet általa, meghatározva a tulajdonságokat és értékeket követő zárójelben névtáblát:
Ebben a példában a linkek, amelyek a kapcsolat oldalon, lesz félkövér. Persze, nem minden esetben szükséges, hogy az érték az attribútum teljesen, néha elég csak, hogy azt az elején vagy néhány:
Symbol előtti egyenlőség kupak biztosítja érvényesítési attribútum rajtvonal: a példában lesz rejtve a képeket közzétesszük a honlapon orosz Wikipedia, függetlenül azok nevét. És ha a kupak helyébe jelképe egy csillag, akkor nem kell ellenőrizni az elején a tulajdonság, és minden része:
Néha szükség van, hogy különböző attribútumokat. Így a szélessége 88 pixel lehet mindenféle képek, de ha van több kép és magassága 31 pixel, ez valószínűleg egy mini-banner formájában egy gombot. Az alábbi kód segítségével elrejti az összes gomb az oldalon (ha külön meghatározott méret):
Bizonyos esetekben szükséges alkalmazni a tervezéstől a tag, hogy be van ágyazva egy tag. Például, ha egy dokumentum mindig felesleges blokkok zárt tag
. ami viszont be van ágyazva a tag
Ha az oldal több eleme azonos típusú, akkor lehet alkalmazni a tervezés csak az első vagy az utolsó közülük az módosítók: az első gyermek, és: az utolsó gyermek, illetve:
Ebben a példában az első elemet rendezetlen lista nevét tételek festett vörös.
Prioritás egyéni stílusok
Azonban a háttérben továbbra is rózsaszín. Ebben az esetben, akkor próbálja megváltoztatni az egyéni stílus az alábbiak szerint:
Most a háttérben legyen fehér.
Gyakorlat: mindezt együtt
Példaként próbálja meg eltávolítani a navigációs sáv a honlapon található az Opera böngészőt. Más böngészők szükség lehet további bővítése, amely alkalmazza a CSS-stílusokat az oldalon, például a Google Chrome-ot egy ilyen bővítmények Stylebot. és a Firefox - Stílusos.
Az első lépés az, hogy meghatározza a helyét a blokkot a forrás dokumentum. Ha HTML tapasztalat, akkor nyissa meg a forráskód kiválasztja a megfelelő parancsot a helyi menüben. Ellenkező esetben a hasznos funkció „vizsgáljuk elem”, amely szintén a helyi menüben. Ezen opció kiválasztásával a az ablak alján látni fogja meg az oldal forráskódját, és kattintson az egér bármely elemét az oldal megmutatja a megfelelő kódot hozzá.
Ezen az oldalon a navigációs csík van zárva egy blokk nevű menü:
A második lépés, hogy hozzon létre egy szöveges fájlt, amelyben a felhasználó stílusokat rögzítjük. Mivel a cél az, hogy elrejtse a navigációs sáv, a fájlt kell felülírt stílusú blokk div. és csak az elem nevével menü:
Bent a fogszabályozó levelet attribútum kijelző és az értéket none:
Ebben a fájlban szerkesztése befejeződött.
Információs hálózat
Természetesen a lehetőségét, hogy egy sokkal gazdagabb stílusok fent leírtak szerint. Az interneten megtalálható számos útmutatók és útmutatók stílusok és azok jellemzőit végrehajtásában konkrét böngészők, például WebReference.ru site kínál egy jó bemutató, és hivatkozással a Cascading Style Sheets.