Обучение css все более профессионально

Ответ 1

Как вы все программист + дизайнер работаете?

При работе с CSS я считаю, что лучше всего сначала спроектировать и создать сайт для браузера, совместимого со стандартами (для меня предпочтение отдается FireFox). Затем, когда у вас есть это в порядке, проверьте его для Internet Explorer и других браузеров.

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

А как справиться с CSS?

Есть несколько улучшенных вещей, которые могут обернуть вашу голову, что упростит вашу жизнь в CSS: Первое, что я узнал, это Box model. Это официальная статья W3C по этому вопросу, которая довольно длинная, поэтому я также включу изображение ниже, что немного упростит его:

Важно отметить, что браузеры вычисляют это по-другому.

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

Вторая, которая помогла мне обернуть голову вокруг того, что происходило, была спецификой Эта статья помогла мне много с этим. Существенное резюме состоит в том, что каждый тип селектора (element, class, id) имеет вес, приписываемый ему, и если элемент имеет значение css с более высоким весом, тогда он будет перезаписан.

#id 0,1,0,0

.class 0,0,1,0

p 0,0,0,1

1,0,0,0

Итак, неважно, что говорят ваши файлы css, встроенный стиль получает приоритет. Пример:

a {color: red;}                                               (0,0,0,1)
.class1 a {color: blue;}         Overwrites red               (0,0,1,1) 
#id1 a {color: green;}           Overwrites blue              (0,1,0,1) 
#id1 .class1 a {color: yellow;}  Overwrites green             (0,1,1,1) 
#id2 a {color: red;}             Overwrites green, NOT yellow (0,1,0,1) 
#id1 #id2 a {color: black;}      Overwrites yellow and red    (0,2,0,1) 

Я все еще читал статью. Дважды.

Третье, что нужно узнать, это поддержка предыдущих браузеров (например, IE6) и ошибок, с которыми они будут вас поражать. Я поклонник этого сайта: http://www.positioniseverything.net/ Они охватывают, с ясностью и решениями, множество ошибок браузера, с которыми вы столкнетесь при реализации кросс-браузерной поддержки с помощью CSS.

Некоторые ошибки, с которыми вы, вероятно, столкнетесь с IE6, следующие:

• Ошибка с плавающей запятой 3px.
• Ошибка двойного поля.
• Ошибка peekaboo.

Ответ 2

Я занимаюсь веб-работой уже 12 лет. Я жил в табличных макетах, фреймах, DHTML, XHTML, CSS, Ajax... Помню, в первый раз, когда увидел CSS, я подумал: "WTH - это беспорядок? Мне это никогда не понадобится". Через год я узнал об этом, и действительно, вы можете сделать с ним действительно сильные вещи. Но чтобы учиться и учиться хорошо, это потребует времени и самоотверженности.

Несколько советов, используйте CSS reset как Эрик Мейер. http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/. Это нейтрализует много форматирования, специфичного для браузера, поэтому вы начинаете с чистого листа, но не так много накладных расходов, как другие сбрасывает.

Убедитесь, что у вас хорошо сформированный документ HTML/XHTML, с нужным DOCTYPE вверху. Различные браузеры будут отображать страницы по-разному в соответствии с различными DOCTYPE.

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

И, наконец, я признаю, что после всех этих лет я все равно вернусь к таблицам в макете большинства своих форм. CSS велик, но это не святой Грааль. Будьте практичны. Вы можете посмотреть первую часть http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-4, где Crockford описывает немного истории для этих веб-стандартов, таких как HTML и CSS, и что он видит с ними проблемы.

Ответ 3

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

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

Я также использую Firefox для первоначального тестирования и гарантирую, что DOCTYPE установлен, как было предложено выше.

Я также использую отличный плагин Firefox под названием Firebug, который позволяет вам проверять элементы DOM на странице и менять их CSS на месте для немедленного представления о том, как CSS будет выглядеть, среди многих других функций.

Затем я гарантирую, что HTML и CSS действительны в соответствии со стандартами W3C. Это можно сделать онлайн через http://validator.w3.org/ и http://jigsaw.w3.org/css-validator/ или через другой плагин Firefox, называемый Html Validator.

Кроме того, я обнаружил, что, когда я хочу манипулировать страницей в Javascript, я нашел использование фреймворка Javascript jQuery, чтобы быть чрезвычайно полезным, абстрагироваться от спецификаций HTML/DOM/CSS и обеспечивать хорошо проверенную совместимость между браузерами.

Возможно, посмотрите и на CSS-структуру. Они имеют проверенные стили CSS для многих распространенных ситуаций компоновки. Я слышал, что Frame рекомендуется и выглядит хорошо для меня.

Я нашел, что один большой CSS файл трудно обрабатывать и читать. Но я был обеспокоен тем, что разделение файла на более мелкие части (например, один файл CSS на страницу) замедлит загрузку страницы. Решение заключалось в использовании Minify. Это позволяет CSS файлам обслуживаться как один файл, а также "сжимать" результат для удаления избыточного интервала и т.д. Он довольно прост в использовании и также устраняет проблемы, когда браузеры кэшируют более старые файлы CSS сайта.

Ответ 4

У меня была аналогичная проблема 2 года назад. Я прочитал спецификацию CSS 2.1 (бесплатную загрузку с W3C) - она ​​была жестко прочитана и загружалась с FF для тестирования, но она действительно укрепила мое понимание CSS (что в сочетании с проектами, связанными с CSS вскоре). Большинство продаваемых книг CSS слишком практичны, чтобы понять их (что вы можете свободно применять к своим собственным концепциям).

Ответ 5

css сложно, как черт, так что не ожидайте чего-то волшебного; вещь, которую я бы предложил, это wireframing: http://articles.sitepoint.com/article/wire-frame-your-site

Ответ 6

Вы должны проверить Программу веб-стандартов Opera. В CSS есть несколько отличных статей. По крайней мере, прочитайте введение Криса Хейлмана.

Ответ 7

Я взял этот класс онлайн - http://www.sitepoint.com/courses/css-live

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

Ответ 8

Если вы не полностью понимаете язык CSS, вам не нужно тратить массу времени. Программирование занимает достаточно много времени, как есть!

Я не рекомендую начинать изучать CSS, посещая веб-сайты. Сначала вам нужен прочный фундамент. Для этого я рекомендую Мастерство CSS Энди Бадда. Он быстро читается (читайте его на обложке), и после этого хорошая ссылка. Вот пример из книги, который мог бы помочь вам написать эту форму входа (очень гибким способом) всего за 5 минут.

Далее вам понадобится CSS reset и base:

• YUI 3: CSS Reset
• YUI 3: база CSS