100+ CSS ресурси за уеб дизайнери и разработчици

от Bradley Nice, мениджър на съдържание в ClickHelp.com - инструмент за софтуерна документация

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

В случай, че не сте запознати с CSS, ето едно кратко въведение:

„CSS е специален език, използван за стилизиране на HTML съдържание. CSS определя как HTML елементите ще се показват - цвят, размер, позиция, рамка, фон и т.н. “
© ClickHelp екип

Днес събрах сериозен набор от CSS ресурси, за да ви помогна да научите. Той е разделен на няколко категории: Учебни помагала, сайтове и книги, справочници и шаблони, учебници и техники, шаблони и рамки, галерии и витрини, инструменти и блогове и новинарски сайтове, специфични за CSS.

Учебни уроци, сайтове и книги

Сайтове: Codecademy, FreeCodeCamp.com, SoloLearn, Treehouse, Tutsplus, A до Z CSS, Dash, The Hello World, Khan Academy, HTML5 от Scratch, Sitepoint, Usersnap

Книги: HTML и CSS, Програмиране след часове - Урок за CSS

  • Основен HTML и CSS видео урок на Крис Койер (62 MB) - Трябва да гледате видео за абсолютно начинаещи. Той ви учи на всичко - от вдигане на текстов редактор, писане на HTML страницата на юмрука и използване на CSS за стайлинг.
  • Създаване на лист за глобален стил - Не е необходим различен CSS файл за различни страници, винаги създавайте само един глобален CSS файл за всичките си уеб страници. Глобалните стилови таблици могат да се прилагат или през целия ви сайт, или върху подмножество страници, а това означава, че трябва да актуализирате само един или два файла, когато трябва да направите промяна в стила.
  • Основи на CSS - Заседнали в света на вложени таблици и остарели маркировки? Използването на CSS за оформяне на вашите (X) HTML файлове ще бъде от полза за вас и вашите посетители по много начини. Научете основите на CSS глава по глава онлайн или изтеглете всички 18 глави на CSS Основи в един PDF файл, който може да се сваля за печат.
  • Урок за каскадни таблици със стилове (CSS) - Научете използването на CSS, определяне на размера на шрифта, полетата и подплънките. Идентифицирайте HTML елементите чрез атрибути id и class.
  • CSS Урок - Още уроци за CSS тук, от урок 1 до 16 съдържа кратко въведение и непътен урок за CSS, научете се от използването на цветове до плаващи елементи.
  • HTML и CSS за начинаещи - Как да настроите вашата уеб страница HTML, да създавате заглавия и параграфи, да добавяте списъци, да променяте размера на шрифта, цвета и типа с помощта на CSS.
  • Научете HTML и CSS в едно лесно за употреба ръководство. - Лесно и изчерпателно ръководство, посветено на помагането на начинаещите да научат HTML и CSS. Очертавайки основите, това ръководство работи чрез всички общи елементи на предния дизайн и разработка.

Референции и Cheatsheets

  • Индекс на свойствата на CSS - Азбучен списък на всяка CSS собственост.
  • CSS Shorthand Guide - Математичен лист, обхващащ основните CSS формати за стенограма.
  • CSS Cheat Sheets - Два мамят листа от About.com - един основен и един за CSS оформления.
  • Listamatic - Този сайт предлага примери за това как да използвате CSS за създаване на коренно различни стилове на списъци.
  • Ръководство за начинаещи от сезонен CSS дизайнер - Това е огромен списък с ресурси за начинаещи за CSS.
  • 5 съвета за организиране на вашия CSS - Тази статия предлага пет наистина полезни метода за поддържане на вашите таблици стилове по-добре организирани (и следователно по-лесно да редактирате по-късно).
  • Моите 5 CSS съвета - колекция от пет прости съвета за създаване на по-добър CSS.
  • Quirks Mode и Strict Mode - Ръководство за режим на странности и строг режим в съвременните браузъри.
  • CSS Cheat Sheet (V2) - CSS справочник за една страница, който изброява всички CSS 2.1 селектори.
  • Core CSS: Част 1 - Справочно ръководство за 6 страници за основни CSS елементи от Refcardz.
  • CSS Shorthand Cheat Sheet (PDF) - справочен лист за формат на CSS стенограма.
  • Използване на CSS (Cascading Style Sheets) - Основно ръководство за CSS, включително предимствата на използването на CSS.
  • 5 начина за незабавно писане на по-добър CSS - Някои съвети за писане на добър CSS, който е едновременно ефективен и ефективен.
  • Оптимизиране на структурата на уебсайта Ви за печат с помощта на CSS - Ръководство за създаване на таблици за стилове за печат.
  • PrintStylesheets - Друго ръководство за създаване на таблици за стилове на печат.
  • CSS Типография: Контрастни техники, уроци и най-добри практики - Страхотна колекция от ресурси за типография на CSS.
  • Мощни CSS техники за ефективно кодиране - Колекция от CSS техники, идеи и решения за по-добро CSS кодиране.
  • Нулиране на вашите CSS стилове с CSS нулиране - Пълно ръководство за нулиране на стилове.
  • Конвенция за структурно именуване в CSS - Статия за именуване на елементи въз основа на това, което са те, вместо това къде са или как изглеждат.
  • Подобряване на четивността на кода с CSS Styleguides - статия, обхващаща пет техники, които можете да използвате, за да направите кода си по-поддържан и управляем.
  • 70 експертни идеи за по-добро CSS кодиране - колекция от експертни съвети за подобряване на кода ви.
  • CSS Float Theory: Неща, които трябва да знаете - Ръководство за разбиране плава в CSS.
  • Пълно ръководство за CSS - огромен ресурс, който обхваща почти всяка част от CSS.
  • Типографски контраст и поток - Статия, очертаваща основите на създаването на добър тип с достатъчен типографски контраст в CSS.
  • Как да оразмерите текст в CSS - подробно ръководство за оразмеряване на текста на CSS.
  • CSS Cheat Sheet - Много завършен уеб базиран CSS мамян лист.
  • 13 принципи за обучение на CSS, които всеки трябва да знае - списък на основните CSS конвенции, с които трябва да сте запознати.
  • Ръководство за ресурсите - Това е CSS ръководството за ресурси от CSS Zen Garden.
  • CSS Beauty - Сайт, предлагащ CSS новини, ресурси и галерия.
  • Използване на CSS преки пътища - Справочно ръководство за някои основни стенограми за CSS.
  • Наръчник за уеб разработчици - Това е масивна колекция от CSS и други ресурси, включително витрини, инструменти и др.
  • Проектиране на Dime: 100 безплатни CSS ресурси - Голяма колекция от CSS ресурси, включително статии, ръководства, оформления и други.
  • 15 CSS свойства, които вероятно никога не използвате (но може би трябва) - Тази статия обхваща петнадесет често пренебрегвани CSS свойства, за които много дизайнери може дори да не знаят, че съществуват.
  • 10 Принципи на CSS Masters - Колекция от страхотни принципи и насоки от някои от майсторите на CSS.
  • Специфичност на CSS: Неща, които трябва да знаете - Ръководство за спецификата на CSS, една от най-трудните CSS концепции, която трябва да разберете.
  • Решаване на 5 гласа на CSS CSS - Ръководство за справяне с проблеми с CSS като грешка с двойно поемане на IE6 и неефективни стилове.

Уроци и техники

  • 20 Полезни ресурси за научаване на CSS3
  • CSS3 Unleashed - Съвети, трикове и техники
  • 20 Много полезни уроци за CSS3
  • CSS3 вълнуващи функции и функции: 30+ полезни урока
  • CSS от Ground Up - Това е много основен урок за започване на работа с CSS, който ви превежда чрез създаване на първата ви основна уеб страница с CSS. Предполага се, че човекът, който преминава през урока, има малко или никакви познания как да кодира уебсайт и е чудесен ресурс за начинаещи.
  • 53 CSS техники, без които не бихте могли да живеете - Това е огромна колекция от CSS техники за всичко - от менютата до формулярите до отпечатването на таблици стилове.
  • CSS Drop Shadows - Урок за това как да създавате капки сенки върху изображения с помощта на CSS.
  • Selectutorial - CSS Selectors - Основно ръководство за CSS селекторите и как те работят.
  • CSS навигационни техники - Колекция от 37 различни навигационни дизайна, използващи CSS.
  • CSS техники, които използвам през цялото време - Колекция от CSS техники Кристиан Монтоя намира за изключително ценна.
  • CSS Techniques Roundup - 20 CSS съвети и трикове - Колекция от CSS техники, включително заоблени ъгли и изскачащи CSS.
  • CSS Съвети и трикове - Колекция от полезни, основни CSS техники.
  • Главен стилен лист: Най-полезната CSS техника - Основен лист стилове, използван за изчистване и нулиране на настройките по подразбиране на браузъра.
  • Показване на подсказки на Hyperlink с CSS - Бърз урок за добавяне на икони от тип линк с помощта на CSS, който е съвместим с IE7, Safari и Firefox.
  • Десет CSS трика, които може и да не знаете - обхваща съвети като стенограма на CSS шрифт, подмяна на изображение и вертикално подравняване с CSS.
  • Десет повече CSS трика, които може да не знаете - Тази статия обхваща неща като блок срещу вградени елементи, задаване на минимална ширина на страницата и невидим текст.
  • Превръщане на списък в навигационна лента - Страхотен урок за създаване на навигационна лента от списък със стилове.
  • Превръщане на списъци в дървета - Как да създадете многоуровнен нередовен списък под формата на документ или дърво на страниците.
  • Реконструкция на уеб страница с CSS - Как да възстановите уеб страница с CSS оформление.
  • Разширени CSS оформления: Стъпка по стъпка - стъпка по стъпка урок за създаване на разширено оформление в 3 колони.
  • Създаване на CSS оформление от Scratch - Пълно ръководство за изграждане на CSS-базиран сайт от самото начало.
  • CSS Tutorial - Пълен урок от W3Schools.
  • Stylesheets - Друга много пълна колекция от уроци за CSS.
  • Модни параграфи с CSS - Урок за създаване на специализирани формати на абзаци.
  • Още по-заоблени ъгли с CSS - техника за създаване на заоблени ъгли, която поддържа прозрачност на PNG и алфа.
  • Uberlink CSS List Menu - Урок за създаване на навигационна лента, която се държи като меню за размяна на изображения, но използва само две изображения и подчертава текущата страница.
  • Как да добавите променливи към CSS файловете си - Ръководство за прилагане на променливи към CSS с помощта на пренаписване на PHP и URL на Apache.
  • 15+ техники и инструменти за кръстосано CSS кодиране на браузъра - Тази статия обхваща повече от 15 съвета за създаване на CSS код, съвместим с браузъра.
  • CSS центриране - забавление за всички! - Ръководство за CSS центриране в оформления, включително центрофугиране на течно оформление.
  • Абсолютно позициониране вътре в относително позициониране - Ръководство за позициониране на дъщерни елементи абсолютно в относително разположен родителски елемент.
  • Faux Absolute Positioning - Ръководство за подход за позициониране, който съчетава най-добрите атрибути както на плаващо, така и на абсолютно позициониране.
  • Вертикално подравняване за навигационни списъци с множество линии - Ръководство за подравняване на списъци, които използват подхода с плаваща кутия.
  • Списък с 10 най-добри CSS бутони - Колекция от десет от най-добрите уроци за създаване на CSS бутони.
  • Mountaintop Corners - Създаване на заоблени ъгли с CSS.
  • CSS Rounded Corners Roundup - Колекция от техники и уроци със заоблени ъгли.
  • CSS трикове за персонализирани куршуми - Ръководство за създаване на персонализирани стилове за куршуми с CSS.
  • CSS Swag: Multi-Column Lists - Ръководство за създаване на семантично-логичен, подреден списък, който се увива през множество вертикални колони.
  • Подобряване на показването на линкове за печат - Показва как да включвате URL адреси на връзки в разпечатките на вашите страници след текста на котвата на връзката.
  • Разширен CSS Menu Trick - Наистина страхотно разширено меню с ефект на замъгляване, изградено с CSS.
  • CSS менюта - Урок за създаване на менюта от вложени списъци с CSS2 и без JavaScript.
  • Меню CSS Tabs с падащи менюта - Урок за създаване на падащо меню с раздели с CSS.
  • Разширено CSS меню - Урок за създаване на наистина страхотно CSS меню от WebDesignerWall.
  • Анимационни хоризонтални раздели - Урок за създаване на хоризонтални раздели от менюто, които анимират при преобръщане.
  • CSS Graphic Menu с Rollovers - Страхотен урок за създаване на CSS меню с ефект на преобръщане.
  • Hybrid CSS Dropdowns - Урок за това как да създадете CSS падащи файлове, които деградират грациозно и са добре структурирани, наред с други неща.
  • Ръководство за начинаещи за CSS - Пълно ръководство за тези, които са нови в CSS.
  • Първи стъпки с CSS: Практическо упражнение - Много основно ръководство за започване на работа с CSS.
  • Как да: CSS Large Background - Урок за работа с голям фон с CSS.
  • Високоразширяващият се CSS интерфейс - Пълен урок за създаване на силно адаптивни и адаптивни CSS уебсайтове.
  • Използване на CSS за правене на всичко: 50+ творчески примери и уроци - колекция от повече от 50 урока за създаване на уникални CSS оформления.
  • Бърза и лесна CSS разработка с Firebug - Ръководство за използване на Firebug за подобряване на вашия уеб дизайн.
  • 10 примера за красива CSS типография и как те го направиха ... - Предлага страхотни примери за CSS типография, заедно с уроци за това как да създадете всяка.
  • 16 Употребявани уроци и техники за CSS Graph и Bar Chart - Колекция от уроци за създаване на CSS базирани графики и графики за визуализация на данни.
  • По-добри издърпващи оферти: Не повтаряйте маркировка - Ръководство за създаване на кавички, които не включват ненужно, многократно маркиране.
  • CSS Gradient Text Effect - Урок за създаване на текстови градиенти за вашите заглавия.
  • 43 PSD към XHTML, CSS Уроци Създаване на уеб оформления и навигация - Огромен списък от уроци за превръщане на вашите дизайни на Photoshop във валидни CSS / XHTML файлове.
  • CSS Image Maps - Урок за създаване на карти с изображения с CSS и XHTML.
  • Fluid Grids - Ръководство за създаване на оформления, базирани на течности.
  • Как да отстраните грешки в CSS - Урок за техниките за отстраняване на грешки за CSS.
  • 10 Предизвикателни, но страхотни CSS техники - Ръководство за някои съвременни CSS техники, които си заслужават да се учат.
  • 50+ Nice Clean CSS Tab-базирани навигационни скриптове - Страхотна колекция от навигация в табута, използваща CSS.
  • 30 изключителни CSS техники и примери - Страхотна колекция от наистина страхотни CSS ефекти, включително галерия с изображения на hoverbox, лепкав подножник и ефект на акордеон само за CSS.
  • 101 CSS техники на всички времена, част 1 - част 2 - друга огромна колекция от страхотни CSS техники с уроци за всеки.
  • Dead Center - кратък урок за това как да позиционирате нещо в центъра на прозореца на браузъра (вертикално и хоризонтално).
  • Течни оформления по лесния начин - Пълен урок за създаване на течни CSS оформления.

Шаблони и рамки

  • CSS Grid от 1 Kb - Това е може би най-простата и най-компактна мрежова система там, но включва инструмент за персонализиране на мрежата преди изтегляне.
  • CSS Zen Garden - CSS Zen Garden е HTML и CSS рамка, направена да покаже разнообразието от дизайни, които могат да бъдат създадени с помощта на CSS. В допълнение към рамката има налични тонове шаблони и теми.
  • Перфектни многоколонни CSS течни оформления - колекция от течни оформления, които са съвместими с iPhone.
  • 960 Grid System - CSS мрежова система, базирана на 960-пикселова широка основна подредба.
  • Безплатни CSS шаблони - Сайт, предлагащ над 200 CSS шаблона, пуснати под лиценза Creative Commons Attribution 2.5.
  • Хубави и безплатни CSS шаблони - Дузина шаблони, за да започнете с CSS-базирани дизайни, включително динамично центрирано поле, четири динамични колони и фиксирана кутия с обща центрирана конструкция.
  • Little Boxes - Колекция от CSS файлове за различни оформления.
  • Прототипиране с Grid 960 CSS Framework - Ръководство за създаване на макети на уебсайтове с помощта на Grid 960.
  • Прототипиране на шаблона за начална страница в стил списание с Blueprint CSS Framework - Много ценно ръководство за създаване на оформления на списания и мрежи с Blueprint.

Галерии и витрини

  • CSS Stars - Галерия, предлагаща няколко десетки CSS базирани дизайна за вашето проучване.
  • CSS базирани - огромна CSS галерия с хиляди дизайни.
  • CSS Drive - Категоризирана CSS галерия.
  • CSS Mania - CSS галерия, която съществува от пет години.
  • CSSelite.com - Категоризирана галерия от CSS дизайни.
  • CSS Creme - Огромна галерия от сайтове, сортирани по цвят, категория или дизайнер, която включва и уроци и новини.
  • csswebsite - Галерия, която ви позволява да филтрирате по категория, дата или цвят.
  • 40 красиви дизайни на уеб сайтове за красиви тъмни CSS - публикация в галерия, предлагаща страхотни тъмни дизайни, създадени с CSS.
  • Най-доброто от CSS Design 2008 - Друга публикация в галерията, представяща най-добрите CSS дизайни на 2008 година.
  • CSS Beauty Gallery - CSS галерия с записи, изброени хронологично. Включват дизайни от 2004 г. до днес.

Инструменти

  • Firebug - приставка за Firefox, която ви позволява да преглеждате и редактирате CSS и друг код направо в Firefox.
  • Aardvark - разширение на Firefox, което ви позволява да виждате всеки HTML елемент и клас или идентификатор.
  • CSSViewer 1.0.3 - Разширение на Firefox, което ви позволява да преглеждате CSS свойства на всяка уеб страница.
  • GridFox - Разширение на Firefox за подпомагане на дизайна на мрежата чрез наслагване на мрежа на всеки уебсайт.
  • CodeBurner - Приставка за Firefox или Firebug, която прави HTML и CSS референтните материали достъпни във вашия браузър.
  • IzzyMenu - Създател на безплатни CSS менюта, който поддържа създаването на падащи подменюта на DHTML.
  • Spanky Corners - генератор на заоблени кутии.
  • CleanCSS - CSS формат и оптимизатор.
  • CSS Browser Selector - полезен инструмент за овластяване на CSS селектори въз основа на браузъра на посетителя.
  • CSS Compressor - CSS компресор на файлове.
  • CSS Layout Generator - прост, онлайн CSS генератор, който създава основна рамка за оформление.
  • CSSTidy - CSS анализатор и оптимизатор с отворен код с възможност за сваляне.
  • CSS Drive CSS компресор - инструмент за компресиране на CSS, който има основен и усъвършенстван режим, в зависимост от вашите нужди.
  • Tabifier - Добавя отстъпи към вашите кодови файлове.
  • CSSFly - CSS и XHTML редактор, базиран на браузър, който работи в реално време.
  • List-O-Matic - Инструмент за създаване на базирани в списъка навигационни менюта с CSS.
  • Markup Maker - създава валиден XHTML / HTML рамков документ с идентификаторите на страницата, които въвеждате.
  • CSSMate - Онлайн CSS редактор.
  • CSS Type Set - CSS типографски генератор.
  • Construct 0.5 - Визуален инструмент за създаване на оформления въз основа на рамката на Blueprint.
  • PXtoEM.com - Инструмент за конвертор на размер на пиксел в EM.
  • Прегледани CSS редактори - колекция от рецензии на някои от по-популярните CSS редактори.
  • YAML Builder - визуален инструмент за създаване на YAML оформления.
  • Gridinator - Съставител на оформление на CSS мрежа.
  • Списък на CSS инструменти - огромен списък от CSS инструменти за всичко - от шрифтове до оптимизатори.
  • 50 изключително полезни и мощни CSS инструменти - списък с някои страхотни CSS инструменти, заедно с малко за всеки.

Блогове и сайтове за новини, специфични за CSS

  • CSS-Tricks - Блог, посветен на CSS от Chris Coyier.
  • Ultimate CSS - Въпреки че не е актуализиран от няколко месеца, този блог все още предлага няколко страхотни архивирани публикации.
  • CSS Help Pile - нарастваща колекция от уроци и ресурси за CSS.

Приятен ден!

Брадли Ница,
Content Manager на ClickHelp.com - най-добрият онлайн инструмент за документация за доставчиците на SaaS