Как вы все программист + дизайнер работаете?
При работе с CSS я считаю, что лучше всего сначала спроектировать и создать сайт для браузера, соответствующего стандартам (я предпочитаю FireFox). Затем, когда у вас все получится, проверьте его на наличие Internet Explorer и других браузеров.
Для дизайна любой сложности, к сожалению, будет много времени, когда несколько браузеров откроют исправление правила, пока оно не станет постоянным.
А как освоить CSS?
Есть несколько несущественных вещей, которые могут сделать вашу жизнь проще:
Первое, что я узнаю, это модель Box . Это официальная статья W3C на эту тему, которая довольно длинная, поэтому ниже я также добавлю изображение, которое немного ее упрощает:
Важно отметить, что браузеры рассчитывают это по-разному.
Как только вы поймете, что заставляет вещи самим определять размеры, раскладки должны быть проще в том же стиле, что и таблицы.
Вторым, что помогло мне обернуть голову вокруг происходящего, была специфичность Эта статья очень помогла мне с этим разобраться. Суть в том, что каждому типу селектора (элемент, класс, идентификатор) присваивается вес, и если элемент имеет значение css с большим весом, он не будет перезаписан.
# id 0,1,0,0
.класс 0,0,1,0
р 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: