stronie - Kurs HTML i CSS
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ć...
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
...nim można utworzyć tło, w którym określone barwy będą łagodnie przechodzić pomiędzy sobą. Wcześniej jedyną możliwością wstawienia takiego efektu na stronie WWW było przygotowanie pliku graficznego i umieszczenia go jako tło obrazkowe. Jest to jednak rozwiązanie nieco kłopotliwe, gdyż każdą zmianę trzeba było przygotowywać w programie graficznym. Do tego taki plik graficzny z zapisanym gradientem mógł mieć niemałe rozmiary, niepotrzebnie wydłużając czas wczytywania strony w przeglądarce...
- 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...
- Obramowanie CSS / Atrybuty mieszane zaokrąglenia obramowania {border-radius}
...wybranych wartości (zarówno w przypadku pierwszego jak i drugiego sposobu) spowoduje, że przyjmą one wartości takie jak narożnik leżący po drugiej stronie przekątnej elementu. Przy tworzeniu zaokrąglenia obramowania możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obramowania Przykład {border-radius} border-radius: 5px 10px 15px 20px border-radius: 10px 20px / 20px 10px Pytania i odpowiedzi {border-radius} Co to jest "border-radius...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...wykonać obramowanie obrazkowe - przygotowując tylko jedną grafikę, przedstawiającą krawędzie obramowania. Nie będzie również konieczne osadzanie na stronie dodatkowych znaczników. Uzyskamy przy tym efekt samoczynnego dopasowywania się grafiki obramowania do rozmiarów ramki oraz dużo większe możliwości kompozycyjne. Przykład {border-image-source} border-image-source: url(punkt.gif); border-width: 32px Bez określenia dodatkowych własności obramowania graficznego (obcięcie, szerokość, nawis...
- Obramowanie CSS / Nawis obramowania obrazkowego {border-image-outset}
...tradycyjnego obramowania elementu. Dodanie nawisu nie wpływa na położenie elementu - element najpierw jest renderowany w określonym miejscu na stronie, a dopiero potem jest do niego ewentualnie dorysowywany nawis. Skutkiem tego może być zmniejszenie się faktycznie widocznego marginesu elementu, oddzielającego go do sąsiednich bloków. Jeżeli szerokość marginesu będzie niewystarczająca, grafika z nawisu obramowania może nawet wejść pod zawartość sąsiedniego elementu lub schować się poza...
- 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...
- 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")...