selektorów - Kurs HTML i CSS
Selektory CSS...atrybutów Selektory specjalne Selektory pseudoelementów Selektory pseudoklas Wstęp Poniżej znajdziesz skrócony opis wszystkich rodzajów selektorów CSS. Dokładniej na ich temat możesz przeczytać klikając odnośnik w kolumnie "Opis". Natomiast kolumna "CSS" zawiera poziom specyfikacji języka, w którym po raz pierwszy selektor został wprowadzony. Źródło: Cascading Style Sheets, Level 2, Selectors Level 3 Selektory elementów Wzór Znaczenie Opis CSS * każdy element...
- Kaskadowe Arkusze Stylów / Dlaczego warto używać CSS?
...modyfikacji rodzaju formatowania jednocześnie we wszystkich dokumentach, zmieniając dane tylko w jednym pliku! Dzięki możliwości stosowania klas selektorów, znacznie oszczędzamy sobie pisania. W jednym miejscu określamy wszystkie atrybuty formatowania (których może być bardzo dużo), odnoszące się do wielu elementów, które mają wyglądać tak samo. Bezpośrednio przy elemencie wystarczy podać tylko nazwę klasy i nie musimy już wypisywać "litanii" poleceń. Znacznie przyspiesza to późniejszą...
- Selektory pseudoklas CSS / Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type
...nth-of-type. Pierwszy z nich wybiera dzieci, a drugi elementy podanego typu [porównaj: pierwsze dziecko i pseudoklasy typu]. Natomiast w przypadku selektorów :nth-last-child oraz :nth-last-of-type sposób wyliczania przebiegu cyklu jest analogiczny, ale numerowanie elementów rozpoczynamy nie od pierwszego, lecz od ostatniego i posuwamy się do tyłu. Czyli ostatni element oznaczymy indeksem jeden, przedostatni - dwa itd. Zapis Gdy A=1 lub A=-1 wpisywanie liczby przed n można pominąć...
- Dobre praktyki / CSS Zorientowane Obiektowo
...analogia do terminologii programowania zorientowanego obiektowo, znanego z niemal każdego nowoczesnego języka programowania. Stosowanie kontekstu selektorów można porównać do polimorfizmu, tzn. efekt działania tej samej deklaracji (klasy) zależy od typu elementu, do którego się odwołujemy. Na przykład: <div class="Information Warning">...</div> może działać inaczej niż <span class="Information Warning">...</span> chociaż nazwa przypisanej klasy CSS jest w obu przypadkach identyczna...
- CSS dla zielonych / Podsumowanie
...ale zarazem określenie jej wyglądu w profesjonalny sposób. W dalszych rozdziałach Kursu CSS poznasz m.in. bardziej zaawansowane techniki tworzenia selektorów oraz rozbudowaną listę własności, dzięki którym zyskasz jeszcze większe możliwości stylizacji elementów Twojego serwisu. Zapraszam...
Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego...otwieranego, wysuwanego Wymagana wiedza Listy definicyjne <dl>...</dl> Podstawy odsyłaczy Podstawy stylów CSS (m.in. arkusze stylów, klasy selektorów i pozycjonowanie absolutne) Skrypt menu rozwijanego, otwieranego, wysuwanego Aby wstawić na swoją stronę menu rozwijane, postępuj według poniższych instrukcji: Utwórz w swoim edytorze HTML nowy dokument. Wklej do niego poniższy kod i zapisz w pliku menu.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl}...
- Menu drzewiaste / Skrypt menu drzewiastego
...Wyrażenia regularne Wymagana wiedza Zagnieżdżanie wykazów <ul>...</ul> Podstawy odsyłaczy Podstawy stylów CSS (m.in. arkusze stylów i klasy selektorów) Skrypt menu drzewiastego Aby uzyskać menu drzewiaste, utwórz plik tree.css w tym samym katalogu co strona i zapisz w nim: ul.tree { display: block; margin-left: 0; padding-left: 0; } ul.tree ul { display: block; margin-left: 0; padding-left: 0; margin-top: 0; margin-bottom: 0; } ul.tree li { display: block...
- Wstawianie stylów CSS / Kaskadowość stylów
...priorytet niż styl zdefiniowany dalej (np. zewnętrzny arkusz stylów). Konflikty w stylach rozstrzyga tzw. mechanizm dziedziczenia oraz specyficzność selektorów CSS. Który styl CSS ma najwyższy priorytet? Najwyższy priorytet ma styl zdefiniowany w sposób inline, czyli bezpośrednio w elemencie HTML za pomocą atrybutu style. Na przykład: <p style="color: red">Tekst czerwony</p>. Styl zdefiniowany w ten sposób ma pierwszeństwo nad stylami wewnętrznymi (osadzonymi) i zewnętrznymi.
- Selektory elementów CSS / Reguły stylów
...center, justify. Przypisanie do niej np. wartości koloru nie miałoby sensu. W MSIE 8.0 i starszych jeden plik arkusza CSS może zawierać tylko 4095 selektorów, przy czym w listach każdy selektor liczy się osobno - następne deklaracje zostaną pominięte! W przypadku przekroczenia tej granicy, jedynym rozwiązaniem jest podział arkusza CSS na kilka osobnych plików, ale nie więcej niż 31. Przykład /* Pierwsza reguła: */ p { color: red } /* Druga reguła: */ p b { color: red; background-color...
- Kolory CSS / Sposoby definiowania kolorów CSS
...0). Wartość ta przydaje się, kiedy chcemy odwołać wcześniejsze ustawienie koloru, który został odziedziczony albo przypisany np. przy pomocy klasy selektorów. W takiej sytuacji proste usunięcie wcześniejszej deklaracji koloru może być niemożliwe albo utrudnione. currentColor - kolor taki sam jak ma tekst aktualnego elementu (czyli wartość cechy color ustawionej bezpośrednio albo odziedziczonej). Jest to bardzo wygodny sposób na przypisanie np. identycznego koloru obramowania co znajdujący...