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

Ответ 1

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

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

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

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

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

Yahoo! В сетке YUI есть дополнительное преимущество: приложение Django, разработанное специально для использования сетки YUI с Django, называемое django-yui-layout-templates

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

Ответ 2

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

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

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

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

Ответ 3

Есть несколько прекрасных онлайн-уроков, либо в sitepoint, либо в w3.

Ответ 4

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

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

Ответ 5

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

Ответ 6

Функция "Редактировать Css" в Панель инструментов веб-разработчиков для Firefox позволяет редактировать файл css и просматривать результат в режиме реального времени, Делает эксперименты намного быстрее и проще.
Когда вы создали отличную таблицу стилей, посмотрите на нее, то есть, плачьте и начните учиться тому, как делать кросс-браузер css. Хорошее место для начала - quirksmode

Ответ 7

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

Несколько книг, которые я ценю, - это Dan Cederholm Bullet Proof Web Design и

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

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

Ответ 8

• Сначала спецификация
• Играйте вокруг (используйте Firebug)
• Обход вокруг обходных путей IE и различные трюки.
• Если вы хотите что-то напечатать, мне действительно понравилось Dan Cederholm Web Standards Solution, хотя я ненавижу большинство технических книг
• Практика! Практика! Практика!

Ответ 9

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

Zeldman охватывает исторические аспекты HTML и CSS наряду с преобразованием основанного на таблицах веб-сайта в семантический CSS. Он также охватывает веб-стандарты, грациозную деградацию и причуды браузера. Он часто считался "библией" современного веб-разработки.

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

Ответ 10

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

Ответ 11

Я второй (третий?) совет использовать firebug. Это сохранит ваше здравомыслие.

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

Ответ 12

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

Ответ 13

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

Ответ 14

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

Если вы глубоко вникаете в это, CSS: The Definitive Guide стоит того.

Ответ 15

Хорошо, так как мое мышление 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;
}

В приведенном выше коде я не помещал точку с запятой в команду background-color, она должна выглядеть так.

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

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

Ну еще... w3school css - лучшее место для изучения.