Pseudoklasy odsyłaczy Łączenie pseudoklasy z klasą

Transkrypt

Pseudoklasy odsyłaczy Łączenie pseudoklasy z klasą
11. Pseudoklasy, pseudoelementy
Pseudoklasy odsyłaczy
Pseudoklasa
Opis
Przykład
a:link
wygląd hiperłącza
a:link
{
color: RGB(42,204,73);
}
a:hover
wygląd hiperłącza po wskazaniu myszą
a:hover
{
color: RGB(255,17,17);
}
a:active
wygląd hiperłącza po wskazaniu myszą i
przyciśnięciu przycisku myszy (ale przed
zwolnieniem tego klawisza)
a:active
{
color: RGB(255,255,0);
}
a:visited
wygląd hiperłącza po odwiedzeniu strony
a:visited
{
color: RGB(108,91,155);
text-decoration: none;
}
Łączenie pseudoklasy z klasą
przykład
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<a class="zielony" href="http://www.google.pl">http://www.google.pl</a><br>
<a class="czerwony" href="http://www.google.pl">http://www.google.pl</a>
</body>
</html>
Zawartość pliku o nazwie style.css
a.zielony:link
{
color: green;
}
a.czerwony:link
{
color: red;
}
a.czerwony:hover
{
text-decoration: none;
}
wynik w przeglądarce internetowej
opracował: Aleksander Piętowski
1/3
11. Pseudoklasy, pseudoelementy
Pseudoelementy
Pseudoelement
Opis
Przykład
:first-letter
wyróżnia pierwszą literę bloku tekstu
p:first-letter
{
font-size: 25pt;
}
:first-line
wyróżnia pierwszą linię bloku tekstu
p:first-line
{
font-size: 15pt;
}
przykład 1
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Dawno, dawno temu ...</p>
</body>
</html>
Zawartość pliku o nazwie style.css
p:first-letter
{
font-size: 25pt;
}
wynik w przeglądarce internetowej
opracował: Aleksander Piętowski
2/3
11. Pseudoklasy, pseudoelementy
przykład 2
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
Informatyka jest obszerną i podstawową dziedziną o zasadniczym znaczeniu dla społeczeństwa w dobie
rewolucji informacyjnej. Jej głównym celem jest badanie praw i ich zasięgu, praw rządzących
procesami informacyjnymi i ich realizacjami. Dodatkowym celem informatyki jest opracowywanie nowych
i skutecznych narzędzi intelektualnych, niezbędnych do rozwiązywania problemów przetwarzania
informacji we wszystkich dziedzinach aktywności ludzkiej. Informatyka już teraz ma znaczący wpływ na
rozwój innych nauk, na przemysł i nowoczesną technologię, na rolnictwo, ekonomię, kształcenie, a
także na poszerzanie granic pojmowania wszechświata.
</p>
</body>
</html>
Zawartość pliku o nazwie style.css
p:first-line
{
font-size: 15pt;
}
wynik w przeglądarce internetowej
opracował: Aleksander Piętowski
3/3

Podobne dokumenty