Utwórz arkusz stylów CSS
W ten sam sposób stworzyliśmy osobny plik tekstowy dla HTML, utworzysz plik tekstowy dla CSS. Jeśli potrzebujesz wizualizacji do tego procesu, zapoznaj się z pierwszym samouczkiem. Oto kroki, aby utworzyć arkusz stylów CSS w Notatniku:
- Wybierać Plik > Nowy w Notatniku, aby uzyskać puste okno
- Zapisz plik jako CSS, klikając Plik < Zapisz jako...
- Przejdź do folderu moja_strona na dysku twardym
- Zmienić "Zapisz jako typ:" do "Wszystkie pliki"
- Nazwij swój plik „style.css" (pomiń cudzysłowy) i kliknij Zapisać
Połącz arkusz stylów CSS ze swoim kodem HTML
Kiedy już masz arkusz stylów dla swojej witryny sieci Web, musisz powiązać ją z samą stroną sieci Web. Aby to zrobić, użyj tagu link. Umieść następujący tag linku w dowolnym miejscu w obrębie.
Napraw marginesy strony
Kiedy piszesz XHTML w przypadku różnych przeglądarek dowiesz się, że wszystkie mają różne marginesy i zasady wyświetlania. Najlepszym sposobem na upewnienie się, że Twoja witryna wygląda tak samo w większości przeglądarek, jest niedopuszczenie do domyślnych ustawień przeglądarki, takich jak marginesy.
Wolimy zaczynać strony w lewym górnym rogu, bez dodatkowego dopełnienia lub marginesu otaczającego tekst. Nawet jeśli zamierzamy uzupełnić zawartość, ustawiamy marginesy na zero, więc zaczynamy od tej samej pustej planszy. Aby to zrobić, dodaj następujące elementy do swojego dokumentu styles.css:
html, treść {
margines: 0px;
dopełnienie: 0px;
obramowanie: 0px;
lewy: 0px;
góra: 0px;
}
Zmiana czcionki na stronie
Czcionka jest często pierwszą rzeczą, którą chcesz zmienić na stronie internetowej. Domyślny czcionka na stronie internetowej może być brzydki i zależy od samej przeglądarki internetowej, więc jeśli nie zdefiniujesz czcionki, naprawdę nie wiesz, jak będzie wyglądać Twoja strona.
Zazwyczaj zmieniasz czcionkę w akapitach, a czasem w całym dokumencie. W tej witrynie zdefiniujemy czcionkę na poziomie nagłówka i akapitu. Dodaj następujące elementy do swojego dokumentu styles.css:
p, li {
czcionka: 1em Arial, Helvetica, bezszeryfowa;
}
h1 {
czcionka: 2em Arial, Helvetica, bezszeryfowa;
}
godz.2 {
czcionka: 1,5em Arial, Helvetica, bezszeryfowa;
}
h3 {
czcionka: 1,25em Arial, Helvetica, bezszeryfowa;
}
Zaczęliśmy od 1em jako podstawowego rozmiaru akapitów i elementów listy, a następnie użyliśmy tego do ustawienia rozmiaru moich nagłówków. Nie spodziewamy się, że nagłówek będzie głębszy niż h4, ale jeśli planujesz, będziesz chciał również go wystylizować.
Tworzenie bardziej interesujących linków
Domyślne kolory linków to niebieski i fioletowy odpowiednio dla linków nieodwiedzonych i odwiedzonych. Chociaż jest to standard, może nie pasować do schematu kolorów Twoich stron, więc zmieńmy to. W pliku styles.css dodaj następujące elementy:
a: link {
rodzina czcionek: Arial, Helvetica, bezszeryfowa;
kolor: #FF9900;
dekoracja tekstu: podkreślenie;
}
a: odwiedził {
kolor: #FFCC66;
}
a: najedź {
tło: #FFFFCC;
grubość czcionki: pogrubiona;
}
Skonfigurowaliśmy trzy style linków, a: link jako domyślny, a: odwiedzony na czas odwiedzin, zmieniamy kolor i a: najechanie. Po najechaniu kursorem myszy na link uzyskaj kolor tła i pogrubiono, aby podkreślić, że jest to link, który należy kliknąć.
Stylizowanie sekcji nawigacji
Ponieważ umieściliśmy sekcję nawigacji (id="nav") jako pierwszą w kodzie HTML, najpierw nadajmy jej styl. Należy wskazać, jak szeroki powinien być i umieścić szerszy margines po prawej stronie, aby tekst główny nie natrafiał na niego. my również umieszczamy wokół niego granicę.
Dodaj następujący kod CSS do swojego dokumentu styles.css:
#nawigacja {
szerokość: 225px;
margines prawy: 15px;
obramowanie: średnio solidne #000000;
}
#nawigacja {
styl listy: brak;
}
.stopka {
rozmiar czcionki: .75em;
oba czyste;
szerokość: 100%;
wyrównanie tekstu: środek;
}
Właściwość list-style konfiguruje listę wewnątrz sekcji nawigacji tak, aby nie zawierała punktorów ani numerów, a .footer stylizuje sekcję praw autorskich tak, aby była mniejsza i wyśrodkowana w obrębie sekcji.
Pozycjonowanie sekcji głównej
Pozycjonując swoją główną sekcję z pozycjonowaniem bezwzględnym, masz pewność, że pozostanie dokładnie tam, gdzie chcesz, aby pozostała na Twojej stronie. Zrobiliśmy go o szerokości 800 pikseli, aby pomieścić większe monitory, ale jeśli masz mniejszy monitor, możesz go zwęzić.
Umieść następujące elementy w swoim dokumencie styles.css:
#Główny {
szerokość: 800px;
góra: 0px;
pozycja: bezwzględna;
po lewej: 250px;
}
Stylizacja akapitów
Ponieważ już ustawiłem czcionkę akapitu powyżej, chciałem nadać każdemu akapitowi trochę dodatkowego "kopa", aby lepiej się wyróżniał. Zrobiłem to, umieszczając na górze obramowanie, które podkreślało akapit bardziej niż sam obraz.
Umieść następujące elementy w swoim dokumencie styles.css:
.Górna linia {
border-top: gruba bryła #FFCC00;
}
Zdecydowaliśmy się zrobić to jako klasę o nazwie „topline”, a nie tylko definiować wszystkie akapity w ten sposób. W ten sposób, jeśli zdecydujemy, że chcemy mieć akapit bez górnej żółtej linii, możemy po prostu opuścić class="topline" w tagu akapitu i nie będzie on miał górnej krawędzi.
Stylizacja obrazów
Obrazy zazwyczaj mają obramowanie wokół nich, nie zawsze jest to widoczne, chyba że obraz jest linkiem, ale lubimy mieć klasę w obrębie Arkusz stylów CSS, który automatycznie wyłącza obramowanie. Dla tego arkusza stylów utworzyliśmy klasę „noborder”, a większość obrazów w dokumencie jest częścią tej klasy.
Inną specjalną częścią tych obrazów jest ich lokalizacja na stronie. Chcieliśmy, aby były częścią akapitu, w którym się znajdują, bez używania tabel do ich wyrównania. Najprostszym sposobem na to jest użycie właściwości CSS float.
Umieść następujące elementy w swoim dokumencie styles.css:
#główny obraz {
pływak: lewy;
margines prawy: 5px;
margines-dolny: 15px;
}
.bez granic {
obramowanie: 0px brak;
}
Jak widać, na obrazach są również ustawione właściwości marginesów, aby upewnić się, że nie są one rozbite na pływający tekst, który znajduje się obok nich w akapitach.
Teraz spójrz na swoją ukończoną stronę
Po zapisaniu kodu CSS możesz ponownie załadować stronę pets.htm w przeglądarce internetowej. Twoja strona powinna wyglądać podobnie do tej pokazanej na tym obrazku, z wyrównanymi obrazami i poprawnie umieszczoną nawigacją po lewej stronie.
Wykonaj te same czynności dla wszystkich wewnętrznych stron tej witryny. Chcesz mieć jedną stronę dla każdej strony w nawigacji.