Poznaj kaskadowe arkusze stylów za pomocą tej ściągawki CSS
Zdefiniuj podstawowe style na każdej tworzonej stronie internetowej
Spis treściZwiększać- Zestaw znaków
- Stylizacja treści strony
- Domyślne style czcionek
- Nagłówki
- Stylizacja linków
- Pełny arkusz stylów
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 zestawu znaków 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:
|_+_|
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.
|_+_|
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ą.
|_+_|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 w 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.
|_+_|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:
Jak pokazano w tym przykładzie:
|_+_|