by
ноября 24, 2019
0
комментариев
Основы. Создание таблиц стилей
Способы добавления таблиц стилей в HTML-документ
Дорогие читатели! В этом сообщении вы узнаете о CSS вообще и о всевозможных способах применения таблиц стилей CSS к HTML-документу в частности.
Объявление стиля состоит из двух частей: селектора и объявления. В HTML имена элементов нечувствительны к регистру. Объявление состоит из двух частей: имя свойства и значение свойства. Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.
Например, если мы хотим, чтобы заголовок первого уровня выводился на экран шрифтом «Tahoma» 20-го размера красного цвета по центру, запишем следующий код в таблице стилей:
а в коде HTML-документа запишем следующее:
В итоге на экране заголовок
Например:
На экране увидим всё тот же
Основы. Создание таблиц стилей
Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. Для каждого элемента можно использовать ограниченный набор свойств, остальные свойства не будут оказывать на него никакого влияния.Объявление стиля состоит из двух частей: селектора и объявления. В HTML имена элементов нечувствительны к регистру. Объявление состоит из двух частей: имя свойства и значение свойства. Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.
селектор { свойство: значение;}Способы добавления таблиц стилей в HTML-документ
Внешние таблицы стилей
При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило с расширением
.css, а для связывания документа с этим файлом применяется тег <link>. Данный тег помещается в контейнер <head>...</head>.Например, если мы хотим, чтобы заголовок первого уровня выводился на экран шрифтом «Tahoma» 20-го размера красного цвета по центру, запишем следующий код в таблице стилей:
h1 {
font-family: Tahoma; /* Шрифт текста «Тахома» */
font-size: 20pt; /* Размер текста 20 пунктов */
color: red; /* Цвет текста красный */
text-align: center; /* Выравнивание текста по центру */
}а в коде HTML-документа запишем следующее:
<!DOCTYPE html>
<html>
<head>
<link rel="style" href="http://site.ru/mysite.css"> <!-- Подключение внешней таблицы стилей -->
</head>
<body>
<h1>Заголовок 1-го уровня</h1> <!-- Вывод на экран заголовка 1-го уровня -->
</body>
</html>В итоге на экране заголовок
<h1> выведется на экран таким:
Заголовок 1-го уровня
Внутренние стили
При использовании внутренних стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. Этот способ позволяет хранить стили в самом HTML-документе с помощью контейнера
<style>...</style>, который должен располагаться внутри тега <body>...</body>.
Например:
<!DOCTYPE html>
<html>
<head>
...
<style> <!-- Объявление стилей внутри документа -->
h1 {
font-family: Tahoma;
font-size: 20pt;
color: red;
text-align: center;
}
</style>
...
</head>
<body>
<h1>Заголовок 1-го уровня</h1>
</body>
</html>
Результат будет тот же, что и в разделе выше:
Заголовок 1-го уровня
Встроенные стили
Встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут
style, а его значением выступает набор стилевых правил.Например:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<h1 style="font-family: Tahoma; font-size: 20pt; color: red; text-align: center;">Заголовок 1-го уровня</h1> <!-- Стили для отдельно взятого тега -->
</body>
</html>
На экране увидим всё тот же
Заголовок 1-го уровня
Смешанные стили
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Наивысший приоритет имеет встроенный стиль, меньший приоритет за внутренним стилем и наименьший у внешнего стиля.Импорт стилей
Правило
@import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами.
Синтаксис импорта следующий:
@import url("имя файла") типы носителей;
@import "имя файла" типы носителей;
0 комментариев:
Отправить комментарий