formatowanie - Kurs HTML i CSS
Selektory elementów CSS / Selektor uniwersalny...pozwala ustalić określone atrybuty dla wszystkich elementów strony, a więc dla różnych selektorów typu. Możemy za pomocą tej komendy nadać to samo formatowanie dla wszystkich elementów na całej stronie, niezależnie od ich typu (p, h1, li itd.). Niestety jego działanie nie zawsze jest jednoznaczne, dlatego dużo bezpieczniej jest używać selektora typu dla elementu body, chyba że zastosujemy to polecenie w odniesieniu do klasy selektorów. Jeśli selektor uniwersalny chcemy zastosować do...
- Selektory elementów CSS / Ogólny selektor braci
...innego typu niż bracia wyszczególnieni w regule stylów. Ponadto warto zauważyć, że inaczej niż dla podstawowego selektora braci, w tym przypadku formatowanie otrzymują również wszystkie następne znaczniki typu brat2, a nie tylko pierwszy z nich. Właśnie dlatego w powyższym przykładzie drugie pogrubienie również jest czerwone.
- Selektory atrybutów CSS / Prosty selektor atrybutu
...Explorera 6, żaden akapit nie będzie czerwony. Dozwolone jest podanie kilku atrybutów. Wtedy element musi posiadać wszystkie z nich, aby otrzymał formatowanie: p[title][lang] { color: red } To jest akapit z atrybutem TITLE oraz LANG (powinien być czerwony). To jest akapit tylko z atrybutem TITLE (nie powinien być czerwony).
- Selektory atrybutów CSS / Selektor atrybutu o określonej wartości
...jest podanie kilku atrybutów. Wtedy element musi posiadać wszystkie z nich i każdy musi mieć przypisaną wyszczególnioną wartość, aby otrzymał formatowanie: p[title="To jest akapit"][lang="pl"] { color: red } To jest akapit, któremu został nadany atrybut title="To jest akapit" oraz lang="pl" (powinien być czerwony). To jest akapit, któremu został nadany atrybut title="Akapit" oraz lang="pl" (nie powinien być czerwony). Inne przydatne zastosowanie tego selektora to np. zmiana sposobu...
- Selektory atrybutów CSS / Selektor atrybutu zawierającego określony wyraz
...jest podanie kilku atrybutów lub/i wyrazów. Wtedy element musi posiadać wszystkie z nich i każdy musi zawierać wyszczególniony wyraz, aby otrzymał formatowanie: p[title~="jest"][lang~="pl"] { color: red } To jest akapit, któremu został nadany atrybut title="To jest akapit" i lang="pl" (powinien być czerwony). To jest akapit, któremu został nadany atrybut title="Akapit" i lang="pl" (nie powinien być czerwony). p[title~="jest"][title~="akapit"] { color: red } To jest akapit, któremu...
- Selektory atrybutów CSS / Łączenie selektorów atrybutów
...można łączyć, podając je w regule stylów kolejno po sobie (bez żadnych odstępów). W takim przypadku, aby wybrany element otrzymał określone formatowanie, musi posiadać wszystkie z wyszczególnionych atrybutów z ewentualnymi przypisanymi określonymi wartościami. Przykład Przypisujemy czerwony kolor czcionki akapitom, które posiadają atrybut class o dowolnej wartości, dir="ltr", title z wyrazem akapit oraz lang rozpoczynający się od pl z ewentualnymi łącznikami...
- Selektory pseudoklas CSS / Zogniskowanie :focus
selektor:focus { cecha: wartość } Selektor wskazuje jakiemu elementowi nadajemy formatowanie (dla selektora uniwersalnego są to wszystkie elementy) [zobacz: Wstawianie stylów]. 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 elementu (np. odsyłacza lub pola formularza), który przyjmuje w danej chwili zogniskowanie. Przykładowo dotyczy to odsyłacza...
- Selektory pseudoklas CSS / Pusty element :empty
...INPUT), ale również gdy po prostu nie wstawimy do znacznika żadnej treści. Dzięki opisywanemu tutaj selektorowi można nadać takim elementom odrębne formatowanie. Wstawianie pustych znaczników do kodu źródłowego nie ma wielkiego sensu semantycznego, ponieważ ich przeznaczeniem jest oznaczanie treści. Przykład :empty Po wpisaniu w arkuszu stylów: p:empty { background-color: red; width: 100%; height: 1em } a w dowolnym miejscu strony: <p></p> <p> </p> <p><b></b></p> <p>To jest akapit</p>...
AutoIFRAME / Dlaczego to nie działa?...ma znaczenie!) itp.? Czy zawartość wszystkich skryptów została skopiowana w trybie prostym? Niektóre edytory razem z kopiowanym kodem wklejają formatowanie tekstu. Aby temu zapobiec, wklej najpierw kod do programu Notatnik, a następnie zaznacz i ponownie skopiuj. Czy podstrony nie znajdują się przypadkiem w innej domenie (mają inny początek adresu po http://...) niż strona główna, na której znajduje się ramka <iframe>...</iframe>? Może to mieć miejsce, jeżeli np. korzystasz z darmowych...
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
...0; padding: 0; } ul li { background: url(marker.gif) no-repeat left top; padding-left: 20px; } Pierwsza z reguł stylów powyżej usuwa domyślne formatowanie wykazu oraz jego punktów. Trzeba tutaj nadmienić, że z uwagi na różnice w interpretacji nie wszystkie z wymienionych poleceń formatujących w tej deklaracji jest wymagana we wszystkich przeglądarkach, jednak tylko taki zestaw daje prawie pewność, że otrzymamy to, o co nam chodziło. Dlatego nie radzę niczego pomijać! Druga reguła...