Как создать шаблон CSS с нуля

Question

Я хочу создать CSS-шаблон моего воображения: это значит от SCRATCH.

Я хочу сделать это, как если бы я делал это ручкой, но только мышью. Я понятия не имею об этом поле (CSS), поэтому я спрашиваю. Многие разработчики создали фантастические шаблоны, которые потрясают.

Я хочу знать, как вы создаете свои шаблоны CSS? (если вы это сделали) Вы запускаете их с нуля, используя фреймворк, используя приложение? Это сложно или просто?

Просто как ты это делаешь?

Answer 1

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

Answer 2

Мой типичный образ действий:

1. Применить Сброс CSS
2. Найти шаблон макета
3. Найти цветовую схему
4. ???
5. Profit!

Answer 3

*
{
    margin: 0;
    padding: 0;
    border: 0;
    border-collapse: collapse;
}

Cue воображение

Answer 4

Не переизобретайте колесо, найдите хорошую базу CSS и постройте ее.

Answer 5

Я предполагаю, что вы собираетесь использовать это повторно, поскольку вы назвали его шаблоном, поэтому я бы позаботился о том, чтобы вы / сгруппировали элементы CSS логическим способом (текст , макет и т. д.). Вам понадобится то, что вы сможете быстро прочитать и настроить позже.

Определенно очистить поля и отступы по умолчанию , потому что разные браузеры ( кашель IE) имеют свои собственные представления о том, какие поля и отступы должны иметь различные элементы.

Наконец, используйте проценты и ems . Это значительно уменьшит ваше дублирование. Например ...

body { font-size: 12px };
.wrapper { width: 800px; }

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

h1 { font-size: 2em; }
.content { font-size: 1.2em; }
.sidebar { font-size: 1em; }

.content { width: 70%; }
.sidebar { width: 30%; }

Если вы решите, что 800px - это старая шляпа, вы можете изменить ширину на 900px, и все будет работать.

Answer 6

Вы сказали в своем комментарии к этому ответу , что хотите легко его настроить?

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

Answer 7

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

Когда у меня нет css для начала, я работаю от 'Тела' и прохожу путь к детям детей детей и т. Д. От большого к маленькому.

Мне нравится использовать инструмент, который показывает визуальное представление редактируемого тега css, чтобы я мог видеть, как он выглядит. Мне нравится Expression Web , потому что он может очень легко перемещаться по стилям и показывает, как он выглядит.

Answer 8

Возможно, вы захотите прочитать о CSS .

Answer 9

Я начинаю свой с нуля, просто набираю его, используя VS или Aptana и т. Д.

Я разрабатываю базовый макет, например, 3 столбца.

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

Отсюда я помещаю CSS во внешний файл и начинаю добавлять свои элементы, стилизуя их по ходу.

Прежде чем ты это узнаешь, у тебя будет что-то сладкое, это происходит на удивление быстро!