formatowanie - Kurs HTML i CSS
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...
- Menu w CSS / Menu z nagłówkami
...Obramowanie Oczywiście takie menu może zawierać więcej niż jeden nagłówek. Aby mieć możliwość swobodnego stylizowania, usuwamy domyślne formatowanie listy: dl, dt, dd { display: block; margin: 0; padding: 0; } W efekcie uzyskamy: CSS Czcionki Tekst Tło Marginesy Obramowanie CSS Czcionki Tekst Tło Marginesy Obramowanie dl, dt, dd { display: block; margin: 0; padding: 0; } dl { width: 200px; } dt { background-color: #ccc; color: #000...