11. Создание классов и идентификаторов. Способы задания цвета в css. Классы

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

div .new {color:blue; padding: 5px;}- в файле стилей

<div class="new">текст</div>- в HTML-документе

В итоге, указанные стили будут применяться только для текста с тегом div, в котором указывается класс. Если в файле стилей оставить один класс, то в HTML-документе изменения будут внесены во все места, где установлен выдуманный класс new.

Класс с описанными стилями можно присваивать к любому тегу в HTML-документе. Кроме того, можно к тегам присваивать несколько классов, указывая их через пробел:

<p class="new old">

Идентификаторы

Идентификаторы схожи по применению с классами, но в отличие от классов, в веб-документе они указываются только один раз! Уникальное имя элемента указывается для изменения его стилей, а также обращений к нему через скрипты. В файле CSS идентификаторы обозначаются латинскими буквами (допускается _ и - ), перед которым ставится знак #:

#ukaz {text-align:center; font-size:15px}- в файле стилей

<p id="ukaz">Заголовок</p>- в HTML-документе

Как и классы, в файле CSS идентификаторы могут применяться отдельно и вместе с тегами.

Применение классов и идентификаторов значительно увеличивают возможности вёрстки и упрощает многие задачи.

огласно спецификации W3C, цвет в CSS можно задавать несколькими способами. В этой статье я приведу примеры всех этих способов.

CSS предлагает нам четыре удобных способа указать цвет.

• По имени. Используются англоязычные названия цветов, например blue или red (см.Именованные цвета).

• В шестнадцатиричном RGB (например, #71C354 или #3C9). Этот способ широко используется в HTML (см. Безопасные (browser-safe) цвета в CSS).

• В десятичном формате RGB (например, rgb (126, 6, 9)), где значение каждой компоненты цвета может варьироваться от 0 до 255.

• В формате RGB с указанием величин в процентах, например, rgb (30%, 40%, 70%)), где значение каждой компоненты цвета может варьироваться от 0 до 100.

12. Текст и шрифты. Свойства шрифтов.

Вашему вниманию представлен один из ключевых и самых простых уроков самоучителя.

• HTML текст является основной составляющей большинства страниц интернета.

• По ключевым фразам в тексте HTML-страницы пользователи могут найти ваш сайт.

• HTML текст может быть любого размера и цвета, по вашему усмотрению. Вы также можете определить вид шрифта и его объемность.

• HTML размер шрифта обыкновенно устанавливается в пикселях.

• HTML форматирование текста широко распространено, применяются форматирующие теги.

Смотрите ниже теги, форматирующие HTML текст:

• Теги <strong> </strong>   →   жирный HTML текст (жирный шрифт).

• Теги <b> </b>   →   жирный HTML текст (жирный шрифт).

• Теги <kbd> </kbd>   →   моноширинный HTML текст (моноширинный шрифт).

• Теги <code> </code>   →   моноширинный HTML текст (моноширинный шрифт).

• Теги <samp> </samp>   →   моноширинный HTML текст (моноширинный шрифт).

• Теги <big> </big>   →   HTML текст, размер больше обычного (крупный шрифт).

• Теги <small> </small>   →   HTML текст, размер меньше обычного (мелкий шрифт).

• Теги <em> </em>   →   наклонный HTML текст (наклонный шрифт).

• Теги <i> </i>   →   наклонный HTML текст (наклонный шрифт).

• Теги <dfn> </dfn>   →   наклонный HTML текст (наклонный шрифт).

• Теги <ins> </ins>   →   подчеркнутый HTML текст (подчеркнутый шрифт).

• Теги <del> </del>   →   зачеркнутый HTML текст (зачеркнутый шрифт).

• Теги    →   HTML текст (шрифт) в нижнем индексе.

• Теги    →   HTML текст (шрифт) в верхнем индексе.

Свойство стиля	Описание свойства	Значения	Значение по умолчанию
font-family	Гарнитура шрифта	список имен шрифтов, перечисленных через запятую в порядке убывания предпочтения; список может заканчиваться одним из родовых имен: serif (с засечками, "антиква"),  sans-serif (без засечек, "рубленый"), cursive (курсив),  fantasy (аллегорический), monospace (моноширинный)
font-size	Размер шрифта	размер, процент, xx-small,x-small, small, medium, large, x-large, xx-large, larger, smaller	medium
font-style	Начертание шрифта	normal, italic (курсив), oblique (наклонный)	normal
font-weight	Насыщенность шрифта	число от 100 до 900 (кратное 100), normal, bold, bolder, lighter	normal
font-variant	Может задать вывод капителью (символами, похожими на прописные, но малого размера); капитель есть не во всяком шрифте	normal, small-caps (капитель)	normal
font-stretch	Задание нормального, разреженных (expanded) или сжатых (condensed) начертаний из текущей гарнитуры шрифта	normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded	normal
font	Стенографическое свойство для одновременного задания нескольких свойств шрифта	список свойств шрифта, разделенных пробелами, в следующем порядке:  font-style, font-variant, font-weight, font-size, line-height, font-family