Listy punktowane
Dla list <li> i <ul> które wcześniej poznaliśmy można także zmieniać przykładowo wielkość czcionek i ustawiać wiele uniwersalnych stylów.
Mamy jednak kilka właściwości CSS dedykowanych jedynie dla list, np:
- list-style-type – zmienia styl lub wygląd punktora. Dla list punktowych (nienumerowanych), przykładowe wartości dla tej właściwości oznaczają różne kształty punktora: circle, disc, square
Nie owijając w bawełnę, powyższą właściwość przetestujmy na przykładzie:
zealous-payne-i4fz8
zealous-payne-i4fz8 by danielminschinski
Tak jak pewnie zauważyliście, dopisując do styli deklarację list-style-type z square zmieniamy domyślną wartość disc.
Listy numerowane
Analogicznie do list punktowanych, możemy także zmieniać punktory list numerowanych.
Należy zastosować poznaną przed chwilą właściwość list-style-type i uzupełnić wartością np.:
- upper-roman (numeracja rzymska),
- decimal (arabska, domyślna).
Rozszerzmy poprzedni przykład o kolejną listę:
wizardly-sound-8vxuf
wizardly-sound-8vxuf by danielminschinski
Obramowanie tabeli
Wróćmy do tematu tabel. Na moim blogu omawiałem już tabele w HTML. Mają one to do siebie, że jeśli ich nie ostylujemy, to są “niewidoczne”, tzn. pozbawione obramowań.
Każdy programista powinien umieć wpłynąć na jej wygląd. W tym celu użyjemy kilka prostych deklaracji CSS, o których już pisałem.
Poniżej dodaję przykład użycia obramowań tabeli:
relaxed-dawn-7kb61
relaxed-dawn-7kb61 by danielminschinski
Nagłówek wyróżniony?
Oczywiście, jak spojrzymy na nagłówek naszej tabeli to oczywiście coś jest nie tak. Nagłówek musimy wyróżnić, aby stał się naszym wyznacznikiem naszej tabeli.
Niezbędna wiedza która pomoże nam w tym temacie znajduję się na moim blogu (stylowanie elementów zagnieżdzonych – potomnych, dzieci).
W naszym przypadku chcemy zmienić kolor tła nagłówka tabeli <thead>, który jest dzieckiem tabeli <table>. Spójrz na przykład:
modest-roentgen-oleyt
modest-roentgen-oleyt by danielminschinski
Podświetlenie wiersza
Myślę, że spotkaliście się jako użytkownicy stron internetowych ze standardem, że po najechaniu kursorem na wiersz najstępuję jego podświetlenie.
Ma to nam pomóc skupić się na interesujących nas danych. Czytelnicy, którzy śledzą od początku mojego bloga, wiedzą już o zagadnieniu :hover. Właśnie to nam pomoże uzyskać podświetlenie wiersza. Bez zbędnego opisywania, przejdźmy do przykładu, w którym pokaże wam rezultat wykonanego stylowania:
modest-almeida-nl5gx
modest-almeida-nl5gx by danielminschinski
Czas na Ciebie😉 Poniżej dodaję ćwiczenie, które utrwali zdobytą wiedzę❕📚
Ćwiczenie
- Dodaj nowy projekt w codesandox.
- Stwórz i podlinkuj style.
- Dodaj listę punktowaną oraz zmień jej styl na circle.
- Dodaj listę numerowaną i zmień jej styl na rzymski.
- Skopiuj z przykładu lub stwórz od zera tabele z przykładowymi danymi. Dodaj obramowanie, wyróżniony nagłówek oraz podświetlenie wiersza.
To by było na tyle. Krok do przodu zaliczony. Mój harmonogram „Plan nauki Frontend Developera”💪📚 powoli się kończy, więc nadchodzi czas na aktualizację😉 W następnym poście stworzymy mały projekcik💪💻
Zapraszam do kontynuacji nauki programowania razem z moim blogiem❕😉👍
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA