przykład html - Kurs HTML i CSS
Selektory atrybutów CSS / Selektor atrybutu o wartości kończącej się na...(CSS 3 - interpretuje: Chrome 4, Firefox 3.5, Edge 12, Opera 10, Safari 3.2) selektor[atrybut$="koniec"] { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu HTML (np. atrybut title="..."). "Koniec" to określony tekst, którym kończy się wartość atrybutu. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez...
- Selektory atrybutów CSS / Selektor atrybutu zawierającego określony tekst
(CSS 3 - interpretuje: Chrome 4, Firefox 3.5, Edge 12, Opera 10, Safari 3.2) selektor[atrybut*="tekst"] { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu HTML (np. atrybut title="..."). "Tekst" to określony napis, zawierający się w wartości atrybutu, który może zawierać również spacje. Natomiast wyrazy "cecha" oraz "wartość" określają...
- Selektory pseudoelementów CSS / Co to są pseudoelementy CSS?
...dokumentów - takie jak XHTML czy HTML - nie dostarczają mechanizmów dostępu do pewnych specyficznych elementów występujących na każdej stronie. Na przykład nie można wprost odnieść się do pierwszej litery ani pierwszej linii w akapicie. Tymczasem często zachodzi potrzeba ich specjalnego wystylizowania. Obejmowanie pierwszej litery w każdym akapicie znacznikiem <span>...</span> jest nieoptymalne i czasochłonne. Z pomocą przychodzą pseudoelementy CSS, które pozwalają odnieść się do takich...
- Selektory pseudoklas CSS / Atrybut języka :lang
selektor:lang(język) { cecha: wartość } Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów]. Jako "język" należy wpisać nazwę języka, np. pl - polski, en - angielski). Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Polecenie pozwala nadać określone atrybuty formatowania dla elementów, którym został nadany z poziomu HTML atrybut języka lang="..." [zobacz: Skróty nazw języków]. Różnica...
- Czcionki CSS / Wariant pozycji czcionki {font-variant-position}
(CSS 3 - interpretuje Firefox 34) selektor { font-variant-position: wariant } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, ale zaleca się stosować tutaj sub - indeks dolny albo sup - indeks górny [zobacz: Wstawianie stylów]. Natomiast jako "wariant" należy wpisać: normal - czcionka normalna (podstawowa) sub - indeks dolny super - indeks górny W języku HTML istnieją znaczniki <sub>...</sub> i <sup>...</sup> służące do tworzenia indeksów dolnych i górnych w...
- Wykazy CSS / Wyróżnik obrazkowy wykazu {list-style-image}
selektor { list-style-image: url(ścieżka dostępu) } Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - 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...
- Reguły warunkowe CSS / Zapytania właściwości @supports
...deklaracje, które zostaną użyte przez przeglądarkę tylko jeżeli potrafi ona obsłużyć (albo nie potrafi obsłużyć) wskazaną deklarację CSS. Na przykład, aby zastosować zespół reguł CSS tylko dla przeglądarek, które obsługują układ elastyczny, wystarczy otoczyć je specjalnym blokiem reguł warunkowych: @supports (display: flex) { body { display: flex; } #MENU { width: 150px; min-width: 150px; order: -1; overflow: hidden; } } Natomiast dla przeglądarek, które nie...
- Dziedziczenie stylów CSS / Resetowanie wszystkich wartości {all}
...zmienione. Ale tak naprawdę zwykle w ogóle nie zaleca się ich używać w języku CSS, ponieważ mają one swoje odpowiedniki w języku HTML. Jednym z przykładowych zastosowań tej własności może być tworzenie widżetów, które często są dostarczane przez podmioty zewnętrzne do wstawienia na swojej stronie. Ponieważ elementy takie są osadzane w wielu różnych serwisach, nie ma możliwości efektywnie dopasować ich wyglądu do każdej strony. Dlatego ich twórcy najczęściej projektują jakiś jeden...
Menu rozwijane, otwierane, wysuwane / Menu wielopoziomowePrezentowany skrypt obsługuje również wielopoziomowe struktury menu. Zasada zagnieżdżania polega na zbudowaniu najpierw pierwszego, płaskiego poziomu, a następnie wybraniu określonego elementu <dd>...</dd> i umieszczeniu w nim podrzędnej listy <dl>...</dl>, ze swoimi nagłówkami <dt>...</dt> i elementami <dd>...</dd>. Oczywiście ilość poziomów zagnieżdżenia nie jest niczym ograniczona. W celu osadzenia wielopoziomowego menu, należy powtórzyć wszystkie przedstawione wcześniej kroki. Zmianie...
- Menu rozwijane, otwierane, wysuwane / Czas rozwijania/zwijania
Aby przyspieszyć lub zwolnić rozwijanie/zwijanie pozycji menu, należy powtórzyć wszystkie przedstawione kroki, poza ostatnim (wywołanie skryptu), który tym razem należy wykonać następująco: <script> new Menu('menu0', '', false, false, czasRozwin, czasZwin); </script> czasRozwin Czas w milisekundach (1 s = 1000 ms), w którym następuje rozwinięcie pojedynczego elementu menu (<dd>...</dd>). Aby wymusić natychmiastowe rozwinięcie wszystkich elementów, należy podać wartość 0 (zero). czasZwin...