przykład - Kurs HTML i CSS
HTML5 / Osadzenie kodu HTML w ramce lokalnej <iframe srcdoc>(interpretuje: Firefox 25, Opera 15, Chrome 20) Z użyciem apostrofu (przydatne kiedy wartość zawiera cudzysłowy): <iframe srcdoc='kod'></iframe> Z użyciem cudzysłowu (przydatne kiedy wartość zawiera apostrofy): <iframe srcdoc="kod"></iframe> kod Dowolny tekst ze znacznikami HTML. Może on składać się z wielu linijek. Dzięki atrybutowi srcdoc='...' do ramki lokalnej nie musimy wczytywać osobnego pliku HTML za pomocą atrybutu src="...", ale możemy wprost podać kod HTML, który się w...
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 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. W języku XHTML wszystkie nazwy atrybutów w selektorach muszą być pisane małymi literami. Ograniczenia tego nie posiada język HTML. Przykład Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p[title~="jest"]...
- 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. W języku XHTML wszystkie nazwy atrybutów w selektorach muszą być pisane małymi literami. Ograniczenia tego nie posiada...
- 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). W języku XHTML wszystkie nazwy...
- Selektory pseudoelementów CSS / Pierwsza litera :first-letter
...następująca reguła: p:first-letter { color: red } to pierwsza litera każdego akapitu będzie mieć czerwony kolor: To jest akapit. 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...
- Selektory pseudoklas CSS / Pierwsze dziecko :first-child
...czerwone), ale drugie nie pierwsze dziecko. To jest akapit, a to pochylenie i pogrubienie (nie powinno być czerwone), wewnątrz pochylenia. Inny przykład: p:first-child b { color: red } Odpowiednie cechy otrzyma znacznik b, będący potomkiem elementu p, który z kolei jest czyimś pierwszym dzieckiem (nie ma znaczenia czyim), np.: <div> <p>To jest akapit (pierwsze dziecko) wewnątrz bloku, a to jest <i>pochylenie, wewnątrz którego znajduje się <b>pogrubienie (powinno być...