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

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0+	2.0+	8.0+	3.1+	1.0+	2.1+	2.0+

Краткая информация

Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/selector.html#lang

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через атрибут charset тега <meta>. В XML для этой цели применяется xml:lang.

С помощью псевдокласса :lang можно задавать определенные настройки, характерные для разных языков, например, вид кавычек в цитатах.

Существуют распространённые сокращения, например, ru - русский, en - английский, de - немецкий, moi - Ваш собственный или любой другой. То есть, можно задать любое сокращение, которое будет определено браузером, сопоставимо идентификатору. Сокращения устанавливаются в скобках. Псевдокласс применим ко всем элементам, создан в версии CSS2 и проходит валидацию согласно версии CSS3.

Синтаксис

элемент:lang(<язык>) { ... }

Значения

В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий; fr — французский; it — итальянский и др.

Пример

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>lang</title>
 <style>
 p {
 font-size: 1.5em; /* Размер текста */ 
 }
 q:lang(de) {
 quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */ 
 }
 q:lang(en) {
 quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */ 
 }
 q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */ 
 quotes: "\00AB" "\00BB"; 
 }
 </style>
 </head>
 <body>
 <p>Цитата на французском языке: <q lang="fr">Ce que femme veut, Dieu le veut</q>.</p>
 <p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
 <p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>
 </body>
</html>

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

Результат примера

Пример 2

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Псевдокласс :lang</title>
<style type="text/css">
<!--
p#one {
font-size:18px;
color:red;
}
p:lang(ru) {
font-size:16px;
color:grey;
}
p:lang(en) {
font-size:16px;
color:darkslategray;
}
p:lang(jargon) {
font-size:16px;
color:green;
}
-->
</style>
</head>
<body>
<p id="one">Вот одно выражение выделенное цветом для каждого языка</p>
<p lang="ru">Иди погуляй</p>
<p lang="en">Go take a walk</p>
<p lang="jargon">Тусуйся на стороне</p>
</body>
</html>

Результат примера 2.

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Псевдоклассы | Добавил: evkuriy (07.07.2013)

Просмотров: 505 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]