IT kifejezése

Egy másik gyors Tut. Itt van valami egyszerű és szép erejét kihasználva a CSS ... de nehéz volt concieve (és biztosan nem én voltam), hogy kezdődik. Hozzáadása Dropshadow lehet az peice sütemény sokunk számára, segítségével néhány képszerkesztő eszközök, mint a Photoshop ANF tűzijáték stb
Az ok, hogy miért, azt választotta vetett árnyékot, hogy a CSS segítségével, általában az oldal létrehozása közben design / html kérelem, a követelmények folyamatosan iterációt. Úgy értem, egy meglévő webhelyet a sok kép, mint azok, freinds megjelenítő listában vagy egy képgaléria, nehéz lesz újra feldolgozni, hogy az egész rakományt a képek, hogy már már betárolt hozzáadni vagy eltávolítani az árnyékokat, hogy a számít.
Tehát ha volna egy kis előre gondolkodás megteremtése mellett HTMLS hozzá az extra osztályok, illetve általában a helyzet, hogy van egy logikai hurok generáló ezek az ikonok / bélyegképek XSL, PHP. JAVA vagy bármilyen más programozási / script nyelv, akkor add meg bármikor, akkor csak az ügy koncepciós és elrejtik ezeket az árnyakat a CSS Display tulajdonság, mint egy az ügyfelek folyamatosan változó követelményeknek ... Én havn't tenni ezt a fajta előre gondolkodó mielőtt ez ... de ahev el most!

Az alábbi példában az eredeti kép árnyék ingyenes, és az dropshadows érvényesek, mint szükséges! Azt is volna egy kis extra, segítségével a trükköket az én korábbi Tut (Well! ezek valószínűleg a legrövidebb különféle oktatóanyagok, így csak akkor indokolt, hívja őket "Tut" 's) mintegy CSS Clip ingatlan esetében csak mutogatni

Eredeti kép

CSS DropShadow Eredmények

Demo megtekintése | Letöltés sourcefiles

Tedd Stíluslapok a Top

Ha szeretne egy oldal kiszámításának fokozatosan, vagyis szeretnénk megjeleníteni a böngésző, amit tartalommal azt a lehető leghamarabb, tedd a CSS az oldal tetején a dokumentum HEAD belül. Ez teszi oldalakat úgy tűnik, hogy gyorsabb betöltés, mert ez megkönnyíti a progresszív készít az oldalról. Ez különösen fontos olyan oldalakat, ahol sok a tartalom és a felhasználók lassabb internet kapcsolattal.

Ez egy dokumentált tény, hogy a felhasználói élmény fokozása, fontos, hogy a megvalósulási mutatókkal és vizuális visszajelzéssel. Hogy ne kelljen újrarajzolni az oldal elemeit, abban az esetben, ha a stílusok változását, egyes böngészők, beleértve az IE, blokkokat készít az oldalról, míg a CSS teljesen meg van töltve. Emiatt, a felhasználó kap, hogy egy üres fehér oldal.

A W3 HTML Specifications "is kimondja, hogy a CSS-t kell nekem is a HEAD részben a HTML-oldal. at the bottom of the page, so it's best not to use it. Szintén fontos megjegyezni, hogy az IE @import ugyanúgy viselkedik, mint használ <link> alján található az oldalon, így legjobb, ha nem használja.

Kerülje a böngésző sajátosságai

Szűrők: a szűrő használata növeli a memória-felhasználás és alkalmazni elemenként, nem pedig a kép, ezért a problémát meg kell szorozni. Is, szűrők IE Egyedi, így nem fog működni a tervezettnek más böngészőkben. Ha azt szeretnénk, átlátszó vagy színátmenetes háttérrel, használja 1Pixel képekkel.
Kifejezések: CSS kifejezések egy szép vonás, hogy a CSS-ben, de még mindig az IE sajátossága. Szintén fontos megjegyezni, hogy ezek a kifejezések értékelni, ha az oldal megjelenítésekor és átméretezett, görgetni, és akkor is, ha a felhasználó megmozdítja az egeret az oldalon. Mondanom sem kell, ez befolyásolja a teljesítményét az oldal. Ezért egyszerű szavakkal, ne használja a CSS kifejezéseket, ha úgy érzi, a profik "nehezebb, mint a hátránya"

Kihelyezni úgy CSS

A külső CSS eredményez gyorsabb betöltését oldalakat, mert a JavaScript és CSS fájlok cache a böngésző. Inline CSS a HTML dokumentumokban kap minden egyes alkalommal letöltődnek a HTML dokumentum kérik. Ez talán valóban számának csökkentése HTTP kérések, de ezt követően növeli a méretét a HTML dokumentumba. A külső CSS vannak a böngésző cache, a méret a HTML dokumentum csökken anélkül, hogy növelné a HTTP kérések számát.

Felhívjuk figyelmét, hogy ha a felhasználók a honlapján több oldalletöltést per session és sok a lapok újra ugyanazt a szkriptek és stíluslapok, van egy nagyobb valószínűséggel részesül a külső fájlok cache-elt.

Csomagolja a CSS fájl

Csomagolási vagy ropogó a CSS a gyakorlatban kell törölni a felesleges karaktereket kód méretének csökkentésére és ezáltal javítja a rakodási idő.

A CSS-t nekem csikorgott azáltal, hogy megszünteti a megjegyzéseket és a nem kívánt karaktereket, mint a fehér terek, újsor stb

A CSS Reset-et / a CSS-be több elem stílusok egy adott kiindulási, amely létrehozza a különböző böngészők egységességét.

Mindannyian voltak a rémálmok keresztül az írás cross-browser CSS években. Tehát amikor elkezdjük írni a CSS-t, ez a gyakorlat visszaállításához először eltávolítani / reset minden kereszt böngésző ellentmondásokat. Visszaállítja CSS, egyszerű pár sornyi CSS, hogy kezdje el a CSS, így egy tiszta bázis kezdjék építeni a után.

A CSS visszaállítja, amit általában hajlanak arra, hogy így néz ki

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style: none;
}

H1, H2, H3, H4, H5, H6 {
font-size: 100%;
font-weight: normal;
}

Állítsa vissza a böngésző betűméret
Szintén fontos megjegyezni, hogy a reset került sor a böngésző betűméret a következő sort ...

html {font-size: 76%;}

A fenti CSS visszaállítja a böngésző betűméret 10 pixel, és ez lehetővé teszi, hogy működjön együtt a relatív betűméretek (ami minden fontos egy WAI megfelelés prespective)
Mert például a következő meghatározást, font-size egy span van beállítva, hogy 10 pixel, és hogy a alpont van beállítva, hogy 14 pixel ...

span {font-size: 1em;}
p {font-size: 1.4em;}

Pl.
Megadása CSS tulajdonság, mint ez,

margin: 5px 0;

valójában azt jelenti,

margin: 0px 5px 5px 0px;

Ez az első margin tulajdonság azt jelenti:

alsó és felső margó = 5px | | bal és jobb oldali margó = 0px

így a "hosszabb rövidítése" lenne

margin: 0px 5px 5px 0px; (T, R, B, L)

Még arra is használhatja 3 érték

margin: 5px 5px 0;

ami azt jelenti,

top = 5px | | jobb-és baloldali = 0px | | bottom = 5px

Internet Explorer automatikusan hozzáadja padding gombok HTML formában.
Ez a tér húzódik hosszúságától függően a gomb szövegét.

A megoldás add túlcsordulás a stílusa .... azaz

. Gomb {
overflow: látható;
padding-left: 10px! fontos;
padding-right: 10px! fontos;
... Más stílust ezt a gombot ...
}

VAGY

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible; padding-left:10px !important; padding-right:10px !important;" >;