stronie - Kurs HTML i CSS
Wstawianie stylów CSS / Kaskadowość stylów...stylów Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony stylów z różnych źródeł. Na przykład: na naszej stronie używamy zewnętrznego arkusza stylów, deklaracji stylów w nagłówku strony, a także stylów typu inline, przy czym dotyczą one formatowania dokładnie tego samego elementu (np. kroju czcionki). Co się stanie w takim przypadku? Czy nie powstaną konflikty? A może komputer się "zawiesi"? Nic z tych rzeczy! A to właśnie ze względu na kaskadowość...
- Selektory pseudoklas CSS / Odsyłacz odwiedzony :visited
...się tylko do odsyłaczy, w regule stylu można pominąć selektor elementu a: :visited { cecha: wartość } Przykład :visited Jeżeli byłeś już na stronie głównej organizacji W3C, to ten odsyłacz powinien być pogrubiony.
- Tekst CSS / Kolor tekstu {color}
...Polecenie pozwala ustalić dowolny kolor tekstu. Jeśli definiowane własności mają odnosić się do całej strony (np. kolor tekstu na całej stronie), można użyć selektora BODY lub HTML. Przykład {color} kolor red kolor #66AAFF kolor #69C kolor rgb(255,33,170) kolor rgb(25%,75%,75%) kolor systemowy Highlight Pytania i odpowiedzi {color} Która właściwość CSS służy do zmiany koloru tekstu elementu? Do zmiany koloru tekstu elementu w CSS służy właściwość color. Możesz podać...
- Czcionki CSS / Rodzaj czcionki {font-family}
...{font-family} Co robi "font-family"? Właściwość font-family w CSS definiuje rodzaj czcionki, który ma być używany do wyświetlania tekstu na stronie. Można podać listę nazw rodzajów czcionek, aby przeglądarka wybrała pierwszą dostępną opcję na liście lub zastąpiła ją innym rodzajem czcionki, jeśli wybrana nie jest dostępna. Jak ustawić rodzaj czcionki w CSS? Rodzaj czcionki w CSS można ustawić za pomocą właściwości font-family, która określa preferowany rodzaj czcionki lub listę...
- Marginesy CSS / Górny margines wewnętrzny {padding-top}
...1cm) Rzeczywiście w wielu przypadkach, praktycznie nie można ich odróżnić, np.: Dla tego akapitu został określony margines wewnętrzny po lewej stronie, który wygląda tak samo, jak zwykły margines (margin). Aby zrozumieć, jaka jest różnica pomiędzy zwykłym a wewnętrznym marginesem, spójrz na poniższy przykład: Po wpisaniu: <p style="background-color: silver; margin: 1cm; padding: 5mm">...</p> Otrzymamy: To jest akapit z określonym marginesem zewnętrznym - 1cm (to ta odległość między...
- Marginesy CSS / Atrybuty mieszane marginesu wewnętrznego {padding}
...Na przykład: "padding: 15px 20px 15px 20px" ustawia margines wewnętrzny o wymiarach 15 pikseli na górze i na dole oraz 20 pikseli po prawej i lewej stronie elementu.
- Obramowanie CSS / Atrybuty mieszane obramowania {border}
...można posłużyć się klasą selektorową, tzn. w arkuszu stylów wpisujemy np.: *.podkreslenie { border-bottom: 2px #f80 solid } a następnie na stronie: <span class="podkreslenie">...</span> Zagnieżdżanie obramowania <div style="border: solid red 3px"> <div style="border: solid green 3px"> <div style="border: solid blue 3px"> Potrójnie zagnieżdżone obramowanie </div> </div> </div> Potrójnie zagnieżdżone obramowanie Pytania i odpowiedzi {border} Jak zrobić obramowanie w...
- Drukowanie CSS / Przełamanie strony {page-break-before, page-break-after}
...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 nie jest jednak zbyt odpowiednie, jeśli strona zawiera bardzo krótkie rozdziały, ponieważ wtedy wydruk będzie składał się większej ilości stron, które nie będą całkowicie zapełnione (właściciel drukarki może nie być tym zachwycony 🙂). Innym przydatnym...
- Drukowanie CSS / Blokada przełamania strony {page-break-inside}
...Polecenie page-break-inside: avoid powoduje, że strona nie zostanie przełamana wewnątrz wskazanego elementu, tzn. pozostanie on w całości na jednej stronie (chyba że będzie zbyt duży, aby się na niej zmieścić). Jest to przydatne, jeśli nie chcemy, aby np. wykaz albo tabela zostały przedzielone pomiędzy dwie strony. W takim przypadku lepiej żeby drukarka przełamała stronę trochę wcześniej, a element zostanie przeniesiony na następną kartkę. Przykład {page-break-inside} Jeśli to możliwe...
- Pozycjonowanie CSS / Nakładanie {z-index}
...kolejność nakładania elementów na siebie w warstwach. Wyższa wartość z-index umożliwia elementowi znajdowanie się na wierzchu innych elementów na stronie. To przydatne, gdy chcemy kontrolować, który element jest wyświetlany jako pierwszy, a który jako drugi. Dlaczego "z-index" nie działa? Brak działania z-index może być spowodowany kilkoma czynnikami. Najczęstsze problemy to brak ustawionej pozycji elementów (np. "position: relative", "position: absolute" albo "position: fixed")...