Как мне легко изучить CSS?

Мой единственный совет - взламывать отличные сайты. Если вам нравится дизайн, взломайте его. Использование Firebug - большой шаг вперед, поскольку оно дает вам вычисленный CSS.

Но по-настоящему изучить CSS никогда не бывает так просто. Извините, что рассказываю.

Есть несколько прекрасных онлайн-руководств на точка сайта или школы w3.

Я многое узнал о CSS, перейдя на CSS Zen Garden. Источники вдохновения и обучения в одном месте.

Функция «Редактировать CSS» в Панель инструментов веб-разработчика для Firefox позволяет редактировать содержимое CSS файла и просматривать результат в реальном времени. Это делает эксперименты намного быстрее и проще.

Когда вы создали отличную таблицу стилей, взгляните на нее в Internet Explorer, поплакайте и начните изучать, как создавать кроссбраузерные CSS. Хорошее место для начала - quirksmode.

• Во-первых, спецификация
• Поиграйте (используйте Firebug)
• Ищите обходные пути IE и разные уловки.
• Если вы хотите что-то напечатать, мне очень понравился Решение для веб-стандартов Дэна Седерхольма, хотя я ненавижу большинство технических книг.
• Упражняться! Упражняться! Упражняться!

Одно слово. Это изменит вашу жизнь: FIREBUG.

Как разработчик пользовательского интерфейса я многому научился из того, что знаю, методом проб и ошибок. Хотя существует, вероятно, 10 способов выполнить любую отдельную задачу, связанную с пользовательским интерфейсом, есть способы лучше (и более эффективные), чем другие. Проверьте Список отдельно. Наверное, мой любимый блог по UI / CSS.

Кроме того, чтобы изучить тонкости того, как браузеры обрабатывают HTML, ВСЕГДА проверяет ваши проекты в максимально возможном количестве браузеров. Избегайте взлома браузера. Вам действительно не нужно их использовать; если что-то не так в браузере, вам следует переосмыслить то, как вы все собираете. В любой момент на моем компьютере открыты Firefox 3, IE6, IE7 и Safari / win, которые проверяют всю мою работу.

Еще один отличный способ учиться - бросить вызов самому себе: найти где-нибудь бесплатные дизайны и попытаться смоделировать их, используя макеты без таблиц. Ознакомьтесь с концепциями плавающий и поля. Просто не забывайте всегда использовать doctype!

Я должен согласиться, что это много проб и ошибок. Иногда есть много способов достичь того, что вам нужно ... некоторые более «правильные», чем другие. CSS Zen Garden был одним из первых сайтов, которые я обнаружил, которые действительно помогли мне в моей голове. Просмотреть дизайн, просмотреть исходный код, просмотреть дизайн и т. д.

Мне очень нравится иметь под рукой пару книг: Пуленепробиваемый веб-дизайн Дэна Седерхольма и

Мастерство CSS Энди Бадда

Оба предоставляют надежные способы реализации некоторых общих приемов и проблем, с которыми вы столкнетесь при проектировании на основе CSS.

CSS сам по себе довольно прост для понимания, и другие ответы указали на множество хороших ресурсов CSS. Настоящая задача - изучить все причуды и ошибки в каждом браузере, а это занимает много времени.

Вам определенно стоит потратить время, чтобы узнать, как работает CSS, но как новичок, если вы хотите начать работу прямо сейчас, не беспокоясь о многих проблемах, я бы порекомендовал использовать одну из так называемых фреймворков CSS.

Вот некоторые из наиболее известных:

• Yahoo! Библиотека пользовательского интерфейса: базовый CSS
• Bluetrip
• Чертеж
• Emastic
• YAML (не путать с языком разметки данных)
• 960 Сетка

Я успешно использовал шаблоны Blueprint и Emastic с Django.

Yahoo! У сетки YUI есть дополнительное преимущество в виде приложения Django, разработанного специально для использования сетки YUI с Django под названием Django-yui-макет-шаблоны.

Если вы начнете с одного из этих фреймворков, вы сможете создавать веб-сайты сейчас, а затем постепенно разрабатывать собственный CSS по мере изучения причуд.

Лучшая книга о CSS и HTML, которую я читал, - это Проектирование с использованием веб-стандартов Зельдмана.

Зельдман охватывает исторические аспекты HTML и CSS, а также преобразование веб-сайта на основе таблиц в семантический CSS. Он также описывает веб-стандарты, постепенную деградацию и особенности браузера. Его часто считают «библией» современной веб-разработки.

После этого я бы порекомендовал книги Дэна Седерхольма Решения для веб-стандартов и Пуленепробиваемый веб-дизайн.

У меня есть книга Майка МакГрата «CSS в простых шагах». В нем много картинок, наглядно объясняющих происходящее. Это очень удобно для глубокого понимания CSS. После того, как вы изучите основы, полезно поговорить с людьми или прочитать примеры в Интернете. Я обращаюсь за помощью к #css на IRC (Freenode). Они там очень помогают.

Я второй (третий?) Совет использовать Firebug. Это сохранит ваше рассудок.

Прекрасная книга, которую я прочитал по CSS-дизайну, - это Wyke-Smith Стилизация с помощью CSS. Возможно, это не самое лучшее название, но по содержанию и подаче отличные. Я держу свою копию под рукой всякий раз, когда мне приходится копаться в таблицах стилей.

Если вы разрабатываете на Mac, CSSEdit сэкономит вам массу времени.

В этот вопрос есть больше предложений по изучению CSS.

CSS на самом деле не так прост - он сам по себе с точки зрения своих концепций.

Если вы углубитесь в это, CSS: полное руководство того стоит.

Что ж, на мой взгляд, Eclipse - самый востребованный инструмент для любой работы по кодированию.

Этот инструмент просто переворачивает мою жизнь в программировании. Поэтому я на 100% рекомендую вам использовать этот инструмент при кодировании. Он работает на любой платформе: PHP, HTML, CSS, так что что бы это ни было, это очевидный инструмент.

Один из самых важных комментариев об этом инструменте - это сообщение о том, произойдет ли ошибка.

Предположим, вы написали небольшой код CSS и ошиблись. Затем он сообщит вам, где произошла ошибка.

body
{
    background-color: #D0E4FE
}

h1
{
    color: orange;
    text-align: center;
}

p
{
    font-family: "Times New Roman";
    font-size: 20px;
}

В приведенном выше коде я не ставил точку с запятой в строке фоновый цвет. Это должно выглядеть так.

цвет фона: # D0E4FE;

Если возникает эта ошибка, этот инструмент выводит сообщение об ошибке. Так что это замечательный инструмент.

Ну, а другой способ - W3Schools CSS. Это лучшее место для обучения.

Лучший способ - изменить свое отношение к этому.

Что сдерживает большинство людей с CSS, так это то, что они думают, что это язык «стилизации», а не язык, который вы используете в качестве способа создания и конструирования пользовательского интерфейса на основе веб-интерфейса для использования людьми.

Правильный взгляд на CSS значительно поможет вам получить от него энтузиазм. И в конечном итоге приведет к тому, что вы узнаете об этом гораздо больше, чем в противном случае.

В этой статье более подробно рассматривается эта общая идея: Как стать лучше в CSS