Съвети, трикове и техники за оформление CSS и HTML
Тази икона Редактиране на CSS 2, въпреки че статията не е дума за Редактиране на CSS 2
За начало, няколко провокативни предложения:
1. Това е време да спре да поддържа Internet Explorer 6
По-голямата част счита, CSS3 само като възможност да се направи заоблените ъгли и добавяне на сянка. Но в действителност, много повече възможности: шрифтове, outline-, трансформираща, гъвкава кутия оформление, оформление няколко колони, текстури вериги медии APROSAM и много други много полезни неща.
CSS3 Макар и все още в процес на разработване, повечето съвременни браузъри вече подкрепят основните възможности, често с представки (например: -moz гранично-радиус и -webkit гранично-радиус за Firefox и Safari / Chrome съответно).
Не забравяйте, че според статистиката голяма част от потребителите все още използват браузъри, които не поддържат CSS3 (всички версии на Internet Explorer). Но, за да започне да се използва CSS3 струва сега.
3. Възстановяване на CSS (CSS Reset)
Причината за т.нар CSS изтичане е, че дисплеят на елементите не е стандартизирана, и в различните браузъри (или дори в един браузър различни системи) може да изглежда различно. CSS Reset определя стойностите на параметрите за всички елементи в една и съща държава. В следствие на което постига по-добър контрол над стилове и има много по-малък проблем с съвместимост различни браузъри, и, странно, обема на кода е намалена. Използвах CSS Reset в трите най-новите проекти и планира да използва по-нататък.
Както се оказа, аз да се използва CSS нулиране, но това е много проста и само за отстъп:
Сега, използван от мен метод е много по-трудно и по-голям обем, можете да го видите в моя уики на CSS код Style страница. Да, това е най-известният CSS Начално състояние, предложен от добре познат експерт в CSS Ерик Майер.
И все пак има някакви CSS-рамки, но аз съм доволен от сегашните ми техники за оформление и за мен още веднъж, за да се справят с тях. Може би един или два месеца, имам време да се опита, а аз съм в друга статия ще кажа как е било готино и удобно. Силно препоръчваме да се започне с изучаването на CSS рамки.
4. Използване на така нареченото "почистване поток"
Към външния контейнер (блок, в който са другите блокове) е напълно "омекотяване" вложени плаващ блокове, използвам следния метод:
Остарели начини за "почистване":
Стил преливане. скрито; контейнер (за IE трябва да добавите височина 1%.). С преливник трябва да бъдете внимателни, тъй като това ще скрие всички артикули, които не се поставят в един блок, за който е зададен.
Най-старият и не много приятен начин - до края на външния съд се прибавя
5. Когато е необходимо да се придържаме "мазе" в долната част на страницата
HTML ще бъде:
Стилове за "мазето" на 40 пиксела височина:
Тук шрифт тегло имот от неизпълнение от страна на р елемента е нормално. цвят и цвета на текста вече е зададена за световната структура. и наследена от всички под-елементи.
16. Използване на CSS Sprites-
CSS-спрайт - картина, съставена от голям брой изображения, които използват фон-позиция може да бъде назначен на различните елементи.
Използването спрайтове намалява броя на заявките и увеличава скоростта на зареждане на страници. Sprites - много полезно нещо, което заслужава отделна статия. Пиша го няма, защото по искане в Google «CSS Sprites" се появява много подробни статии.
17. Опитайте се да използвате относителен размер на шрифта в ем и%
Сега аз винаги използвайте следния метод за задаване на размера на шрифта: тяло
Останалите елементи на размера или процента набор или ем-те години на. В този случай, размер на шрифта. 130% е равно на 13 пиксела. 7em - съответно, 7 пиксела.
Същото важи и за маржовете, ако не се изисква на пиксел съвпадение оформление и набор. След това, чрез увеличаване на мащаба на полетата на страницата ще се увеличи, заедно с шрифтове.
18. Не е необходимо да се напише в единици стил до нулеви стойности
Необходими са единици за дължини, освен в два случая: Онлайн височина и нула. Е, всичко е ясно с нула - нула е нула, няма смисъл в писмена форма, след като мерна единица. Линеен височина за всяка неподписан ще се възприема като разпространители на размера на шрифта. Например, на стойност от 1,5 ще създаде един и разстояние половина.
Обърнете внимание как изглежда и дали всички връзки работят със скриптове изключен, ако има бял текст на бял фон, защото на несвързани снимките.
20. отстраняване на проблеми
Основно средство за отстраняване на неизправности:
29. Разработване на т.нар инструментариум
Toolbox - колекция от често използваните стилове. Така например, на инструментариум от CSS-трикове. Всяка от тях има своя собствена.
31. Необходимо е да се направят кода по-лесно
Често можете да направите едно divom вместо две, три или повече приложен. Често има огромен брой вложени divs, които бяха направени "за всеки случай", но след това не се използват.
33. Научете чужд код
Това проучване, а не безсмислено копиране, без да се дори опит да се разбере.
преди 5 години научих, CSS сайтове mozilla.org код (и все още много други, които не си спомнят) и надолу, той много ми се сториха izyashnym И натрупа. Много много за мен има по-удобен за в бъдеще.
34. Абонамент за нашите RSS-популярните блогове в уеб програмиране
35. събира кодови шаблони
36. Научете JQuery.
37. Използване семантичен vorstku
38. Да не се получи твърде гони стандарти
Къде становища често се различават, аз съм на страната на тези, които казват, че основната валидатора - браузър. Валидиране на табелката «Валиден XHTML # 038; CSS »- загуба на време, и валидатори погрешно. Стандартите трябва да знаят и се опитват да ги следват, но без фанатизъм.
39. Прочетете за SEO оптимизация на сайтове
Всеки програмист трябва да знае как да се оптимизира сайтове.
40. Watch за дизайнер
Равенство в края на краищата - но ние наложи! В действителност, разбира се, е шега, но истината в него все още е така.
съвети Всъщност, нека на всички онези, които се нуждаят - истински професионалист винаги споделят знанията си с другите.
41. връзки
World Wide Web Consortium (W3C) - правили онлайн. Sooooo много полезна информация (но на буржоазното). Там можете да намерите на валидатора.
Browser Compatibility Chart.
Habrahabr. Е, ако все още не знам за този сайт ...
Благодаря. Вашите усилия не са били напразни.