Переучивание CSS правильный путь

http://htmldog.com/ , на мой взгляд, один из основных ресурсов для правильного изучения интерфейсной веб-разработки.

for me, Pro CSS and HTML Design Patterns by Michael Bowers changed it all. no more endless trial-and-error, but problem - pattern - solution. indispensable.

Well the basics are quite simple, you should really get a hang of the quite easy if you've already don't some css coding.

The best practices, browser quirks, hacks and other sketchy stuff concerning crossbrowser layout is something else.

Here is my suggested reading list, all of them are on my bookshelf and certainly worth reading! If you ask me i'd say these are the book you should have read if you are a webdesigner.

• Designing with webstandards
• CSS Mastery
• Bulletproof webdesign

Когда страница загружается медленно, элементы html оказываются не на своем месте и упорядочиваются только тогда, когда они полностью загружен.

• Вы помещаете свои таблицы стилей вверху, в разделе ?
• Вы объявляете явные размеры для изображений, или браузер должен угадывать, а затем переставлять вещи, когда появляется изображение?

Experiment in Firebug

I don’t know what this picture in firebug передает

Firebug может помочь вам в этом. Сделайте следующее:

• Создайте div с некоторым текстом в нем.
• Используйте CSS, чтобы дать ему padding: 5px; маржа: 5 пикселей; border: 1px сплошной черный;
• Изучите его в Firebug, как вы показываете в своем вопросе.
• Щелкните любой из этих чисел в прямоугольной модели, которую он вам показывает, и начните нажимать стрелки вверх и вниз (или введите другое число)
• Видите, как оно меняется в реальном времени? Это одна из лучших вещей в Firebug: он позволяет настраивать без перезагрузки, а затем изменять таблицу стилей, когда она выглядит правильно.
• Продолжайте делать это, пока не поймете, как работают отступы, поля и границы.

Read CSS: The Definitive Guide by Eric Meyer. He explains why CSS was created, how it works (according to the standards), and will give you the background to understand the finer points. It also makes a good reference.

Well, I will address some of these issues as best I can.

The difference between display:none and visibility:hidden is when the display is set the space for that item is not reserved. So imagine it as when the display is set the item is 'gone' off the page. Whereas if you are using the visibility option, the elements are on the page, in their place just invisible. Did I explain that clearly? Hopefully, that makes sense for you.

As far as the padding, border and margins, this is all referred to as the CSS Box Model. The information is contained as the element, its padding, border, then its margins. So padding is the distance between the element's content and its border whereas the margin is the distance between the border and the neighboring element. Again, I hope this helps clear this up for you a little bit.

Transitioning to CSS is sometimes tricky but well worth it.

В зависимости от вашего стиля обучения я могу порекомендовать сразу обратиться к источнику: к определению CSS. Вы можете найти каждую из различных спецификаций здесь: http://www.w3.org/Style/CSS/ . Хотя спецификация на самом деле не охватывает специфических особенностей браузера (если бы это было так, они бы не были причудами, не так ли?), Она действительно хорошо (для меня) объясняет, как работает каждая часть.

Многие люди здесь дают хорошие советы. Я просто добавлю еще два:

• Во-первых, попробуйте написать правильный (X) HTML. Вы можете легко протестировать свой HTML-код с помощью валидатора HTML W3C . Сосредоточьтесь в основном на содержании, а не на стиле.
• Во-вторых, попробуйте написать действительный CSS, желательно в отдельном файле .css . Избегайте использования атрибута стиля . (Эта часть может быть сложной, если вы хотите поддерживать некоторые старые браузеры из Редмонда). Вы можете протестировать свой CSS, используя валидатор CSS W3C . ​​

Practice, practice, practice. You know what you don't know, and that is the key to success in my mind. Every project you do, try to improve your skills, and eventually it will become second nature to do it the right way.

Eric Meyer's Cascading Style Sheets 2.0 Programmer's Reference is a great resource to understand exactly how selectors and rules work, and serves as a great reference as well.

Some thoughts on what you posted.

• A Master Reset style sheet will help with browser differences.

• And Tabular data should use tables.
  It's layouts that should avoid table tags in favor of css.

You could start by reading some good books on the matter. The ones of Eric Meyer are hands on and of very high quality. The other book that of which I learned a lot was the Zen of CSS design book.

And the rest is effort and practice. Be sure that you understand why something works the way it does, don't be satisfied with 'trial-and-error' css development.

• http://www.amazon.com/Zen-CSS-Design-Visual-Enlightenment/dp/0321303474/ref=sr_1_1?ie=UTF8&s=books&qid=1255629419&sr=8-1
• http://www.amazon.com/More-Eric-Meyer-Voices-Matter/dp/0735714258/ref=sr_1_1?ie=UTF8&s=books&qid=1255629449&sr=8-1
• http://www.amazon.com/Eric-Meyer-CSS-Mastering-Language/dp/073571245X/ref=sr_1_1?ie=UTF8&s=books&qid=1255629462&sr=8-1

Here are some general rules to live by:

• Tables are good for tabular data. If the data you're presenting belongs in a table, don't go out of your way trying to make a grid out of
  s. Doesn't make sense.
• As far as layout is concerned, use
  tags, stay away from tables. Get to know the float property well. With CSS3, there are going to be new, improve standards to the display property. Learn them.
• display: none completely removes the element from the viewport. Conversely, visibility: hidden retains the whitespace that the element would have otherwise taken up. In both cases, the element remains in the DOM.
• General rule of classes and IDs. Page elements and IDs should have a one-to-one relationship per page. For example, #Column1, #Column2, #Footer, #Header. Page elements and classes, on the other hand, should be a many-to-one relationship, like: .container or .navLink. Use classes when you know you're going to be using a particular element quite a bit.
• Think in terms of efficiency. The less style rules you have, the more quickly your page will load and the easier style issues will be to debug.

I have about a million other things to say but that should get you started.

Для CSS, управляемого макетом, обязательно ознакомьтесь с Все, что вы знаете о CSS, неверно . Это немного новинка, так как IE 7 не поддерживает display: table (жаль, я знаю), но он охватывает традиционные методы CSS макета, такие как плавающее и абсолютное позиционирование, и обеспечивает хороший переход от таблицы макеты на основе CSS. Я настоятельно рекомендую это.

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

Наконец, CSS работает лучше всего, когда у вас есть семантически правильный (x) html под капотом. На мой взгляд, легче всего увидеть и изучить "хороший" CSS, когда у вас есть отличный, семантически правильный html. Вот хороший обзор того, когда какие теги использовать . Как правило, я считаю, что лучше писать свой контент с помощью , не обращая внимания на то, на то, как он будет выглядеть позже, а затем использовать CSS позже, чтобы сделать его великолепным.

Как всегда, вы можете продолжить множество полезных советов и приемов в CSS Tricks , которые всегда помогали мне больше узнать о правильном использовании языка (например, когда я узнал о overflow: auto для содержащихся плавающих элементов! Гений!).

Надеюсь, это поможет!

Как всегда, вы можете продолжить множество полезных советов и приемов в CSS Tricks , которые всегда помогали мне больше узнать о правильном использовании языка (например, когда я узнал о overflow: auto для содержащихся плавающих элементов! Гений!).

Надеюсь, это поможет!

Как всегда, вы можете воспользоваться множество полезных советов и приемов в CSS Tricks , которые всегда помогали мне больше узнать о правильном использовании языка (например, когда я узнал о overflow: auto для содержащихся плавающих элементов! Гений!).

Надеюсь, это поможет!

I'm assuming you've installed Firebug?

Also, http://www.doctype.com might get more relevant results.

Я думаю, вам следует использовать для вашей разметки одну из так называемых « css frameworks » (например, 960.gs ).

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

CSS просты и ненастоящие язык программирования: не бойтесь слова «фреймворк»;)

1. Посетите CSS Zen Garden , чтобы узнать, что можно делать только с CSS.

2. Посетите школы W3 и следуйте инструкциям. Вам это может показаться простым, но вы узнаете базовые вещи.

3. Посетите некоторые сайты, например A list Apart , чтобы узнать, как что-то делать и изучить трюки.

4. Посмотрите, есть ли CSS структура соответствует вашим потребностям (например, 960 Grid ).

Я открою вам свой секрет: следуйте этим двум классическим руководствам

Listutorial

Floatutorial

И вы будете знать 80% того, о чем вам нужно знать CSS.

30 веб-сайтов, на которые следует подписаться, если вы занимаетесь веб-разработкой