przykład - Kurs HTML i CSS
Selektory pseudoelementów CSS / Po... :afterSpis treści :after Po... :after Obrazek po... :after {content: url} Wartość atrybutu po... :after {content: attr} Po... :after selektor:after { content: "treść" } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść po określonych elementach, na które wskazuje selektor. UWAGA! Polecenie nie interpretuje...
- Selektory pseudoklas CSS / Łączenie selektorów
...{ border: 5px solid black } a:hover img.przyklad_selektory3 { border: 5px solid red } Wskaż poniższy obrazek myszką: Inny ciekawy przykład - tym razem z automatycznym generowaniem zawartości: a.przyklad_selektory4:hover:after { content: "Rollover"; position: absolute; color: #000; background-color: #eee; font-size: 10px; border-width: 1px 2px 2px 1px; border-style: solid; border-color: #888; padding: 1px 5px } Jeśli wskażesz ten odsyłacz myszką, powinien pojawić się zaraz...
- Tekst CSS / Kolor tekstu {color}
...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 użyć właściwości color i podać wartość w formie rgb(R, G, B), gdzie R, G i B to liczby od 0 do 255 reprezentujące składowe czerwonej, zielonej i niebieskiej odpowiednio. Na przykład: "color: rgb(255, 0, 0)...
- Tekst CSS / Tryb pisania {writing-mode}
...W wielu językach azjatyckich tekst podczas pisania tradycyjnie układany jest pionowo, gdzie kolejne linijki są położone obok siebie. Na przykład w językach pochodzenia mongolskiego linijki ułożone są pionowo obok siebie od lewej do prawej strony - tzn. pierwsza linijka tekstu znajduje się przy lewej krawędzi kartki, a ostatnia - przy prawym jej brzegu. Pionowe ułożenie tekstu możemy uzyskać właśnie dzięki użyciu stylu "writing-mode: vertical-lr" (języki mongolskie) albo...
- Tło CSS / Powtarzanie tła obrazkowego {background-repeat}
...pionie lub całkowite zablokowanie. W CSS 3 wprowadzono dodatkowo możliwość oddzielnego określenia sposobu powtarzania tła w poziomie i w pionie. Na przykład "repeat no-repeat" jest równoznaczne z "repeat-x", a "no-repeat repeat" - "repeat-y". Taki rozszerzony sposób staje się bardziej przydatny w przypadku dodatkowych wartości - "space round" i "round space". Dzięki temu możemy precyzyjnie dopasować sposób powielania grafiki w poziomie i w pionie, w zależności od jej wymiarów w stosunku do...
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
...kluczowe znaczenie ma tzw. linia gradientu. Musimy sobie ją wyobrazić jako prostą, która przebiega w kierunku przejścia barw z jednej w drugą. Na przykład gdy określimy następujący gradient: background: linear-gradient(to bottom, black 0%, white 100%) uzyskamy gradient z kolorem czarnym (black) na górze i białym (white) na dole. Pomiędzy nimi wystąpi łagodne przejście barw poprzez coraz jaśniejsze odcienie szarości. Wynika z tego, że linia gradientu będzie w tym przypadku skierowana...
- Marginesy CSS / Górny margines wewnętrzny {padding-top}
...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 brzegami strony (także sąsiadującymi elementami) a zewnętrznymi krawędziami szarego prostokąta). Natomiast margines wewnętrzny wynosi 5mm (to ta odległość między...
- Marginesy CSS / Atrybuty mieszane marginesu wewnętrznego {padding}
...określa odstęp pomiędzy zawartością elementu a jego obramowaniem. Oznacza to przestrzeń wewnątrz elementu, pomiędzy treścią a jego obramowaniem. Na przykład: "padding: 10px" dodaje 10 pikseli odstępu wewnątrz elementu, oddzielając treść od obramowania. Jaka jest różnica między "padding" a "margin"? Różnica między padding a margin polega na ich funkcji i wpływie na układ elementów. margin tworzy odstęp zewnętrzny między elementem a jego otoczeniem, oddzielając go od innych elementów. Z...
- Obramowanie CSS / Cień {box-shadow}
...w CSS, można użyć właściwości box-shadow i określić wartości cienia, takie jak przesunięcie poziome, przesunięcie pionowe, rozmycie, kolor itp. Na przykład: "box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);" dodaje cień z przesunięciem 3 piksele poziomo i pionowo, rozmyciem 5 pikseli i kolorystyką szaro-czarną. Jak zrobić cień z obrazka? Aby dodać cień do obrazka (<img>) w CSS, można użyć właściwości box-shadow. Przykład: <img src="obraz.jpg" style="box-shadow: 5px 5px 10px rgba(0, 0, 0...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...ramka_zawartosc { background: #92C892 url(obramowanie3.gif) repeat-y center; padding: 0 12px; color: #031; } Uzyskany efekt: To jest przykład tradycyjnie wykonanego "obramowania" obrazkowego. Wymaga zagnieżdżenia w sobie aż trzech bloków i przygotowania trzech obrazków. Ramka musi mieć stałą szerokość. Natomiast wysokość automatycznie dopasowuje się do zawartości, ale za to grafika pionowych krawędzi ramki nie może być zbyt skomplikowana. Obrazek obramowania...