wstawić - Kurs HTML i CSS
Selektory pseudoklas CSS / Odsyłacz podstawowy :link...Przykład :link Jeżeli nie byłeś jeszcze na stronie głównej organizacji W3C, to ten odsyłacz powinien być pogrubiony. Pytania i odpowiedzi Jak wstawić odsyłacz? Odsyłacz w HTML wstawiamy za pomocą znacznika <a href="...">...</a>, gdzie atrybut href="..." określa adres docelowy. Na przykład: <a href="https://www.example.com">Tekst odsyłacza</a>. Jaki kolor ma link? Domyślnie linki są niebieskie (kolor #0000FF czyli blue), a odwiedzone linki są fioletowe (kolor #800080 czyli...
Podcast HTML / #1 HTML dla zielonych...wstawia się za pomocą znacznika <hr>. Znacznik <hr>, podobnie jak <br> i <img>, nie posiada znacznika zamykającego. Wstawienie obrazka Aby wstawić obrazek, używa się znacznika <img>, który wymaga podania względnej ścieżki dostępu do pliku graficznego (atrybut src) oraz tekstu alternatywnego (atrybut alt). Należy zawsze używać względnych ścieżek, a nie bezwzględnych (np. nie "C:\www\..."), a w nazwach plików unikać wielkich liter i polskich znaków. <img src="obrazek.jpg" alt="Tu...
- Selektory pseudoklas CSS / Łączenie selektorów
...jednym miejscu - np. w menu serwisu - wygodniej jest użyć następującej reguły: .przyklad_selektory2 a:hover { font-weight: bold } Teraz wystarczy wstawić: <div class="przyklad_selektory2"> <a href="?">Link1</a> <a href="?">Link2</a> <a href="?">Link3</a> </div> aby zmienić wygląd po wskazaniu wszystkich odsyłaczy z tego bloku, bez wpływu na pozostałe znajdujące się na stronie: Link1 Link2 Link3 Zmiana koloru obramowania obrazka po wskazaniu go myszką: img.przyklad_selektory3...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako obramowanie. Wpisanie "none" usunie obrazek. Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu dokumentu HTML! Za pomocą CSS 3 można dużo łatwiej wykonać obramowanie obrazkowe - przygotowując tylko jedną grafikę, przedstawiającą krawędzie obramowania. Nie będzie również konieczne osadzanie na...
- Drukowanie CSS / Kontekst strony @page
@page { cecha: wartość } Jako cecha i wartość można wstawić jedną lub więcej deklaracji: marginesy strony: margin, margin-top, margin-right, margin-bottom, margin-left rozmiar papieru: size W deklaracjach kontekstu strony nie wolno używać jednostek "em" (wysokość czcionki) ani "ex" (wysokość małej litery), ponieważ nie istnieje w nim pojęcie czcionki. Kontekst strony definiuje wygląd samej strony - np. arkusza papieru na wydruku - a nie jej zawartości. Można w ten sposób ustawić...
- Tło CSS / Atrybuty mieszane tła {background}
...{ background: wartości atrybutów obrazka 1, wartości atrybutów obrazka 2... } Korzystając z rozszerzonej składni atrybutów mieszanych, możemy wstawić w tle elementu kilka obrazków i od razu określić dla nich dodatkowe własności, takie jak np. sposób powtarzania, zaczepienie, pozycja / rozmiary, pozycja początkowa czy przycinanie. Trzeba jednak pamiętać, że o ile w tle jednego elementu może być wstawionych kilka obrazków, to ustawienie więcej niż jednego jednolitego koloru tła nie ma...
- Drukowanie CSS / Okładka wydruku @page :first
@page :first { cecha: wartość } Jako cecha i wartość można wstawić jedną lub więcej deklaracji odpowiednich dla kontekstu strony. Na pierwszej stronie wydruku często znajduje się okładka, która różni się wizualnie od pozostałych stron. Na przykład może ona zawierać grafikę rozpościerającą się na całej powierzchni kartki bez żadnych marginesów. Taki efekt pozwala uzyskać pseudoklasa :first, dzięki której możemy ustawić marginesy na okładce inne niż na pozostałych stronach wydruku - np...
- Drukowanie CSS / Druk dwustronny @page :left :right
Strony lewe: @page :left { cecha: wartość } Strony prawe: @page :right { cecha: wartość } Jako cecha i wartość można wstawić jedną lub więcej deklaracji odpowiednich dla kontekstu strony. Niektóre drukarki posiadają specjalny podajnik papieru pozwalający automatycznie zadrukowywać kartki po ich obu stronach. Nawet jeśli urządzenie nie ma wbudowanej takiej funkcji, druk dwustronny można zrealizować ręcznie: najpierw drukując nieparzyste strony, a następnie przekładając je odwrotnie z...
- Jednostki CSS / Wyrażenia matematyczne
...calc(5 * 10px) albo calc(10px * 5) Dzielimy zawsze przez liczbę - np.: calc(100vw / 40) Oczywiście w pojedynczym wyrażeniu matematycznym można wstawić więcej niż tylko dwie wartości. Po obu stronach operatorów działań dodawania i odejmowania obowiązkowo muszą znajdować się spacje bądź inne białe znaki. Ponadto wyrażenia matematyczne składające się z więcej niż 20 wartości mogą nie działać.
- Układ wielokolumnowy CSS / Linia rozdzielająca kolumn {column-rule-color, column-rule-style, column-rule-width, column-rule}
...przeczytać cały tekst oraz już na pierwszy rzut oka widział, że treść w ogóle jest podzielona na kolumny. Wtedy możemy pomiędzy sąsiednimi kolumnami wstawić dodatkowo pionową linię rozdzielającą. Jest ona wyświetlana zawsze na środku przestrzeni między kolumnami. Sama linia rozdzielająca nie zabiera miejsca z szerokość elementu wielokolumnowego. Jeśli jej grubość będzie większa niż szerokość odstępu kolumn, wyświetli się pod tekstem znajdującym się w kolumnach. W obecnej wersji specyfikacja...