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

Question

Я использую фреймворк Django и довольно хорошо разбираюсь в бэкэнд-логике, использующей Python, но меня беспокоит интерфейсная часть, где мне приходится работать с CSS. Как я могу легко изучить работу CSS или есть инструмент, который я могу использовать для простого создания интерфейсных интерфейсов для Django?

Answer 1

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

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

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

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

Answer 2

Есть несколько хороших онлайн-уроков: sitepoint или в w3 школах .

Answer 3

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 со временем, изучая причуды.

Answer 4

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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

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

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

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

Answer 8

Ну, по моему мнению, 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;

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

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

Answer 9

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

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

Answer 10

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