#11. Listy i tabele w CSS

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

  1. Dodaj nowy projekt w codesandox.
  2. Stwórz i podlinkuj style.
  3. Dodaj listę punktowaną oraz zmień jej styl na circle.
  4. Dodaj listę numerowaną i zmień jej styl na rzymski.
  5. Skopiuj z przykładu lub stwórz od zera tabele z przykładowymi danymi. Dodaj obramowanie, wyróżniony nagłówek oraz podświetlenie wiersza.
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ…

busy-moore-k5nrx

busy-moore-k5nrx by danielminschinski

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