Изразяване на ИТ

Друг бърз пф. Ето нещо по-просто и хубаво, използвайки силата на CSS ... но е трудно concieve (и със сигурност не бях аз), да започнем с това. Като Добавяне Dropshadow, може да бъде peice торта за много от нас, като се използват някои инструменти за редактиране на изображения, като Photoshop ANF Фойерверки и др.
Причината, защо, аз избрали за Drop Shadow използване на CSS е, че обикновено по време на създаването на дизайна на страницата / HTML на заявление, изискванията пазят iterating. Какво искам да кажа е в съществуващ уеб сайт с много изображения, като тези, показващи freinds списък или галерия, тя ще бъде трудно да се регенерират целия товар на изображения, които вече са били разтоварени да добавяте или премахвате сенките, за това въпрос.
Така че, ако сте направили малко напред мислене, докато създаване на HTMLS да добавите тези допълнителни подразделения или обикновено ситуацията е, че имате Loop Logic генериране на тези икони / миниатюри в XSL, PHP. JAVA или друг програмен / скриптов език, можете да го добавите по всяко време, тогава е само въпрос на шоуто и скриване на тези сенки, използващи Покажи CSS собственост, както и на непрекъснато променящите се изисквания на клиентите ... аз havn't се направи това нещо напред мислене преди това ... но ahev започва сега!

В примера по-долу, оригиналното изображение е сянка безплатно, и dropshadows се прилагат, както се изисква! Също така, аз са отишли ​​малко повече, с помощта на трикове на по-ранните ми Тутанкамон (Well! те вероятно са най-кратък разнообразие от уроци, така че е оправдано само наричайки ги "Тутанкамон" и) за използване на CSS Clip Имоти покаже само

Оригиналното изображение

Резултатите от СГО DropShadow

Вижте Демо | Download sourcefiles

Поставете стилове на върха

Ако искате страницата да се зареди постепенно, това означава, че искате браузъра да показва каквото и съдържание е възможно най-скоро, сложи на CSS в горната част на страницата в документа глава. Това прави страниците се появяват, за да се зарежда по-бързо, тъй като това улеснява постепенно предоставяне на страницата. Това е особено важно за страници с много съдържание и за потребителите на по-бавни интернет връзки.

Това е документирано факта, че за да се подобри цялостно изживяване на потребителя, е важно да се предоставят на показателите за напредък и визуалната обратна връзка. За да се избегне като да преначертае елементи на страницата, в случай, ако им стилове на климата, някои браузъри, включително IE, блокира предоставянето на страницата, докато CSS е напълно зареден. Поради това, потребителят може да вижда празна бяла страница.

W3 на HTML спецификации "посочва също, че СГО трябва да ме включи точка в главата на HTML страницата. at the bottom of the page, so it's best not to use it. Също така имайте предвид, че в IE @import държи същата като използване на <link> в долната част на страницата, така че най-добре е да не го използвате.

Избягвайте да използвате Браузър Особености

Филтри: Използване на филтър увеличава потреблението на памет и се прилага един елемент, а не на изображението, така че проблемът се умножава. Също така, филтрите се IE Имуществена, следователно не могат да работят както е предвидено в други браузъри. Ако искате прозрачни или градиент фон, използвайте 1Pixel с изображения.
Изрази: на CSS изрази са хубава черта, да има в CSS, но все още е IE специфична особеност. Също така е важно да се отбележи, тези изрази са оценени, когато страницата е постановено и преоразмерява, превъртат и дори, когато потребителят се движи мишката върху страницата. Излишно е да кажа, че това може да повлияе на функционирането на вашата страница. Затова с прости думи, избягвайте използването на CSS изрази, освен ако не се чувстват своите плюсове "тежи повече, отколкото" против "

Изнесе навън ви CSS

Използването на външен CSS ще доведе до по-бързо зареждане на страници, защото на JavaScript и CSS файловете се кешират от браузъра. Inline CSS в документи на HTML да се изтеглят всеки път, когато HTML документа се иска. Това всъщност може да се намали броят на исканията на HTTP, направени, но впоследствие увеличава размера на HTML документ. Външен CSS са кеширани от браузъра, се намалява размера на HTML документа, без да се увеличава броя на молбите за HTTP.

Моля, обърнете внимание, че ако потребителите на сайта си имат множество изгледи страница на сесия и много от вашите страници повторно използване на същите скриптове и стилове, има по-голяма потенциалната полза от на кеширани външни файлове.

Опаковка Вашият CSS файл

Опаковане или схрусквате на вашия CSS е практиката на премахване на ненужните знаци от код, за да се намали неговия размер, като по този начин се подобрява времето за зареждане.

CSS може да ме схруска чрез премахване на всички коментари и нежелани символи като бели пространства, нови редове и др.

А Reset CSS / CSS за да зададете номер на елемента стилове специфична базова линия, която създава съгласуваността между различни браузъри.

Ние всички са били през кошмарите на писане крос-браузър CSS. Така че, когато започнете да пишете нашия CSS, това е практика, за да възстановите за първи път, за да премахнете / нулиране на напречното несъответствия на браузъра. CSS Възстановява, са просто няколко реда CSS, че да започнете CSS, който ви дава чиста основа, за да започне изграждането на вашия при.

CSS връща, че аз обикновено са склонни да използват изглежда така

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

ол, ул. {
Списъкът-стил: няма;
}

H1, H2, H3, H4, H5, H6 {
шрифт, размер: 100%;
шрифт тегло: нормални;
}

Променете размера на шрифта на браузъра
Също така имайте предвид, нулиране, която е приложена размера на шрифта на браузъра в следния ред ...

html {font-size: 76%;}

Над CSS рестартира браузъра размер на шрифта 10 пиксела, и това го прави възможно да се работи с относителен размер на шрифта (което е всеки важен за съответствие с изискванията на WAI prespective)
Защото например, следното определение, шрифт с размер една педя е настроен на 10 пиксела и че, в paragarph 14 пиксела ...

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

Напр.
Определяне CSS имот като този,

поле: 5px 0;

всъщност означава,

поле: 5px 0px 5px 0px;

Това първо собственост марж означава:

отгоре и отдолу поле = 5px | | лявото и дясното поле = 0px

така "вече стенограмите" ще бъде

марж: 5px 0px 5px 0px; (T, R, B, L)

бихте могли дори да използвате и 3 стойности

поле: 5px 0 5px;

което означава,

нагоре = 5px | | дясно и ляво = 0px | | Дънни = 5px

Internet Explorer автоматично добавя подложка бутони в HTML форма.
Това пространство се простира по дължината на текста на бутона.

Решението е да добавите препълване си стил .... т.е.

. Бутона {
препълване: видими;
подложка-наляво: 10px важно;
подложка-надясно:! 10px важно;
[...] Всеки друг стил за този бутон ...
}

ИЛИ

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