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

Думаю, в ходе обучения CSS Вы уже поняли, что все элементы можно определить как родительские или дочерние и что элемент родитель может содержать в себе несколько дочерних элементов, ну например:

<div>- блок родитель
<p></p> - первый дочерний элемент
<p></p> - второй дочерний элемент
</div>

Так вот псевдокласс first-child определят стиль первого дочернего элемента находящегося в родительском контейнере.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Псевдокласс first-child</title>
<style type="text/css">
div {
margin: 20px;
padding: 30px;
background-color: #c0e4ff;
border: 2px solid #008000
}
p {
color: #555;
background-color: #dcdcdc;
border: 2px solid #555
}
p:first-child {
color: #f00;
background-color: #c5ffa0;
border: 2px solid #008000
}
</style>
</head>
<body>
<div>
<p>первый дочерний параграф - он выделен псевдоклассом first-child</p>
<p>второй дочерний параграф</p>
<p>третий дочерний параграф</p>
</div>
<div>
<p>и здесь первый дочерний параграф выделен хотя блок родитель уже другой</p>
<p>второй дочерний параграф</p>
</div>
</body>
</html>

Смотреть пример

Обратите внимание на тот факт, что если бы в блоке родителе перед дочерними параграфами стоял любой другой тег, заголовок<h1> к примеру, то псевдокласс first-child уже не действовал бы к первому параграфу.. так как хоть параграф то он и первый, но элемент в блоке родителе уже второй.

Применяют данный псевдокласс в тех случаях , если требуется задать разный стиль для первого и последующих элементов, например сделать "буквицу"- одну единственную в начале документа или обозначить первый абзац текста на всех страницах сайта , выделить первый пункт в списках...и т.д.

Язык текста.

Псевдокласс lang определяет язык текста того или иного элемента или документа в целом.

Если Вы помните из курса HTML, язык документа определяют атрибуты: charset - кодировка документа и content -язык документа для тега <meta>.

<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<meta http-equiv="Content-Language" Content="ru">

Так вот для того чтобы определить язык отдельно взятого текстового блока используют псевдокласс lang() - в круглых скобках которого собственно и указывается язык.

Язык может быть:

  • ru - Русский
  • en - Английский
  • de - Немецкий
  • fr - Французский
  • it - Итальянский

Всё вместе пишется так:

span:lang(en) {font-style: italic}

 

- здесь мы указали, что текст взятый в контейнер <span> английский и что он должен отображаться курсивом.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Псевдокласс lang</title>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<meta http-equiv="Content-Language" Content="ru">
<style type="text/css">
p:lang(ru) {color: #00f;}
p:lang(en) {color: #f00;}
</style>
</head>
<body>
<p lang="ru">Русский текст выделен синим</p>
<p lang="en">English text is chosen red</p>
</body>
</html>

Смотреть пример

Обратите внимание, что в теге, в нашем случая параграфе, мы указываем с помощью атрибута lang используемый язык и его стиль: <p lang="en">текст</p> прописанный в блоке CSS.

Так же псевдокласс lang позволяет определять вид кавычек для цитат (тег <q>) с помощью значения quotes - кавычки. В России привычно использовать двойные кавычки, в других странах дела обстоят иначе.

Пишется так:

q:lang(en) {quotes: "\201C" "\201D"}

В фигурных скобках после значения quotes указывается юникод символа/ов или просто смвол/ы для открывающей и закрывающей кавычки.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Псевдокласс lang. Цитаты.</title>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<meta http-equiv="Content-Language" Content="ru">
<style type="text/css">
div {
color:#000;
font-size: 24px;
}
q:lang(en) {quotes: "\201C" "\201D"}
q:lang(de) {quotes: "\201E" "\201C"}
q:lang(fr) {quotes: "\00AB" "\00BB"}
q:lang(ru) {quotes: "ёклмн.." "..ёпрст"}
</style>
</head>
<body>
<div>
<p>Обратите внимание на вид кавычек для цитат:<p>
<q>Цитата по умолчанию</q><br>
<q lang="fr">Французская цитата</q><br>
<q lang="de">Немецкая цитата</q><br>
<q lang="en">Английская цитата</q><br>
<q lang="ru">Русская цитата</q><br>
</div>
</body>
</html>

Смотреть пример

Полезные советы:

· Псевдоклассы нельзя внедрять в HTML документ с помощью атрибута style. Можно только с помощью тега <style> в голове документа или внешнего CSS файла.

· Если селектор, какого либо псевдокласса, явно не указывать, а написать вот так, например:

:hover {color: #ff0}

- то это будет значить, что действие данного псевдокласса будет распространятся на все элементы документа.

· Браузер IE6 и ниже игнорирует практически все псевдоклассы.

Глава 16

Псевдоэлементы.

Псевдоэлементы - это особый вид свойств CSS, которые позволяют работать не над самим элементом, а над его отдельной частью.

Вот перечень всех псевдоэлеметов:

  • :first-letter - Стиль первой буквы текстового блока
  • :first-line - Стиль первой строки текстового блока
  • :after - Добавляет содержимое после элемента.
  • :before - Добавляет содержимое до элемента.
  • ::selection - Стиль выделенного пользователем текста.

Так же как и в случае с псевдоклассами, псевдоэлементы используются согласно следующего синтаксиса:

p:first-letter { color:#ff0000}

где:

p - селектор, к которому применяется псевдоэлемент.
:first-letter - после двоеточия собственно псевдоэлемент. *примечание
{color:#ff0000} - блок объявления стилей в фигурных скобках.

В данном случае мы указали, что первая буква всех параграфов будет красного цвета.

Ну что ж давайте пробежимся по перечисленным псевдоэлементам.








Дата добавления: 2016-02-16; просмотров: 600;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.01 сек.