Класс заголовка css: Css H1, h2, h3 — SEO MaulTalk.com
Содержание
Классы | htmlbook.ru
Классы применяют, когда необходимо определить стиль для
индивидуального элемента веб-страницы или задать разные стили для
одного тега. При использовании совместно с тегами синтаксис для классов
будет следующий.
Тег.Имя класса { свойство1:
значение; свойство2: значение; … }
Внутри стиля вначале пишется желаемый тег, а затем, через точку
пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется
с определённым классом, к тегу добавляется атрибут (пример 8.1).
Пример 8.1. Использование классов
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Классы</title>
<style>
P { /* Обычный абзац */
text-align: justify; /* Выравнивание текста по ширине */
}
P.cite { /* Абзац с классом cite */
color: navy; /* Цвет текста */
margin-left: 20px; /* Отступ слева */
border-left: 1px solid navy; /* Граница слева от текста */
padding-left: 15px; /* Расстояние от линии до текста */
}
</style>
</head>
<body>
<p>Для искусственного освещения помещения применяются люминесцентные лампы.
Они отличаются высокой световой отдачей, продолжительным сроком службы,
малой яркостью светящейся поверхности, близким к естественному спектральным
составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
<p>Для исключения засветки экрана дисплея световыми потоками
оконные проемы снабжены светорассеивающими шторами.</p>
</body>
</html>
Результат данного примера показан на рис. 8.1.
Рис. 8.1. Вид текста, оформленного с помощью стилевых классов
Первый абзац выровнен по ширине с текстом чёрного цвета (этот цвет задаётся браузером по умолчанию), а следующий, к которому
применен класс с именем cite — отображается синим цветом и с линией слева.
Можно, также, использовать
классы и без указания тега. Синтаксис в этом случае будет следующий.
.Имя класса { свойство1: значение;
свойство2: значение; … }
При такой записи класс можно применять к любому тегу (пример 8.2).
Пример 8.2. Использование классов
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Классы</title>
<style>
.gost {
color: green; /* Цвет текста */
font-weight: bold; /* Жирное начертание */
}
.term {
border-bottom: 1px dashed red; /* Подчеркивание под текстом */
}
</style>
</head>
<body>
<p>Согласно <span>ГОСТ 12.1.003-83 ССБТ "Шум. Общие
требования безопасности"</span>, шумовой характеристикой рабочих
мест при постоянном шуме являются уровни звуковых давлений в децибелах
в октавных полосах. Совокупность таких уровней называется
<b>предельным спектром</b>, номер которого численно равен
уровню звукового давления в октавной полосе со среднегеометрической
частотой 1000 Гц.
</p>
</body>
</html>
Результат применения классов к тегам <span> и <b> показан на рис. 8.2.
Рис. 8.2. Вид тегов, оформленных с помощью классов
Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы:
ячейкам таблицы, ссылкам, абзацам и др.
В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».
Пример 8.3. Использование классов
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Камни</title>
<style>
table.jewel {
width: 100%; /* Ширина таблицы */
border: 1px solid #666; /* Рамка вокруг таблицы */
}
th {
background: #009383; /* Цвет фона */
color: #fff; /* Цвет текста */
text-align: left; /* Выравнивание по левому краю */
}
tr.odd {
background: #ebd3d7; /* Цвет фона */
}
</style>
</head>
<body>
<table>
<tr>
<th>Название</th><th>Цвет</th><th>Твердость по Моосу</th>
</tr>
<tr>
<td>Алмаз</td><td>Белый</td><td>10</td>
</tr>
<tr>
<td>Рубин</td><td>Красный</td><td>9</td>
</tr>
<tr>
<td>Аметист</td><td>Голубой</td><td>7</td>
</tr>
<tr>
<td>Изумруд</td><td>Зеленый</td><td>8</td>
</tr>
<tr>
<td>Сапфир</td><td>Голубой</td><td>9</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан на рис. 8.3. В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счёт того, что этот класс добавляется не ко всем тегам <tr> и получается чередование разных цветов.
Рис. 8.3. Результат применения классов
Одновременное использование разных классов
К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.
В примере 8.4 показано использование разных классов для создания облака тегов.
Пример 8.4. Сочетание разных классов
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Облако тегов</title>
<style type="text/css">
.level1 { font-size: 1em; }
.level2 { font-size: 1.2em; }
.level3 { font-size: 1.4em; }
.level4 { font-size: 1.6em; }
.level5 { font-size: 1.8em; }
.level6 { font-size: 2em; }
A.tag {
color: #468be1; /* Цвет ссылок */
}
</style>
</head>
<body>
<div>
<a href="/term/2">Paint.NET</a>
<a href="/term/69">Photoshop</a>
<a href="/term/3">цвет</a>
<a href="/term/95">фон</a>
<a href="/term/11">палитра</a>
<a href="/term/43">слои</a>
<a href="/term/97">свет</a>
<a href="/term/44">панели</a>
<a href="/term/16">линия</a>
<a href="/term/33">прямоугольник</a>
<a href="/term/14">пиксел</a>
<a href="/term/27">градиент</a>
</div>
</body>
</html>
Результат данного примера показан на рис. 8.4.
Рис. 8.4. Облако тегов
В стилях также допускается использовать запись вида .layer1.layer2, где layer1 и layer2 представляют собой имена классов. Стиль применяется только для элементов, у которых одновременно заданы классы layer1 и layer2.
Вопросы для проверки
1. Какое имя класса написано правильно?
- 2layer1
- 1layer
- Яndex
- pink-floyd
- 28_days_later
2. Какой цвет будет у слова «потока» в коде?
<p>Коэффициент использования излучаемого светильниками <span>потока</span>, на расчетной плоскости.</p>
При использовании следующего стиля?
BODY { color: red; }
P { color: green; }
.c1 {color: blue; }
.c2 { color: yellow; }
.c3 { color: orange; }
.c2.c3 { color: black; }
- Зелёный.
- Синий.
- Жёлтый.
- Оранжевый.
- Чёрный.
3. Как задать стиль у тега <div>DOOM</div>?
- div[iddqd] { color: red; }
- div.iddqd { color: red; }
- iddqd.div { color: red; }
- div#iddqd { color: red; }
- div=iddqd { color: red; }
4. Какое имя класса следует добавить к тегу <P>, чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?
s1 { color: red; font-weight: bold; }
.s2 { color: red; }
.s3 { background-color: red; font-weight: bold; }
.s4 { font-weight: bold; }
.s5 { font: red bold; }
- s1
- s2
- s3
- s2 s4
- s5
Ответы
1. pink-floyd
2. Чёрный.
3. div.iddqd { color: red; }
4. s2 s4
Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.
В этой статье я подробно расскажу про работу с CSS-суффиксом модулей, а также приведу пример его использования в Joomla.
В Joomla есть один очень мощный инструмент стилизации, о котором многие не знают. Он называется «Суффикс CSS-класса модуля». Звучит страшно, особенно для новичков. Но понимая, как работает этот механизм, в сочетании со знанием CSS-стилей, можно отображать модули на странице так, так душе угодно. В этой статье я подробно расскажу про работу с CSS-суффиксом модулей, а также приведу пример его использования в Joomla.
Прежде всего стоит упомянуть, что суффикс класса модуля одинаково может применяться как в Joomla 3, так и в более ранних версиях CMS. Мы рассмотрим пример в Joomla 2.5. В Joomla 3 и Joomla 4 всё работает точно также.
Начнем с постановки задания. Предположим, что заказчик хочет, чтобы модули в правой колонке сайта имели следующие особенности:
- Располагались не друг под другом, а со сдвигом влево и чередованием;
- Чередовались между прямыми и скругленными углами;
- Заголовки модулей, как и рамки, обрамляющие их, должны соответствовать цветам радуги.
Если представить всё это схематично, то получится что-то вроде:
На самом деле в такой задачке нет ничего особенного. С нынешними дизайнами она может казаться даже простой. Но если дать ее начинающему web-мастеру, то он как минимум впадет в ступор. Как же сделать в Joomla такое задание? Легко, если вы умеете использовать CSS-суффиксы модулей. Ниже разберем всё подробно.
Для примера я взял стандартный шаблон Joomla. Вот его пример:
Для того, чтобы получить достаточное количество модулей, пришлось добавить несколько новых. Все добавленные модули – модули html, или, проще говоря, обычные модули с текстом. После их создания и публикации сайт стал выглядеть следующим образом:
Немного о CSS-классах.
Для тех, кто совсем плохо представляет себе, что такое CSS, я решил написать этот параграф. Если вы имеете представление о том, что это, смело пропускайте параграф. Для понимания данной статьи нужно представлять две вещи: что такое CSS-класс и CSS-стиль.
CSS-стиль (свойство) – минимальная единица CSS. Размер или цвет шрифта, рамка, позиционирование – всё это CSS-стили.
СSS-класс – это контейнер для стилей.
Пример:
У нас есть html-блок DIV:
Мы хотим сделать текст в этом блоке 20 шрифтом и красным цветом. Для этого мы добавляет нашему блоку атрибут класса, например «myclass». В результате у нас получается:
<div>пример</div>
Сейчас мы создали CSS-класс для блока. Но он пока пуст (не содержит стилей).
Теперь в любом, подключенном к шаблону CSS-файле, мы добавляем строчку:
.myclass{font-size:20pt; color: red;}
Мы внесли в класс два CSS-стиля: font-size и color.
После этого наш блок будет содержать текст красного цвета 20 шрифтом.
Вообще, если вы всерьёз планируете заниматься сайтостроением, советую купить какой-нибудь хороший учебник по HTML и CSS. Эти технологии – основа основ. Освоив их по учебнику, в дальнейшем вы сэкономите очень много времени на верстке.
Создание CSS-суффиксов для модулей.
Теперь нужно немного подумать о том, чем внешний вид наших модулей отличается и чем он схож. Понятно, что отличия – разные цвета, контуры цветов и положение. А «похожесть» в том, что некоторые контуры и положения повторяются.
Суффикс класса модуля устроен таким образом, что позволяет задавать для модуля неограниченное количество классов. Изначально в нашем шаблоне все модули имеют класс moduletable.
Здесь нужно уточнить, что наличие CSS-класса moduletable зависит от используемого шаблона Joomla. Его может не быть совсем, или мы можем изменить его в коде шаблона. Но для всех этих манипуляций требуется достаточно хорошее понимание принципов работы Joomla. В это же статье мы рассматриваем стилизацию модулей с точки зрения человека, который знает только CSS).
Задавая новые названия в поле суффикса класса модуля через пробел, мы получим для модуля множество новых классов. Звучит всё это сложно и страшно. Давайте посмотрим, как оно работает на практике.
Очевидно, для того, чтобы задать каждому модулю свой цвет, у каждого должен быть уникальный CSS-класс. Но контуров и положений, в отличие от цветов, всего по два. Следовательно для них понадобится всего четыре класса (два для контуров и два для положений). Также важно то, что цвет не должен пересекаться с контуром и положением в одном классе, иначе мы получим очень неприятную зависимость цвета от контура и положения.
Что мы в итоге делаем?
1) Создаем семь классов на каждый цвет радуги:
- color1 – красный
- color2 – оранжевый
- color3 – желтый
- color4 – зеленый
- color5 – голубой
- color6 – синий
- color7 – фиолетовый
2) Создаем два класса на каждый из контуров:
- squareblock – квадратный контур
- roundblock – контур со скругленными углами
3) Создаем два класса на каждое положение:
- normalpos – модуль в центре
- leftpos – модуль, сдвинутый влево
Если точно следовать исходному заданию, второй и третий пункты мы могли объединить, т.е. создать не четыре, а только два класса. При этом результат получился бы такой же, как и на картинке, но мы уже не смогли бы простым изменением суффикса получить, например, квадратный блок, сдвинутый влево. Поэтому, для максимальной гибкости наших модулей, мы разделим контур и сдвиг по разным классам.
Теперь необходимо определиться с тем, какому модулю какие суффиксы будут присвоены. Это легко. Просто смотрим модули по картинке сверху вниз:
- модуль1 – color1 squareblock normalpos
- модуль2 – color2 roundblock leftpos
- модуль3 – color3 squareblock normalpos
- модуль4 – color4 roundblock leftpos
- модуль5 – color5 squareblock normalpos
- модуль6 – color6 roundblock leftpos
- модуль7 – color7 squareblock normalpos
Вот и всё. Подготовительный этап завершен. Остается только задать CSS-суффиксы нашим модулям. Перед суффиксом обязательно должен стоять пробел, иначе он приклеется к базовому классу, т.е. будет выглядеть, как «moduletablecolor1 squareblock normalpos».
На рисунке показано, как задается суффикс для модуля1:
После того, как все суффиксы заданы, можно переходить к формированию CSS-стилей. С помощью веб-инспектора браузера подбираем необходимые стили:
/* Задаем цвета рамок */
.moduletable.color1 {border-color:#D2232A;} /* Задаем красный цвет */ .moduletable.color2 {border-color:#F7941E;} /* Задаем оранжевый цвет */ .moduletable.color3 {border-color:#FFDE00;} /* Задаем желтый цвет */ .moduletable.color4 {border-color:#40AE49;} /* Задаем зеленый цвет */ .moduletable.color5 {border-color:#00B2EB;} /* Задаем голубой цвет */ .moduletable.color6 {border-color:#23408F;} /* Задаем синий цвет */ .moduletable.color7 {border-color:#624099;} /* Задаем фиолетовый цвет */ /* Задаем цвета заголовков */ .moduletable.color1 h4 span{color:#D2232A;} /* Задаем красный цвет */ .moduletable.color2 h4 span{color:#F7941E;} /* Задаем оранжевый цвет */ .moduletable.color3 h4 span{color:#FFDE00;} /* Задаем желтый цвет */ .moduletable.color4 h4 span{color:#40AE49;} /* Задаем зеленый цвет */ .moduletable.color5 h4 span{color:#00B2EB;} /* Задаем голубой цвет */ .moduletable.color6 h4 span{color:#23408F;} /* Задаем синий цвет */ .moduletable.color7 h4 span{color:#624099;} /* Задаем фиолетовый цвет */ /* Задаем формы рамок */ .moduletable.squareblock{border: 2px solid;} /* квадратная рамка */ .moduletable.roundblock{border: 2px solid; border-radius: 10px 10px 10px 10px;} /* скругленная рамка */ /* Задаем положение рамок */
.moduletable.normalpos{} /* нормальное положение не требует дополнительных стилей */ .moduletable.leftpos{position: relative; right: 13%;} /* сдвигаем модуль немного влево. */
После этого любуемся результатом:
В заключении хочу сказать, что Joomla имеет хорошую гибкость в оформлении. Имея навыки работы с HTML и CSS, а также понимая структуру Joomla, можно создавать для нее очень красивые разнообразные шаблоны.
Об авторе
Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.
Глава 2 CSS
Как мы уже пояснили в предыдущей главе, элементы
HTML позволяют сайтостроителям разметить документ в соответствии с
его структурой. В спецификации HTML перечислены рекомендации по
отображению браузерами этих элементов. К примеру, можно быть
более-менее уверенным, что содержание контейнера strong будет отображено полужирным шрифтом.
Вполне можно доверять и тому факту, что большинство браузеров
отобразит содержимое контейнера h2
крупным шрифтом… по меньшей мере, крупнее, чем p, и крупнее, чем h3. Однако помимо веры и надежды на это, средств контроля
за внешним видом текста у нас просто нет.
CSS все меняет. CSS усаживает дизайнера в кресло водителя. Мы
посвятим остаток книги рассказу о том, что можно делать с помощью
CSS. А в этой главе начнем с ознакомления вас с основами написания
таблиц стилей и основами совместного функционирования CSS и HTML
для описания и структуры, и внешнего вида вашего документа.
Правила и таблицы стилей
Для того, чтобы начать пользоваться CSS не
нужно даже писать таблицы стилей. Шестнадцатая глава расскажет,
как ссылаться на существующие в Сети таблицы.
Существуют два метода создания таблиц CSS. Можно
либо воспользоваться обычным текстовым редактором и писать таблицы
стилей «от руки», либо воспользоваться специальным инструментом,
поддерживающим CSS, к примеру, приложением для веб-дизайна.
Специальные инструменты позволяют создавать таблицы стилей без
изучения синтаксиса CSS. Однако впоследствии дизайнеры во многих
случаях предпочитают ручную отладку таблиц стилей, так что мы
рекомендуем вам научиться писать и редактировать CSS от руки.
Давайте приступим!
h2 { color: green }
То, что вы видите, это простое правило CSS,
содержащее одно объявление. Правило это заявление стилистического параметра одного
элемента или нескольких. Таблица
стилей это набор из одного или более правил, прилагаемых к
HTML-документу. Правило выше устанавливает цвет всех заголовков
первого уровня (h2). Давайте
посмотрим, какой визуальный эффект оно могло бы произвести:
Figure 2.1
Теперь давайте тщательно разберем правило.
Анатомия правила
Правило состоит из двух частей:
- Селектора — части перед левой фигурной
скобкой - Объявления — части внутри фигурных скобок
Селектор это
звено, связующее HTML-документ и стиль. Оно устанавливает на
какие элементы влияет объявление. Объявление это часть правила, которая определяет эффект.
В примере выше селектор это тег h2,
а объявление «color: green». Следовательно, объявление повлияет
на все элементы h2, то есть, они
позеленеют. (Свойство color
влияет только на цвет текста; существуют другие свойства для
фона, границ и т.д.)
Предыдущий селектор основан на типе элемента: он выбирает все элементы типа «h2». Этот вид селектора зовется селектором типа. Любой тип
элемента HTML может быть использован в качестве селектора типа.
Селекторы типа являются простейшим видом селекторов. Мы обсудим
другие виды селекторов в
See CSS
selectors. , «CSS selectors.»
Анатомия объявления
Объявление имеет две части, разделенные
двоеточием:
- Свойство — часть перед двоеточием
- Значение — часть после двоеточия
Свойство это
качество либо характеристика, которыми нечто обладает. В
предыдущем примере это color.
CSS2 (см. separate box) определяет примерно 120 свойств и мы
можем присвоить значения им всем.
Значение это
точная спецификация свойства. В примере, это «green» «зеленый»,
но точно также цвет мог бы быть синим (blue), красным (red),
желтым (yellow) или каким-нибудь еще.
Диаграмма ниже иллюстрирует все компоненты правила. Фигурные
скобки ({ }) и двоеточие ( позволяют браузерам различать
селектор, свойство и значение.
Рисунок 2.2 Диаграмма правила.
Группирование селекторов и правил
При создании CSS целью является сжатость. Мы
отметили, что если уменьшить размер таблиц стилей, это позволит
дизайнерам писать и редактировать их «от руки». К тому же
короткие таблицы грузятся быстрее длинных. Поэтому в CSS есть
несколько механизмов уменьшить размер таблиц стилей путем
группировки селекторов и объявлений.
Для примера, рассмотрите эти три правила:
h2 { font-weight: bold } h3 { font-weight: bold } h4 { font-weight: bold }
У всех трех правил абсолютно одинаковое объявление
они устанавливают шрифт полужирным. (Это делается с помощью
свойства font-weight, которое
мы обсудимв
See Fonts. .) Поскольку все три объявления идентичны,
можно сгруппировать селекторы в список, разделенный запятыми, и указать объявление лишь
один раз, вот так:
h2, h3, h4 { font-style: bold }
Это правило производит такой же эффект, как и
первые три..
Селектор может иметь больше одного объявления. К примеру,
можно написать таблицу стилей с этими двумя правилами:
h2 { color: green } h2 { text-align: center }
В этом случае, мы устанавливаем все элементы h2 зелеными и центрированными на листе.
(Это делается с помощью свойства text-align, которое мы обсудим в
главе 5.)
Но этого же эффекта можно добиться быстрее, если сгруппировать
объявления, которые относятся к одному и тому же селектору, в
список, разделенный точками с
запятой, вот так:
h2 { color: green; text-align: center; }
Все объявления быть внутри фигурных скобок. Точка
с запятой разделяет объявления и может, но не должна также
появляться в конце последнего объявления. Кроме того, для
повышения удобочитаемости вашего кода, предлагаем размещать
каждое объявление в отдельной строчке, как мы сделали здесь.
(Браузерам все равно, они просто проигнорируют все лишние пробелы
и переводы строк.)
Теперь вы знаете основы создания правил CSS и таблиц стилей.
Однако, мы еще не закончили. Чтобы таблица произвела какой-то
эффект, ее придется «приклеить» к своему документу HTML.
«Приклеивание» таблиц стилей к документу
Чтобы заставить какую-либо таблицу стилей повлиять
на документ HTML, ее нужно «приклеить» к нему. То есть, таблица и
документ должны быть объединены, чтобы сработать вместе и
представить документ. Это можно сделать любым из четырех способов:
- Применить базовую, внутридокументную таблицу
стилей, к документу, исп ользуя тег style . - Применить таблицу стилей к отдельному тегу,
используя атрибут style. - Привязать внешнюю таблицу стилей к документу,
используя элемент link. - Импортировать таблицу стилей, испольхуя запись
CSS @import.
В следующем разделе, мы обсудим первый метод: с
использованием тега style. Атрибут
style мы обсудим в главе
4
, «Селекторы CSS», а использование элемента link element и записи @import в главе 16 , «Внешние таблицы
стилей».
«Склеивание» с использованием тега STYLE
Можно склеить таблицу стилей и HTML документ,
поместив таблицу стилей внутрь контейнера style вверху вашего документа. Тег style был введен в HTML в частности для того, чтобы
позволить вставлять таблицы стилей внутрь HTML документов. Вот
таблица стилей (полужирным шрифтом) прикрепленная к
документу-образцу с использованием тега style. Результат показан в рисунке
2.3 .
<HTML> <TITLE>Bach's home page</TITLE> <STYLE> h2, h3 { color: green } </STYLE> <BODY> <h2>Bach's home page</h2> <P>Johann Sebastian Bach was a prolific composer. Among his works are: <UL> <LI>the Goldberg Variations <LI>the Brandenburg Concertos <LI>the Christmas Oratorio </UL> <h3>Historical perspective</h3> <P>Bach composed in what has been referred to as the Baroque period. </BODY> </HTML>
Рисунок 2.3 Результат добавления к таблице стилей правила изменения цвета
тегов h2 на зеленый и последующего
прикрепления таблицы к документу с использованием контейнера
style. (попробуйте)
Обратите внимание на то, что тег style размещен после тега title и перед тегом body. Заголовок документа «title» не появляется на самой
странице, поэтому стили CSS не оказывают на него влияния.
Содержимое тега style это таблица
стилей. Однако, в то время, как содержимое таких тегов, как h2, p и ul появляется на странице, содержимое тега
style там не появляется. Точнее, на
странице появляется эффект от содержимого контейнера
style таблицы стилей. Поэтому вы не
видите «{ color: green }», показанным на экране; вместо этого вы
видите два тега h2 зеленого цвета.
Правил, определяющих цвет прочих элементов, добавлено не было,
так что все прочие элементы будут отображаться цветом по
умолчанию.
Браузеры и CSS
Для обновляемого обзора доступных браузеров,
просмотрите страницу обзоров W3C
Для того, чтобы CSS работала как написано в этой
книге, необходимо использовать CSS-совместимый браузер, то есть,
браузер, поддерживающий CSS. CSS-совместимый браузер узнает тег
style как контейнер для таблицы
стилей и отображает документ соответственно. Многие браузеры,
распространенные сегодня, поддерживают CSS, например, Microsoft
Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) и Opera 3.5
(O3.5). По скромным подсчетам более половины пользователей Сети
используют CSS-расширенные браузеры, и их число постоянно растет.
Велика вероятность того, что люди, с которыми вы общаетесь, имеют
CSS-расширенные браузеры. Если нет, дайте им причину обновиться!
Лучший источник информации о том, как различные
браузеры поддерживают CSS WebReview’s charts
Увы, не все реализации CSS совершенны. Когда вы начнете
экспериментировать с таблицами стилей, вы вскоре заметите, что
каждый браузер имеет ряд багов и ограничений. В целом, новые
браузеры ведут себя лучше старых. IE4 и O3.5 среди лучших, а
следующее предложение Netscape под кодовым именем Gecko также
обещает более усовершенствованную поддержку для CSS.
Те, кто не пользуется CSS-расширенными браузерами, все же могут
читать страницы, использующие таблицы стилей. CSS заботливо
спроектировали так, чтобы всё содержимое оставалось видимым, даже
если браузер ничего не знает о CSS. Некоторые браузеры, такие как
вторая и третья версии Netscape Navigator, не поддерживают таблицы
стилей, но они знают о теге style
чтобы полностью его игнорировать. После поддержки таблиц стилей,
это и есть правильное поведение.
Однако другие браузеры, которые не поддерживают тега style, такие как Netscape Navigator 1 и
Microsoft Internet Explorer 2, проигнорируют теги style, но покажут содержимое
контейнера style. Таким образом,
пользователь получит таблицу стилей напечатанной вверху страницы.
В настоящий момент, лишь небольшой процент пользователей Сети
может столкнуться с этой проблемой. Чтобы предупредить это, можно
поместить свою таблицу стилей внутрь HTML-комментария, что мы обсудим в главе
1. Поскольку
комментарии не отображаются на экране, поместив таблицу стилей
внутрь HTML-комментария, вы не дадите старейшим браузерам показать
содержимое контейнера style.
CSS-расширенные браузеры учитывают этот трюк и расценят содержимое
контейнера style как табицу стилей.
Вспомните, что комментарии HTML начинаются с <!--
и заканчиваются на -->
. Вот кусочек предыдущего примерного кода, показывающий, как
писать таблицу стилей в комментарии HTML. Комментарий окружает
только содержимое контейнера style:
<HTML> <TITLE>Bach's home page</TITLE> <STYLE> <!-- h2 { color: green } --> </STYLE> <BODY> .. </BODY> </HTML>
В CSS также есть собственные способы
комментирования, которые можно использовать внутри таблицы стилей.
Комментарий CSS начинается с «/*» и оканчивается на «*/.» (Те, кто
знаком с языком программирования C, узнают его.) Правила CSS
помещененные в комментарий CSS никак не повлияют на предсталение
документа.
Браузеру необходимо сообщить, что вы работаете с
таблицами стилей CSS. В настоящее время CSS единственный язык
таблиц стилей, используемый с HTML-документами, и мы не думаем,
что это скоро изменится. Для XML ситуация может быть и иной. Но
точно так, как существует более одного формата изображений (сразу
вспоминаются GIF, JPEG и PNG), может быть и больше одного языка
таблиц стилей. Так что это хорошая привычка сообщать браузерам,
что они работают с CSS. (К тому же, HTML этого требует.) Это
делается с помощью атрибута type
тега style. Значение type указывает, какой тип таблиц стилей
используется. Для CSS значение будет «text/css». Нижеследующее
отрывок из предыдущего документа-образца, показывающий, как лучше
писать это (в сочетании с использованием комментариев HTML):
<HTML> <TITLE>Bach's home page</TITLE> <STYLE TYPE="text/css"> <!-- h2 { color: green } --> </STYLE> <BODY> .. </BODY> </HTML>
Когда браузер загружает документ, он проверяет,
сможет ли он понять язык таблиц стилей. Если сможет, он пытается
прочесть таблицу, иначе проигнорирует. Атрибут type (см. в главе
1 обсуждение
HTML-атрибутов) в теге style это
способ дать браузеру понять, какой язык стилей используется.
Атрибут type должен быть включен.
Чтобы облегчить чтение примеров, мы решили не заключать таблицы
стилей в HTML-комментарии, но мы обязательно будем использовать
атрибут type во всей книге.
Древовидные структуры и наследование
Вспомните из главы 1 обсуждение HTML,
представляющего документ в виде древовидной структуры, и того, что
элементы HTML имеют дочерние и родительские объекты. Есть много
причин для создания древовидных документов. Для таблиц стилей есть
одна очень хорошая причина: наследование. Как дети наследуют своих
родителей, так и HTML-элементы. Только вместо наследования генов и
денег, элементы HTML наследуют стилистические свойства.
Давайте начнем с того, что посмотрим на документ-образец.:
<HTML> <TITLE>Bach's home page</TITLE> <BODY> <h2>Bach's home page</h2> <P>Johann Sebastian Bach was a <STRONG>prolific</STRONG> composer. Among his works are: <UL> <LI>the Goldberg Variations <LI>the Brandenburg Concertos <LI>the Christmas Oratorio </UL> </BODY> </HTML>
Древовидная структура этого документа выглядит так:
Посредством наследования, значения свойств CSS
присвоенные одному элементу, передадуться вниз по дереву его
потомкам. Например, в наших образцах зеленый цвет до сих пор
присваивается тегам h2 и h3. Теперь, скажем, нам нужно присвоить
этот цвет всем элементам документа. Можно сделать это, перечислив
все типы элементов в селекторе.:
<STYLE TYPE="text/css"> h2, h3, P, LI { color: green } </STYLE>
Однако, большинство документов HTML сложнее нашего
образца, и таблица стилей вскоре сильно удлинилась бы. Есть способ
лучше — и короче. Вместо присвоения стиля каждому типу элемента,
мы присваиваем его их общему предку: тегу body:
<STYLE TYPE="text/css"> BODY { color: green } </STYLE>
Поскольку прочие элементы наследуют свойства тега
body, все они наследуют и зеленый
цвет. (Рисунок 2.4 ).
Как вы уже заметили, наследование транспортное
средство, которое распространяет стилистические свойства на
потомков элемента. Поскольку тег body
общий предок всех видимых элементов, body подходящий селектор для присваивания стилистических
правил всему документу.
Аннулирование наследования
В предыдущем примере, всем элементам дали
одинаковый цвет посредством наследования. Иногда, все же, дети не
похожи на родителей. Не удивительно, что это применимо и к CSS.
Скажем, вы бы хотели, чтобы содержимое тегов h2 отображалось бы синим цветом, а остальное зеленым. Это
легко сделать в CSS:
<STYLE TYPE="text/css"> BODY { color: green } h2 { color: navy } </STYLE>
Раз тег h2 дочерний
элемент тега body (и, следовательно,
наследует body), эти два правила в
таблице стилей выше несовместимы. Первое присваивает цвет
содержимому тега body, а, значит, и
цвет элементов h2 посредством
наследования; в то время, как второе правило присваивает цвет
исключительно тегу h2. Какое из них
победит? Давайте узнаем:
Причина, по которой побеждает второе правило, в
том, что оно более конкретное
чем первое. Первое правило очень общее: оно влияет на все элементы
страницы. Второе правило из всего документа влияет только на
элементы h2, а, значит, оно более
конкретно.
Будь CSS языком програмирования, порядок, в котором
определяются правила, определял бы, какое из них выиграет. Но CSS
не язык программирования, и в примере выше порядок порядок не
имеет значения. Результат был бы точно таким, используй мы эту
таблицу стилей:
<STYLE TYPE="text/css"> h2 { color: navy } BODY { color: green } </STYLE>
CSS разработали так, чтобы разрешать противоречия
между таблицами стилей как в примере выше. Конкретность один из
аспектов этого. Детали можно найти в главе 15 , «Каскадирование и
наследование.»
Свойства, которые не наследуются
В общем случае, свойства в CSS наследуются от
родительского элемнта к дочернему, как описано в предыдущих
примерах. Некоторые свойства, однако, не наследуются, и в этом
всегда есть веская причина. Используем свойство background (описано в главе 11) как
пример свойства, которое не наследуется.
Скажем, вам нужно установить фоновое изображение для страницы.
Это обычный эффект в Сети. В CSS можно написать:
<HTML> <TITLE>Bach's home page</TITLE> <STYLE TYPE="text/css"> BODY { background: url(texture.gif) white; color: black; } </STYLE> <BODY> <h2>Bach's <EM>home</EM> page</h2> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>
Свойство background «фон» имеет URL («texture.gif»), указывающий фоновое изображение
в качестве значения. Когда изображение загружено, страница
выглядит так:
В примере выше есть несколько вещей, о которых
стоит рассказать подробнее:
- Фоновое изображение перекрывает поверхность
наподобие обоев фоны элементов h2 и
p также были перекрыты. Это не из-за
наследования, причина в том, что если не определено иначе, все
фоны прозрачны. Так что, раз мы не определили как-либо фоны для
содержимого тегов h2 или p, фон родительского элемента body будет просвечивать. - Вдобавок к URL изображения, в качестве фона
также приваивается цвет (по умолчанию белый). Если изображение не
будет найдено, вы увидите вместо него цвет. - Цвет содержимого body установлен черным. Чтобы гарантировать контраст
между текстом и фоном, хорошей привычкой будет всегда
устанавливать свойство color
когда устанавливаете свойство background.
А почему, собственно, свойство background не наследуется? Визуально,
эффект от прозрачности подобен наследованию: выглядит так, будто
все элементы имеют один и тот же фон. Есть две причины: во-первых,
прозрачные фоны отображаются скорее (нечего отображать!), чем
прочие фоны. Во-вторых, поскольку фоновые изображения
выравниваются относительно элементов, к которым принадлежат, т.е.
в ином случае вы бы не всегда наблюдали гладкие стыковки фона.
Стандартные задачи в CSS
Присвоения цветов и фонов, как описано выше, среди
наиболее частых задач, выполняемых CSS. Прочие общие задачи
включают присвоение шрифтов и свободного места вокруг элементов.
Этот раздел обеспечивает вам экскурсию по наиболее часто
используемым свойствам CSS.
Частые задачи: шрифты
Начнем-ка со шрифтов. Если вам случалось
пользоваться специальными приложениями для верстки, вы сможете
разобраться в этой небольшой таблице стилей:
h2 { font: 36pt serif }
Это правило присваивает определенный шрифт
элементам h2. Первая часть значения
36pt устанавливает шрифт размером 36
пунктов. «Пункт» старая типографская единица измерения, которая
здравствует и в цифровом веке. В следующей главе мы расскажем,
почему стоит использовать единицу «em» вместо «pt» но пока что
заострим внимание на пунктах. Вторая часть значения serif сообщает браузеру, что нужно
использовать шрифт с серифами (маленькими засечками на концах
шрифтов, глава 5 расскажет вам о них
подробнее). Более декоративные шрифты с засечками лучше подходят
домашней страничке Баха, поскольку современные санс-серифные
шрифты (шрифты без засечек) не использовались в его время. Вот
результат:
Свойство font
это укороченное свойство для установки нескольких других свойств
одновременно. Используя его, можно сократить свои таблицы стилей,
и присвоить значения всем свойствам, которые оно заменяет. Если
же выбрать подробную версию, пришлось бы установить каждое из
них, чтобы получилось, как в примере вверху:
h2 { font-size: 36pt; font-family: serif; font-style: normal; font-weight: normal; font-variant: normal; line-height: normal; }
Иногда нужно всего лишь установить лишь одно из
них. Например, вам нужно наклонить текст в некоторых элементах.
Вот пример.:
UL { font-style: italic }
Свойство font-style не изменит размера шрифта либо семейство
шрифтов, оно просто наклонит существующий шрифт. Когда оно
присвоено элементу ul, содержимое
тегов li внутри этого контейнера
станет наклоенным, поскольку свойство font-style наследуется. Вот результат применения к
тестовой странице, которые вы уже знаете.:
Похожим образом, свойство font-weight используется для изменения плотности
толщины букв. Можно еще больше выделить пункты списка, присвоив
их предку значение bold:
UL { font-style: italic; font-weight: bold; }
Что выводит:
Последние свойства font-variant и line-height до сих пор не слишком широко
поддерживаются браузерами, а потому не используются широко.
Частые задачи: поля
Установка свободных пробелов вокруг элементов
основной инструмент в типографии. Вверху заголовка над этим
абзацем есть интервал, немного меньший внизу его. У этого абзаца,
напечатанного в книге, есть свободные промежутки слева и (немного
меньше) справа. CSS можно использовать, чтобы определить, сколько
расстояния должно быть вокруг различных видов элементов.
По умолчанию, ваш браузер знает совсем немного о том, как
отображать раличные виды элементов в HTML. Например, он знает,
что списки и содержание тегов blockquote печатаются с отступами, чтобы отделить их от
основного текста. Как дизайнер, вы можете основываться на этих
установках, одновременно определяя свои собственные детали.
Давайте попробуем Давайте рассмотрим тег blockquote в качестве примера. Вот тестовый документ:
<HTML> <TITLE>Fredrick the Great meets Bach</TITLE> <BODY> <P>One evening, just as Fredrick the Great was getting his flute ready, and his musicians were assembled, an officer brought him a list of the strangers who had arrived. With his flute in his hand he ran over the list, but immediately turned to the assembled musicians, and said, with a kind of agitation: <BLOCKQUOTE>"Gentlemen, old Bach is come." </BLOCKQUOTE> <P>The flute was now laid aside, and old Bach, who had alighted at his son's lodgings, was immediately summoned to the Palace. </BODY> </HTML>
Скриншот внизу показывает, как типичный
HTML-браузер отобразит этот документ:
Как можно видеть, браузер добавил пробелы со всех
сторон цитируемого текста. В CSS эти пробелы называются «margins»
«поля» и все элементы имеют поля со всех четырех сторон. Свойства
называются: margin-top, margin-right, margin-bottom и margin-left. Можно изменить отображение содержимого
контейнера blockquote, написав
маленькую таблицу стилей:
BLOCKQUOTE { margin-top: 1em; margin-right: 0em; margin-bottom: 1em; margin-left: 0em; font-style: italic; }
Единица «em» будет подробно рассмотрена в
следующей главе, но уже сейчас можно раскрыть ее секрет: она
масштабирует относительно размера шрифта. Таким образом, код в
примере выше создаст вертикальные поля такой же высоты, как и
шрифт (1em) элемента blockquote, и горизонтальные поля с
нулевой шириной. Чтобы убедиться, что цитируемый текст все-таки
будет отличаться, сделаем его курсивным. Результат таков:
Точно так же, как font укороченное свойство для установки нескольких
шрифтовых свойств сразу, margin
это укороченное свойство которое устанавливает все свойства
полей. Поэтому пример вверху можно записать и как:
BLOCKQUOTE { margin: 1em 0em 1em 0em; font-style: italic; }
Первая часть значения — 1em — присваивается верхнему полю (собственное свойство
margin-top). Отсюда отсчитывается против часовой стрелки: 0em присваивается к margin-right (правое поле), 1em присваивается margin-bottom (нижнее поле), и 0em присваивается margin-left (левое поле).
Поскольку левое поле равно нулю, цитируемому тексту нужно
больше стиля, чтобы отделить его от остального текста. Установка
в font-style значения italic помогает, а добавление фонового цвета
еще больше усиливает цитату:
BLOCKQUOTE { margin: 1em 0em 1em 0em; font-style: italic; background: #EDB; }
Вот результат:
Как и ожидалось, фоновый цвет позади цитаты
изменился. В отличие от предыдущих примеров, цвет определялся в
частях красного-зеленого-синего (RGB от англ. red/green/blue)
цветов. Цвета RGB детально описываются в главе
11 .
Стилистической проблемой в верхнем примере является то, что
фоновый цвет едва покрывает цитируемый текст. Пространство вокруг
цитаты область границ не запоняется цветом элемента. В CSS есть
другой вид разделителей, называемый «padding» «заполнение
пустотой», который и использует цвет элемента. В других Во всех
других отношениях, свойства заполнения подобны свойствам границ:
они добавляют промежутки вокруг элемента. Давайте добавим
заполнение к цитате:
BLOCKQUOTE { margin: 1em 0em 1em 0em; font-style: italic; background: #EDB; padding: 0.5em; }
Результат установки заполнения выразился в пробеле
между текстом и треугольником, его окружающим:
Обратите внимание, что свойству padding дано лишь одно значение (0.5em). Как и свойство margin, padding может принимать 4 значения, которые могут быть
приписаны к верхнему, правому, нижнему и левому заполнению
соответственно. Однако, когда одно и то же значение приваивается
всем сторонам, единичное его упоминание сработает. Это
справедливо и для padding и для
margin (также как и для
некоторых других свойств границ, которы описаны
См.
Промежутки вокруг блоков. ).
Частые задачи: ссылки
Чтобы облегчить пользователям проглядывание
гипертекстовых документов, ссылки должны иметь стиль, отличный от
нормального текста. Браузеры HTML часто подчеркивают текст
гиперссылок. Также применяются различные цветовые схемы,
указывающие, переходил ли уже пользователь по этой ссылке или
нет. Поскольку гиперссылки являются довольно значимой частью
Сети, в CSS есть специальная поддержка для их стилизации. Вот
простой пример:
A:link { text-decoration: underline }
Примерный код вверху указывает, что непосещенные
ссылки должны быть подчеркнуты:
Ссылки подчеркнуты, как мы и указали, но они
вдобавок синие, чего мы не указывали. Когда авторы не указывают
все возможные стили, браузеры используют стили по умолчанию,
чтобы заполнить пробелы. Взаимодействие между авторскими стилями,
стилями по умолчанию и пользовательскими стилями (собственными
предпочтениями пользователя) еще один пример противоречия между
решающими правилами CSS. Это называется «каскадом»(«C» в «CSS»).
Мы обсудим каскад ниже.
Селектор (A:link
) заслуживает
особого замечания. Вы, возможно, узнаете «A» как тег HTML, но
последняя часть нова. «:link» это один из так
называемых псевдо-классов CSS. Псевдо-классы используют, чтобы
наделить стилем элементы, основанные на информации извне самого
документа. К примеру, автор документа не может знать, перешли ли
по определенной ссылке или нет. Детально псевдо-классы
описываются в главе 4, а здесь мы лишь дадим
еще несколько примеров:
A:visited { text-decoration: none }
Это правило присваивает стиль посещенным ссылкам,
точно так, как A:link
присваивает стиль
непосещенным ссылкам. Вот пример посложнее:
A:link, A:visited { text-decoration: none } A:hover { background: cyan }
Последнее правило знакомит нас с новым
псевдо-классом :hover. При условии, что пользователь
перемещает указующее устройство (вроде мыши), определенный стиль
будет приложен к элементу, когда пользователь двигает курсор над
(«зависает» над) ссылкой. Вот как это выглядит:
У псевдо-класса :hover интересная
история. Он появился в CSS2 после того, как соответствующий
эффект стал популярен среди программистов JavaScript. Решение в
JavaScript требует сложного кода по сравнению с псевдо-классами
CSS, и это пример того, как CSS собирает эффекты, ставшие
популярными среди Веб-дизайнеров.
Слово о каскадах
Фундаментальной чертой CSS является то, что более
чем одна таблица стилей может повлиять на представление документа.
Эта черта известна как каскадность, потому что различные таблицы стилей считаются
идущими сериями. Каскадность является фундаментальной чертой CSS,
потому что мы знаем, что любой документ вполне вероятно может
получить таблицы стилей из многих исотчников: браузера, дизайнера
и, возможно, пользователя.
В последнем наборе примеров вы увидели, что цвет текста ссылок
стал синим без конкретизации таблице стилей. Кроме того, браузерам
известно, как форматировать содержимое тегов blockquote и h2 без явного
указания. Все, что браузер знает о форматировании, хранится в его
таблице стилей по умолчанию и
совмещается с авторскими и пользовательскими таблицами стилей,
когда документ отображается.
Мы годами знали, что дизайнеры хотят проектировать собственные
таблицы стилей. Однако, мы обнаружили, что пользователи тоже хотят
иметь возможность влиять на представление документов. С CSS они
могут сделать это заполняя личную таблицу стилей, которая
совместится с браузерной и дизайнерской таблицами. Все
противоречия между различными таблицами стилей решаются браузером.
Обычно, дизайнерская таблица стилей имеет высший приоритет в
документе, затем пользовательская, потом браузерная по умолчанию.
Однако пользователь может отметить, что правило очень важно, и
тогда оно аннулирует любые авторские или браузерные стили.
Мы углубимся в детали каскадирования в главе 15, «Каскадирование
и наследование». Перед этим, следует узнать многое о шрифтах,
промежутках и цветах.
CSS h2, h3: стилизация h2, h3 заголовков
Целью данной статьи, рассмотреть разные варианты стилизации h2, h3 заголовков. Тег h2 является важным тегом в теле
странички. Как правило, он содержит в себе тематический заголовок страницы. Тег
h2 должен выделяться,
чтобы пользователю не составляло трудности понять, о чем идет речь на странице
вашего сайта. Поэтому данный тег должен быть ярким моментом вашей страницы. CSS стилизация
тега h2 может быть
простой, но главное, чтобы размер шрифта был наибольшим среди других на
странице. И не только потому, чтобы бросался в глаза пользователю, это также
играет роль в релевантности странице, а значит и в оптимизации.
Тег h3,
это дополняющий тег, он может быть смысловым подразделением h2. Мы также будем рассматривать варианты
его стилизации.
Ниже предоставлены примеры и способы css стилизации h2, h3 заголовков.
Способы стилизации h2, h3 заголовков
Западный способ
Мой способ
Примеры CSS h2, h3
CSS
стилизация h2 заголовка
CSSh2 +
h3 (совместная
стилизация)
CSS стилизация h3
заголовка
Способы стилизации h2, h3 заголовков
Способы стилизации h2, h3 тегов,
мы будем рассматривать на создании ленты. Разберем, два варианта реализации
заголовка в виде ленты: западный и мой вариант. Заранее скажу, что приоритетнее
мой способ, но если вы имеете свои варианты (способы) стилизации заголовков,
буду благодарен, если поделитесь ими в комментариях.
Западный способ
Как вариант неплохой, только мне не очень нравится CSS способ
реализации ленты. Данный метод создания css h2 ленты, я нашел на одном из западных сайтов. Данная лента
реализована на чистом css коде, хотя кроссбраузерность пострадала (в IE выглядит
простым блоком). Ниже приведен исходный код css стиля.
h2.ribbon { font-size: 16px !important; position: relative; background: #ba89b6; color: #fff; text-align: center; padding: 1em 2em; margin: 0 0 3em; } h2.ribbon:before, h2.ribbon:after { content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid #986794; z-index: -1; } h2.ribbon:before { left: -2em; border-right-width: 1.5em; border-left-color: transparent; } h2.ribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: transparent; } h2.ribbon .ribbon-content:before, h2.ribbon .ribbon-content:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #804f7c transparent transparent transparent; bottom: -1em; } h2.ribbon .ribbon-content:before { left: 0; border-width: 1em 0 0 1em; } h2.ribbon .ribbon-content:after { right: 0; border-width: 1em 1em 0 0; }
В HTML коде, h2
лента, выглядит таким образом:
<h2><strong>CSS стилизация h2, h3 заголовков на sitear.ru</strong></h2>
Мой способ
Как видите, css код громоздкой, как для стилизации только h2 тега. Поэтому, предлагаю свой способ
создания подобной ленты. Кросбраузерность тестировалась на IE, FireFox, Opera, Chrome. Ниже предоставлен css код и все
исходные файлы.
h2 {height:67px; background: url(ribbon_left.png) left top no-repeat; color:#FFF;} h2 strong {height:67px; display:block; max-width:450px; margin-left:56px; padding-right:56px; background: url(ribbon_right.png) right top no-repeat;}
Способ применения в
HTML:
<h2><strong>CSS h2 заголовок на sitear.ru</strong></h2>
Картинки:
Общий вес картинок – 750 байт. CSS
код занимает не более двух строк, вес – 236 байт. Я доволен результатом, притом
все просто и понятно, в отличии от западного метода, где вес CSS кода – 980
байт. Хотя мой и западный вариант по
весу идентичны, в коде гораздо хуже разобраться, нежели обработать картинку в
фотошопе. Можно предположить, что скорость загрузки одного css файла,
быстрее, нежели трех файлов (сумарно
идентичных весу одного css файла), но можно реализовать background в
виде спрайтов, которые увеличат скорость загрузки сайта. Узнать об увеличении
скорости методом CSS спрайтов.
Примеры CSS h2, h3
Все примеры будут реализованы по принципу стилизации
заголовков моим методом (пример, сайт sitear.ru).
CSS стилизация h2 заголовка
В данном пункте остановимся на реальных примерах стилизации h2 заголовка. Примеры, громко
сказано, так как, у каждого сайта уникальный дизайн. Приведу один,
универсальный пример стилизации h2.
Мою идею стилизации заголовков вы уже поняли, хочу дополнить ее, используя в background-image прозрачность,
которую легко можно сделать в фотошопе. Пример смотрите ниже.
CSS код:
.heading { width:500px; background: #888;} h2 {height:70px; background: url(left.png) left top no-repeat; color:#FFF; line-height: 50px;} h2 strong {height:70px; display:block; margin-left:60px; padding: 6px 60px 0px 0px; background: url(right.png) right top no-repeat;}
Исходные картинки:
HTML код:
<div> <h2><strong>Текст h2 заголовка</strong></h2> </div>
Как видите исходные картинки имеют полупрозрачность, а в
классе heading, меняя
значение background, можно
добиться следующих результатов:
CSS h2 + h3 (совместная стилизация)
Стилизировать h2 и h3 вместе,
уместно при наличии эпилога, или маленького вступления к статье на вашем сайте, которое можно поместить в тег h3.
Например:
h2 – Стилизация
h2, h3 заголовков;
h3 – Учимся оформлять h2, h3 заголовки на css.
Это мой пример, вероятней всего у вас своя идея, как оформлять страницы сайта.
Пример css h2 +
h3, схож с пред идущим,
рассмотрим css код.
.left{height:100px; background: url(left.png) left top no-repeat;} .right{ width:500px; height:100px; display:block; margin-left:45px; padding: 0px 45px 0px 0px; background: url(right.png) right top no-repeat;} h2 {color:#FFF; font-size:18px; padding:15px;} h3 {color:#CCC; font-size:16px; padding:5px;}
Исходные картинки:
HTML код:
<div> <div> <h2>Текст h2 заголовка</h2> <h3>Маленькое вступление, или описание статьи, заключенное в h3 тег.</h3> </div> </div>
Отображение:
Суть совместной (h2 + h3) стилизации
заголовков, схожа с пред идущим примером, только в этом случае используются div блоки.
CSS стилизация h3 заголовка
Стилизация h3
заголовка дело не хитрое. Но, раз уж наша статья касается стилизации h2 и h3 заголовков, мы рассмотрим все до
конца.
Как правило, тег h3, используют для выделения подпунктов статьи или другого
материала на сайте. Например, как на сайте sitear.ru.
Я бы советовал создавать, скромные, неброские, но удобные h3 заголовки. Мне очень нравится идея,
как организовано на Википедии. Советую и вам создать подобно. Это просто и
удобно. Например:
<style> h3 {font: bold 18px Arial; color:#595; border-bottom:#CCC solid 1px; margin-top:25px;} </style> <h3>Пример стилизации h3 заголовка</h3> <p>Lorem ipsum dolor sit amet, <a href="http://sitear.ru">consectetuer adipiscing</a> elit. Ut pretium mauris nec arcu. Integer at leo vel ipsum elementum sodales. Nam est quam, posuere non, feugiat nec, consectetuer ac, lectus. Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <h3>Еще подраздел вашей статьи</h3> <p>Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilisis cursus mi ligula vitae nunc. Curabitur libero. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.</p>
Отображение:
Просто, удобно и кроссбраузерно.
Надеюсь, вам помогла моя статья. Если остались вопросы
или предложения по поводу css стилизации h2, h3 заголовков,
пишите в комментарии.
Дальше: Конвертация трафика сайта
Основы работы с селекторами CSS для новичков
В данном уроке мы с вами научимся более продвинутой работе с селекторами CSS.
В предыдущих уроках мы с вами использовали только один тип
селекторов — имя тега, по которому мы обращались ко всем таким тегам.
Однако, чаще всего нам нужны более точные способы обращения: к примеру,
мы хотим выбрать не все абзацы, а только некоторые из них.
Способы сделать это мы и будем изучать в данном уроке.
Однако, для начала разберем два тега, которые пригодятся нам в дальнейшем.
Блок . Тег div
Тег div служит контейнером для других тегов.
Сам по себе он ничего не делает,
однако в него можно положить много разных тегов, например, абзацев и заголовков,
а затем для всех них одновременно применить различные CSS свойства.
Для примера покрасим содержимое тега div в красный цвет (используя атрибут style):
<div>
<h3>
Lorem ipsum dolor sit amet.
</h3>
<p>
Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
В настоящее время тег div является одним из основных строительных элементов на сайте.
Вы еще столкнетесь с ним в дальнейшем много раз.
Блок . Тег span
Тег span является контейнером для кусочка текста. Вы уже знаете,
что для того, чтобы сделать, к примеру, жирный текст — следует использовать тег b.
Однако, что делать, если я хочу покрасить кусочек текста в красный цвет?
Для такого случая тега, подобного тегу b, не существует.
Для этого и предназначен тег span — сам по себе он абсолютно ничего
не делает, но для него можно
применить CSS стили, которые позволят нам добавить нужный эффект к кусочку текста.
Давайте покрасим некоторый текст в красный цвет:
<p>
Lorem ipsum <span>dolor</span> sit amet.
</p>
Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet.
Мы с вами изучили два необходимых нам тега и
теперь приступаем к изучению более сложной работы с селекторами.
Блок . Группировка селекторов
Иногда может возникнуть следующая ситуация:
вам нужно сделать одно и то же с разными тегами, например, покрасить все заголовки h3, h4
и абзацы в красный цвет.
В этом случае вам придется написать что-то вроде такого:
h3 {
color: red;
}
h4 {
color: red;
}
p {
color: red;
}
Однако, существует способ сделать это немного короче:
селекторы тегов можно объединять через запятую и CSS код применится
к ним всем одновременно. Приведенный выше код можно переписать покороче таким образом:
h3, h4, p {
color: red;
}
<h3>Заголовок h3</h3>
<h4>Заголовок h4</h4>
<p>
Абзац с текстом.
</p>
Так код будет выглядеть в браузере:
Заголовок h3
Заголовок h4
Абзац с текстом.
Группировать через запятую можно любое количество селекторов тегов,
пробел после запятой не имеет значения, можно без него, но с ним код более красивый.
Блок . Вложенность тегов друг в друга
Представим теперь ситуацию, когда мы хотим обратиться только к тем
тегам i, которые находятся внутри абзацев, и не хотим трогать те теги i,
которые находятся внутри заголовков h3.
Это делается с помощью так называемого контекстного селектора, который
позволяет обращаться к тегам по их вложенности в другие теги.
Чтобы показать вложенность, между селекторами следует поставить пробел
(этот пробел и есть знак контекстного селектора).
Например, так — p i — мы обратимся ко всем тегам i, находящимся внутри p,
p b — так ко всем тегам b внутри p,
а так — div p b — ко всем тегам b, которые находятся внутри абзацев p,
которые в свою очередь находятся внутри тега div.
В следующем примере мы обратимся ко всем абзацам внутри div и покрасим
их в красный цвет. Абзацы вне дива и другие элементы внутри дива (в нашем случае h3)
красными не станут:
div p {
color: red;
}
<div>
<h3>
Заголовок h3 внутри тега div.
</h3>
<p>
Абзац внутри тега div.
</p>
<p>
Абзац внутри тега div.
</p>
<p>
Абзац внутри тега div.
</p>
</div>
<p>
Абзац вне тега div.
</p>
Так код будет выглядеть в браузере:
Заголовок h3 внутри тега div.
Абзац внутри тега div.
Абзац внутри тега div.
Абзац внутри тега div.
Абзац вне тега div.
Блок . Выбор элемента по уникальному id
Следующий способ может вам понадобится в такой ситуации:
вам необходимо для всех абзацев поставить красный цвет,
а конкретно для этого абзаца — зеленый.
В этом случае, как вы уже знаете, можно воспользоваться атрибутом style, однако этот способ
не самый оптимальный (он захламляет HTML код CSS кодом).
Второй способ заключается в том, что нужному элементу дается атрибут id,
который содержит в себе уникальное имя нашего тега
(другого id с таким именем на странице быть не должно — будет конфликт).
Если мы дадим ему, к примеру,
имя test, тогда в CSS мы сможем обратиться к нему таким образом: #test —
то есть сначала пишется символ «решетка»,
а затем — то имя, которое мы записали в атрибут id.
Давайте сейчас для всех абзацев зададим красный цвет,
а для абзаца с id=»test» — зеленый:
p {
color: red;
}
#test {
color: green;
}
<p>
Абзац с атрибутом id в значении "test".
</p>
<p>
Обычный абзац с текстом.
</p>
<p>
Обычный абзац с текстом.
</p>
Так код будет выглядеть в браузере:
Абзац с атрибутом id в значении «test».
Обычный абзац с текстом.
Обычный абзац с текстом.
А теперь атрибут id дадим конкретному диву и покрасим содержимое этого дива
в красный цвет, обратившись к нему по его id:
#test {
color: red;
}
<div>
<h3>
Заголовок h3 внутри #test.
</h3>
<h3>
Заголовок h3 внутри #test.
</h3>
<h3>
Заголовок h3 внутри #test.
</h3>
<p>
Абзац внутри #test.
</p>
<p>
Абзац внутри #test.
</p>
<p>
Абзац внутри #test.
</p>
</div>
<p>
Абзац вне #test.
</p>
Так код будет выглядеть в браузере:
Заголовок h3 внутри #test.
Заголовок h3 внутри #test.
Заголовок h3 внутри #test.
Абзац внутри #test.
Абзац внутри #test.
Абзац внутри #test.
Абзац вне #test.
А теперь совместим контекстный селектор (который пробел, показывающий вложенность)
и id и сделаем так,
чтобы только абзацы (но не заголовки h3 в данном случае) из #test стали красного цвета:
#test p {
color: red;
}
<div>
<h3>
Заголовок h3 внутри #test.
</h3>
<h3>
Заголовок h3 внутри #test.
</h3>
<h3>
Заголовок h3 внутри #test.
</h3>
<p>
Абзац внутри тега div.
</p>
<p>
Абзац внутри тега div.
</p>
<p>
Абзац внутри тега div.
</p>
</div>
<p>
Абзац вне тега div.
</p>
Так код будет выглядеть в браузере:
Заголовок h3 внутри #test.
Заголовок h3 внутри #test.
Заголовок h3 внутри #test.
Абзац внутри #test.
Абзац внутри #test.
Абзац внутри #test.
Абзац вне #test.
Блок . Классы элементов
Обращение к элементу по его id имеет некоторый недостаток — так мы можем обратиться
только к одному элементу на странице.
А что делать, если нам, к примеру, нужны абзацы двух типов — красные
и зеленые и они могут чередоваться в произвольном порядке?
В этом случае гораздо удобнее будет воспользоваться классами.
Классы задаются с помощью атрибута class, в котором мы пишем имя класса.
Их преимущество в том, что один и тот же класс может быть у многих элементов
на странице. То есть, если элементы должны вести себя одинаково — мы даем им один и тот же класс.
Как обратиться к элементам с определенным классом в CSS: пусть мы задали
нужным нам элементам класс с именем test, тогда в CSS ко всем элементам
с этим классом мы можем обратиться следующим образом — .test — вначале символ «точка»
и потом имя класса из атрибута class.
В примере ниже и абзацы, и заголовки имеют один и тот же класс test,
который красит эти элементы в красный цвет:
.test {
color: red;
}
<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац без класса.
</p>
Так код будет выглядеть в браузере:
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
Блок . Определенный тег с заданным классом
Бывают такие ситуации, когда разные теги имеют один и тот же класс.
К примеру, у абзацев и заголовков h3 одновременно задан класс test.
Вам может потребоваться выбрать только абзацы с классом test,
не затрагивая заголовков h3 с этим же классом.
В этом случае вместо селектора .test я должен написать следующее:
p.test — таким образом я выберу все абзацы с классом test, не затронув
заголовки. Если же я напишу h3.test — то выберу все заголовки h3 с классом
test, не затронув абзацев.
В следующем примере только абзацы с классом test
станут красного цвета, а заголовки с таким же классом — не станут:
p.test {
color: red;
}
<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац без класса.
</p>
Так код будет выглядеть в браузере:
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
Итак, еще раз: p.test — такой селектор выбирает абзацы с классом
test. А вот если я сделаю так: p .test (поставлю пробел), то выберу
все элементы с классом test, находящиеся внутри абзацев.
Прочувствуйте эту разницу.
Давайте теперь выберем только h3 с классом test:
h3.test {
color: red;
}
<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац без класса.
</p>
Так код будет выглядеть в браузере:
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
А сейчас сделаем так, чтобы класс test задавал курсив всем элементам, которым он дан,
и чтобы при этом все заголовки h3 с классом test красились в красный цвет,
а абзацы с этим классом — в зеленый:
.test {
font-style: italic;
}
h3.test {
color: red;
}
p.test {
color: green;
}
<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац без класса.
</p>
Так код будет выглядеть в браузере:
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
Блок . Видео
Посмотрите следующее видео
из заочного курса: скачайте его по данной ссылке
(вам нужно именно про селекторы, пару видосов там лишние. Хотя они тоже лишними не будут) ).
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
Когда все решите — переходите к изучению новой темы.
Использование разделов и создание структуры HTML документа — Руководства Web-разработчика
Важно: В настоящее время нет известных реализаций алгоритма построения структуры документа в графических браузерах или пользовательских приложениях, использующих реабилитационные технологии, хотя такой алгоритм внедрён в другие приложения, например, в средствах проверки соответствия спецификации. Поэтому алгоритм построения структуры нельзя использовать для передачи структуры документа пользователям. Авторы рекомендуют использовать для этой цели степень важности заголовков (h2
—h6
).
Спецификация HTML5 предлагает разработчикам несколько новых элементов, позволяющих описывать структуру веб-документа с помощью стандартной семантики. В настоящей статье описываются эти элементы и способы их использования для создания требуемой структуры любого документа.
Структура документа, т. е. семантическая структура контента, заключённого в теги <body>
и </body>
, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом (<div>
) с включёнными в него элементами заголовка (<h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US) или <h6> (en-US)), содержащими его название. Структура документа определяется отношениями между этими элементами.
Так, следующая разметка:
<div >
<h2>Лесные слоны</h2>
<p>В данном разделе мы поговорим о малоизвестных лесных слонах.
...продолжение данного раздела...
<div >
<h3>Среда обитания</h3>
<p>Лесные слоны живут не на деревьях, а под ними.
...продолжение данного подраздела...
</div>
</div>
обеспечивает следующую структуру:
1. Лесные слоны 1.1 Среда обитания
Для задания нового раздела не обязательно использовать элементы <div>
. Для этого достаточно наличия элемента заголовка. Поэтому, разметка
<h2>Лесные слоны</h2>
<p>В данном разделе мы поговорим о малоизвестных лесных слонах.
...продолжение данного раздела...
<h3>Среда обитания</h3>
<p>Лесные слоны живут не на деревьях, а под ними.
...продолжение данного подраздела...
<h3>Рацион</h3>
<h2>Монгольская песчанка</h2>
обеспечивает следующую структуру:
1. Лесные слоны 1.1 Среда обитания 1.2 Рацион 2. Монгольская песчанка
Определение структуры документа и неявный алгоритм создания структуры в HTML 4 не отличаются чёткостью, что порождает множество проблем:
- Использование
<div>
для задания семантических разделов, без задания специальных значений для атрибутов class не позволяет автоматизировать алгоритм создания структуры («Является ли данный<div>
частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управления стилем?»). Другими словами, спецификация HTML4 не даёт точного определения разделу и чётких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с реабилитационными технологиями, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы<div>
в алгоритме построения структуры благодаря добавлению нового элемента<section>
. - Объединить несколько документов в один непросто: включение подчинённого документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов (
<article>
,<section>
,<nav>
и<aside>
), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками. - В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент
<aside>
, позволяющий исключить такие разделы из основной структуры. - Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента:
<nav>
для наборов ссылок, например, оглавления,<footer>
и<header>
для информации, касающейся всего сайта. Обратите внимание, что<header>
и<footer>
не создают разделы как<section>
, а, скорее, обеспечивают семантическую разметку частей раздела.
В общем, HTML5 обеспечивает большую точность при задании разделов и оглавлений, позволяя строить более предсказуемую структуру документа, что даёт браузерам возможность более качественно обслуживать пользователей.
Задание разделов в HTML5
Весь контент, находящийся внутри <body>
, является частью раздела. Разделы в HTML5 могут быть вложенными. Помимо основного раздела, определяемого элементом <body>
, границы разделов определяются явным или неявным образом. Явным образом заданные разделы – это контент внутри тегов <body>
, <section>
, <article>
, <aside>
и <nav>
.
Например:
<section>
<h2>Лесные слоны</h2>
<section>
<h2>Введение</h2>
<p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
</section>
<section>
<h2>Среда обитания</h2>
<p>Лесные слоны живут не на деревьях, а под ними.</p>
</section>
<aside>
<p>рекламный блок</p>
</aside>
</section>
<footer>
<p>(c) 2010 The Example company</p>
</footer>
Данный фрагмент HTML задаёт раздел верхнего уровня:
<section> <h2>Лесные слоны</h2> <section> <h2>Введение</h2> <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p> </section> <section> <h2>Среда обитания</h2> <p>Лесные слоны живут не на деревьях, а под ними.</p> </section> <aside> <p>рекламный блок</p> </aside> </section> <footer> <p>(c) 2010 The Example company</p> </footer>
Данный раздел имеет три подраздела:
<section> <h2>Лесные слоны</h2> <section> <h2>Введение</h2> <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p> </section> <section> <h2>Среда обитания</h2> <p>Лесные слоны живут не на деревьях, а под ними.</p> </section> <aside> <p>рекламный блок</p> </aside> </section> <footer> <p>(c) 2010 The Example company</p> </footer>
В результате получаем следующую структуру:
1. Лесные слоны 1.1 Введение 1.2 Среда обитания
Задание заголовков в HTML5
Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US), <h6> (en-US)) задаёт заголовок текущего раздела.
Элемент заголовка имеет определённую степень важности, определяемую цифрой в его названии, таким образом, <h2> (en-US) имеет максимальную степень важности, а <h6> (en-US) минимальную. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:
<section>
<h2>Лесные слоны</h2>
<p>В данном разделе мы поговорим о малоизвестных лесных слонах.
...продолжение данного раздела...
<section>
<h3>Среда обитания</h3>
<p>Лесные слоны живут не на деревьях, а под ними.
...продолжение данного подраздела...
</section>
</section>
<section>
<h4>Монгольская песчанка</h4>
<p>В данном разделе мы расскажем о монгольской песчанке.
...продолжение данного раздела...
</section>
приводит к следующей структуре:
1. Лесные слоны 1.1 Среда обитания 2. Монгольская песчанка
Обратите внимание, что степень важности элемента заголовка (в данном примере <h2> (en-US) для первого раздела верхнего уровня, <h3> (en-US) для подраздела <h4> (en-US) для второго раздела верхнего уровня) роли не играет. (В качестве заголовка явно заданного раздела может использоваться заголовок с любой степенью важности, хотя такая практика и не рекомендуется.)
Неявное задание разделов
Поскольку элементы задания разделов HTML5 Sectioning Elements не являются обязательными для задания структуры, можно задавать разделы и не используя их, чтобы обеспечить совместимость с веб-сайтами, созданными на HTML4. Это называется неявным заданием разделов.
Элементы заголовков (<h2> (en-US) — <h6> (en-US)) задают новый, неявный раздел, когда не являются первым заголовком своего родительского, явно заданного раздела. То, как этот неявно заданный раздел располагается в структуре документа, определяется отношением важности его заголовка в важности предыдущего заголовка в родительском разделе. Если его степень важности ниже, чем у предыдущего заголовка, он открывает неявно заданный подраздел раздела. Следующий код:
<section>
<h2>Лесные слоны</h2>
<p>В данном разделе мы поговорим о малоизвестных лесных слонах.
...продолжение данного раздела...
<h4>Среда обитания</h4>
<p>Лесные слоны живут не на деревьях, а под ними.
...продолжение данного подраздела...
</section>
приводит к следующей структуре:
1. Лесные слоны 1.1 Среда обитания (неявно задано элементом h4)
Если степень важности такого заголовка совпадает со степенью важности предыдущего заголовка, он закрывает предыдущий раздел (который мог быть задан неявно!) и открывает новый неявно заданный раздел на том же уровне:
<section>
<h2>Лесные слоны</h2>
<p>В данном разделе мы поговорим о малоизвестных лесных слонах.
...продолжение данного раздела...
<h2>Монгольская песчанка</h2>
<p>Монгольская песчанка – это небольшое симпатичное млекопитающее.
...продолжение данного раздела...
</section>
приводит к следующей структуре:
1. Лесные слоны 2. Монгольская песчанка (неявно задано элементом h2, который одновременно закрывает предыдущий раздел)
Если степень важности такого заголовка выше, чем у предыдущего заголовка, он закрывает предыдущий раздел и открывает новый неявно заданный раздел на более высоком уровне:
<body>
<h2>Млекопитающие</h2>
<h3>Киты</h3>
<p>В данном разделе мы поговорим о китах.
...продолжение данного раздела...
<section>
<h4>Лесные слоны</h4>
<p>В данном разделе мы поговорим о малоизвестных лесных слонах.
...продолжение данного раздела...
<h4>Монгольская песчанка</h4>
<p>Песчанки распространились далеко за пределы Монголии.
...продолжение данного подраздела...
<h3>Рептилии</h3>
<p>Рептилии – это холоднокровные животные.
...продолжение данного раздела...
</section>
</body>
приводит к следующей структуре:
1. Млекопитающие 1.1 Киты (неявно задаётся элементом h3) 1.2 Лесные слоны (явным образом задаётся элементом раздела) 1.3 Монгольская песчанка (неявно задаётся элементом h4, который одновременно закрывает предыдущий раздел) 2. Рептилии (неявно задаётся элементом h3, который одновременно закрывает предыдущий раздел)
Эта не та структура, которую можно было бы ожидать, бегло просмотрев теги заголовков. Чтобы разметка стала понятна человеку, а также чтобы степень важности заголовка соответствовала уровню вложенности раздела, рекомендуется использовать наглядные теги для открытия и закрытия разделов. Однако спецификация HTML5 этого не требует. Поэтому, если браузеры отображают структуру документа не так, как ожидалось, проверьте, нет ли в документе разделов, не явно закрытых элементами заголовков.
Исключение из общего правила соответствия степени важности тега уровню вложенности раздела делается для разделов, которые могут использоваться в нескольких документах. Например, раздел может храниться в системе управления контентом и добавляться в документы при их генерировании. В этом случае рекомендуется начинать с <h2> (en-US) в качестве главного заголовка многократно используемого раздела. Уровень вложенности многократно используемого раздела будет определяться иерархией разделов документа, в который он добавляется. Теги для явного задания разделов по-прежнему останутся полезными и в этом конкретном случае.
Корни задания разделов
Корень задания разделов – это элемент HTML, который может иметь собственную структуру, однако входящие в неё разделы и заголовки, не входят в структуру его родительского элемента. Помимо <body>
, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: <blockquote>
, <details>
, <fieldset>
, <figure>
и <td>
.
Например:
<section>
<h2>Лесные слоны</h2>
<section>
<h3>Введение</h3>
<p>В данном разделе мы поговорим о малоизвестных лесных слонах</p>
</section>
<section>
<h3>Среда обитания</h3>
<p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят учёные в «<cite>Лесной слон на Борнео</cite>»:</p>
<blockquote>
<h2>Борнео</h2>
<p>Лесной слон живёт на Борнео...</p>
</blockquote>
</section>
</section>
Данный пример приводит к следующей структуре:
1. Лесные слоны 1.1 Введение 1.2 Среда обитания
Данная структура не включает внутреннюю структуру элемента <blockquote>
, который, будучи внешней цитатой, является корнем задания разделов и изолирует свою внутреннюю структуру.
Разделы, не входящие в структуру
HTML5 вводит два новых элемента, позволяющих задавать разделы, не входящие в основную структуру веб-документа:
- Элемент вспомогательного раздела
<aside>
задаёт раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы. - Элемент навигационного раздела
<nav>
задаёт раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.
Шапки и подвалы
HTML5 также добавляет два новых элемента, которые могут использоваться для разметки верхнего и нижнего колонтитулов страниц:
- Элемент шапки
<header>
задаёт шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).<article>
,<section>
,<aside>
, и<nav>
могут иметь собственный<header>
. Несмотря на название, этот элемент не обязательно располагается в начале страницы или раздела. - Элемент подвала (
<footer>
) задаёт нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п.<article>
,<section>
,<aside>
и<nav>
могут иметь собственный<footer>
. Несмотря на название, этот элемент не обязательно располагается в конце страницы или раздела.
Эти элементы не создают новые разделы в структуре, а скорее используются для разметки контента внутри разделов страницы.
Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента <address>
, расширенного в HTML5.
Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создаётся не автором основной страницы, для задания используется элемент <article>
. В результате элемент <address>
теперь связан с ближайшим родительским <body>
или <article>
.
Элементы разделов и заголовков должны работать в большинстве браузеров, не поддерживающих HTML5. Хотя они и не поддерживаются, они не требуют специального интерфейса DOM, им требуется лишь особый стиль CSS, поскольку к неизвестным элементам по умолчанию применяется стиль display:inline
:
section, article, aside, footer, header, nav, hgroup {
display:block;
}
Конечно, веб-разработчик может применить к ним любой другой стиль, однако следует помнить в браузерах, не поддерживающих HTML5, по умолчанию используется не тот стиль, который требуется для таких элементов. Также обратите внимание на отсутствие в перечне элемента <time>
, поскольку по умолчанию к нему применяется одинаковый стиль как в браузерах, не поддерживающих HTML5, так и в браузерах, совместимых с HTML5.
Данный способ не универсален, поскольку некоторые браузеры не позволяют применять стили к неподдерживаемым элементам. Например, Internet Explorer (версии 8 и более ранней), для которого требуется специальный скрипт:
Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включённой поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержка скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент <noscript>
:
<noscript>
<strong>Внимание!</strong>
Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
</noscript>
This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:
Новые семантические элементы, добавленные в HTML5, обеспечивают стандартизацию описания структуры веб-документа. Они облегчают жизнь пользователям с ограниченными возможностями, просты в использовании, могут без особых проблем поддерживаться в старых браузерах и поэтому настоятельно рекомендуются к применению.
Типографика. Содержание · Bootstrap. Версия v4.0.0
Документация и примеры типографии Bootstrap, включая глобальные настройки, заголовки, текст документа, списки и т.д.
Глобальные настройки
Bootstrap предустанавливает глобальные стили отображения, типографии и ссылок. Когда нужно настроить больше элементов, проверьте наши классы текстовых утилит.
- Используйте набор встроенных шрифтов, который выберет лучшее семейство шрифтов
font-family
для всех ОС и девайсов. - Для более широкой и доступной шкалы шрифтов BS4 использует шрифт браузера по умолчанию
font-size
(обычно 16px), так что юзеры могут сами настроить шрифты через настройки шрифтов браузера. - Используйте атрибуты
$font-family-base
,$font-size-base
и$line-height-base
как типографическую базу для<body>
. - Задавайте глобальные цвета ссылок через
$link-color
и применяйте подчеркивание ссылок только в:hover
. - Используйте
$body-bg
для заданияbackground-color
для<body>
(по умолчанию стоит#fff
).
Эти стили находятся в _reboot.scss
, а глобальные переменные определены в _variables.scss
. Задавайте $font-size-base
в rem
.
Заголовки
Все HTML-заголовки (<h2>
—<h6>
) доступны в BS4.
Заголовок | Пример |
---|---|
| h2. Заголовок bootstrap |
| h3. Заголовок bootstrap |
| h4. Заголовок bootstrap |
| h5. Заголовок bootstrap |
| h5. Заголовок bootstrap |
| h6. Заголовок bootstrap |
<h2>h2. Заголовок bootstrap </h2>
<h3>h3. Заголовок bootstrap </h3>
<h4>h4. Заголовок bootstrap </h4>
<h5>h5. Заголовок bootstrap </h5>
<h5>h5. Заголовок bootstrap </h5>
<h6>h6. Заголовок bootstrap </h6>
Если вы хотите, чтобы стилизация шрифта совпадала с заголовком, но не можете использовать соотнесенный HTML-элемент, классы .h2
— .h6
также доступны.
h2. Заголовок bootstrap
h3. Заголовок bootstrap
h4. Заголовок bootstrap
h5. Заголовок bootstrap
h5. Заголовок bootstrap
h6. Заголовок bootstrap
<p>h2. Заголовок bootstrap </p>
<p>h3. Заголовок bootstrap </p>
<p>h4. Заголовок bootstrap </p>
<p>h5. Заголовок bootstrap </p>
<p>h5. Заголовок bootstrap </p>
<p>h6. Заголовок bootstrap </p>
Настройка заголовков
Используйте имеющиеся общие классы для воссоздания маленького вторичного текста-подзаголовка из Bootstrap 3.
Заголовок отображения
С выцветшим вторичным текстом
<h4>
Заголовок отображения
<small>С выцветшим вторичным текстом</small>
</h4>
«Заголовок дисплея»
Традиционные заголовки созданы для «работы» «в глубине» вашей страницы. Если вам необходимо выделить заголовок, используйте «заголовок дисплея» — большего размера, слегка более вычурный.
Display 1 |
Display 2 |
Display 3 |
Display 4 |
<h2>Display 1</h2>
<h2>Display 2</h2>
<h2>Display 3</h2>
<h2>Display 4</h2>
«Лид»
Создайте выделяющийся, отстоящий от основной массы параграф добавлением класса .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
Блочные текстовые элементы
Стили для обычных блочных элементов HTML5.
Тэг-выделитель для подсветки текста.
Удаленный текст.
Зачеркнутый.
Строка — дополнение к документу.
Подчеркнутая
Мелкий шрифт (типа нижний индекс).
Жирный текст.
Курсив.
<p>Тэг-выделитель для <mark>подсветки</mark> текста.</p>
<p><del>Удаленный текст.</del></p>
<p><s>Зачеркнутый.</s></p>
<p><ins>Строка - дополнение к документу.</ins></p>
<p><u>Подчеркнутая</u></p>
<p><small>Мелкий шрифт (типа нижний индекс).</small></p>
<p><strong>Жирный текст.</strong></p>
<p><em>Курсив.</em></p>
Классы .mark
и .small
дают стили, одинаковые с тэгами <mark>
и <small>
, но помогают избежать нежелательных семантических последствий, которые могут возникнуть с тэгами.
Также, свободно пользуйтесь тэгами <b>
и <i>
в HTML5. <b>
создан для выделения слов или фраз, когда выделение не придает словам дополнительной важности, а <i>
выделяет цитаты, прямую речь, термины и т.д.
Классы текстовых утилит
Изменяйте выравнивание текста, стиль, «жирность» и цвет с помощью текстовых утилит и утилит цвета.
Сокращения
Реализация элемента <abbr>
нужна для показа полной версии акронимов и сокращений по наведению. Этот тег имеет подчеркивание по умолчанию и показывает “help-cursor” для дополнительного контекста, а также для помощи юзерам-инвалидам.
Добавьте класс .initialism
к сокращению для создания слегка уменьшенного шрифта.
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>
Цитаты
Для цитат с другого источника в вашем документе. Оберните любой элемент в <blockquote>
для создания цитаты.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Наименование источника
Добавьте <footer>
для идентификации источника. Оберните имя источника в <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Кто-то знаменитый в <cite title="Название источника">Source Title</cite></footer>
</blockquote>
Выравнивание
Используйте текстовые утилиты, если необходимо изменить выравнивание блока цитат.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Кто-то знаменитый в <cite title="Название источника">Название источника</cite></footer>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Кто-то знаменитый в <cite title="Название источника">Название источника</cite></footer>
</blockquote>
Списки
Без элементов стилизации
Удаляет свойство по умолчанию list-style
и левый марджин элементов списка (только прямые «потомки»). Это работает лишь для прямых «потомков», т.е. вам необходимо будет добавлять класс для каждого из вложенных списков.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
Блочные
Удаляет у элементов списка значок слева и создает небольшой отступ margin
с помощью сочетания классов .list-inline
и .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul>
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>
Описание и выравнивание
Выравнивайте термины и описания по горизонтали, используя предустановленные классы сеточной системы BS4 (или семантические миксины). Для более длинных терминов вы можете добавить класс .text-truncate
чтобы «усечь» текст эллипсисом.
- Списки описания
- A description list is perfect for defining terms.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Truncated term is truncated
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Вложенность
-
- Список вложенных определений
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Truncated term is truncated</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt>Nesting</dt>
<dd>
<dl>
<dt>Nested definition list</dt>
<dd>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
Отзывчивая «типографика»
Этот термин означает масштабирование текста и компонентов простой регулировкой коренного элемента font-size
в медиа-запросах. Bootstrap не делает этого по умолчанию, но вы можете легко сделать это сами.
Вот пример. Выбирайте какие угодно font-size
и медиа-запросы.
html {
font-size: 1rem;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}
Контейнеры W3.CSS
Это мой заголовок
Это моя статья
Эта статья светло-серого цвета, а текст коричневого цвета.
Эта статья светло-серого цвета, а текст коричневого цвета.
Эта статья светло-серого цвета, а текст коричневого цвета.
Эта статья светло-серого цвета, а текст коричневого цвета.
Эта статья светло-серого цвета, а текст коричневого цвета.
Контейнерный класс
Класс w3-container добавляет отступ 16 пикселей слева и справа.
к любому элементу HTML.
Класс w3-container — идеальный класс для использования для всех элементов контейнера HTML, таких как:
Попробуй сам »
Нет разницы в способе W3.CSS обрабатывает
Класс w3-container можно использовать для стилизации нижних колонтитулов:
Нижний колонтитул
Информация о нижнем колонтитуле находится здесь
Пример
Нижний колонтитул
Информация о нижнем колонтитуле находится здесь
Попробуй сам »
Пример
<нижний колонтитул>
Нижний колонтитул
Информация о нижнем колонтитуле находится здесь
Попробуй сам »
Многие веб-страницы используют элементы