Temat po części znany, ale oczywiście nowe tematy pojawią się w poście – tak jak poprzednio zaznaczyłem – warto utrwalić sobie wiedzę😉📚 Na końcu dodaję jedno ćwiczenie podsumowujące💪😉
Rozmiar tekstu
Czcionka ma swój rozmiar, który możemy zmienić w CSS za pomocą właściwości font-size. Domyślnym rozmiarem czcionki dla <body> jest wartość 16px (oczywiście pomijając nagłówki – nie dziedziczą rozmiaru).
Grubość czcionki
Jednym ze sposobów na pogrubienie czcionki jest tag <b></b>.
Kolejnym sposobem jest oczywiście użycie stylu. Właściwość do tego służąca to font-weight, a wartości jakie może przyjąć są następujące:
- normal – domyślna dla wszystkich tagów (nie wliczając nagłówków),
- bold – domyślna dla nagłówków,
- liczbowe – od 100 do 900 (od najcieńszej do najgrubszej)
Grubość czcionki jest dziedziczona na tej samej zasadzie co rozmiar.
Rodzaj czcionki
Potrafimy już powiększyć oraz pogrubić czcionkę. Nadszedł czas na poznanie kolejnej właściwości – rodzaju czcionki font-family.
Rodzajów jest wiele. Najbardziej standardowe to: Arial, Verdana, Tahoma.
Przykładowa deklaracja typu czcionki:
p {
font-family: Verdana;
}Nie można określić domyślnego rodzaju czcionki, ponieważ mogą występować różnice ze względu na różne systemy operacyjne i przeglądarki.
Modyfikacja linka
Linki na stronie są podkreślone, a w kodzie CSS przecież nic im nie zmienialiśmy. Dzieje się tak, ponieważ tagi <a> w HTML mają domyślnie inny kolor i dodatkowe podkreślenie.
Pozostały tekst można także podkreślić z właściwością:
text-decoration: underline;
Czy możliwe jest usunięcie podkreślenia z linków❓ Oczywiście że tak. Musimy jedynie wstawić w CSS dla tagów <a> właściwość:
text-decoration: none;
Zapewne zauważyliście na różnych stronach, gdy po najechaniu kursorem myszki na elementy HTML, zmienia się jego wygląd❓
Aby zaprezentować taki efekt, należy użyć pseudoselektora :hover
Tak jak zawsze, na przykładzie postaram się zobrazować o co chodzi:
.class:hover {
background-color: red;
}Powyższy zapis mówi przeglądarce, że podczas najechania kursorem na element z klasą .class, to jego tło zmienia się na kolor czerwony.
Wyrównywanie tekstu
Podczas tworzenia stron musimy trzymać się porządku. Nasze strony, aby były ładne musimy zadbać o wyrównywanie tekstu. Domyślnie tekst wyrównywany jest do lewej strony. Taki układ również zauważamy w różnych innych przykładach, np. edytorach tekstu, itp.
Aby zmienić wyrównywanie tekstu, wykorzystujemy właściwość:
text-align: …;
Może ona przyjąć następujące wartości:
- left – wyrównanie do lewej (domyślna wartość),
- right – wyrównanie do prawej,
- center – wyśrodkowanie,
- justify – wyjustowanie
W tym przypadku, prawie wszystkie elementy-dzieci dziedziczą tę właściwość.
Teraz czas na Ciebie😉 Tym razem przygotowałem jedno ćwiczenie podsumowujące posta. Powodzenia❕💪😉
Ćwiczenie
- Przejdź do codesandbox.
- Dodaj plik style.css
- Dodaj tag linka łączącego nasze pliki.
- Zmień nagłówek pierwszego stopnia na treść “Stylujemy nasz tekst”.
- Dodaj akapit z przykładowym tekstem. Nadaj mu klase ‘text’.
- Zmień rozmiar tekstu w akapicie na 20px, pogrubienie tekstu za pomocą właściwości słownej oraz dodaj właściwość zmiany rodzaju czcionki na ‘Verdana’.
- Do nagłówka h1 dodaj podkreślenie.
- Dodaj linka do przykładowej strony.
- W CSS dodaj do tagu <a> deklarację, aby usunąć podkreślenie.
- Dodaj pseudoselektor, aby po najechaniu kursorem na linka, pojawiło się tło elementu w kolorze żółtym.
- Dodaj wyśrodkowanie tekstu dla całej strony.
To tyle na ten temat😉 Myślę, że z materiału najbardziej powinni być zadowoleni początkujący moi czytelnicy, dla których przede wszystkim tworze materiały.
Posty będą coraz bardziej ciekawsze. Chciałbym zebrać jak największą liczbę stałych czytelników😉👌 Wiem, że przede wszystkim zależy to ode mnie, od moich przygotowywanych treści. Mogę Was zapewnić, że od pierwszego posta przekazuje Wam wiedzę, którą nabyłem na bootcampie oraz z wieloletniego doświadczenia przy tworzeniu stron internetowych.
Zachęcam do zapisywania się do newslettera. Z czasem, gdy opanuje ten temat, będę informować na Wasze skrzynki o nowych postach❕
Kolejny temat który poruszę na blogu to model pudełkowy – tak więc już zapraszam❕😉
Zapraszam do polubienia mojego fb 😉
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA