Co to jest tytuł strony? - Kurs HTML i CSS
Tło / Gradient liniowy {background: linear-gradient repeating-linear-gradient}...linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Kierunek określa sposób rozłożenia barw. Można go podać na dwa sposoby: słowa kluczowe to top - przejście kolorów nastąpi pionowo z dołu do góry (odpowiednik 0deg) to right top - ukośnie z lewego-dolnego do prawego-górnego narożnika to right - poziomo z lewej do prawej strony...
- Marginesy / Górny margines {margin-top}
selektor { margin-top: rozmiar } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "rozmiar" należy podać konkretną wartość w jednostkach długości. Wpisanie auto ustali wartość automatyczną. Polecenie wprowadza dodatkowy odstęp między danym elementem a elementem poprzedzającym. Jeśli definiowane własności mają odnosić się do całej strony (np. marginesy strony), można użyć selektora BODY (zobacz także...
- Marginesy / Atrybuty mieszane marginesu {margin}
selektor { margin: wartości atrybutów } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy podać: Jedną wartość - wtedy wszystkie marginesy będą jednakowe. Przykład To jest akapit, który ma wszystkie marginesy równe 2cm (margin: 2cm) Dwie wartości - z których pierwsza oznacza górny i dolny margines, natomiast druga - lewy i prawy. Przykład To jest akapit, który ma górny i dolny margines...
- Marginesy / Górny margines wewnętrzny {padding-top}
selektor { padding-top: rozmiar } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "rozmiar" należy podać konkretną wartość w jednostkach długości. Polecenie to pozwala zdefiniować dodatkowy wewnętrzny odstęp pomiędzy elementami, np. tekstem i obramowaniem tabeli (co nie byłoby możliwe poprzez ustalenie marginesu - margin). Jest przydatne np. w połączeniu z tłem pod tekstem, obramowaniem, czy też...
- Marginesy / Atrybuty mieszane marginesu wewnętrznego {padding}
selektor { padding: wartości atrybutów } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast zasady wpisywania "wartości atrybutów" są takie same jak przy atrybutach mieszanych zwykłego marginesu. Pozwala wprowadzić jednocześnie kilka wartości marginesów wewnętrznych. Możliwe jest przy tym podanie: jednej wartości - dla wszystkich marginesów wewnętrznych naraz dwóch wartości - osobno kolejno dla...
- Obramowanie / Zaokrąglenie obramowania {border-...-radius}
...selektor { border-bottom-left-radius: zaokrąglenie } We wszystkich przypadkach selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast "zaokrąglenie" określa promień wyrażony w jednostkach długości albo w procentach (względem obszaru obramowania - zobacz: Model pudełkowy). Możliwe jest tutaj podanie: jednej wartości - zaokrąglenie symetryczne dwóch wartości - pierwsza określa poziomy promień ćwiartki elipsy zaokrąglenia, a druga...
- Obramowanie / Szerokość obramowania obrazkowego {border-image-width}
...Opera 15, Chrome) selektor { border-image-width: szerokość } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "szerokość" należy podać konkretną wartość wyrażoną w jednostkach długości, procentach (względem całkowitego obszaru obramowania obrazkowego) lub jako liczba naturalna (podająca wielokrotność szerokości obramowania). Wpisanie auto ustali wartość automatyczną. Możliwe jest przy tym podanie...
- Obramowanie / Nawis obramowania obrazkowego {border-image-outset}
...interpretuje Opera 15, Chrome) selektor { border-image-outset: nawis } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "nawis" należy podać wartość szerokości wystającej poza krawędź tradycyjnego obramowania, wyrażoną w jednostkach długości lub jako liczba naturalna (podająca wielokrotność szerokości obramowania). Możliwe jest przy tym podanie: jednej wartości - określa jednakową szerokość nawisu poza wszystkie...
- Drukowanie / Przełamanie strony {page-break-before, page-break-after}
...stronę po elemencie, a sam element zostaje na poprzedniej kartce. Polecenie takie jest przydatne, jeśli strona składa się z rozdziałów, których tytuły są wpisane np. w znacznikach <h1>...</h1>. Możemy wtedy np. w zewnętrznym arkuszu stylów umieścić deklarację: h1 { page-break-before: always } lub z podaniem klasy: h1.tytul { page-break-before: always } Dzięki temu każdy rozdział rozpocznie się na nowej stronie, co sprawi, że treść będzie wyglądała bardziej estetycznie. Takie rozwiązanie...
- Układ wielokolumnowy / Przełamanie kolumny {break-before, break-inside, break-after}
...(wstawiony wewnątrz kolumny). Tekst nie zawsze musi przełamywać się między kolumnami tak, jak byśmy sobie tego życzyli. Możemy np. nie chcieć, aby tytuł znalazł się na końcu kolumny. W takim przypadku estetyczniej będzie wyglądało, jeśli kolumna przełamie się wcześniej, aby tytuł znalazł się na początku następnej. Taki efekt zapewnimy poprzez nadanie stylu: h1 { break-after: avoid-column } Z drugiej strony możemy chcieć wymusić przełamanie kolumny po zakończeniu w tekście sekcji, czyli np...