obrazka - Kurs HTML i CSS
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ść...
- 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...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...zapisać w innej lokalizacji - wtedy zamiast "style.css" trzeba podać pełną ścieżkę dostępu (tworzy się ją w analogiczny sposób, jak przy wstawianiu obrazka). Warto podkreślić, że jeśli Twoja strona WWW składa się z wielu podstron, na każdej z nich możesz dołączyć ten sam plik arkusza stylów. Dzięki temu zmiany wykonane tylko w jednym miejscu - czyli w pliku arkusza stylów - wpłyną na wygląd od razu wszystkich podstron Twojego serwisu. Czyż to nie jest piękne? Już nigdy więcej nie będzie Cię...
- Menu w CSS / Pionowe menu
...blokujemy to powielanie (no-repeat). Musimy również określić lewy margines wewnętrzny pozycji listy (padding-left) o szerokości równej szerokości obrazka, ponieważ bez tego grafika znalazłaby się pod tekstem, a nie obok niego. Przy tym nie może to być zwykły margines (margin-left), ponieważ na takich marginesach nie można wyświetlać tła. W ten sposób udało nam się osadzić grafikę, imitującą tradycyjny obrazek, bez żadnej modyfikacji kodu źródłowego HTML. Pozostałe dwa obrazki - tlo.gif i...
- Komendy CSS3 / Obrazki CSS
Źródło: CSS Images Module Level 3 Spis treści image-orientation image-rendering object-fit object-position image-orientation Orientacja obrazka na stronie Wartość from-image | none | [ <angle> || flip ] Inicjalizacja from-image Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie image-rendering Określenie jak przeskalozwać obrazek Wartość auto | smooth | high-quality | crisp-edges | pixelated Inicjalizacja auto Zastosowanie wszystkie elementy Dziedziczenie...
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...
- Losowy element
...Wszystkie elementy w kolejności losowej Losowy element Często przydatną funkcją na stronie WWW może okazać się wyświetlenie losowego tekstu lub obrazka. Można w ten sposób np. zbudować bazę cytatów albo porad i prezentować je użytkownikowi losowo - jeden przy każdym wejściu na stronę. Innym zastosowaniem może być rotacja bannerów lub buttonów. Jeśli chcesz umieścić na swojej stronie kilka bannerów, ale masz na to tylko jedno miejsce, wstaw tam właśnie ten skrypt, dzięki czemu przy każdym...