Изражавајући ИТ

Још један брзи тут. Овде је нешто једноставно и лепо Користећи моћ ЦСС ... али је било тешко цонциеве (и то сигурно нисам ја) да се почне са. Додавање Дропсхадов, можда пеице колача за многе од нас, користећи неку слику као што су алатке за обраду Пхотосхоп АНФ Фиреворкс итд
Разлог зашто сам се определила за дроп сенке помоћу ЦСС је да, обично при прављењу странице дизајн / ХТМЛ код апликације, захтеви задржати итератинг. Хоћу да кажем, У постојећем веб сајт са пуно слика, попут оних које приказују фреиндс листу или галерију слика, то ће бити тешко да репроцесс цео оптерећења од слика које су већ истоварени да додате или уклоните сенке, за које ствар.
Дакле, ако сте урадили мало напред размишљања, док стварање ХТМЛС да додате ове додатне дивизије или обично је ситуација да имате петљу логике генерисање ове иконе / сличице у КССЛ, ПХП. ЈАВА или било који други програм / скрипт језик, можете га додати у било које време, онда је само питање емисије и скривао ове сенке помоћу ЦСС Дисплаи имовину, као по клијенте икада мењају услове ... Ја хавн'т урадио ову врсту размишљања напред пре тога ... али ахев почео сада!

У следећем примеру, оригинална слика је сенка бесплатан и дропсхадовс се примењују по потреби! Такође, сам отишао мало више, користећи трикове мог ранијег тут (Велл! ово вероватно најкраће сорта туторијала, тако да је оправдано само називајући их "Тут" 'а) око Коришћење ЦСС Цлип објекат за покажете само

Оригинална слика

ЦСС ДропСхадов Резултати

Погледај Демо се | Довнлоад соурцефилес

Пут стилесхеетс на врх

Ако желите страницу да постепено учитавање, који је, желимо прегледач да приказује садржај год она има што је пре могуће, ставите ЦСС на врху странице унутар ХЕАД докумената. То чини странице изгледа да се учитава брже, јер то олакшава прогресивни приказ странице. Ово је нарочито важно за странице са пуно садржаја и за кориснике на споријим Интернет везама.

То је документована чињеница да се побољша укупни кориснички доживљај, важно је да пружи показатеље о напретку и визуелне повратне спреге. Да не бисте морали да прекраја елементе странице, у случају да њихова промена стилова, неки претраживачи, укључујући и ИЕ, блокови за рендеровање стране док је ЦСС у потпуности учитан. Због тога, корисник може да види празна бела страница.

У В3 ХТМЛ спецификације 'такође наводи да мора да ми ЦСС укључити у ХЕАД секцију ХТМЛ странице. at the bottom of the page, so it's best not to use it. Такође имајте на уму да у ИЕ @import понаша исто као и коришћење <link> на дну странице, тако да најбоље је да га не користите.

Избегавајте коришћење читача специфичне карактеристике

Филтери: Употреба филтера повећава потрошњу меморије, а примењује се по елементу, а не по лику, па проблем је умножава. Такође, филтери су Власнички ИЕ, па неће радити како треба и у другим прегледачима. Ако желите транспарентних или градијент позадине, користите 1Пикел са сликама.
Изрази: ЦСС изрази су лепа могућност да у ЦСС, али и даље је ИЕ специфичност. Такође, важно је напоменути да, ови изрази се процењује када је страница изречена и промењена величина, и помера чак и када корисник помера миша преко странице. Непотребно је рећи да би то могло утицати на перформансе вашег странице. Отуда у једноставним речима, ЦСС Избегавајте изразе, уколико осећате њене предности "тежак више од својих мана '

Ектерналисе Вам ЦСС

Коришћење спољног ЦСС ће резултирати бржим утовара страна јер су ЈаваСцрипт и ЦСС фајлови су Сачувано од стране претраживача. Инлине ЦСС у ХТМЛ документима се преузети сваки пут ХТМЛ документ се не траже. То може заправо смањити број ХТТП захтева али је накнадно направљених повећава величину ХТМЛ документа. Екстерни ЦСС су Сачувано од стране претраживача, величина се смањује ХТМЛ документа без повећања број ХТТП захтева.

Имајте на уму да, ако корисници на вашем сајту имати више страница ставове по седници, а многи од ваших страница поново користе исте скрипте и стилове, постоји већа потенцијална корист од кешираних спољних датотека.

Пацк Иоур ЦСС Филе

Паковање или анализирање ваше ЦСС је пракса уклањања непотребних знакова из кода да смањи своју величину и тако повећава време учитавања.

ЦСС може да ми претрпан уклањајући све коментаре и неке нежељене ликове попут белих просторе, нове линије итд

ЦСС Ресетуј је / су ЦСС да бисте подесили низ елемената стилова на одређени основне линије која ствара конзистентност различитим прегледачима.

Сви смо били кроз кошмара писања крос-прегледач ЦСС-а. Дакле, када смо започели нашу писања ЦСС, то је пракса да се вратите прво да уклони / ресетовати било унакрсне недоследности претраживача. ЦСС Ресетује, су једноставни неколико редова ЦСС-а да почнете са ЦСС, дајући вам чисту базу за почетак изградње на вашем.

ЦСС ресетује да сам обично имају тенденцију да користе изгледа овако

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;
}

ол, ул {
лист-стиле: ноне;
}

Х1, Х2, Х3, Х4, Х5, х6 {
фонт-сизе: 100%;
фонт-веигхт: нормал;
}

Ресетуј величину фонта претраживача
Такође имајте на уму ресетовање који је примењен на величину фонта у прегледачу следећој линији ...

html {font-size: 76%;}

Изнад ЦСС ресетује претраживач величина фонта на 10 пиксела, а управо то омогућава да раде са релативним величина фонта (који је важан сваки од ВАИ складу преспецтиве)
На пример, у следећој дефиницији, фонт-сизе у распону подешен на 10 пиксела и да је у парагарпх подешен на 14 пиксела ...

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

Нпр.
Навођење ЦСС имовину овако,

маргин: 0 5пк;

заправо значи,

маргин: 0пк 5пк 5пк 0пк;

То је прва маргина имовина значи:

горња и доња маргина = 5пк | | лева и десна маргина = 0пк

па 'више скраћеница' би

маргин: 0пк 5пк 5пк 0пк; (Т, П, Б, Д)

Можете чак да користите 3 вредности

маргин: 0 5пк 5пк;

што значи

топ = 5пк | | десних и левих = 0пк | | боттом = 5пк

Интернет Екплорер да аутоматски додаје Размак тастера у ХТМЛ форми.
Овај простор се протеже према дужини текста на дугмета.

Решење је да додате преливање свом стилу .... односно

Дугме. {
Преливање: видљиви;
паддинг-лефт: 10пк важно;
маргин-боттом: 10пк важно;
Било који други стил ... за ово дугме ...
}

ИЛИ

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