Jak zbudować szablon CSS od podstaw

Mój typowy sposób działania:

1. Apply a CSS reset
2. Znajdź szablon układu
3. Znajdź schemat kolorów
4. ???
Zysk!

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

Cue imagination

Nie wymyślaj ponownie koła, znajdź dobrą bazę css i na niej zbuduj.

Zakładam, że będziesz ponownie używał tego szablonu, ponieważ nazwałeś go szablonem, więc upewniłbym się, że uporządkujesz/grupujesz swoje elementy css w logiczny sposób (tekst, układ itp.). Będziesz chciał coś, co możesz szybko przeczytać i dostosować później.

Zdecydowanie Wyczyść domyślne marginesy i paddingi, Ponieważ różne przeglądarki ( kaszel IE) mają własne wyobrażenia o tym, jakie marginesy i paddingi powinny mieć różne elementy.

Na koniec wykorzystaj procenty i ems . To znacznie ograniczy powielanie. Na przykład...

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

Teraz masz bazę, do której może się odnosić Wszystko inne. Więc mogę robić takie rzeczy:

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

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

Jeśli zdecydujesz, że 800px to stary kapelusz, możesz zmienić swoją szerokość na 900px, a wszystko nadal będzie działać.

Możesz poczytać na CSS .

To zależy od sytuacji. Gdybym musiał stworzyć szablon dla istniejącej strony, która używa CSS, często generowanego przez Edytor lub coś takiego, użyłbym tego jako punktu wyjścia i zmieniał fragmenty, aż zrobi to, co chcę. Dotyczy to również WordPressa i tego rodzaju aplikacji.

Kiedy nie mam css na początek pracuję od 'ciało' i pracuję w dół do dzieci dzieci dzieci itp. Od dużych do małych.

I lubię używać narzędzia, które pokazuje wizualną reprezentację znacznika css, który edytuję, aby zobaczyć, jak wygląda. Lubię Expression Web , ponieważ potrafi bardzo łatwo poruszać się po stylach i pokazuje mi, jak wygląda.

Powiedziałeś w komentarzu do Tej odpowiedzi, że chcesz być w stanie łatwo go poprawić?

Gorąco polecam do tego celu niektóre rozszerzenia Firefoksa. Firebug jest fantastyczny do szybkiego zobaczenia css za czymś lub do ulepszania css. Jeśli najedziesz na coś w firebug wyświetli css i pozwoli Ci wyłączyć poszczególne linie css i zobaczyć, jak przeglądarka go renderuje.

Swój zaczynam od zera, po prostu wpisuję używając VS lub Aptana itp.

Opracowuję podstawowy układ, np. 3 kolumny.

Następnie używam stylu inline do tworzenia podstawowego układu, dodając znaczniki i html, dopóki nie mam go jak lubię. Następnie kontynuuję ten sposób, dopóki nie mam podstawowego szkieletu mojej strony internetowej.

Stąd umieszczam css w zewnętrznym pliku i zaczynam dodawać moje elementy, stylizując je.

Zanim się zorientujesz, będziesz miał coś słodkiego, to dzieje się zaskakująco szybko!