selektorów - Kurs HTML i CSS
Tryb Quirks / X-UA-Compatible...Własność visibility - uzupełniona obsługa wartości: collapse Własność white-space - uzupełniona obsługa wartości: pre-line, pre-wrap Obsługa selektorów pseudoelementów: :after, :before Obsługa selektorów pseudoklas: :focus, :lang(...) Dodana pełna obsługa własności: border-spacing, caption-side, content, counter-increment, counter-reset, empty-cells, orphans, outline, outline-color, outline-style, outline-width, page-break-inside, quotes, widows Źródło: CSS Improvements in Internet...
- 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ą...
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...
- 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...
- 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.
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...Uczeń używa paddingów, ramek i marginesów. Uczeń stylizuje tło obrazkiem. Uczeń modyfikuje wygląd odsyłaczy w interakcji. Materiały Klasy selektorów CSS Ramki z tekstem CSS Marginesy strony CSS Tapeta CSS Kolor odsyłaczy CSS Przebieg 5 min - Powtórka z poprzedniej lekcji Przypomnienie struktury CSS i pliku *.css 10 min - Klasy CSS i ich zastosowanie Różnica między klasą a selektorem tagu. Tworzenie klasy .ramka, .podpis, .naglowek. Przypisywanie klas do elementów...
- 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...