Oktatási program css sprite

Oktatási program CSS sprite

CSS sprite - visszavonását az egyes komponensek egy-egy képet az interneten - az oldalt. Ez az egyik nagy képet, vagy több különböző, de egységes, egyetlen fájlban egymás mellett. Gyakran csoportosított ily módon számos különböző ikonok. A fejlesztők hívja ilyen fájl mester háló. Példaként egy képet, hogy hol van szükség, hogy a különböző elemek különböző részein az oldalt. Alternatív vágják darabokra, és meghatározza az egyes részeket külön tétel 1-1 külön fájlban. De néhány évvel ezelőtt volt, ahogy tette. A legegyszerűbb változat a természetben. De ez a módszer egy hátránya - azaz a száma, HTTP kérések, hogy a szerver küld a böngészőnek. Egy kép - ez egy lekérdezés. Minél több, annál hosszabb a betöltődik. Ezért CSS sprite elsődleges célja, hogy csökkentse ezeknek a száma azonos zaprosov.Vyshe a képen világosan mutatja a működési elve CSS sprite ha jelen van a kijelölt terület a kör, mint a mező a kép a mi stranitse.Rabotaet ezt a technológiát a következő. Oldalunk egy blokk:

url új módszer () / klip használata tulajdonságai tartalom beillesztése a sprite, vágott egy tulajdonság klip:

Hogyan működik. Ehelyett stílusú pszeudoelem mint a háttér, arra használjuk, hogy helyezzen be egy képet (a tartalom) A klip már nyírni, hogy jelenítse meg csak az a része, ami szükséges. Ez azt jelenti, hogy nem szükséges, hogy be üres címkék a képet, hogy nem látható részeit a kép (általában használható a háttérben kép a nagy elemek) csúsztatjuk klip értékek a bal vagyon és / vagy tetején. Ha nem metsszük sprite kép meg kell igazítani a jobb vagy bal szélén, hogy illeszkedjen a kontextusban az RTL / LTR (background-position: | [függőleges érték]). További gondot létrehozásakor sprite, ahol a képek követik egymás után (a többi kép jelenik is). Ha a termés sprite, a kép csak nalezut egymásra. Példa: Az előnyök ezt a technikát, mint a többi:

A kijelző nyomtatás közben. Ellentétben vízjelek, nyomtatás vannak nyomtatva a dokumentumban.
Elérhetőség. Ellentétben a háttérképet, akkor jelenik meg a nagy kontrasztú mód, vagy kontrasztos CSS stílusokat.
Úgy működik az IE. A módszer alkalmas az Internet Explorer 6 és 7.

Vegyük észre azt is, hogy lehet használni az adatok URI séma figyelmen kívül hagyja a HTTP kéréseket. IE 6/7 nem támogatja ezt a rendszert, de használható MHTML IE6 / 7. 3.Stilizatsiya linkek pseudo-elemekkel. Nicolas Gallager mutatott sok érdekes darab kapcsolódó pszeudo-elemek. Az egyetlen dolog, hogy azt mondtam, hogy ez egy példa segítségével: miután a stilizálhatja a linkeket a „tovább”, például:

Kapcsolódó cikkek

előző ◈ a következő