Utwórz arkusz stylów CSS
W ten sam sposób, w jaki utworzyliśmy oddzielny plik tekstowy dla HTML, utworzysz plik tekstowy dla CSS. Jeśli potrzebujesz wizualizacji dla tego procesu, zapoznaj się z pierwszym samouczkiem. Oto kroki tworzenia arkusza stylów CSS w Notatniku:
- Wybierz Plik> Nowy w Notatniku, aby uzyskać puste okno
- Zapisz plik jako CSS, klikając Plik <Zapisz jako …
- Przejdź do folderu my_website na dysku twardym
- Zmień "Zapisz jako typ:" na "Wszystkie pliki"
- Nazwij swój plik "styles.css" (pomiń cytaty) i kliknij Zapisz
Połącz arkusz stylów CSS z kodem HTML
Po utworzeniu arkusza stylów dla swojej witryny internetowej musisz powiązać go ze stroną internetową. Aby to zrobić, użyj znacznika łącza. Umieść następujący znacznik łącza w dowolnym miejscu w
tagi twojego dokumentu pets.htm:
03 z 10 Kiedy piszesz XHTML dla różnych przeglądarek, jedną rzeczą, której się nauczysz, jest to, że wszystkie wydają się mieć różne marginesy i reguły dotyczące sposobu wyświetlania rzeczy. Najlepszym sposobem, aby upewnić się, że Twoja witryna wygląda tak samo w większości przeglądarek, jest niedopuszczenie, by domyślne ustawienia przeglądarki były takie same, jak marginesy. Wolę rozpoczynać moje strony w lewym górnym rogu, bez dodatkowych marginesów i marginesów otaczających tekst. Nawet jeśli mam zamiar wypełnić zawartość, ustawię marginesy na zero, tak, że zaczynam od tej samej pustej planszy. Aby to zrobić, dodaj następujący tekst do dokumentu styles.css: Czcionka jest często pierwszą rzeczą, którą chcesz zmienić na stronie internetowej. Domyślna czcionka na stronie internetowej może być brzydka, a nawet w samej przeglądarce, więc jeśli nie zdefiniujesz czcionki, naprawdę nie będziesz wiedzieć, jak będzie wyglądać twoja strona. Zazwyczaj zmienia się czcionkę na akapitach, a czasem na samym dokumencie. W przypadku tej strony zdefiniujemy czcionkę na poziomie nagłówka i akapitu. Dodaj następujące elementy do dokumentu styles.css: Zacząłem od 1em jako mojego rozmiaru bazowego dla akapitów i elementów listy, a następnie wykorzystałem to, aby ustawić rozmiar nagłówków. Nie spodziewam się używać nagłówka głębszego niż h4, ale jeśli planujesz, będziesz również chciał go stylizować. Domyślne kolory linków to niebieski i fioletowy dla nieodwiedzonych i odwiedzanych linków. Mimo że jest to standard, może nie pasować do schematu kolorów stron, więc zmieńmy go. W pliku styles.css dodaj następujące elementy: Ustawiłem trzy style linków, a: link jako domyślny, a: odwiedzany, gdy jest odwiedzany, zmieniam kolor i: hover. Za pomocą: hover Mam link, aby uzyskać kolor tła i pogrubić, aby podkreślić, że jest to link do kliknięcia. Ponieważ najpierw umieściliśmy sekcję nawigacji (id = "nav") w kodzie HTML, najpierw ją ułóżmy. Musimy wskazać, jak szeroki powinien być i umieścić szerszy margines po prawej stronie, tak aby główny tekst nie podskoczył przeciwko niemu. Umieściłem wokół niego granicę. Dodaj następujący kod CSS do dokumentu styles.css: Właściwość list-style ustawia listę w sekcji nawigacji, aby nie zawierała punktorów ani cyfr, a .footer style sekcji prawa autorskiego, aby były mniejsze i wyśrodkowane w obrębie sekcji. Dzięki pozycjonowaniu głównej sekcji z absolutnym pozycjonowaniem możesz być pewny, że pozostanie on dokładnie tam, gdzie chcesz pozostać na swojej stronie internetowej. Zrobiłem moje 800px szerokie, aby pomieścić większe monitory, ale jeśli masz mniejszy monitor, możesz chcieć zrobić to węższym. Umieść następujące elementy w dokumencie styles.css: Ponieważ już ustawiłem czcionkę akapitową powyżej, chciałem nadać każdemu akapitowi trochę więcej "kopa", aby lepiej się wyróżniało. Zrobiłem to, umieszczając na górze krawędź, która podkreśliła akapit bardziej niż sam obraz. Umieść następujące elementy w dokumencie styles.css: Postanowiłem zrobić to jako klasę zwaną "topline", a nie tylko definiować wszystkie akapity w ten sposób. W ten sposób, jeśli zdecyduję, że chcę mieć akapit bez górnej żółtej linii, mogę po prostu zostawić class = "topline" w znaczniku akapitu i nie będzie on miał górnej granicy. Obrazy zazwyczaj otaczają je ramką, nie zawsze jest to widoczne, chyba że obraz jest linkiem, ale lubię mieć klasę w moim arkuszu stylów CSS, która automatycznie wyłącza granicę.W przypadku tego arkusza stylów utworzyłem klasę "noborder", a większość obrazów w dokumencie stanowi część tej klasy. Kolejną szczególną częścią tych zdjęć jest ich lokalizacja na stronie. Chciałem, aby były częścią akapitu, w którym się znajdowali, bez używania stołów do ich wyrównania. Najprostszym sposobem na to jest użycie właściwości CSS float. Umieść następujące elementy w dokumencie styles.css: Jak widać, na obrazach są również ustawione właściwości marginesów, aby upewnić się, że nie zostały zmiażdżone w stosunku do tekstu pływającego, który jest obok nich w akapitach. Po zapisaniu CSS możesz ponownie załadować stronę pets.htm w przeglądarce. Twoja strona powinna wyglądać podobnie do tej przedstawionej na tym obrazku, z wyrównanymi obrazami i prawidłowo umieszczoną nawigacją po lewej stronie. Wykonaj te same kroki dla wszystkich wewnętrznych stron dla tej witryny. Chcesz mieć jedną stronę dla każdej strony w nawigacji. Napraw marginesy strony
Zmiana czcionki na stronie
Zwiększenie zainteresowania Twoimi linkami
Stylizacja sekcji nawigacji
Pozycjonowanie sekcji głównej
Stylizacja twoich akapitów
Stylizacja obrazów
Teraz spójrz na swoją ukończoną stronę
