zrobić - Kurs HTML i CSS
Selektory pseudoklas CSS / Łączenie selektorów...własności selektorów CSS. Jak się można było przekonać, rodzajów selektorów jest bardzo wiele - każdy przeznaczony do innego celu. Co jednak zrobić, jeżeli potrzebujemy w jednej regule stylu zastosować kilka selektorów prostych? Czy jest to w ogóle możliwe? Oczywiście, że tak. Wystarczy po prostu wpisać je jeden po drugim (bez żadnych odstępów) w następującej kolejności: selektor typu lub selektor uniwersalny selektory atrybutów, selektor identyfikatora, selektor klasy lub...
- Tekst CSS / Kolor tekstu {color}
...koloru tekstu elementu w CSS służy właściwość color. Możesz podać wartość koloru jako nazwę koloru, kod szesnastkowy lub funkcję koloru. Jak zrobić kolorowy tekst? Aby stworzyć kolorowy tekst w HTML, możesz użyć znacznika <span>, wewnątrz którego umieścisz tekst, a następnie wykorzystać atrybut style="..." lub CSS do ustalenia koloru tekstu. Na przykład: <span style="color: red">Kolorowy tekst</span>. Jak ustawić kolor RGB w CSS? Aby ustawić kolor w formacie RGB w CSS, możesz...
- Tekst CSS / Transformacja tekstu {text-transform}
...transformacji tekstu, takiej jak zmiana wszystkich liter na wielkie litery, małe litery lub pierwsze litery słów na wielkie litery. Jak zrobić duże litery CSS? Aby przekształcić tekst na duże litery w CSS, możesz użyć właściwości text-transform i ustawić jej wartość na uppercase. Na przykład: <p style="text-transform: uppercase">...</p>. To spowoduje, że wszystkie litery w tekście będą wielkie.
- Tekst CSS / Białe znaki w tekście {white-space}
...przełamać tylko poprzez zastosowanie znacznika <br>. Przykład {white-space} Przykład Pytania i odpowiedzi Co to są białe znaki i co należy zrobić, aby je zobaczyć? Białe znaki to symbole w tekście, które nie są widoczne jako drukowane znaki, ale wpływają na formatowanie i układ tekstu. Aby zobaczyć białe znaki w edytorze HTML, można włączyć tryb wyświetlania znaków specjalnych, który zazwyczaj jest dostępny w menu (np. "Widok / Pokaż białe znaki" - ang. "View / Show white space")...
- Rozmiary CSS / Przepełnienie {overflow}
...do przewijania auto - pokazanie suwaków jeśli to konieczne Według CSS 2.1 polecenie można również zastosować do komórek tabeli. Określa co zrobić, gdy zawartość elementu nie mieści się w rozmiarach podanych przez width oraz height. Możliwe jest ukrycie nadmiarowej zawartość, pokazanie wszystkiego poprzez powiększenie rozmarów elementu (bez względu na parametry width i height) albo utworzenie suwaków do przewijania przepełnionej treści. Przykład {overflow} width: 5ex Szerokość tego...
- Kursory CSS / Kursor obrazkowy {cursor: url}
...url('myszka.png'), auto } ustawi niestandardowy obrazek jako kursor, który zmieni się na domyślny (auto) w przypadku braku dostępności. Jak zrobić "customowy" kursor? Aby stworzyć niestandardowy kursor, można użyć właściwości cursor w CSS i wskazać ścieżkę do własnego obrazka kursora za pomocą url('ścieżka/do/obrazka.png'). Na przykład: element { cursor: url('kursor.png'), auto } ustawi niestandardowy obrazek jako kursor, a auto zostanie użyte, jeśli obrazek nie będzie dostępny.
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
...nas odstęp pomiędzy wyróżnikami wykazu a treścią poszczególnych punktów. Jeżeli chcemy dodatkowo ustalić margines z lewej strony wykazu, możemy to zrobić dodając deklarację margin-left do elementu ul (lub ewentualnie li). Analogicznie można dodać margines przed/po całym takim wykazem, oddzielający go od sąsiadującej treści, czy nawet odstępy pomiędzy poszczególnymi punktami wykazu. Warto zauważyć, że ten sposób pozwala również dokładnie określić pionową pozycję markera, co przy...
- Drukowanie CSS / Linijki na stronie {widows, orphans}
...do przełamania strony, jednak podstawowa różnica polega na tym, że powyższe polecenia nie wymuszają przełamania strony, a jedynie określają co zrobić w przypadku, gdy taka konieczność już wystąpi wewnątrz akapitu. Jeżeli cały tekst zmieści się na jednej stronie, nie zobaczymy żadnego ich działania. Przykład {widows, orphans} Jeśli to możliwe, podczas drukowania pozostaw przynajmniej 4 linijki akapitu na górze i na dole kartki papieru: p { widows: 4; orphans: 4; }
- Pozycjonowanie CSS / Obcinanie {clip}
...obraz o wymiarach 200 pikseli na 200 pikseli, i chcemy wyciąć jego górny lewy kwadratowy fragment o wymiarach 50 pikseli na 50 pikseli, możemy to zrobić następująco: "clip: rect(0, 50px, 50px, 0)". Ta deklaracja clip określa obszar, który ma być widoczny, a wartości to kolejno: górny margines, prawy margines, dolny margines i lewy margines. W tym przypadku, przycinamy górny lewy fragment o wymiarach 50px na 50px.
Nowe okno / Generator okien...kod: UWAGA! Jeśli chcesz otworzyć zwykłe okno po kliknięciu odsyłacza (trzeci wariant), czyli bez określania parametrów wyglądu, lepiej to zrobić w następujący sposób: <a target="_blank" href="adres">opis</a>