przykład - Kurs HTML i CSS
XHTML / Różnice między HTML 4 a XHTML 1.0...W przypadku konfliktów ważniejsza będzie wartość id. Wartości atrybutów domyślnych są zawsze definiowane małymi literami. Na przykład jeśli nie podamy jawnie atrybutu type dla znacznika input, zostanie dla niego przyjęta wartość type="text", a nie type="TEXT". Znaki specjalne (tzw. encje) w języku HTML można zapisywać używając wartości szesnastkowych (HEX), np.: &#Xnn; lub &#xnn;, gdzie "nn" to liczba szesnastkowa. XHTML pozwala tylko na drugą wersję, tzn. &#xnn...
Szablon strony na DIV-ach / Responsywny szablon...to lista najczęściej używanych szerokości ekranu, przy których zachodzą istotne zmiany w szablonie naszej strony. Istotną zmianą może być na przykład: Zmiana typu szablonu ze stałego (który zwykle może być bardziej przydatny na dużych ekranach panoramicznych) na płynny (laptopy i większe tablety) Ułożenie menu i treści w jednej kolumnie (smartfony i mniejsze tablety bądź czytniki e-booków) oraz być może zupełne ukrycie niektórych elementów strony, które mogą być mało przydatne na...
- Wstawianie stylów CSS / Wewnętrzny arkusz stylów <style>
...elementy które pragniemy poddać formatowaniu, występują wielokrotnie na stronie i wszystkim chcemy nadać takie same atrybuty (inne niż domyślne). Na przykład chcemy, aby wszystkie wykazy miały automatycznie kolor niebieski. Wystarczy wpisać odpowiednią deklarację stylów w arkuszu (w treści nagłówkowej) i nie trzeba już nic dopisywać przy samym elemencie. Komentarze w arkuszu stylów pisze się używając znaków: /* (otworzenie komentarza) oraz */ (zamknięcie komentarza), np.: /*12345*/. Wszystko...
- Selektory elementów CSS / Grupowanie selektorów
selektor1, selektor2, selektor3... { cecha: wartość } gdzie wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach [zobacz także: Wstawianie stylów]. Taka deklaracja stylu pozwala nadać te same wartości atrybutów kilku różnym selektorom jednocześnie (bez względu na ich położenie w hierarchii drzewa dokumentu). Oznacza to, że zamiast wpisywać kilka razy te same deklaracje, wystarczy wymienić dowolną liczbę selektorów po przecinku i jednorazowo...
- Selektory atrybutów CSS / Prosty selektor atrybutu
...określony atrybut (przy czym jego wartość nie ma znaczenia). Pozwala nadać konkretne cechy elementom, które posiadają właśnie taki atrybut. Na przykład znacznik może być automatycznie napisany czcionką koloru czerwonego, jeśli ma nadany atrybut title="..." (który powoduje wyświetlenie tekstu informacji, po wskazaniu myszką). W tym przypadku nie ma znaczenia jaką wartość ma atrybut, ważne jest jedynie, aby został on nadany. UWAGA! Polecenie nie interpretuje MSIE 6 (od wersji 7 wszystko...
- Selektory atrybutów CSS / Selektor atrybutu o określonej wartości
...nadany atrybut, który ma określoną wartość. Pozwala nadać konkretne cechy elementom, które posiadają atrybut, właśnie z taką dokładnie wartością. Na przykład znacznik może być automatycznie napisany czcionką koloru czerwonego, jeśli ma nadany atrybut title="...", o wartości podanej w deklaracji stylu. Znaczniki z atrybutem title="..." o innej wartości nie będą już czerwone. UWAGA! Polecenie nie interpretuje MSIE 6 (od wersji 7 wszystko jest już w porządku). W języku XHTML wszystkie nazwy...
- Selektory atrybutów CSS / Selektor atrybutu zawierającego określony wyraz
...atrybut, w którego wartości występuje podany wyraz (oprócz niego mogą występować tam również inne wyrazy). Wyraz nie może zawierać spacji! Na przykład deklaracja title~="jest" kojarzy atrybuty: title="To jest akapit" lub title="To jest pogrubienie" itd. UWAGA! Polecenie nie interpretuje MSIE 6 (od wersji 7 wszystko jest już w porządku). W języku XHTML wszystkie nazwy atrybutów w selektorach muszą być pisane małymi literami. Przykład Jeżeli w arkuszu stylów strony została umieszczona...
- Selektory atrybutów CSS / Selektor atrybutu zawierającego łączniki
...(myślnikami). Reguła taka pozwala nadać konkretne cechy elementom, posiadającym atrybut, którego wartość rozpoczyna się od podanego wyrazu. Na przykład składnia lang|="en" kojarzy atrybuty: lang="en-us" lub lang="en-au", jak również lang="en". Selektor taki został przewidziany do obsługi języków (atrybut LANG), których skróty zawierają często łączniki (np. "en-US" to język angielski w Stanach Zjednoczonych, "en-AU" to język angielski w Australii). UWAGA! Polecenie nie interpretuje...
- Selektory pseudoelementów CSS / Pierwsza litera :first-letter
...5, wszystkie litery w powyższym akapicie będą tego samego koloru (nie zobaczysz efektu). Natomiast w MSIE 6 wszystko jest w porządku. Inny ciekawy przykład: p:first-letter { color: red; font-family: 'Times New Roman', serif; font-size: 300%; float: left } W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W...
- Selektory pseudoklas CSS / Wskazanie myszką :hover
...hover Jak zmienić kolor linku po najechaniu CSS? Aby zmienić kolor linku po najechaniu myszką, można wykorzystać pseudoklasę :hover w CSS. Na przykład: a:hover { color: green; }. To spowoduje, że kolor linku zmieni się na zielony, gdy użytkownik najedzie na niego myszką. Co znaczy :HOVER w CSS? :hover to pseudoklasa w CSS, która jest aktywowana, gdy użytkownik najedzie na element myszką. Można ją wykorzystać do definiowania stylów dla efektów wizualnych podczas interakcji z...