Kiedy ty zbuduj stronę internetową od podstaw, warto zacząć od zdefiniowania podstawowych stylów. To tak, jakby zacząć od czystego płótna i świeżych pędzli. Jednym z pierwszych problemów, z jakimi borykają się projektanci stron internetowych, jest to, że przeglądarki internetowe są różne. Domyślny rozmiar czcionki różni się w zależności od platformy, domyślna rodzina czcionek jest inna, niektóre przeglądarki definiują marginesy i dopełnienie znacznika body, podczas gdy inne nie, i tak dalej. Omiń te niespójności, definiując domyślne style dla swoich stron internetowych.
CSS i zestaw znaków
Po pierwsze, ustaw zestaw znaków dokumentów CSS na utf-8. Chociaż prawdopodobnie większość projektowanych stron jest napisana w języku angielskim, niektóre mogą być zlokalizowane — dostosowane do innego kontekstu językowego i kulturowego. Kiedy są, utf-8 upraszcza proces. Ustawianie znaku ustawionego w zewnętrzny arkusz stylów nie będzie mieć pierwszeństwa przed HTTP nagłówek, ale we wszystkich innych sytuacjach będzie.
Łatwo ustawić zestaw znaków. W pierwszym wierszu dokumentu CSS napisz:
@charset "utf-8";
W ten sposób, jeśli użyjesz znaków międzynarodowych we właściwości content lub jako nazwy klas i identyfikatorów, arkusz stylów będzie nadal działał poprawnie.
Stylizacja treści strony
Następną rzeczą, jakiej potrzebuje domyślny arkusz stylów, są style do wyzeruj marginesy, dopełnienie i obramowania. Dzięki temu wszystkie przeglądarki umieszczają zawartość w tym samym miejscu i nie ma żadnych ukrytych spacji między przeglądarką a zawartością. W przypadku większości stron internetowych jest to zbyt blisko krawędzi dla tekstu, ale ważne jest, aby zacząć od tego, aby obrazy tła i podziały układu były prawidłowo wyrównane.
html, treść {
margines: 0px;
dopełnienie: 0px;
obramowanie: 0px;
}
Ustaw domyślny kolor pierwszego planu lub czcionki na czarny, a domyślny kolor tła na biały. Chociaż najprawdopodobniej zmieni się to w przypadku większości projektów stron internetowych, ustawienie tych standardowych kolorów na korpusie i Znacznik HTML na początku ułatwia czytanie strony i pracę z nią.
html, treść {
kolor: #000;
tło: #fff;
}
Domyślne style czcionek
Rozmiar czcionki i rodzina czcionek to coś, co nieuchronnie ulegnie zmianie, gdy projekt zostanie wstrzymany, ale zacznie się od domyślnego rozmiaru czcionki 1 em i domyślnie rodzina czcionek Arial, Genewy, czy jakiegoś innego czcionka bezszeryfowa. Użycie ems sprawia, że strona jest jak najbardziej dostępna, a czcionka bezszeryfowa jest bardziej czytelna na ekranie.
html, body, p, th, td, li, dd, dt {
czcionka: 1em Arial, Helvetica, bezszeryfowa;
}
Mogą istnieć inne miejsca, w których możesz znaleźć tekst, ale p, ten, td, Li, dd, i dt są dobrym początkiem do zdefiniowania czcionki bazowej. Zawierać HTML i ciało tak na wszelki wypadek, ale wiele przeglądarek zastępuje wybór czcionek jeśli zdefiniujesz czcionki tylko dla kodu HTML lub treści.
Nagłówki
Nagłówki HTML są ważne, aby pomóc w zarysie witryny i umożliwić wyszukiwarkom zagłębienie się w nią. Bez stylów wszystkie są dość brzydkie, więc ustaw domyślne style dla nich wszystkich i zdefiniuj rodzinę czcionek oraz rozmiary czcionek dla każdego z nich.
h1, h2, h3, h4, h5, h6 {
rodzina czcionek: Arial, Helvetica, bezszeryfowa;
}
h1 { rozmiar czcionki: 2em; }
h2 { rozmiar czcionki: 1.5em; }
h3 { rozmiar czcionki: 1.2em; }
h4 { rozmiar czcionki: 1.0em; }
h5 { rozmiar czcionki: 0.9em; }
h6 { rozmiar czcionki: 0.8em; }
Nie zapomnij o linkach
Stylizacja kolorów linków jest prawie zawsze krytyczną częścią projektu, ale jeśli nie zdefiniujesz ich w domyślnych stylach, prawdopodobnie zapomnisz o przynajmniej jednej z pseudoklas. Zdefiniuj je z niewielką wariacją na niebiesko, a następnie zmień je, gdy masz zdefiniowaną paletę kolorów dla witryny.
Aby ustawić spinki do mankietów w odcieniach niebieskiego, zestaw:
- spinki do mankietów jak niebieski
- odwiedzone linki jak ciemnoniebieski
- najedź na linki jak jasnoniebieski
- aktywne linki jeszcze bledszy niebieski
Jak pokazano w tym przykładzie:
a: link { kolor: #00f; }
a: odwiedzone { kolor: #009; }
a: najedź { kolor: #06f; }
a: aktywny { kolor: #0cf; }
Stylizując linki za pomocą dość nieszkodliwego schematu kolorów, zapewnia, że nie zapomnisz żadnej z klas, a także sprawia, że są one nieco mniej głośne niż domyślny niebieski, czerwony i fioletowy.
Pełny arkusz stylów
Oto pełny arkusz stylów:
@charset "utf-8";
html, treść {
margines: 0px;
dopełnienie: 0px;
obramowanie: 0px;
kolor: #000;
tło: #fff;
}
html, body, p, th, td, li, dd, dt {
czcionka: 1em Arial, Helvetica, bezszeryfowa;
}
h1, h2, h3, h4, h5, h6 {
rodzina czcionek: Arial, Helvetica, bezszeryfowa;
}
h1 { rozmiar czcionki: 2em; }
h2 { rozmiar czcionki: 1.5em; }
h3 { rozmiar czcionki: 1.2em; }
h4 { rozmiar czcionki: 1.0em; }
h5 { rozmiar czcionki: 0.9em; }
h6 { rozmiar czcionki: 0.8em; }
a: link { kolor: #00f; }
a: odwiedzone { kolor: #009; }
a: najedź { kolor: #06f; }
a: aktywny { kolor: #0cf; }