Vyjadrenie IT

Ďalšie rýchla tut. Tu je niečo jednoduché a príjemné použitie sily CSS ... ale bolo ťažké poňať (a to určite nebol ja) začať. Pridanie Dropshadow, môže byť peice torte pre mnohých z nás, používať niektoré nástroje pre úpravu obrazu, ako Photoshop ANF ohňostrojov atď
Dôvod, prečo som sa rozhodla pre tieni pomocou CSS je, že obvykle pri vytváraní stránky design / html žiadosti, aby požiadavky iterácie. Čo chcem povedať je, Vo existujúce webové stránky s mnohými obrázkami, ako sú tie, zobrazujúci freinds zoznam alebo galériu obrazu, to bude ťažké znovu spracovať celý zaťaženie obrázkov, ktoré už boli vyložené pridať alebo odstrániť tiene, pre ktoré záležitosť.
Takže ak ste urobili trochu myslia dopredu a vytvorili HTMLS pridať tieto ďalšie divízie, alebo sa obvykle situácia taká, že máte Loop Logic generujúce tieto ikony / náhľadmi v XSL, PHP. JAVA alebo akékoľvek iné programovací / skriptovací jazyk, môžete ho pridať kedykoľvek, potom je len otázkou show a skrýva tieto tiene pomocou CSS vlastnosť Display, ako na klientov, stále sa meniace požiadavky na ... Ešte si sa urobil som tento druh myslia dopredu pred tým ... ale ahev začala teraz!

V nižšie uvedenom príklade, pôvodný obrázok tieni zadarmo a dropshadows sú použité podľa potreby! Tiež som išiel niečo navyše, pomocou trikov z mojich predchádzajúcich Tutanchamóna v Well! To asi sú najkratšie množstvo cvičení, tak to je oprávnená len vtedy, volať je "Tut" 'y) na použitie CSS vlastnosť klip pre predviesť iba

Pôvodný obraz

CSS DropShadow Výsledky

Zobraziť Demo záložky | Stiahnuť sourcefiles

Dajte štýly na začiatok

Ak chcete stránku načítať postupne, to znamená, chceme, aby prehliadač zobrazí obsah bez ohľadu na to má, akonáhle je to možné, dať CSS v hornej časti stránky vo vnútri dokumentu HEAD. Tým stránky sa zdajú byť rýchlejšie načítanie, pretože to uľahčuje postupné vykresľovanie stránky. To je dôležité najmä pre stránky s množstvom obsahu a pre užívateľa na pomalšom pripojení k Internetu.

Je zdokumentované, že pre celkové zlepšenie užívateľského prostredia, je dôležité, aby indikátory a vizuálnej spätnej väzby. Aby sa predišlo nutnosti prekreslenie prvkov na stránke, v prípade, ak ich štýly sa menia, niektoré prehliadače vrátane IE, bloky stvárnenie stránky, kým CSS je úplne zaplnený. Pretože toto, používateľ uvidí prázdna biela stránka.

V W3 HTML špecifikácie "ďalej uvádza, že CSS je mi zahrnúť do HEAD časti stránky HTML. at the bottom of the page, so it's best not to use it. Tiež si všimnite, že v IE @import sa chová rovnako ako pri použití <link> v dolnej časti stránky, takže je to najlepšie, aby ju používať.

Vyhnite sa použitie prehliadača špecifiká

Filtre: Použitie filtra zvyšuje spotrebu pamäte a aplikuje sa na prvok, a to za snímku, takže je problém sa násobí. Tiež Filtre sú IE Vlastné, bude teda fungovať podľa plánu v iných prehliadačoch. Ak chcete priehľadné pozadie alebo prechod, použite 1Pixel s obrázkami.
Výrazy: CSS výrazy sú pekná vlastnosť mať v CSS, ale stále je IE špecifické funkcie. Tiež je dôležité si uvedomiť, že tieto výrazy sú hodnotené, ak je stránka vydanie a veľkosť, posúvať a dokonca aj keď používateľ presunie kurzor myši na stránke. Netreba hovoriť, že by to mohlo ovplyvniť výkon vašej stránky. Preto v jednoduchých slov, nepoužívajte CSS výrazy, ak si myslíte, ich klady "váži viac ako jeho cons"

Externalizovať vám CSS

Pomocou externého CSS bude mať za následok rýchlejšie načítanie stránky, pretože JavaScript a CSS súborov sú ukladané do vyrovnávacej pamäte prehliadača. Inline CSS v dokumentoch HTML si stiahnuť každom dokumente HTML je požadované. To by v skutočnosti mohli znížiť počet HTTP požiadaviek vyrobených ale následne sa zväčší veľkosť dokumentu HTML. Externý CSS, sú uložené v prehliadači, veľkosť dokumentu HTML je znížená bez zvýšenia počtu HTTP požiadaviek.

Vezmite prosím na vedomie, že ak užívatelia na svojich stránkach majú viac zobrazení stránky na zasadnutí a mnoho z vašich stránok znova použiť rovnaké skripty a štýly, tam je väčší potenciálny prínos z externých súborov uložených vo vyrovnávacej pamäti.

Zabaľte svoj CSS súbor

Balenie alebo škrípať vaše CSS je prax odstránenie zbytočných znakov z kódu znížiť jeho veľkosť a tým zlepšuje načítanie krát.

CSS je mi praskali tým, že odstráni všetky pripomienky a nežiadúce znaky, ako je bielych miest, nové riadky pod

Obnoviť CSS je / sú CSS nastaviť rad prvkov štýlov na konkrétne predvolené, ktorý vytvára súlad v rôznych prehliadačoch.

Všetci sme boli cez nočné mory písanie cross-browser CSS je. Takže keď začneme písať naše CSS, je zvykom obnoviť najprv odstrániť / reset žiadne krížovej prehliadača nezrovnalosti. Obnoví CSS, sú jednoduché pár riadkov CSS, ktoré si začínajú svoje CSS s, čo vám čistý základ pre spustenie na budovanie svoje.

CSS resetuje, že som normálne inklinujú k použitiu vyzerá takto

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: normálne;
}

Obnoviť prehliadača veľkosť písma
Tiež si všimnite, reset, ktoré boli použité na veľkosť písma prehliadača v nasledujúcom riadku ...

html {font-size: 76%;}

Vyššie CSS obnoví prehliadača veľkosť písma na 10 bodov, a to umožňuje pracovať s relatívnou veľkosťou písma (čo je každý dôležitý z dodržiavania WAI prespective)
Pre napr v tejto definícii, je font-size v rozpätí stanovená na 10 pixelov a že v paragarph je nastavená na 14 bodov ...

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

Napr.
Zadanie vlastnosť CSS takto,

margin: 5px 0;

vlastne znamená,

margin: 5px 5px 0px 0px;

Táto prvá marže majetkom sa rozumie:

Horný a dolný okraj = 5px | | ľavej a pravej Margin = 0px

takže "nie je skratka" by bolo

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

Dokonca môžete použiť 3 hodnoty

margin: 5px 5px 0;

čo znamená,

top = 5px | | pravej a ľavej = 0px | | bottom = 5px

Internet Explorer automaticky pridá výplň k tlačidlám v HTML formulárov.
Tento priestor sa rozkladá v závislosti na dĺžke texte tlačidla.

Riešením je pridať pretečeniu k jeho štýlu .... tj

. Tlačidlo {
overflow: visible;
padding-left:! 10px dôležité;
padding-right! 10px dôležité;
Akýkoľvek iný štýl ... toto tlačidlo ...
}

Alebo

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