Style list i tabel

Trzy pytania z poprzedniej lekcji

1. Czym różni się min-width od max-width?
2. Jaki warunek musi spełniać pudełko, żeby margin: auto je wyśrodkowało?
3. Ile wartości podajecie w box-shadow i co oznaczają?

Jaki znak stoi przed punktem?

list-style-type ustala, jaki znak pojawia się przed każdym elementem listy. Domyślnie lista nienumerowana (<ul>) dostaje wypełnione kółko (disc), a numerowana (<ol>) liczby od 1 (decimal). Wartość none usuwa punktor całkiem.

Ciekawostka z MDN: lista wartości list-style-type nie kończy się na disc, circle, square i decimal. CSS ma osobne systemy numeracji dla różnych krajów, na przykład japanese-informal (japońska numeracja) albo armenian (tradycyjna ormiańska), a część z nich wymaga zainstalowanej odpowiedniej czcionki, żeby dobrze się wyświetlić.

Punktor w linii czy przed nią?

list-style-position decyduje, gdzie stoi punktor względem tekstu elementu. outside (domyślne) stawia go przed wcięciem, poza tekstem. inside wsuwa go do środka - jeśli tekst zawinie się do drugiej linii, ta linia zaczyna się równo pod punktorem, nie pod pierwszą literą.

Skąd to wcięcie?

Przeglądarka sama dodaje listom odstęp: górny i dolny margin 16px oraz padding-left 40px (to wcięcie robi wyłącznie padding-left, nie margin). Żeby zdjąć kropki i wcięcie razem, ustawiacie oba: list-style: none; i padding-left: 0;. Trzy właściwości można też zapisać jednym skrótem list-style.

ul {
  list-style: square url("gwiazdka.png") inside;
}
/* kolejność dowolna; brakujące wartości = domyślne: disc, none, outside */

Jedna linia obramowania czy dwie?

Gdy komórki tabeli mają obramowanie (border), domyślnie każda trzyma swoje własne - między sąsiednimi komórkami widać podwójną linię z odstępem (separate, wartość domyślna). border-collapse: collapse; sprawia, że sąsiednie obramowania łączą się w jedną wspólną linię.

Żeby tabela dała się czytać

Domyślnie tekst w komórce styka się z linią obramowania - dodajecie padding do th i td, żeby dane miały miejsce do oddychania. Naprzemienne tło wierszy (tzw. zebra) robi selektor :nth-child(odd) - wybiera co drugi wiersz, licząc od pierwszego.

th, td { padding: 0.6em; }

tbody tr:nth-child(odd) {
  background-color: #dddddd;
}

Tak pytają na egzaminie

Ćwiczenie: style list i tabel

1. W style.css zdejmij kropki z listy menu: list-style: none; i cofnij domyślne wcięcie padding-left: 0;.
2. Dla tabeli na swojej stronie ustaw border-collapse: collapse; i padding na th/td.
3. Dodaj naprzemienne tło wierszy: tbody tr:nth-child(odd) { background-color: ...; }.
4. Zapisz, F5, sprawdź menu i tabelę.

Trzy pytania na koniec

1. Jaka jest różnica między list-style-position: inside a outside?
2. Które dwie właściwości musicie ustawić, żeby lista straciła i kropki, i wcięcie?
3. Co zmienia border-collapse: collapse w wyglądzie tabeli?

To tyle na dziś: style list i tabel gotowe, na następnej lekcji stylizacja formularza.

A jak to wygląda w produkcji?