1.1. Для чего нужен CSS? В процессе изучения языка гипертекстовой разметки HTML мы уже упоминали о каскадных таблицах стилей, в частности отметили, что в то время как HTML используется главным образом для логической разметки html-документа, CSS отвечает за его внешний вид. Что же такое CSS?
CSS (от англ. Cascading Style Sheets) – каскадные таблицы стилей) – формальный язык, предназначенный для описания внешнего вида html-документов.
Говоря о внешнем виде документа имеются в виду фон, стили текста и других элементов, а также их взаимное расположение на странице. Так что, если HTML сообщает браузеру, что это за элемент, то CSS указывает ему, как оформить внешний вид этого элемента. Такое разделение весьма уместно и обладает рядом преимуществ, позволяющих более эффективно осуществлять разработку сайтов и веб-приложений. Действительно:
Кстати, чтобы иметь возможность не на словах, а на реальном примере убедиться в возможностях CSS, достаточно посетить известный проект 'CSS Zen Garden', на котором представлено более 200 вариантов совершенно разного дизайна на основе всего лишь одного html-документа (смотреть).
1.2. Синтаксис CSS. Каскадные таблицы стилей представляют собой набор правил, которыми описывается внешний вид html-элементов. Каждое из таких правил сообщает браузеру, к каким элементам он должен применить правило и каким образом он должен изменить внешний вид этих элементов. Например, если правило сообщает браузеру, что он должен отобразить текст абзацев красным цветом и полужирным начертанием, то на экране мы увидим соответствующее изменение (см. пример 1.1).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Синтаксис CSS</title> <!-- Для записи правила CSS воспользуемся элементом 'style' --> <style> /*-- Правило указывает браузеру, что он должен использовать для */ /* всех абзацев шрифт красного цвета полужирного начертания */ p{color: red; font-weight: bold;} </style> </head> <body> <p> Мой текст имеет красный цвет и полужирное начертание. </p> <p> Текст всех абзацев, а не только твой! </p> <div> Ко мне это правило не относится, ведь я же не абзац. </div> </body> </html>
Пример 1.1. Код страницы, содержащей правило CSS
Для размещения правила CSS мы использовали служебный элемент 'style'. При составлении правил используется следующий синтаксис: сперва записывают селектор, который указывает браузеру, на какие элементы будет распространяться данное правило (в нашем случае – это абзацы); затем в фигурных скобках располагают блок объявлений (стиль), состоящий из одного или нескольких объявлений применяемых css-свойств, каждое из которых представляет собой пару 'свойство: значение;', где имя свойства отделяется от значения двоеточием ':', а каждая пара отделяется друг от друга точкой с запятой ';'. Разрешается применять один и тот же стиль сразу для нескольких селекторов, в этом случае селекторы перечисляются через запятую.
Также, как и в HTML, браузеры игнорируют большинство пробельных символов в css-коде: символы табуляции, пробелы, разрывы строк, а также подряд идущие их комбинации. Это, опять же, дает нам возможность использовать их по своему усмотрению с целью придания коду удобочитаемого вида. В дальнейшем мы будем записывать код вертикально, применяя пробелы и разрывы строк, как это показано в примере 1.2.
/* Селекторы перечисляем через запятую */ /* и для читабельности кода отделяем пробелами. */ em, span, p{ color: red; /* Каждое объявление свойства */ font-weight: bold; /* делаем на новой строке. */ text-align: center; padding-right: 10px; /* Имя css-свойства отделяем от */ overflow: hidden; /* его значения еще и пробелом. */ font-style: italic; } /* Не ленитесь писать комментарии! */
Пример 1.2. Форматирование кода CSS
Согласитесь, если бы мы записали даже этот небольшой фрагмент кода CSS без пробелов и в одну строчку, читабельность кода значительно упала бы. Поэтому, как и в случае с кодом HTML, старайтесь придерживаться установленного порядка форматирования кода и, по возможности, снабжайте код комментариями. Комментарии в CSS начинаются с символов ' /* ' и заканчиваются символами ' */ '. Функции комментариев аналогичны таковым в HTML.
Что касается регистра символов, то в названиях свойств CSS, а также их значений разрешается использование символов любого регистра. Мы будем писать их в нижнем регистре. Однако следует иметь в виду, что в названиях классов, идентификаторов, шаблонов следует использовать тот же регистр символов, что и в соответствующих html-элементах.
1.3. Подключение CSS к html-документу. Для того, чтобы правила CSS могли быть применены к требуемым элементам html-документа, сперва необходимо связать их с этим документом и, в частности, с самим элементом. В процессе изучения языка HTML мы уже касались этого вопроса при изучении элементов 'style' и 'link', а также атрибутов style, class и id. Теперь же повторим все еще раз и в одном месте, но сперва рассмотрим подробнее понятие таблицы стилей.
Таблица стилей CSS – это свод правил CSS, собранных в одном месте. Если таблица стилей находится в отдельном файле, который обычно имеет расширение .css, то этот файл называют внешней таблицей стилей, а в случае нахождения таблицы внутри элемента 'style', ее называют внутренней таблицей стилей. Имеется возможность указывать свойства CSS в качестве значения атрибута style конкретного элемента разметки, в этом случае говорят о встроенном стиле CSS.
Подключение таблиц стилей к 'html'-документу показано в примере 1.3.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подключение таблиц стилей к документу</title> <!-- Подключаем к странице две внешние таблицы стилей --> <link href="http://localhost/test/css/style_1.css" rel="stylesheet"> <link href="http://localhost/test/css/style_2.css" rel="stylesheet"> <!-- Первая внутренняя таблица стилей (для всех устройств) --> <style type="text/css"> /* Подключаем еще одну внешнюю таблицу стилей */ @import "http://localhost/test/css/style_3.css"; p{ background-color: yellow; color: blue; } </style> <!-- Вторая внутренняя таблица стилей для распечатки документа --> <style type="text/css" media="print"> p{ background-color: white; color: black; } </style> </head> <body> <!-- А здесь использован встроенный стиль --> <p> К данному <span style="color: red; font-weight: bold;">абацу</span> применяется одна из встроенных таблиц стилей в зависимости от устройства вывода информации. </p> <!-- Подключили класс (правило) из какой-то внешней таблицы стилей --> <a href="http://localhost/test/index.html" class="my_links">Домой</a> </body> </html>
Пример 1.3. Подключение таблиц стилей CSS к html-документу
Внешняя таблица стилей представляет собой обычный текстовый файл, в котором перечисляются все необходимые правила CSS. Для того чтобы подключить ее к требуемому html-документу, следует указать путь к файлу в качестве значения атрибута href служебного элемента 'link'. Также можно воспользоваться правилом @import, которое должно располагаться внутри контейнера 'style' или во внешней таблице стилей. Оно служит для импорта содержимого css-файла, указанного в значении данного свойства, в текущую таблицу стилей. Путь к файлу, содержащему внешнюю таблицу стилей, в этом случае указывается в формате '@import url ("path");' (кавычки разрешается опускать) или же просто в кавычках после имени свойства: '@import "path";'. При этом все правило, как и положено, должно заканчиваться точкой с запятой ';' (см. пример 1.3). После подключения к документу, внешняя таблица стилей становится доступна в пределах всего документа.
Что касается внутренних таблиц стилей, то разрешается использовать несколько элементов 'style' для их размещения, но не стоит забывать, что сами элементы 'style' являются служебными и должны располагаться в пределах заголовка документа 'head'. Внутренние таблицы стилей доступны только в пределах данного документа.
Стоит отдельно отметить, что внутри элемента 'style' действует синтаксис CSS, поэтому применение тегов и комментариев HTML в этой части документа запрещены.
Также не рекомендуется частое использование встроенных стилей, хотя такая возможность и предусмотрена в HTML, т.к. при этом ухудшается читабельность кода, а также усложняется поиск и правка самих стилей. Кроме того, вместо них вполне можно воспользоваться атрибутами class или id, расположив необходимое правило CSS в таблице стилей.
1.4. Виды селекторов. Как было сказано немного выше, селекторы предназначены для нахождения (выборки) элементов, к которым браузеру следует применять данный стиль. Если одно и тоже правило используется для нескольких селекторов, то они отделяются друг от друга запятой. Селекторы играют важную роль и в JavaScript, где они используются для поиска нужных html-элементов.
Существует достаточное количество типов селекторов, которые в полной мере и довольно просто позволяют отыскать нужные элементы. К ним относятся:
*
{блок объявлений}
(см. пример 1.4);
/* Универсальный селектор выбирает все элементы */ *{ color: red; font-weight: bold; }
Пример 1.4. Использование универсального селектора
span
{блок объявлений}
или сразу для
нескольких видов элементов span, div, p
{блок объявлений}
(см. пример 1.5);
/* Селектор элементов выбирает все */ /* указанные через запятую элементы */ /* задаем шрифт указанных элементов*/ span, div, p{ color: red; font-weight: bold; } /* а для этих дополнительно еще и фон */ div, p{ background-color: grey; }
Пример 1.5. Использование селектора элементов
.my_class
{блок объявлений}
(см. пример 1.6);
/* Селектор классов выбирает элементы */ /* с соответствующим значением атрибута class, */ /* как, например,абзац
*/ .my_class{ color: red; font-weight: bold; }
Пример 1.6. Использование селектора классов
#my_id
{блок объявлений}
(см. пример 1.7);
/* Селектор идентификаторов выбирает элемент */ /* с соответствующим значением атрибута id, */ /* как, например,абзац
*/ #my_id{ color: red; font-weight: bold; } /* Его отличие от селектора классов в том, что он */ /* применяется только к одному элементу на странице. */
Пример 1.7. Использование селектора идентификаторов
[title]
{блок объявлений}
(см. пример 1.8);
[title="Очень большое животное."]
{блок объявлений}
;
[title^="Очень бол"]
{блок объявлений}
;
/* Селектор атрибутов выбирает элементы */ /* в соответствии с заданным шаблоном */ /* Этот стиль будет применен ко всем html-элементам, */ /* у которых задан атрибут title, например, */ /* к абзацуабзац
или */ /* к абзацуабзац
*/ [title]{ color: red; font-weight: bold; } /* Стиль будет применен ко всем html-элементам, */ /* у которых атрибут title="Очень большое животное", */ /* например, к абзацу */ /*абзац
*/ [title="Очень большое животное"]{ color: red; font-weight: bold; } /* А этот стиль будет применен ко всем html-элементам, */ /* у которых атрибут title начинается на подстроку */ /* "Очень бол", например, к абзацу */ /*абзац
*/ [title^="Очень бол"]{ color: red; font-weight: bold; }
Пример 1.8. Использование селектора атрибутов
[title$="тное."]
{блок объявлений}
(см. пример 1.9);
[title~="большое"]
{блок объявлений}
;
[title*="ивотн"]
{блок объявлений}
;
/* Селектор атрибутов выбирает элементы */ /* в соответствии с заданным шаблоном */ /* Этот стиль будет применен ко всем html-элементам, */ /* у которых атрибут title заканчинается на подстроку */ /* "тное.", например, к абзацу */ /*абзац
*/ [title$="тное."]{ color: red; font-weight: bold; } /* Стиль будет применен ко всем html-элементам, */ /* у которых атрибут title содержит подстроку */ /* "большое", отделенную пробелами от остального */ /* содержимого, например, к абзацу */ /*абзац
*/ [title~="большое"]{ color: red; font-weight: bold; } /* А этот стиль будет применен ко всем html-элементам, */ /* у которых атрибут title содержит подстроку */ /* "ивотн", например, к абзацу */ /*абзац
*/ [title*="ивотн"]{ color: red; font-weight: bold; }
Пример 1.9. Еще один вариант использования селектора атрибутов
div p span
{блок объявлений}
, то стиль будет применен ко всем
элементам 'span', которые находятся внутри абзацев, в свою очередь находящихся внутри элемента
'div' (см. пример 1.10);
Не нужно путать контекстный селектор, в котором вложенные элементы отделяются от своих родителей пробелами, и список селекторов, к которым нужно применить один и тот же стиль и которые отделяются друг от друга запятой.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Контекстный селектор</title> <style> /* Контекстный селектор выбирает элементы, */ /* вложенные в элементы-родители */ div p span{ color: red; font-weight: bold; } </style> </head> <body> <!-- Здесь span вложен в абзац, а тот в элемент 'div' --> <div> <p> <span>Мой текст имеет красный цвет и полужирное начертание</span>. </p> </div> <span> Ко мне это правило не относится, ведь я же вложен только в тело документа. </span> </body> </html>
p
>span
{блок объявлений}
(см. пример 1.11);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор дочерних элементов</title> <style> p>span{ color: orange; font-weight: bold; } </style> </head> <body> <p> <!-- Здесь 'span' является дочерним, т.к. находится --> <!-- непосредственно внутри элемента 'p'. --> <span>Мой текст имеет оранжевый цвет и полужирное начертание</span>. <br> <em> <span>Ко мне это правило не относится, т.к. мой родитель элемент 'em'.</span><br> </em> <!-- Здесь 'span' тоже является дочерним. --> <span>Зато я – тоже дочерний для 'p'.</span> </p> </body> </html>
p
+span
{блок объявлений}
, здесь будут выбраны все элементы
'span', которые идут после элементов 'p' (см. пример 1.12).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор соседних элементов</title> <style> br+em{ color: orange; } </style> </head> <body> <span>Текст...</span> <br> <!-- Элемент 'em' расположен после элемента 'br' --> <em>Курсив оранжевого цвета.</em> </body> </html>
Пример 1.12. Использование селектора соседних элементов
a
:link
{блок объявлений}
(см. пример 1.13);
a
:visited
{блок объявлений}
;
span
:active
,
a
:active
{блок объявлений}
;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор псевдоклассов</title> <style> span:active{ color: orange; } a:link{ color: violet; } a:visited{ color: red; } </style> </head> <body> <span>Надо мною нажата кнопка мыши, поэтому текст оранжевый. <br> Отпусти, и я опять стану прежним.</span><br> <br> <a href="http://www.belarusweb.net">Меня уже посещали.</a> <br><br><a href="http://www.belarusweb.net">А меня еще нет.</a> </body> </html>
Пример 1.13. Использование селектора псевдоклассов (пример №1)
span
:hover
{блок объявлений}
(см. пример 1.14);
span
:focus
{блок объявлений}
;
span
:target
{блок объявлений}
;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор псевдоклассов</title> <style> a:hover{ color: green; } span:focus{ color: red; } span:target{ color: orange; } </style> </head> <body> <span id="span_1">Мой текст становится оранжевым, когда ко мне был совершен переход по первой ссылке.</span><br><br> <span id="span_2">Мой текст становится оранжевым, когда ко мне был совершен переход по второй ссылке.</span><br><br> <a href="#span_1">Я первая ссылка. Я становлюсь зеленой при наведении на меня курсора мыши.</a><br><br> <a href="#span_2">Я вторая ссылка и тоже становлюсь зеленой при наведении на меня курсора мыши.</a><br><br> <br><span contenteditable>Когда я в фокусе, мой текст имеет красный цвет.</span> </body> </html>
Пример 1.14. Использование селектора псевдоклассов (пример №2)
button
:enabled
{блок объявлений}
(см. пример 1.15);
button
:disabled
{блок объявлений}
;
input
:checked
{блок объявлений}
;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор псевдоклассов</title> <style> button:enabled{ color: green; } button:disabled{ color: red; } /* Выбранное окошко выделим оранжевой рамкой */ input:checked{ outline: 3px; outline-color: orange; outline-style: solid; } </style> </head> <body> <form action="http://localhost/test/php/script_1.php" method="POST"> <label for="first">1 вариант</label> <input type="checkbox" checked name="first" value="1" id="first"> <label for="second">2 вариант</label> <input type="checkbox" name="second" value="2" id="second"> <label for="third">3 вариант</label> <input type="checkbox" name="third" value="3" id="third"><br><br> <!-- Цвет надписи будет красным, т.к. присутствует атрибут 'disabled' --> <button type="reset" disabled>Сброс</button> <!-- Цвет надписи будет зеленым, т.к. атрибут 'disabled' отсутствует --> <button type="submit">Отправить</button> </form> </body> </html>
Пример 1.15. Использование селектора псевдоклассов (пример №3)
p
:lang(en)
{блок объявлений}
(см. пример 1.16);
span
:empty
{блок объявлений}
;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор псевдоклассов</title> <style> p:lang(en){ color: green; } p:lang(ru){ color: red; } span:empty{ padding-left: 5px; /* Отступ слева */ background-color: orange; } </style> </head> <body> <p lang="en"> I am english text.<span></span> </p> <p lang="ru"> Я русский текст.<span></span> </p> </body> </html>
Пример 1.16. Использование селектора псевдоклассов (пример №4)
:root
{блок объявлений}
;
span
:nth-child(odd)
{блок объявлений}
, то в документе будут выбраны все дочерние элементы
'span', которые имеют нечетные порядковые номера (1,
3, 5 и т.д.) относительно своего родительского элемента
(см. пример 1.17);
span
:nth-child(even)
{блок объявлений}
, то в документе будут выбраны все дочерние элементы
'span', которые имеют четные порядковые номера (2,
4, 6 и т.д.) относительно своего родительского элемента;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор псевдоклассов</title> <!-- Выбираем дочерние по отношению к своему родителю (в данном --> <!-- случае к элементу 'p') элементы 'span' с нечетными --> <!-- порядковыми номерами: 1, 3, 5 и т.д. --> <style> span:nth-child(odd){ color: red; } </style> <!-- А здесь с четными порядковыми номерами: 2, 4, 6 и т.д. --> <style> span:nth-child(even){ color: blue; } </style> </head> <body> <p> <!-- Не забываем, что 'br' тоже является элементом --> <span>1 дочерний элемент.</span> <span>2 дочерний элемент.</span> <br><span>4 дочерний элемент.</span> <span>5 дочерний элемент.</span><br> <span>7 дочерний элемент. </span> <span>8 дочерний элемент.</span><br> <span>10 дочерний элемент.</span> </p> </body> </html>
Пример 1.17. Использование селектора псевдоклассов (пример №5)
span
:nth-child(3)
{блок объявлений}
, то в документе будут выбраны все дочерние элементы
'span', которые имеют порядковый номер 3 относительно
своего родительского элемента (см. пример 1.18);
span
:nth-child(3n+4)
{блок объявлений}
, то в документе будут выбраны все дочерние элементы
'span', которые имеют порядковые номера 4,
7, 10 и т.д. относительно своего родительского элемента;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор псевдоклассов</title> <!-- Выбираем дочерние по отношению к своему родителю (в данном --> <!-- случае к элементу 'body') элементы 'span' с порядковыми --> <!-- номерами 3*0+1=1, 3*1+1=4, 3*2+1=7 и т.д. --> <style> span:nth-child(3n+1){ color: red; } /* Стиль применяется к 3-му дочернему элементу 'span' */ span:nth-child(3){ color: blue; } </style> </head> <body> <!-- Не забываем, что 'br' тоже является элементом --> <span>1 дочерний элемент.</span><br> <span>3 дочерний элемент.</span><br> <span>5 дочерний элемент.</span><br> <span>7 дочерний элемент.</span><br> <span>9 дочерний элемент.</span><br> <span>11 дочерний элемент.</span><br> <span>13 дочерний элемент.</span><br> </body> </html>
Пример 1.18. Использование селектора псевдоклассов (пример №6)
span
:nth-last-child(3n+4)
{блок объявлений}
, то в документе будут выбраны все дочерние элементы
'span', которые имеют порядковые номера 4,
7, 10 и т.д., отсчитываемые относительно конца своего родительского
элемента (см. пример 1.19);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор псевдоклассов</title> <!-- Выбираем дочерние по отношению к своему родителю (в данном --> <!-- случае к элементу 'body') элементы 'span' с порядковыми --> <!-- номерами считая с конца 3*0+1=1, 3*1+1=4, 3*2+1=7 и т.д., --> <!-- что соответствует номерам 10, 7, 4, 1 начиная с начала --> <style> span:nth-last-child(3n+1){ color: red; } /* Стиль применяется к 3-му дочернему элементу 'span' */ /* с конца, т.е. к 8-му с начала */ span:nth-last-child(3){ color: blue; } </style> </head> <body> <!-- Не забываем, что 'br' тоже является элементом --> <span>1 дочерний элемент.</span> <span>2 дочерний элемент.</span> <br><span>4 дочерний элемент.</span> <span>5 дочерний элемент.</span><br> <span>7 дочерний элемент. </span> <span>8 дочерний элемент.</span><br> <span>10 дочерний элемент.</span> </body> </html>
Пример 1.19. Использование селектора псевдоклассов (пример №7)
span
:first-child
{блок объявлений}
, то в документе будут выбраны все первые дочерние элементы
'span' относительно своих родительских элементов (см. пример 1.20);
span
:last-child
{блок объявлений}
, то в документе будут выбраны все последние дочерние элементы
'span' относительно своих родительских элементов;
span
:only-child
{блок объявлений}
, то в документе будут выбраны все дочерние элементы
'span', которые являются единственными дочерними элементами для своего родительского элемента;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор псевдоклассов</title> <style> span:first-child{ color: orange; } span:last-child{ color: blue; } span:only-child{ color: red; } </style> </head> <body> <p> <span>Первый дочерний элемент.</span><br> <span>3 дочерний элемент.</span><br> <span>Последний дочерний элемент.</span> </p> <p> <span>Единственный дочерний элемент.</span> </p> </body> </html>
Пример 1.20. Использование селектора псевдоклассов (пример №8)
span
:nth-of-type(3n+4)
{блок объявлений}
, то в документе будут выбраны все дочерние элементы
'span', которые имеют порядковые номера 4,
7, 10 и т.д., но с учетом того, что другие дочерние элементы
как бы отсутствуют и в расчет не берутся (см. пример 1.21);
span
:nth-last-of-type(3n+1)
{блок объявлений}
, то в документе будут выбраны все дочерние элементы
'span', которые имеют порядковые номера 1,
4, 7 и т.д., отсчитываемые относительно конца своего родительского
элемента, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор псевдоклассов</title> <!-- Выбираем дочерние по отношению к своему родителю (в данном --> <!-- случае к элементу 'p') элементы 'span' с нечетными --> <!-- порядковыми номерами 1, 3, 5 и т.д., но при этом --> <!-- !!! не считаем остальные дочерние элементы !!! --> <style> span:nth-of-type(2n+1){ color: orange; } </style> <style> /* Применяем к первому дочернему 'em' с конца */ /* !!! не считаем остальные дочерние элементы !!! */ em:nth-last-of-type(1){ color: blue; } </style> </head> <body> <p> <!-- !!! Элементы 'br' и 'b' не считаем !!! --> <span>1 дочерний элемент 'span'.</span><br> <b>Меня не считаем, т.к. я не 'span'!</b><br> <span>2 дочерний элемент 'span'.</span><br> <span>3 дочерний элемент 'span'.</span> </p> <p> <em>1 дочерний элемент 'em'.</em><br> <em>2 дочерний элемент 'em'.</em><br> <b>Я – элемент 'b'.</b><br> </p> </body> </html>
Пример 1.21. Использование селектора псевдоклассов (пример №9)
span
:first-of-type
{блок объявлений}
, то в документе будут выбраны все первые дочерние элементы
'span' относительно своих родительских элементов, но с учетом того, что другие дочерние элементы
как бы отсутствуют и в расчет не берутся (см. пример 1.22);
span
:last-of-type
{блок объявлений}
, то в документе будут выбраны все последние дочерние элементы
'span' относительно своих родительских элементов, но с учетом того, что другие дочерние элементы
как бы отсутствуют и в расчет не берутся;
span
:only-of-type
{блок объявлений}
, то в документе будут выбраны все дочерние элементы
'span', которые являются единственными дочерними элементами данного вида для своего родительского
элемента;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор псевдоклассов</title> <!-- Выбираем первые и последние дочерние элементы 'span'.--> <!-- При этом не считаем остальные дочерние элементы. --> <style> span:first-of-type{ color: red; } span:last-of-type{ color: blue; } </style> <!-- Применяем только, если 'em' единственный дочерний --> <!-- элемент данного вида. При этом могут присутствовать --> <!-- дочерние элементы других видов. --> <style> em:only-of-type{ color: orange; } </style> </head> <body> <p> <!-- !!! Элементы 'br' и 'b' не считаем !!! --> <span>1 дочерний элемент 'span'.</span><br> <b>Меня не считаем, т.к. я не 'span'!</b><br> <span>2 дочерний элемент 'span'.</span><br> <span>3 дочерний элемент 'span'.</span> </p> <p> <em>Единственный дочерний элемент 'em'.</em><br> <b>Я – элемент 'b'.</b><br> </p> </body> </html>
Пример 1.22. Использование селектора псевдоклассов (пример №10)
span
:not([contenteditable])
{блок объявлений}
, то в документе будут выбраны все элементы
'span', у которых отсутствует атрибут contenteditable
(см. пример 1.23).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор псевдоклассов</title> <!-- Выбираем все элементы 'span', у которых --> <!-- не задан атрибут 'contenteditable'. --> <style> span:not([contenteditable]){ color: red; } </style> </head> <body> <span>Нередактируемый элемент 'span'.</span><br> <span contenteditable>Редактируемый элемент 'span'.</span><br> <span>Опять нередактируемый элемент 'span'.</span> </body> </html>
Пример 1.23. Использование селектора псевдоклассов (пример №11)
p
::first-letter
{блок объявлений}
, то данный стиль будет применен ко всем первым буквам абзацев
(см. пример 1.24);
p
::first-line
{блок объявлений}
, то данный стиль будет применен ко всем первым строкам абзацев;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор псевдоэлементов</title> <style> div::first-letter{ color: red; } p::first-line{ color: blue; } </style> </head> <body> <div> Первая буква блока будет красной.<br> Весь остальной текст будет обычным. </div> <p> А у меня будет синей вся первая строка.<br> А я не синяя, т.к. вторая. </p> </body> </html>
Пример 1.24. Использование селектора псевдоэлементов (пример №1)
p
::before
{блок объявлений}
(см. пример 1.25);
p
::after
{блок объявлений}
.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селектор псевдоэлементов</title> <style> /* Вставим перед элементами красные звездочки. */ div::before, p::before{ content: "***"; color: red; } /* Вставим после элементов синие звездочки. */ p::after, div::after{ content: "***"; color: blue; } </style> </head> <body> <div> Первая буква блока будет красной.<br> Весь остальной текст будет обычным. </div> <p> А у меня будет синей вся первая строка.<br> А я не синяя, т.к. вторая. </p> </body> </html>
Пример 1.25. Использование селектора псевдоэлементов (пример №2)
Очень важной особенностью перечисленных видов селекторов является возможность их комбинирования между собой практически в любых вариациях. Приведем
в качестве примеров несколько комбинаций селекторов разных видов:
p.my_class:hover
{блок объявлений}
– стиль будет применен ко всем параграфам, у которых задан атрибут
class="my_class", при наведении на них курсора мыши;
.list_1 a:visited
{блок объявлений}
– этот стиль будет применен ко всем посещенным ссылкам, которые находятся внутри
элементов с атрибутом class="list_1";
p[class*="back"]
>
strong
span[contenteditable]:focus
{блок объявлений}
– этот стиль будет применяться к каждому элементу
span, у которого имеется атрибут contenteditable, он находится в
данный момент в фокусе и является вложенным в элемент strong, который является дочерним по отношению к элементу
p, имеющему атрибут class, в значении которого присутствует подстрока
'back'. Следует обязательно попрактиковаться в составлении селекторов. Для этого можно воспользоваться нашим
разделом 'Задачник'.
Как видим, выбор селекторов с соответствующими шаблонами, псевдоклассами и псевдоэлементами в значительной мере может удовлетворить широкие потребности программистов. Однако это еще не все, ведь CSS непрерывно развивается, поэтому постепенно появляются не только новые псевдоклассы и псевдоэлементы, но и различные новые свойства, которые к тому же становятся все более функциональными и динамическими, что впрочем не делает CSS сложным для изучения и понимания. Более того, после завершения вводного параграфа, в котором описываются общие особенности и правила языка CSS, нам в основном останется только лишь перечислить и описать все свойства CSS и соответствующие им значения.
1.5. Наследование, каскадирование и приоритетность стилей CSS. Все свойства CSS делятся на те, которые наследуются элементами-потомками от своих элементов-предков, и те, которые не наследуются. Так, например, если для параграфа задать границу (сформировать рамку), то все вложенные в него элементы (элементы-потомки) не унаследуют это свойство CSS, поскольку в данном случае наследование не имеет положительного эффекта. Согласитесь, не совсем разумно было бы переопределять для каждого элемента-потомка унаследованные от абзаца-родителя границы. Но, если мы зададим для абзаца, например, синий цвет шрифта, то он будет унаследован всеми элементами потомками до тех пор, пока мы не переопределим его в случае необходимости для конкретного элемента, а это эффективнее, чем определять шрифт отдельно для каждого элемента-потомка. Посмотреть, какие стилевые свойства наследуются, а какие нет, можно на официальном сайте W3C (смотреть таблицу свойств CSS).
Каскадирование стилей – это встроенная особенность CSS, которая заключается в том, что если к элементу применяется сразу несколько стилей, то результирующий стиль будет сформирован из всех присутствующих в этих стилях видов свойств, при чем в случае наличия двух или более одинаковых свойств к элементу будет применено значение свойства с наибольшим в данной ситуации приоритетом.
Давайте для начала рассмотрим простейший случай, показанный в примере 1.26.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Наследование стилей</title> <style> p{ color: red; /* Цвет шрифта */ background-color: black; /* Фон */ } /* Для абзацев с атрибутом class="yellow_back" добавляем ширину и переопределяем фон */ p.yellow_back{ background-color: yellow; width: 200px; /* Ширина абзаца */ } </style> </head> <body> <p> Текст простого абзаца. </p> <p class="yellow_back"> Текст абзаца с классом. </p> <p class="yellow_back" style="color: blue; width: 400px;"> Переопределяем и цвет шрифта, и ширину абзаца. </p> </body> </html>
Пример 1.26. Простейший случай каскадности стилей CSS
Как видно из примера, к первому абзацу применяется только первый стиль из внутренней таблицы стилей, который задает ему черный фон и красный цвет шрифта. Ко второму абзацу применяется уже два стиля из внутренней таблицы стилей, поэтому результирующий стиль формируется следующим образом: сперва берутся все свойства стиля, у которого специфичность (конкретность) селектора больше (в нашем случае это второй стиль), затем добавляются отсутствующие в нем свойства из других, применяемых к данному элементу стилей, у которых специфичность (конкретность) селектора меньше (в нашем случае это первый стиль). Таким образом, для второго абзаца будет добавлена ширина, а фон будет переопределен с черного на желтый. К третьему абзацу применяется сразу три стиля: два из внутренней таблицы стилей и собственный встроенный стиль. Встроенный стиль обладает наибольшим приоритетом, поэтому он переопределит цвет шрифта, заданный в первом стиле, и ширину, заданную во втором стиле внутренней таблицы стилей.
Таким образом, чтобы правильно рассчитать результирующий стиль, применяемый к элементу, необходимо знать правила формирования этого стиля в случае наложения нескольких стилей сразу. Правила эти сводятся к расчету специфичности селекторов применяемых к элементу стилей, содержащих одинаковые css-свойства с разными значениями, а также, в случае равенства специфичности селекторов, к сравнению видов стилей, сравнению расположения таблиц с этими стилями или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы. Рассмотрим этот вопрос подробнее.
Если к одному и тому же элементу применяются два правила, содержащие одинаковые свойства CSS, но имеющие разные значения, возникает конфликт, который может быть решен при помощи сравнения специфичности селекторов этих правил. В результате этого решения к элементу будет применено свойство правила, у которого специфичность селектора больше.
Расчет специфичности селектора производится при помощи трех чисел (a, b, c). Происходит это следующим образом:
После подсчета чисел у всех сравниваемых селекторов, селектором с большей специфичностью будет считаться тот, у которого больше число a, в независимости от величины чисел b и c. Если же у сравниваемых селекторов число a окажется одинаковым, будет сравниваться их число b, а в случае необходимости и число c (см. пример 1.27).
/* Запишем пример кода html */ /*Текст...
*/ /* Здесь а=1, т.к. в селекторе есть 1 идентификатор; */ /* b=0, т.к. есть 0 классов, 0 атрибутов и 0 псевдоклассов; */ /* с=0, т.к. есть 0 элементов и 0 псевдоэлементов; */ /* т.о. специфичность равна (1,0,0). */ #m_id{ color: blue; } /* Здесь а=0, т.к. в селекторе отсутствуют идентификаторы; */ /* b=3, т.к. есть 1 класс, 1 атрибут и 1 псевдокласс; */ /* с=2, т.к. присутствуют два элемента: 'p' и 'em'; */ /* т.о. специфичность равна (0,3,2). */ p.my_class em[title="Город"]:hover{ color: red; } /* Значит цвет текста в примере кода будет синим, т.к. во втором правиле число а=0, а в первом правиле а=1. */ /* А вот если бы специфичности селекторов были равны, то приоритет имел бы стиль нижнего правила. */
Пример 1.27. Сравнение специфичности селекторов
В случае равенства специфичности селекторов сравниваемых правил, приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы. Перечислим основные виды стилей в порядке возрастания их приоритета.
Авторский стиль представляет собой результирующий стиль, который формируется из различных видов составляющих его отдельных стилей, опять же, на основе каскадирования. Перечислим их в порядке возрастания приоритета в случае применения к одному и тому же элементу при условии равенства специфичности селекторов.
Отдельно следует сказать про служебный параметр !important, который указывается в случае необходимости во внутренних и внешних таблицах стилей после значения css-свойства через пробел, например, p {color: green !important;}. Свойство стиля, в котором указан данный параметр, обладает наибольшим приоритетом в независимости от расположения таблицы стилей в коде документа или же самого правила внутри таблицы стилей, но только в ситуации, когда специфичности стилей равны (при этом не следует забывать, что специфичность встроенного стиля следует считать наивысшей в любом случае!). Опять же, если свойств с таким параметром несколько, да еще и специфичности соответствующих селекторов одинаковы, то приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы.
Из сказанного выше, следует простой вывод: чем ближе стиль расположен к элементу и чем более конкретнее его селектор, тем большим приоритетом он обладает.
В заключение данного пункта добавим, что в одном и том же правиле иногда задают два одинаковых свойства, но с разными значениями. Так обычно поступают, когда одно из значений свойства не поддерживается каким-нибудь браузером, тогда его помещают в блоке объявлений (стиле) вторым, а другое правило, которое поддерживается всеми браузерами, помещают первым. В результате, если страница открывается в браузере, в котором второе правило не имеет силы, оно будет проигнорировано, а браузер применит первое правило. Если же страница открывается в браузере, в котором имеют силу и первое и второе правила, то второе правило будет иметь больший приоритет, т.к. следует в коде позже. Таким образом, в любом случае будет реализована задумка программиста, а не применено значение свойства устанавливаемое браузером по умолчанию или наследуемое от родительского элемента.
1.6. Единицы измерения, используемые в CSS. Многие свойства CSS принимают в качестве своих значений числа, которые задают размеры соответствующих html-элементов. Например, довольно часто возникает необходимость указания ширины или высоты блочных элементов, величины внутренних и внешних отступов, межстрочного интервала и расстояния между соседними буквами, размера шрифта, ширины полей форм или ячеек таблицы, толщины границ и т.д. И все это в свою очередь приводит к необходимости использования соответствующих единиц измерения этих величин.
Выделяют два вида единиц измерения: абсолютные, которые являются фиксированными и не зависят от устройства вывода, а также относительные, величина которых зависит от какого-нибудь исходного размера, например, размера шрифта родительского элемента.
К абсолютным единицам измерения относятся:
Абсолютные единицы используются довольно редко, в основном для стилей, которые используются при выводе текста html-документов на печатные носители информации. Пункты, кроме того, широко используются в текстовых редакторах. Использование абсолютных единиц показано в примере 1.28.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Абсолютные единицы измерения</title> <style> .cm{font-size: 1cm;} .mm{font-size: 5mm;} .in{font-size: 0.5in;} .pt{font-size: 12pt;} .pc{font-size: 1pc;} </style> </head> <body> <span class="cm">Один сантиметр.</span><br> <span class="mm">Пять миллиметров.</span><br> <span class="in">Половина дюйма.</span><br> <span class="pt">12 пунктов.</span><br> <span class="pc">Одна пика (12 пунктов).</span> </body> </html>
Пример 1.28. Применение абсолютных единиц измерения
Для вывода информации на экран в основном используются относительные единицы измерения, к которым относятся (см. примеры 1.29 и 1.30):
<!DOCTYPE html> <!-- Зададим размер шрифта для документа --> <html style="font-size: 16px;"> <head> <meta charset="utf-8"> <title>Относительные единицы измерения</title> <style> .px{font-size: 10px;} .em{font-size: 1.0em;} .rem{font-size: 1.0rem;} .percent{font-size: 100%;} .ex{font-size: 2ex;} .ch{font-size: 2ch;} </style> </head> <body> <!-- Переопределим размер шрифта для абзаца --> <p style="font-size: 24px;"> <!-- Пиксели можно отнести и к абсолютным единицам шрифта --> <span class="px">10 пикселей.</span><br> <!-- Расчет ведется относительно шрифта элемента 'html' --> <span class="rem">1.0rem или 16*1.0=16 пикселей.</span><br> <!-- Расчет ведется относительно шрифта абзаца --> <span class="em">1.0em или 24*1.0=24 пикселя.</span><br> <span class="percent">100% равно 24 пикселям. Символы 'x', '0'.</span> <!-- Расчет ведется относительно символов 'x', '0' шрифта абзаца --> <br><span class="ex">2ex.</span><br> <span class="ch">2ch.</span> </p> </body> </html>
Пример 1.29. Применение относительных единиц px, em, rem, %, ex, ch
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Относительные единицы измерения</title> <style> .vw{font-size: 5vw;} .vh{font-size: 5vh;} .vmin{font-size: 5vmin;} .vmax{font-size: 5vmax} </style> </head> <body> <span class="vw">5% в зависимости от ширины области просмотра.</span> <br> <span class="vh">5% в зависимости от высоты области просмотра.</span> <br> <span class="vmin">5% в зависимости от того, что меньше.</span> <br> <span class="vmax">5% в зависимости от того, что больше.</span> </body> </html>
Пример 1.30. Применение относительных единиц vw, vh, vmin, vmax
Теперь хотелось бы отметить, что значения единиц измерения не обязательно должны быть целыми. Если необходимо, то можно применять и десятичные дроби, а некоторые свойства, например, p {margin: -3px;}, даже позволяют применять отрицательные значения. Однако запись самих единиц измерения после значения обязательна, при чем пробела между числом и единицей измерения быть не должно.
1.7. Использование цветов в CSS. В CSS существует два основных способа указания цвета: по имени и по значению. Ранее в своих примерах мы уже не раз использовали названия таких цветов, как green, red, orange, blue и др., когда указывали значения соответствующих свойств шрифта или фона. Всю палитру использующихся на данный момент названий цветов можно посмотреть на официальном сайте W3C здесь. Однако зарезервированных имен цветов довольно мало, менее двухсот, поэтому на практике предпочтительнее использовать цифровые обозначения цветов. Сделать это можно использовав одну из возможных цветовых моделей: RGB, RGBA, HSL, HSLA.
Цветовая модель RGB (от англ. Red, Green, Blue) для получения цвета любого оттенка использует три десятичных числа от 0 до 255 или же три соответствующих шестнадцатеричных числа, которые описывают относительное содержание красного, зеленого и синего цветов. В случае десятичного представления чисел формат записи значения цвета имеет вид rgb(r,g,b), если используется шестнадцатеричное представление чисел, в котором разрешается использовать цифры от 0 до 9 и латинские буквы в любом регистре от A до F, то значение цвета записывают в формате #rrggbb. Например, правила p {color: rgb(165,42,42);} и p {color: #a52a2a;} задают для абзаца одно и тоже значение цвета, соответствующее названию цвета 'brown'. Следует отметить, что разрешается использовать также и проценты, в этом случае формат записи значения цвета имеет вид rgb(r%,g%,b%). Внимательно изучите пример 1.31, в котором показано использование цветовой модели RGB.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Цвета RGB</title> <style> .black_rgb_hex{color: #000000;} .red_rgb_hex{color: #ff0000;} .green_rgb_hex{color: #00ff00;} .blue_rgb_hex{color: #0000ff;} .black_rgb_decimal{color: rgb(0,0,0);} .red_rgb_decimal{color: rgb(255,0,0);} .green_rgb_decimal{color: rgb(0,255,0);} .blue_rgb_decimal{color: rgb(0,0,255);} .black_rgb_percent{color: rgb(0%,0%,0%);} .red_rgb_percent{color: rgb(100%,0%,0%);} .green_rgb_percent{color: rgb(0%,100%,0%);} .blue_rgb_percent{color: rgb(0%,0%,100%);} </style> </head> <body> <span class="black_rgb_hex">Black #000000.</span> <span class="red_rgb_hex">Red #ff0000.</span> <span class="green_rgb_hex">Green #0000ff.</span> <span class="blue_rgb_hex">Blue #00ff00.</span> <br><br> <span class="black_rgb_decimal">Black rgb(0,0,0).</span> <span class="red_rgb_decimal">Red rgb(255,0,0).</span> <span class="green_rgb_decimal">Green rgb(0,255,0).</span> <span class="blue_rgb_decimal">Blue rgb(0,0,255).</span> <br><br> <span class="black_rgb_percent">Black rgb(0%,0%,0%).</span> <span class="red_rgb_percent">Red rgb(100%,0%,0%).</span> <span class="green_rgb_percent">Green rgb(0%,100%,0%).</span> <span class="blue_rgb_percent">Blue rgb(0%,0%,100%).</span> <br><br> </body> </html>
Пример 1.31. Цветовая модель RGB
Цветовая модель RGBA (от англ. Red, Green, Blue, Alpha) кроме чисел, которые определяют содержание трех цветов, использует еще одно число, которое описывает альфа-канал (в графическом дизайне данный термин означает прозрачность цвета) и может изменяться в пределах от 0 (полностью прозрачный цвет) до 1 (полностью непрозрачный цвет). При этом формат записи значения цвета имеет вид rgba(r,g,b,a). Использование цветовой модели RGBA с разными значениями альфа-канала показано в примере 1.32.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Цвета RGBA</title> <style> .black_rgba{color: rgba(0,0,0,0.8);} .red_rgba{color: rgba(255,0,0,0.8);} .green_rgba{color: rgba(0,255,0,0.8);} .blue_rgba{color: rgba(0,0,255,0.8);} .black_rgba_percent{color: rgba(0%,0%,0%,0.4);} .red_rgba_percent{color: rgba(100%,0%,0%,0.4);} .green_rgba_percent{color: rgba(0%,100%,0%,0.4);} .blue_rgba_percent{color: rgba(0%,0%,100%,0.4);} </style> </head> <body> <span class="black_rgba">Black rgba(0,0,0,0.8).</span> <span class="red_rgba">Red rgba(255,0,0,0.8).</span><br> <span class="green_rgba">Green rgba(0,255,0,0.8).</span> <span class="blue_rgba">Blue rgba(0,0,255,0.8).</span> <br><br> <span class="black_rgba_percent">Black rgba(0%,0%,0%,0.4).</span> <span class="red_rgba_percent">Red rgba(100%,0%,0%,0.4).</span><br> <span class="green_rgba_percent">Green rgba(0%,100%,0%,0.4).</span> <span class="blue_rgba_percent">Blue rgba(0%,0%,100%,0.4).</span> <br><br> </body> </html>
Пример 1.32. Цветовая модель RGBA
Цветовая модель HSL (от англ. Hue, Saturation, Lightness) описывает цвета при помощи трех чисел, которые представляют, соответственно, оттенок, насыщенность и светлоту (не яркость). При этом значение цвета записывается в формате hsl(h,s%,l%). Оттенок принимает значения от 0 до 359, которые соответствует градусам на цветовом круге, где 0° градусов соответствуют красному цвету, 120° – зеленому и 240° – синему цвету. Если число, задающее оттенок, больше, чем 359, то браузер будет автоматически отнимать от него 360. Так что, если задать значение оттенка, например, 480, то оно будет соответствовать зеленому оттенку. Насыщенность измеряется в процентах от 0% до 100% и определяет интенсивность цвета. Значение 0% обозначает отсутствие цвета и оттенок серого, а 100% – максимальное значение насыщенности. Светлота также, как и насыщенность, указывается в процентах от 0% до 100% и определяет степень близости цвета к белому. Значение 0% соответствует черному цвету, а 100% – белому. Примеры цветов и их значений данной модели можно посмотреть на официальном сайте W3C здесь. Также внимательно изучите пример 1.33, в котором показано использование цветовой модели HSL.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Цвета HSL, HSLA</title> <style> .black_hsl{color: hsl(0,0%,0%);} .red_hsl{color: hsl(0,100%,50%);} .green_hsl{color: hsl(120,100%,50%);} .blue_hsl{color: hsl(240,100%,50%);} .black_hsla{color: hsla(0,0%,0%,0.5);} .red_hsla{color: hsla(0,100%,50%,0.5);} .green_hsla{color: hsla(120,100%,50%,0.5);} .blue_hsla{color: hsla(240,100%,50%,0.5);} </style> </head> <body> <span class="black_hsl">Black hsl(0,0%,0%).</span> <span class="red_hsl">Red hsl(0,100%,50%).</span><br> <span class="green_hsl">Green hsl(120,100%,50%).</span> <span class="blue_hsl">Blue hsl(240,100%,50%).</span> <br><br> <span class="black_hsla">Black hsla(0,0%,0%,0.5).</span> <span class="red_hsla">Red hsla(0,100%,50%,0.5).</span><br> <span class="green_hsla">Green hsla(120,100%,50%,0.5).</span> <span class="blue_hsla">Blue hsla(240,100%,50%,0.5).</span> <br><br> </body> </html>
Пример 1.33. Цветовая модель HSL
Цветовая модель HSLA (от англ. Hue, Saturation, Lightness, Alpha) помимо трех чисел, которые представляют, соответственно, оттенок, насыщенность и светлоту, включает в себя еще четвертое число, которое описывает альфа-канал и может изменяться в пределах от 0 (полностью прозрачный цвет) до 1 (полностью непрозрачный цвет). При этом формат записи значения цвета имеет вид hsla(h,s%,l%,a). Использование цветовой модели HSLA показано в примере 1.33.
На этом рассмотрение общих вопросов мы заканчиваем. Дальнейшее изложение будет в основном построено на перечислении свойств CSS и соответствующих им значений, а также примерах использования этих свойств для форматирования внешнего вида html-документов.
Контрольные вопросы и задания
Словарь новых английских слов
property ['prɔpəti] – свойство. import [ˈɪmpɔːt] – импорт, импортировать. selector [si'lektə] – искатель, отборщик. visited [ˈvɪzɪtɪd] – посещенный. active ['æktiv] – активный, действующий. target [ˈtɑːɡɪt] – цель, мишень. enabled [ɪˈneɪbl̩d] – разрешенный. disabled [dɪsˈeɪbld] – заблокированный. checked [tʃɛkt] – выбранный, проверенный. empty [ˈɛm(p)ti] – пустой. root [ruːt] – корень, основание. odd [ɒd] – нечетный, непарный. even [ˈiːvn] – четный. child [tʃʌɪld] – дочерний элемент. first [fəːst] – первый. last [lɑːst] – последний. only [ˈəʊnli] – только, единственный. type [taɪp] – тип. not [nɒt] – не, ни. |
letter [ˈletər] – буква, литера. line [laɪn] – линия, строка. before [bɪˈfɔː] – впереди, перед. after [ˈɑːftə] – потом, после, позади. content [kənˈtɛnt] – содержимое. hover [ˈhɒvə] – нависать. strong [strɔːŋ] – сильный, крепкий. important [ɪmˈpɔːt(ə)nt] – важный. centimeter ['senti,mi:tə] – сантиметр. inch [int∫] – дюйм (2,54 см). point [pɔint] – пункт, точка. pica [ˈpʌɪkə] – шрифт 'пика'. percent [pəˈsent] – процент. font [fɒnt] – комплект шрифта. view [vjuː] – вид, смотреть. hue [hjuː] – цвет, оттенок, тон. saturation [satʃəˈreɪʃ(ə)n] – насыщенность. lightness [ˈlʌɪtnəs] – освещенность, светлота. |