Пример 15.3. Выделение строк таблицы
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>< html > < head > < meta charset="utf-8"> < title >Псевдоклассы</ title > < style > table { border-spacing: 0; } td { padding: 4px; } tr:hover { background: #fc0; /* Меняем цвет фона строки таблицы */ } </ style > </ head > < body > < table width="400" border="1"> < tr > < th ></ th > < th >Пики</ th > < th >Трефы</ th > < th >Бубны</ th > < th >Червы</ th > </ tr > < tr > < td >Чебурашка</ td > < td >5</ td >< td >2</ td >< td >4</ td >< td >2</ td > </ tr > < tr >
<td>Крокодил Гена</td>
<td>2</td><td>7</td><td>1</td><td>3</td>
</tr>
<tr>
<td>Шапокляк</td>
<td>5</td><td>4</td><td>3</td><td>1</td>
</tr>
<tr>
<td>Крыса Лариса</td>
<td>1</td><td>0</td><td>5</td><td>7</td>
</tr>
</table>
</body>
</html>
Результат примера показан ниже (рис. 15.3).
Pseudo klasės
Pseudo klasės sintaksė:
žymė:pseudo-klasė {savybė:reikšmė;}CSS klasės gali būti naudojamos kartu su pseudo klasėmis:
žymė.klasė:pseudo-klasė {savybė:reikšmė;}Nuorodos gali būti vaizduojamos kelias būdais:
a:link {color:#FF0000;} /* neaplankyta nuoroda */a:visited {color:#00FF00;} /* aplankyta nuoruoda */a:hover {color:#FF00FF;} /* pelės kursorius virš nuorodos */a:active {color:#0000FF;} /* pažymėta nuoroda */Pastaba: a:hover CSS apraše PRIVALO eiti po a:link ir a:visited, jei norite, kad jis būtų efektyvus!!
Pastaba: a:active CSS apraše PRIVALO eiti po a:hover, jei norite, kad jis būtų efektyvus!!
Pastaba: Pseudo klasių vardai yra ne case-sensitive.
Pseudo klasės ir CSS klasės
Pseudo klases ir kitas CSS klases galima naudoti drauge:
a.red:visited {color:#FF0000}Kitos naudingos pseudo klasės
|
|
|
Pastaba: Kad pseudo klasės veiktų teisingai ant IE būtinai nurodykite <!DOCTYPE>.
:first-child
Jei norite pažymėti pirmąjį elementą aibėje, naudokite :first-child pseudo klasę. Pavyzdyje parodytas pirmo paragrafo puslapyje išskyrimas:
p:first-child {color:blue}Sekančiame pavyzdyje yra išskiriama kiekviena pirma <i> žymė, kiekviename paragrafe:
p > i:first-child {font-weight:bold}:first-child
Išskirkime visas <i> žymes pirmame dokumento paragrafe.
p:first-child i {color:blue}:lang
Pseudo klasė :lang suteikia kitokį stilių elmentui turinčiam specifinį „lang“ atributą:
q:lang(no) {quotes: "~" "~"} /* stilius */ <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> /* html */ Some text ~A quote in a paragraph~ Some text. /* Atvaizdavimas */:focus
Naudokite pseudo klasę :focus, jei norite sufokusuotam elementui suteikti kitokį stilių:
input:focus {color:yellow}
Дата добавления: 2022-12-03; просмотров: 22; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!