obrazka - Kurs HTML i CSS
Selektory pseudoelementów CSS / Przed... :before...tekstu generowanego przed wybranym elementem, w analogiczny sposób można tam dodać grafikę: selektor:before { content: url(ścieżka dostępu do obrazka) } Ścieżkę dostępu należy konstruować względem arkusza CSS! Przykład :before {content: url} To jest akapit, rozpoczynający się obrazkiem, pomimo że nie został on umieszczony w treści akapitu. Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji: p:before { content: url(obrazek.gif) " POCZĄTEK "; color: red } To jest...
- Selektory pseudoelementów CSS / Po... :after
...Zamiast tekstu generowanego po wybranym elemencie, w analogiczny sposób można tam dodać grafikę: selektor:after { content: url(ścieżka dostępu do obrazka) } Ścieżkę dostępu należy konstruować względem arkusza CSS! Przykład :after {content: url} To jest akapit, kończący się obrazkiem, pomimo że nie został on umieszczony w treści akapitu. Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji: p:after { content: " KONIEC " url(obrazek.gif); color: red } To jest akapit...
- Selektory pseudoklas CSS / Łączenie selektorów
...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 { 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...
- Wykazy CSS / Wyróżnik obrazkowy wykazu {list-style-image}
...wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów]. Natomiast jako "ścieżka dostępu" należy wpisać względną ścieżkę do obrazka, który ma się pojawić jako wyróżnik wykazu (marker). Wpisanie none usunie obrazek. Ścieżkę dostępu należy konstruować względem arkusza CSS, a nie względem dokumentu HTML! Polecenie pozwala zastosować dowolny obrazek jako wyróżnik wykazu (czyli marker). Dzięki temu nie musimy korzystać już tylko z podstawowych typów wykazu, ale możemy...
- Rozmiary CSS / Szerokość {width}
...nie odnosi się do elementów inline! Polecenie to pozwala ustalić dokładną szerokość różnych elementów (np. akapitu, wykazu, poziomej linii, tabeli, obrazka itd.). Przykład {width} To jest akapit o szerokości 30% (width: 30%). To jest wykaz o szerokości 5em (width: 5em): Punkt pierwszy Punkt drugi To jest tabela o szerokości 100px (width: 100px) Poniżej widać obrazek o szerokości 200px (width: 200px): Pytania i odpowiedzi {width} Co oznacza "width" w CSS? W CSS, właściwość...
- Obramowanie CSS / Atrybuty mieszane obramowania {border}
...i kolor obramowania. Na przykład: <img src="obraz.jpg" style="border: 2px solid black" alt="Zdjęcie"> tworzy czarną ramkę o grubości 2 pikseli wokół obrazka.
- Rozmiary CSS / Wysokość {height}
...nie odnosi się do elementów inline! Polecenie to pozwala ustalić dokładną wysokość różnych elementów (np. akapitu, wykazu, poziomej linii, tabeli, obrazka itd.). Przykład {height} To jest akapit o wysokości 5cm (height: 5cm). To jest wykaz o wysokości 20em (height: 20em): Punkt pierwszy Punkt drugi To jest tabela o wysokości 100px (height: 100px) Poniżej widać obrazek o wysokości 40px (height: 40px): Pytania i odpowiedzi {height} Jak ustawić wysokość w CSS? W CSS, wysokość...
- Pozycjonowanie CSS / Pozycja relatywna {position: relative}
...okna przeglądarki! Przykład {position: relative} Szary prostokąt poniżej, który jest częściowo przykryty, przedstawia położenie spoczynkowe obrazka, poddanego pozycjonowaniu: position: relative; left: 50px; top: 45px. Dlatego obrazek ten jest oddalony od lewej krawędzi swojego położenia spoczynkowego o 50px (pikseli), a od górnej o 45px. Położenie spoczynkowe Przykład pozycjonowania tekstu: To jest tekst powiększony To jest pozycjonowane pogrubienie tekstu Pozycjonowanie tabel...
- Pozycjonowanie CSS / Ustawienie {float, vertical-align}
...danego elementu względem elementów, które z nim sąsiadują. Dzięki temu możemy ustalić sposób "oblewania" tekstem elementu pływającego (np. obrazka). Przykład {float} float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float...
Aktywne przyciski / Pamięć podręczna...przy drugim użyciu aktywnego przycisku, nic już się nie doczytuje. Istnieje możliwość wcześniejszego poinformowania przeglądarki o dodatkowych obrazkach aktywnych przycisków, dzięki czemu zostaną one jeszcze przed pierwszym użyciem zapisane w pamięci podręcznej, a więc już podczas ich użycia nie nastąpi żadna zwłoka wywołana doczytywaniem. Ma to sens tylko dla wariantów obrazków w stanie podświetlonym i klikniętym. Używanie tej medoty dla obrazków w stanie podstawowym nie ma żadnego...