10 CSS Съветите, от майсторите
Вместо да се разчита на анонимни източници в търсенето на препоръки, нека внимателно да разгледат тези фирми, които имат отлична подготовка дизайн и преминали по този начин до края. Тези CSS-съвети, събрани от най-уважаваните предприемачи в света. В подкрепа на своята препоръка те имат портфейл, така че всеки грам от информацията в тях - най-доброто качество.
По-долу са 10 големи CSS съвети. че всеки уеб разработчик или дизайнер може да намерите полезна, информативна и предизвикателна. Помислете за тези мъдри съвети от квалифицирани специалисти, които са преминали дълъг и труден път към върховите постижения на дизайна. Това е - истинските господари на CSS. Насладете се на една глътка от своите знания и да приложат знанията си в следващия си проект приключение.
1. Вашият CSS трябва да бъде проста - Петер Паул Кох (Peter-Pol Koh)
Това, което е най-липсва в мисленето на аматьори от CSS - как активно търсят трудни решения. Потърсете и ще намерите, и ако искате сложност, те ще станат гърлото. Нищо няма да бъде възпиран от вас, както и, и няма да ви помогне.
CSS хакове опасност.
Кох заяви, че всеки дизайнер и уеб разработчик трябва усърдно да следва правилото: Вашият CSS трябва да бъде проста. За да се постигне простота, не е лесно, особено на CSS-дизайн. Можете да намерите безброй функции от изпълнението на CSS в конкретен браузър, с помощта на CSS-хакове във всички браузъри село изглежда по същия начин, независимо от версията или тип. Въпреки това, използването на няколко CSS-хакове има значителен недостатък. Тъй като уеб браузъри се развиват, така че много по-трудно да се справи с промените.
Кох представя интересни аргументи за уеб програмиране. Интернет като цяло е много непредсказуемо място и се опитва да се предвиди посоката на работата си в бъдеще - много неблагоприятна линия на поведение.
Мрежа - това е много неопределено пространство. Вие никога не може да бъде сигурен, че вашите сайтове ще работят точно така, както искате, дори ако използвате всички съвременни методи на CSS, достъпност и лекота на използване. Вместо да се търси фалшива комфорт в хакерски техники, които изглежда да е по-удобно, защото на тяхната степен на интеграция, трябва да се вземе като основните правила на несигурност.
Браузърите не поддържат CSS до съвършенство; тя може да бъде вбесяващ, особено тези, които току-що започнах да уча CSS. Независимо от всичко, CSS-хакове - не е решение. Приемане на начина, по който сега там е работата на мрежата - най-доброто, което може да се направи, защото това си сайтове ще останат прости.
Петър-Пол подчертава факта, че тя изглежда да е вярно не само за CSS, но за уеб програмиране като цяло. Простота - ключът към ефективно кодиране.
Този подход не само ви позволява бързо да преглеждате CSS, но и ще помогне да направите своя CSS-файл е малък по размер чрез премахване на ненужни пропуски и знаци.
3. Използвайте намаляване CSS - Роджър Йохансон (Roger Johansson)
Повечето хора знаят и използват някои от стенограмите на техники, но много от тях не използват напълно възможностите за спестяване на пространство.
Йохансон е написал много изчерпателна статия за значението на съкращения CSS и дава много примери за това как да ги използват в процеса на кодиране CSS. Ето един пример:
Използването съкращение за имотите може да спести много място. Например, за да настроите марж за различните страни на блока, можете да използвате това:
марж-нагоре: 1em;
марж десен: 0;
марж-отдолу: 2em;
марж ляв: 0.5em;
Но тук това е едно и също нещо много по-ефективен:
марж: 1em 0 2em 0.5em;
Същият синтаксис се използва за имоти подложка.
От бързопис CSS намалява размера на стила лист, тя също така ще помогне да се организира и поддържа прост код. Красива CSS - това е един прост CSS.
4. Оставете блокови елементи, за да запълни пространството естествено - Джонатан Snook (Dzhonatan Snuk).
Г-н Snook има и друга основна препоръка, която е да живееш всеки уеб разработчик: Позволете блокови елементи, за да запълни пространството по-органично, колкото е възможно. Ако има повтаряща се тема в развитието на CSS, то е следното: не насилвайте кода, за да направи тези неща, за които той не е проектиран. Това означава, избягване на CSS-хакове, намирането на най-простото решение.
Моето правило е следното: ако задам ширина, не се определят марж или пълнеж. По същия начин, ако задам марж или пълнежа, не се определят от ширината. Работа с модела на блок понякога е непоносима, особено когато имаш работа с проценти. Поради тази причина, аз настроите ширината на контейнера, а след това на маржа или подложка за елементите в тях. Обикновено това протича гладко.
Джонатан обикновено е много добре, за да се уверите, че оформлението не е счупен, а дори и най-простият подход се използва при създаването на планове с блокови елементи.
5. Настройте и нулиране на поплавъка - Тревър Дейвис (Тревър Дейвис)
Float, може би един от най-важните неща, които трябва да се разбере в CSS, но да знаете как да възстановите поплавъка (ясно) - както е необходимо.
Тревър Дейвис, може би не толкова голямо име в света на уеб дизайна като Зелдман (Зелдман) или Snook (Snook), но той със сигурност заслужава да се споменава, поради отличната си уеб оформления портфолио. Неговият блог - голям ресурс за всеки уеб разработчик, който иска да се отърве от боклука.
сгънете поплавък
В своите основни статията "6 Важни CSS техники, които трябва да знаете," Тревър добавена истински самороден, че може да спести главоболия при използване на колони в маркирането.
Аз създадох една проста страница с две колони на свободно придвижване. В примера ще забележите, че сив фон не съдържа тези колони. И най-простото нещо, което можете да се сетите - това е да се направи, съдържащ елемент също е плаващ. Но сега виждате, че на фона на контейнера не съдържа района съдържание.
От контейнера има марж: 0 автомобил, ние не искаме от него да направи плувен защото това ще го отклони към страната, далеч от мястото, където трябва да бъде. Така че, още един начин да се ограничи плаващ обект - е да вмъкнете елемент за ограничаване. В този случай, аз просто да използвате празна Разделение, създаден, за да изчистите: и двете. В момента има и други начини, за да изчистите плаващ обект, без маркиране, но съм забелязал, известна непоследователност на тази техника, така че аз просто жертват празен div'om.
6. Използвайте негативен марж - Дан Cederholm (Дан Siderholm)
Фирма Дан Siderholma SimpleBits - е енергичен екип от дизайнери. Дан е работил с:
... и много други видни компании в мрежата. За щастие, Дан преминава знанията, придобити от работата с тези грандиозни имена, в своя блог SimpleBits. Ето един практичен метод за вас, уеб дизайнери и разработчици: Ако Дан Siderholm казва нещо, което слушате. Мислете за това като цифров ръководство, Шерпа, можете водещи до горната част на планината дизайн.
отрицателен марж
Има ситуации, в които използването на отрицателни маржове за елемента - най-лесният начин да се "изтласкват" го от останалите, като се отчитат като изключение от правилото, за да се опрости кода.
7. Използвайте CSS, за да се приведе в съответствие маркировка - Дан Cederholm (Дан Siderholm)
"Тъй като аз Центриране оформление с фиксирана ширина, използвайки CSS?» За тези, които знаят, че това е просто. За тези, които не го правят, намирането на две, необходими за изпълнението на правилата може да се окаже разочарование.
Не е чудно, че Дан ще направи този списък два пъти. Центриране маркировка случаен преглед на една много проста идея, но по някаква причина това не винаги работи толкова лесно, тъй като тя трябва да работи. Центриране на оформлението, използвайки CSS може да бъде безсмислено усилие за новак, ако някога се опита, които не го правят.
Дан е стар и изпитан метод, който той често използва, за да се постигне идеалното състояние на централизирана оформление.
Много съвременни дизайнери разчитат на центриран оформление, така че използването на този метод готов е полезно за уеб разработчици и дизайнери.
8. Използвайте правилния DOCTYPE - Джефри Зелдман (Dzheffri Зелдман)
Написахте ефективна XHTML и CSS. Вие ще използвате W3C стандарт обектния модел на документа (DOM) за контрол на динамични елементи на страницата. Въпреки това, в браузъри, предназначени за подпомагане на същите тези стандарти, сайта си пада. Виновни за това е вероятно да има неправилна DOCTYPE.
Dzheffri Зелдман - един от основателите на отлична сайта на ресурсите A List Apart, основан и се затича Проектът уеб стандарти, управляван от Happy Cog дизайн студио, и дори е написал книга за проектиране на уеб стандартите. С една дума, Зелдман принадлежи към любимите си уеб дизайн кръгове.
Недоразумение за DOCTYPE
уеб страница DOCTYPE - един от най-пренебрегвани аспекти на дизайна. Използването на правилния DOCTYPE - ключов момент и Зелдман обяснява защо.
Ако вашите оформления ви намерят необясними трудности, възможно е, че проблемът в DOCTYPE.
9. Център отделните елементи, използвайки CSS - Волфганг Bartelme (Wolfgang Бартелеми)
Центриране елементи - обща задача при създаването на уеб сайтове. Но за начинаещи в CSS-често нещо като пъзел, как да центрирате, например, целия сайт в допълнение към IE браузъри.
Волфганг Бартелеми - уеб дизайнер в дизайнерската фирма Bartelme дизайн. Ние Бартелеми е един от най-елегантните блоговете, и то непрекъснато създава красиви икони и работен проект. Той направи дизайна блог платформа Squarespace и популярния софтуер MacHeist.
Волфганг създаде урок, който помага да се справи с трудната задача да центриращи елементи, използвайки CSS. Центрирани елементи са безумно полезни, но понякога е трудно да се постигне желания дизайн. Бартелеми начинаещи осигурява центриран място, като изберете правилния DOCTYPE и се присъедини към CSS магия. Код непретенциозен, ви позволява да работите и умело съчетани с желанието за простота в CSS.
10. Използване на текст-трансформация - Трентън Мос (Трентън Мос)
Трентън Мос разбира лекотата на използване. Той има собствена компания за уеб ползваемост, който обучава лесната му употреба и уеб-писане. Той също пише за сайтове като SitePoint. Трентън дава отлични съвети, базирани на опита си като експерт по уеб ползваемост.
Добре известно е, че с течение на времето стиловете се променят, особено начина, по който текстът е отразено в уебсайтовете. Най-доброто нещо, което може да се направи дизайнер, тя е винаги в бъдеще, вместо да променя начина на показване на текст ръчно използва, за да промените външния вид на текста на CSS. Трентън Мос ни показва как да се постигне това чрез използването на прости, подценени CSS команда, наречена текстови transfom
Един от най-малко известни, но наистина полезни CSS- отбори - екип текстови transfom. Три от най-често срещаните смисъла на правилата са: текст-трансформация: главни букви, текст-трансформация: малки букви и текстът-трансформация: възползва. Първото правило се превръща всички герои в главни букви, а вторият привлича в малки букви, а третият прави първата буква на всяка дума с главна буква.
Използване на CSS за да се покаже на външния вид на текста на сайта ви позволява да го промените в бъдеще и осигурява съгласуваност в продължение на дълъг период от време след това.
Докато текстови transfom- Мъничко е, се добавя към оформлението на CSS, тя може да бъде от голяма полза в бъдеще, когато е необходимо да се правят промени.
В тази колекция от десет CSS съвети за уебмастъри свърши, аз ви пожелавам успех в разработването на сайтове.
Преведено и редактирана от: Виктор Хорн и Андрю Bernatsky. webformyself екип.
Най-IT новини и уеб разработки на нашия канал Телеграма