Przegląd kaskadowego arkusza stylów (CSS) z próbką

Gdy tworzysz witrynę od początku, możesz zacząć od zdefiniowania podstawowych stylów. To jak zaczynać od czystego płótna i świeżych pędzli. Jednym z pierwszych problemów, przed którymi stają 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 na znaczniku body, a inne nie, i tak dalej. Pozbądź się tych niespójności, definiując domyślne style dla twoich stron internetowych.

CSS i zestaw znaków

Po pierwsze, ustaw zestaw znaków dokumentów CSS na utf-8 . Chociaż prawdopodobnie większość zaprojektowanych stron jest napisana po angielsku, niektóre mogą być przystosowane do lokalizacji w różnych kontekstach językowych i kulturowych. Kiedy są, utf-8 upraszcza proces. Ustawienie zestawu znaków w zewnętrznym arkuszu stylów nie ma pierwszeństwa przed nagłówkiem HTTP, ale we wszystkich innych sytuacjach będzie.

Łatwo jest ustawić zestaw znaków. W pierwszym wierszu dokumentu CSS wpisz:

@charset "utf-8";

W ten sposób, jeśli użyjesz międzynarodowych znaków we właściwości content lub jako nazwy klas i ID, arkusz stylów nadal będzie działał poprawnie.

Stylizacja strony

Następną rzeczą, której wymaga domyślny arkusz stylów, są style pozwalające wyzerować marginesy, marginesy i marginesy. Dzięki temu wszystkie przeglądarki umieszczają zawartość w tym samym miejscu i nie ma żadnych ukrytych spacji między przeglądarką a treścią. W przypadku większości stron jest to zbyt blisko krawędzi tekstu, ale ważne jest, aby rozpocząć od tego, aby obrazy tła i podziały układu były prawidłowo ustawione.

html, body { margin: 0px; wypełnienie: 0px; granica: 0 pikseli; }

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, posiadanie tych standardowych kolorów umieszczonych na treści i tagu HTML na początku ułatwia czytanie i pracę z tą stroną.

html, body { kolor: # 000; tło: #fff; }

Domyślne style czcionek

Rozmiar czcionki i rodzina czcionek są czymś, co nieuchronnie zmieni się po rozpoczęciu projektu, ale zaczyna się od domyślnego rozmiaru czcionki 1em i domyślnej rodziny czcionek Arial, Genewa lub innej czcionki bezszeryfowej. 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, sans-serif; }

Mogą istnieć inne miejsca, w których możesz znaleźć tekst, ale str , th , td , li , dd , i dt są dobrym początkiem do zdefiniowania czcionki bazowej. Zawierać HTML i ciało na wszelki wypadek, ale wiele przeglądarek unieważnia wybór czcionki, jeśli definiujesz tylko czcionki dla HTML lub body.

Nagłówki

Nagłówki haseł HTML są ważne, aby pomóc w zarysie witryny i umożliwić wyszukiwarkom głębsze wejście w Twoją witrynę. Bez stylów wszystkie są dość brzydkie, więc ustaw domyślne style na wszystkich z nich i określ rodzinę czcionek oraz rozmiary czcionek dla każdego z nich.

h1, h2, h3, h4, h5, h6 { rodzina czcionek: Arial, Helvetica, sans-serif; } 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 linków

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 co najmniej jednej z pseudoklas. Zdefiniuj je z niewielkimi zmianami na niebiesko, a następnie zmień je, gdy masz zdefiniowaną paletę kolorów.

Aby ustawić łącza w odcieniach niebieskiego, ustaw:

• spinki do mankietów jako niebieski
• odwiedzone linki jako ciemnoniebieski
• umieść linki jako jasnoniebieski
• aktywne linki jako jeszcze bledszy niebieski

jak pokazano w tym przykładzie:

a: link {color: # 00f; }a: odwiedzony {kolor: # 009; }a: hover {color: # 06f; }a: active {color: # 0cf; }

Stylizowanie linków za pomocą dość nieszkodliwej kolorystyki zapewnia, że ​​nie zapomnisz żadnej z klas, a także uczynisz je nieco mniej głośnymi niż domyślny niebieski, czerwony i fioletowy.

Pełny arkusz stylów

Oto pełny arkusz stylów:

@charset "utf-8"; html, body { margin: 0px; wypełnienie: 0px; granica: 0 pikseli; kolor: # 000; tło: #fff; } html, body, p, th, td, li, dd, dt { czcionka: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { rodzina czcionek: Arial, Helvetica, sans-serif; } 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 {color: # 00f; } a: odwiedzony {kolor: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; }