Jesprimi IT

Ieħor quick Tut. Hawnhekk hija xi ħaġa sempliċi u sbieħ bl-użu POWER ta 'CSS ... iżda kien concieve diffiċli (u żgur ma kienx me) li tibda bil. Żieda Dropshadow, jista 'jkun peice kejk għal ħafna minna, bl-użu xi image editing għodod simili Photoshop ANF Fireworks eċċ
Ir-raġuni għaliex, I għażel dell qatra jużaw CSS huwa li, normalment waqt ħolqien ta 'disinn paġna / html ta' applikazzjoni, il-ħtiġiet iżommu mtennija. What I medja hija, Fil sit web eżistenti bi stampi ħafna, bħal dawk wiri freinds lista jew image gallery, se jkun diffiċli li mill-ġdid il-tagħbija kollha ta 'immaġini li kienu diġà maħtuta biex iżżid jew tneħħi l-dellijiet, għal dik kwistjoni.
Allura Jekk inti għamlu ħsieb quddiem ftit filwaqt li toħloq il-HTMLS biex iżżid dawn it-taqsimiet żejda jew normalment is-sitwazzjoni hija li inti għandek Loġika Loop jiġġeneraw dawn ikoni / thumbnails fil XSL, PHP. JAVA jew kwalunkwe programmar / scripting lingwa, tista 'żżid ghaċ, allura huwa biss il-kwistjoni ta' ispettaklu u ħabi dawn dellijiet tuża 'l-proprjetà Display CSS, skond il-klijenti dejjem jinbidlu rekwiżiti ... I havn't jsir dan it-tip ta' quddiem ħsieb qabel dan ... iżda ahev beda issa!

Fl-eżempju hawn taħt, l-immaġini oriġinali huwa dell ħielsa u l-dropshadows huma applikati kif meħtieġ! WKOLL, I marru ftit extra, billi tuża l-tricks tal Tut preċedenti tiegħi (Well! dawn probabbilment huma varjetà iqsar ta 'tutorials, u għalhekk huwa ġġustifikat biss titlob minnhom "Tut" "i) dwar Bl-użu tal-Proprjetà Clip CSS għall juru off biss

Oriġinali Image

DropShadow Riżultati CSS

Ara Demo | sourcefiles Download

Poġġi stylesheets fil-Top

Jekk inti tixtieq paġna li tagħbija progressivament; jiġifieri, irridu li l-browser li juri kwalunkwe kontenut hija għandha mill-aktar fis possibbli, tpoġġi l-CSS fil-quċċata tal-paġna ġewwa l-RAS dokument. Dan jagħmel il-paġni jidhru li tagħbija aktar malajr, peress li dan jiffaċilita tirrendi progressiva tal-paġna. Dan huwa importanti speċjalment għall-paġni bil-lott ta 'kontenut u għall-utenti fuq konnessjonijiet tal-Internet bil-mod.

Huwa fatt dokumentat li biex itejbu utent esperjenza globali, huwa importanti li jiġu pprovduti indikaturi ta 'progress u r-reazzjonijiet viżwali. Biex jiġi evitat li tiġbed elementi tal-paġna, fil-każ jekk stili bidla tagħhom, xi browsers, inklużi IE, blokki għoti tas-paġna sakemm il-CSS hija kompletament mgħobbija. Minħabba dan, l-utent huwa gets biex tara paġna abjad vojta.

L-Ispeċifikazzjonijiet HTML W3 "wkoll li l-CSS għandhom lili jinkludu fit-taqsima RAS tal-paġna HTML. at the bottom of the page, so it's best not to use it. Wkoll in-nota li, Fl-IE @import iġib ruħu l-istess bħal użu <link> fil-qiegħ tal-paġna, għalhekk huwa aħjar li ma jużawhx.

Evita Jużaw karatteristiċi Browser speċifiċi

Filtri: L-użu ta 'filtru iżid il-konsum tal-memorja u jiġi applikat għal kull element, mhux kull immaġini, għalhekk il-problema huwa mmultiplikat. Ukoll, filtri huma IE Proprjetarji, għalhekk mhux se taħdem kif maħsub fil-browsers oħra. Jekk inti tixtieq sfondi trasparenti jew xaqliba, l-użu 1Pixel bi stampi.
Espressjonijiet: espressjonijiet CSS huma karatteristika sbieħ li jkollhom fil-CSS, iżda xorta huwa karatteristika speċifika IE. Ukoll, huwa importanti li wieħed jinnota li, dawn l-espressjonijiet huma evalwati meta l-paġna tingħata u daqs ieħor, impress u anke meta l-utent iċaqlaq il-maws fuq il-paġna. M'hemmx għalfejn ngħidu dan jista 'jaffettwa l-prestazzjoni tal-paġna tiegħek. Għalhekk fi kliem sempliċi, Evita li tuża espressjonijiet CSS, sakemm tħoss vantaġġi tagħha "jiżen aktar minn cons tagħha"

Testernalizza inti CSS

Bl-użu CSS esterni tirriżulta tagħbija aktar mgħaġġel ta ' paġni minħabba li l-fajls JavaScript u CSS huma Cached mill-browser. Inline CSS fid-dokumenti HTML jiksbu jitniżżel kull darba id-dokument HTML huwa mitlub. Dan jista 'effettivament jitnaqqas in-numru ta' talbiet HTTP magħmula iżda sussegwentement iżid id-daqs tad-dokument HTML. Esterni CSS huma Cached mill-browser; id-daqs tad-dokument HTML huwa mnaqqas mingħajr żieda fin-numru ta 'talbiet HTTP.

Jekk jogħġbok innota li, jekk l-utenti fuq is-sit tiegħek għandhom fehmiet multipli paġna għal kull sessjoni u ħafna paġni tiegħek mill-ġdid jużaw l-istess skripts u stylesheets, hemm benefiċċju potenzjali akbar mill-fajls esterni Cached.

Pakkett Fajl CSS tiegħek

Ippakkjar jew crunching CSS tiegħek hija l-prattika ta 'tneħħija karattri żejda mill-kodiċi li tnaqqas id-daqs tagħha u b'hekk titjieb il-ħinijiet.

Il-CSS jistgħu lili crunched billi tneħħi l-kummenti u kull karattri mhux mixtieqa bħall-spazji bojod, eċċ newlines

A Irrisettja CSS huwa / huma CSS li jistabbilixxu numru ta 'stili element għal linja bażi speċifika li toħloq konsistenza madwar browsers differenti.

Aħna lkoll kienu permezz tal-inkubi tal-kitba bejn il-browser CSS. Allura meta aħna jibdew bil-miktub CSS tagħna, Hija prattika għal reset l-ewwel biex jitneħħew / reset xi inkonsistenzi browser transkonfinali. Jreġġa CSS, huma ftit linji sempliċi ta 'CSS li inti tibda CSS tiegħek ma', giving you bażi nadif biex jibda jinbena tiegħek fuq.

Il jreġġa CSS li jien normalment għandhom tendenza li jużaw tidher bħal dan

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 {
lista stil: xejn;
}

H1, H2, H3, H4, H5, H6 {
font-daqs: 100%;
font-piż: normali;
}

Irrisettja l-daqs tat-tipa browser
Wkoll in-nota l-reset li ġiet applikata għall-font browser daqs fil-linja li ġejja ...

html {font-size: 76%;}

Il jreġġa CSS fuq id-daqs tat-tipa browser sa 10 pixel, u dan jagħmilha possibbli li taħdem ma 'daqsijiet font relattivi (li huwa kull importanti minn konformità WAI prespective)
Pereżempju, fid-definizzjoni li ġejja, font daqs fil-medda huwa stabbilit għal 10 pixels u li fil-paragarph huwa stabbilit għal 14 pixels ...

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

Eż.
Tispeċifika proprjetà CSS bħal din,

marġni: 5px 0;

effettivament tfisser,

marġni: 5px 0px 0px 5px;

Dik il-proprjetà marġini 1 tfisser:

marġini fuq u isfel = l 5px | L | marġini tax-xellug u = l 0px

sabiex il-"taqsira itwal" tkun

marġni: 5px 0px 0px 5px (T, L, B, L)

inti tista 'anki tuża 3 valuri

marġni: 5px 0 5px;

li jfisser

top = l 5px | L | lemin u xellug = l 0px | L | qiegħ = l 5px

Internet Explorer awtomatikament iżid ikkuttunar għall buttuni fil-forom HTML.
Dan l-ispazju meded skond it-tul tat-test tal-buttuna ta.

Is-soluzzjoni hija żżid overflow għall-istil tagħha .... jiġifieri

. Buttuna {
overflow: viżibbli;
ikkuttunar-xellug:! 10px importanti;
ikkuttunar-dritt:! 10px importanti;
... Kull stil oħra għal din il-buttuna ...
}

JEW

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