Основы работы с CSS
         

Анкерные псевдо-классы


Различные ссылки или ссылки, на которые указывает курсор мыши, можно выводить различным образом в поддерживающих CSS браузерах:

a:link {color: #808080 } /* непосещенная ссылка*/ a:visited {color: #008000 } /* посещенная ссылка */ a:hover {color: #008080 } /* курсор мыши указывает на ссылку*/ a:active {color: #00FF00 } /* выбранная ссылка*/

Примечания:

    Чтобы иметь эффект, a:hover ДОЛЖЕН следовать в определении CSS после a:link и a:visited!!Чтобы иметь эффект, a:active ДОЛЖЕН следовать в определении CSS после a:hover!!Имена псевдо-классов не зависят от регистра символов.



CSS2 - Псевдо-класс :first-child


Псевдо-класс :first-child соответствует определенному элементу, который является первым потомком другого элемента.

Примеры:

    В данном примере селектор соответствует любому элементу h1, который является первым потомком элемента div, и делает отступ для первой строки первого параграфа внутри элемента div: div > h1:first-child { text-indent:50px }

    Этот селектор будет соответствовать первому параграфу внутри div в следующем коде:

    <div> <h1> Первый заголовок в div. Имеет отступ первой строки. </h1> <h1> Второй заголовок в div. Не имеет отступа. </h1> </div>

    но он не будет соответствовать параграфу в следующем коде HTML:

    <div> <p> Параграф внутри div. </p> <h1>Первый заголовок в div. Не имеет отступа. </h1> </div>В данном примере селектор соответствует любому элементу strong, который является первым потомком элемента div, и задает font-style как italic для первого strong внутри элемента div: div:first-child strong { font-style: italic }

    В следующем коде HTML strong является первым потомком элемента div :

    <div>Изучайте -- <strong>язык программирования</strong> C++.</div>В данном примере селектор соответствует любому элементу b, который является первым потомком любого элемента, и задает text-decoration как none: b:first-child { text-decoration: none }

    В следующем примере первый элемент b в коде HTML ниже является первым потомком параграфа и не будет подчеркиваться. Но второй элемент a в параграфе не является первым потомком параграфа и будет подчеркнут:

    <p> Посетите <b>www.intuit.ru</b> и выучите CSS! Посетите <b>www.intuit.ru</b> и выучите HTML! </p>



CSS2 - Псевдо-класс :lang


Данный псевдокласс позволяет определить специальные правила для различных языков. В следующем примере класс :lang определяет тип кавычек для элементов b с атрибутом lang со значением "fr":

<html> <head> <style type="text/css"> b:lang(fr) { quotes: "'" "'" } </style> </head> <body> <p>Просто текст <b lang="fr">Выделенный текст</b> Остальной текст</p> </body> </html>



В примере показано, как выделить




    В примере показано, как выделить гиперссылку в документе цветом. <html> <head>
    <style type="text/css"> a:link {color: #808080} a:visited {color: #FFFF00} a:hover {color: #00FF00} a:active {color: #0000FF} </style>
    </head>
    <body>
    <p><a href="index.php">This is a link</a></p> <ol><b>Примечание:</b> <li><i>a:hover ДОЛЖЕН следовать в определении CSS после <b>a:link</b> и <b>a: visited!!</b></i></li> <li><i>a:active ДОЛЖЕН следовать в определении CSS после <b>a:hover!!</b></i></li> </ol>
    </body> </html>В примере показано, как определить для гиперссылки другой стиль. <html> <head> <style type="text/css"> a.color:link {color: #808000} a.color:visited {color: #008080} a.color:hover {color: #C0C0C0}
    a.size:link {color: #808000} a.size:visited {color: #008080} a.size:hover {font-size: 250%}
    a.background:link {color: #808000} a.background:visited {color: #008080} a.background:hover {background: #C0C0C0}
    a.family:link {color: #808000} a.family:visited {color: #008080} a.family:hover {font-family: sans-serif}
    a.line:link {color: #808000; text-decoration: none} a.line:visited {color: #008080; text-decoration: none} a.line:hover {text-decoration: line-through} </style> </head>
    <body> <p>Наведите курсор мыши на ссылки.</p> <p><b><a class="line" href="index.php">Меняем оформление текста у ссылки</a></b></p> <p><b><a class="size" href="index.php">Меняем размер у ссылки</a></b></p> <p><b><a class="background" href="index.php">Меняем цвет фона у ссылки</a></b></p> <p><b><a class="family" href="index.php">Меняем семейство шрифта у ссылки</a></b></p> <p><b><a class="color" href="index.php">Меняем цвет у ссылки</a></b></p> </body>
    </html>В примере показано, как можно использовать псевдо-класс :first-child. <html> <head> <style type="text/css"> a:first-child { text-decoration:underline } </style> </head>
    <body> <p>Посетите <a href="http://www.intuit.ru">Intuit</a> там много бесплатных курсов</p> <p>Посетите <a href="http://www.intuit.ru">Intuit</a> там есть бесплатные учебные программы</p> </body>
    </html>В примере показано, как можно использовать псевдо-класса :lang. <html> <head> <style type="text/css"> b:lang(fr) { quotes: "'" "'" } </style> </head>
    <body> <p>Просто текст<b lang="fr">Выделенные текст:</b> Сам текст.</p> </body>
    </html>


Псевдо-классы


Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.

Псевдо-классНазначениеIEFNW3C
:activeДобавляет специальный стиль активированному элементу4181
:focusДобавляет специальный стиль элементу, когда элемент находится в фокусе---2
:hoverДобавляет специальный стиль элементу, когда указатель мыши находится над элементом4171
:linkДобавляет специальный стиль непосещенной ссылке 3141
:visitedДобавляет специальный стиль посещенной ссылке 3141
:first-childДобавляет специальный стиль элементу, который является первым потомком некоторого другого элемента172
:langПозволяет автору определить используемый в заданном элементе язык 182



Псевдо-классы и классы CSS


Псевдо-классы можно объединять с классами CSS:

a.silver:visited {color: #C0C0C0 }

<a class="silver" href="index.php">Silver</a>

Если ссылка в приведенном выше примере была посещена, она будет выводиться серебряным цветом.



Синтаксис псевдо-классов:


selector:pseudo-class {property: value}

Классы CSS также можно использовать с псевдо-классами:

selector.class:pseudo-class {property: value}