white - Kurs HTML i CSS
Tekst CSS / Białe znaki w tekście {white-space}selektor { white-space: sposób } Selektorem może być każdy znacznik wyświetlany w bloku [zobacz: Wstawianie stylów]. Natomiast jako "sposób" należy podać: normal - zamiana kilku sąsiadujących ze sobą spacji na jedną; wiersze są przełamywane automatycznie na końcu szerokości strony (domyślnie) pre - umożliwia wyświetlenie wielu spacji obok siebie; wiersze są przełamywane po napotkaniu znaku nowej linii - klawisz Enter (tekst preformatowany) nowrap - tryb identyczny jak "normal" z tym, że nie...
- Komendy CSS 2 / white-space
WARTOŚĆ normal | pre | nowrap | inherit OPIS Kontrola białych znaków INICJALIZACJA normal ZASTOSOWANIE elementy blokowe DZIEDZICZENIE tak PROCENTY nie MEDIA visual
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
...w kierunku przejścia barw z jednej w drugą. Na przykład gdy określimy następujący gradient: background: linear-gradient(to bottom, black 0%, white 100%) uzyskamy gradient z kolorem czarnym (black) na górze i białym (white) na dole. Pomiędzy nimi wystąpi łagodne przejście barw poprzez coraz jaśniejsze odcienie szarości. Wynika z tego, że linia gradientu będzie w tym przypadku skierowana pionowo w dół (to bottom): Linia gradientu ostatecznie nie jest widoczna na ekranie. Pomaga tylko...
- Tło CSS / Gradient promienisty {background: radial-gradient repeating-radial-gradient}
...polecam skorzystać ze specjalnego generatora. ✅ Rozpocznij konfigurację gratientu Przykład {background: radial-gradient} radial-gradient(white, black) Jeżeli identyczną deklarację gradientu wstawimy pod elementem prostokątnym, zamiast okręgu otrzymamy elipsę: radial-gradient(white, black) Różnice w rozmiarze gradientu w zależności od użytych słów kluczowych: radial-gradient(closest-side at 25% 75%, white, black) radial-gradient(farthest-side at 25% 75%, white, black)...
- Selektory pseudoklas CSS / Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type
...wartość } Przykład :nth-child :nth-last-child :nth-of-type :nth-last-of-type Nieparzyste i parzyste wiersze: tbody > tr:nth-child(odd) { color: white; background-color: gray } /* biały na szarym */ tbody > tr:nth-child(even) { color: gray; background-color: white } /* szary na białym */ Komórka 1.1 Komórka 1.2 Komórka 2.1 Komórka 2.2 Komórka 3.1 Komórka 3.2 Komórka 4.1 Komórka 4.2 Komórka 5.1 Komórka 5.2 Komórka 6.1 Komórka 6.2 Co trzecie wiersze: tbody > tr:nth-child(3n+1)...
- Menu w CSS / Poziome menu
...które w tym przypadku tylko by przeszkadzało: ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul li { display: inline; white-space: nowrap; } Efekt: Czcionki Tekst Tło Marginesy Obramowanie Dodatkowo blokujemy zawijanie tekstu (white-space: nowrap), aby w przypadku gdy linki nie zmieszczą się w jednej linii, przełamanie wiersza nastąpiło pomiędzy nimi, a nie wewnątrz nich. Zalety: Prawidłowa interpretacja w większości przeglądarek Możliwość łatwego...
- Dobre praktyki / CSS Zorientowane Obiektowo
...dla nich określamy wspólnie) odnośnik a W arkuszu CSS pełna definicja tej klasy może wyglądać na przykład tak: .Menu { background-color: white; } .Menu ul, .Menu li { display: block; list-style: none; margin: 0; padding: 0; } .Menu li { float: left; margin-right: 1em; } .Menu a { color: blue; text-decoration: none; } Kompozycja Zwróćmy uwagę, że typowy artykuł może zawierać informacje o: autorze - np. z jego imieniem, nazwiskiem i zdjęciem źródle...
- Dobre praktyki / Przykazania webmastera
...szybciej się ładuje, ale jest znacznie mniej czytelny. Popularne warianty (zdecyduj się na jeden): html, body { color: black; background-color: white; } html, body { color: black; background-color: white; } html, body { color: black; background-color: white; } Nie zakładaj, że wszyscy użytkownicy posiadają tak duży ekran jak w Twoim monitorze Dostęp do sieci z rożnego typu urządzeń mobilnych staje się dzisiaj tak samo ważny, jak z komputerów stacjonarnych czy tradycyjnych...
- CSS dla zielonych / Kolor tła oraz tekstu CSS {background-color, color}
...znajduje się cała zawartość strony. Zatem w arkuszu stylów wystarczy umieścić następujący kod: body { background-color: black; color: white; } Zwróć uwagę, że deklaracja stylów, którą ujmuje się w nawiasy klamrowe, składa się tutaj z dwóch linijek. Każda z nich rozpoczyna się od podania tzw. cechy (inaczej własności), po której następuje wartość. Cecha określa, co chcemy zmienić w wyglądzie wybranego elementu, natomiast wartość - w jaki sposób ma się to zmienić. Zatem gdyby...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
...w języku CSS nawet jeśli ustalimy szerokość elementu, ale następnie umieścimy w nim szerszy tekst - np. blokując jego zawijanie przy pomocy stylu "white-space: nowrap" albo znajdzie się w nim jakiś wyjątkowo długi wyraz - to taki tekst i tak wyjdzie poza obręb elementu. Oczywiście nie będzie to wyglądało zbyt estetycznie, a czasem może nawet zupełnie popsuć układ całej strony. Ponieważ często nie wiadomo z góry, jak długi może być tekst na stronie - bo powstanie on dopiero później - dlatego...