strony - Kurs HTML i CSS
Selektory pseudoklas CSS / Pusty element :empty...oznaczanie treści. Przykład :empty Po wpisaniu w arkuszu stylów: p:empty { background-color: red; width: 100%; height: 1em } a w dowolnym miejscu strony: <p></p> <p> </p> <p><b></b></p> <p>To jest akapit</p> otrzymamy cztery akapity, z których tylko pierwszy element (pusty) powinien mieć ustawione tło koloru czerwonego: To jest akapit Zwróć uwagę, że drugi akapit (zawierający tylko spację) ani trzeci akapit (zawierający tylko pusty element-dziecko), nie otrzymały zmienionego...
- Selektory elementów CSS / Ogólny selektor braci
...braćmi mogą się znajdować również elementy innego typu - zostaną pominięte. Nie obsługuje MSIE 6.0!. Przykład Załóżmy, że w arkuszu stylów strony została umieszczona następująca reguła: i ~ b { color: red } Dzięki temu, jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się znaczniki i oraz b, to te drugie uzyskają określone atrybuty: To jest akapit, wewnątrz którego znajduje się: pochylenie (nie powinno być czerwone), klawiatura (nie powinien być czerwony) oraz...
- Selektory pseudoklas CSS / Tylko do odczytu :read-only :read-write
...read-write Po wpisaniu w arkuszu stylów: input:read-only { border: 1px solid blue } input:read-write { border: 1px solid red } a w dowolnym miejscu strony: <form action="?"> <input type="text" value="Tylko do odczytu" readonly> <input type="text" value="Do odczytu i do zapisu"> </form> otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):
- Obramowanie CSS / Zaokrąglenie obramowania {border-...-radius}
...Źródło: CSS Backgrounds and Borders Module Level 3 Zaokrąglone narożniki to bardzo ciekawy efekt wizualny, który może zwiększyć estetykę strony. Co ciekawe, element wcale nie musi mieć obramowania, aby miał zaokrąglone narożniki. Wystarczy jeśli będzie miał ustalone jakieś tło, aby efekt był widoczny na ekranie. Ale uwaga: tekst wewnątrz elementu nie zostanie zawinięty do zaokrąglonych rogów. Jeśli promień zaokrąglenia będzie zbyt duży, tekst wyjdzie na zewnątrz. Przy tworzeniu...
- Obramowanie CSS / Dekoracja przełamania obramowania {box-decoration-break}
...(domyślnie) Zdarza się, że na wydruku blok zostanie przełamany pomiędzy dwie kartki w taki sposób, że jego początek znajdzie się na końcu jednej strony, a koniec - na samym początku następnej. W takim przypadku standardowo na dole pierwszego fragmentu ani na górze drugiego nie będzie obramowania. Podobnie jeśli obramowanie zostanie przypisane do długiego elementu wyświetlanego w linii, tak że tekst się przełamie na końcu wiersza, przy prawym marginesie ani w następnej linijce przy lewym...
- Układ wielokolumnowy CSS / Szerokość kolumny {column-width}
...aby pomieścić całą zawartość elementu. Liczba kolumn nie będzie jednak większa niż zdoła się zmieścić w założonej szerokości elementu albo strony. Należy pamiętać, że faktyczna wyświetlona szerokość kolumny może być większa niż podana, ponieważ przeglądarka stara się wypełnić treścią całą szerokość wielokolumnowego bloku. Na przykład podając "column-width: 45px; width: 100px", aby kolumny zajęły całą poziomą przestrzeń elementu, zostaną dopasowane do szerokości 50px. W szczególnym...
- Układ wielokolumnowy CSS / Przełamanie kolumny {break-before, break-inside, break-after}
...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. zaraz po poziomej linii: hr { break-after: column } Wreszcie w pewnych przypadkach może nam zależeć, aby wybrany fragment tekstu - np. akapit - nigdy nie został przełamany do następnej kolumny: p { break-inside: avoid-column } Przykład {break-after} To...
- Obramowanie CSS / Szerokość obramowania obrazkowego {border-image-width}
...jakby była wstawiona w tle. border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 10px; border-width: 15px Z drugiej strony, ustalając szerokość tradycyjnego obramowania większą niż szerokość obramowania obrazkowego, możemy odsunąć grafikę krawędzi od zawartości tekstowej elementu - podobnie jak to ma miejsce w przypadku marginesu wewnętrznego. border-image-source: url(punkt.gif); border-image-slice: 15; border-width: 15px Dla porównania - tak wygląda ten sam...
- Obramowanie CSS / Nawis obramowania obrazkowego {border-image-outset}
...marginesu będzie niewystarczająca, grafika z nawisu obramowania może nawet wejść pod zawartość sąsiedniego elementu lub schować się poza granicami strony. Dlatego ustalając nawis obramowania obrazkowego zawsze warto jednocześnie zadbać o nadanie odpowiedniej wartości marginesu. Jeżeli "border-image-slice: 124", to wartość nawisu obramowania obrazkowego można zilustrować następująco: Źródło: CSS Backgrounds and Borders Module Level 3 Przykład {border-image-outset} border-image-source...
HTML5 / Nawigacja <nav><nav>...</nav> Reprezentuje sekcję strony, która zawiera odnośniki nawigacyjne do innych stron albo do określonych fragmentów na tej samej stronie. Nie wszystkie linki na stronie powinny być umieszczane w tym znaczniku. Został on przewidziany przede wszystkim do oznaczania nim podstawowej nawigacji witryny. Często w stopce serwisu znajdują się linki takie jak: kontakt, regulamin, prawa autorskie. Choć teoretycznie można je objąć znacznikiem NAV, zwykle bardziej właściwy do tego będzie element...