visited - Kurs HTML i CSS
Selektory pseudoklas CSS / Odsyłacz odwiedzony :visiteda:visited { cecha: wartość } gdzie litera "a" na początku deklaracji, jest selektorem odsyłacza [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 wszystkich odsyłaczy, które zostały już odwiedzone przez użytkownika. Ponieważ pseudoklasa :visited odnosi się tylko do odsyłaczy, w regule stylu można pominąć selektor elementu a...
- Menu w CSS / Poziome menu
...Tło Marginesy Obramowanie ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul li { float: left; } ul a:link, ul a:visited { text-decoration: none; display: block; width: 80px; text-align: center; background-color: #ccc; color: #000; border: 2px outset #ccc; padding: 5px; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; } Odnośniki zostały wyświetlone blokowo, aby można było ustalić jednakową szerokość wszystkich przycisków...
- Oprawa graficzna / "Duszki" CSS
...normal; font-size: 12px; } ul li { width: 200px; border-width: 1px; border-style: solid; border-color: #dfe #365 #365 #dfe; } ul a:link, ul a:visited { display: block; width: 169px; text-decoration: none; padding: 5px 10px 5px 20px; font-weight: bold; background: #bfb url(obrazek.gif) no-repeat -16px -25px; color: #365; border-left: 1px solid #797;} ul a:hover { background-color: #797; background-position: -16px -49px; color: #eff; } Rezultat: Czcionki Tekst Tło...
- Menu w CSS / Pionowe menu
...Tło Marginesy Obramowanie ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul { width: 200px; } ul a:link, ul a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; } I jak Ci się podoba? A to wszystko bez jakiejkolwiek zmiany wcześniej ustalonego kodu HTML! Krótkie wyjaśnienie użytych deklaracji CSS...
- Menu w CSS / Menu z nagłówkami
...dt { background-color: #ccc; color: #000; padding: 7px; font-weight: bold; font-size: larger; text-align: center; } dl a:link, dl a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } dl a:hover { border-style: inset; padding: 7px 3px 3px 7px; } CSS Czcionki Tekst Tło Marginesy Obramowanie dl, dt, dd { display: block; margin: 0; padding: 0; } dl...
- Selektory CSS
...bądź jedynym bratem typu E Pseudoklasy typu 3 E:empty element E, który nie ma dzieci ani nie zawiera tekstu Pusty element 3 E:link E:visited element E, który jest kotwicą hiperlinku (odsyłaczem), której cel (strona docelowa) jeszcze nie został odwiedzony (:link) lub został już odwiedzony (:visited) Odsyłacz podstawowy Odsyłacz odwiedzony 1 E:active E:hover E:focus element E podczas pewnych akcji użytkownika (:active - aktywacja, :hover - wskazanie, :focus...
Komendy HTML 4.01 / Elementy zdeprecjonowane...BODY CSS: color type LI, OL, UL CSS: list-style-type value LI CSS: counter-reset version HTML <!DOCTYPE...> vlink BODY CSS: :visited vspace APPLET, IMG, OBJECT CSS: margin-top, margin-bottom width APPLET OBJECT width HR, PRE, TD, TH CSS: width
- Selektory pseudoklas CSS / Co to są pseudoklasy CSS?
...go myszką przez użytkownika. Wszystkie pseudoklasy można podzielić w następujący sposób: Pseudoklasy dynamiczne Pseudoklasy linków: :link, :visited Pseudoklasy akcji użytkownika: :active, :hover, :focus Pseudoklasa etykiety: :target Pseudoklasa języka: :lang() Pseudoklasy interfejsu użytkownika: :enabled, :disabled :checked Pseudoklasy strukturalne: :root :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type() :first-child :last-child :only-child...
- Dobre praktyki / Przykazania webmastera
...widzenia definiowanych stylów. Jeśli wygląd linków odwiedzonych nie różni się od nieodwiedzonych, to w ogóle nie używaj pseudoklas :link ani :visited (tylko po prostu selektora a), ponieważ niepotrzebnie wydłuża to zapis, a poza tym często pociąga za sobą konieczność wpisywania ich potem w wielu innych miejscach arkusza CSS. Jeśli już używasz tych pseudoklas, wstawiaj je we właściwej kolejności. Minimalizuj liczbę identyfikatorów i klas CSS Pozwoli to na łatwiejsze zarządzanie...
Aktualizacja / System newsów...double, groove, ridge, inset, outset */ border-color: gray; /* kolor obramowania */ font-weight: bold; } .news dt, .news dt a:link, .news dt a:visited { background: silver; /* tło tytułu */ color: #505050; /* kolor tytułu */ text-decoration: none; } /* Treść */ .news dd { background: white; /* tło */ color: black; /* kolor tekstu */ font-size: 12px; /* rozmiar czcionki */ border-width: 1px; /* grubość obramowania */ border-style: solid; /* styl obramowania: solid...