 |
Псевдокласс 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} - блок объявления стилей в фигурных скобках.
В данном случае мы указали, что первая буква всех параграфов будет красного цвета.
Ну что ж давайте пробежимся по перечисленным псевдоэлементам.
|
|
|
