Подключение таблиц стилей в HTML. Как с помощью CSS изменить внешний вид страницы?

подключение таблиц стилей в html. как с помощью css изменить внешний вид страницы?

Для чего нужны таблицы стилей

На ранних этапах развития HTML использовались специальные атрибуты для изменения внешнего вида элементов. Это позволяло управлять отступами, цветом текста, размерами блоков и другой стилизацией. Такой подход был ограничен в возможностях. Интернет не переставал развиваться, а крупные коммерческие организации искали пути улучшения внешнего вида своих сайтов, что позволило бы им увеличить продажи и удержать внимание пользователей.

В 1994 году началось внедрение технологии Cascading Style Sheets (абр. CSS, рус. Каскадные таблицы стилей). Это формальный язык, с помощью которого можно отдавать браузеру инструкции по особой стилизации элементов. Инструкции могут быть собраны в отдельном файле и добавляться к странице с помощью специального элемента.

Подключение таблиц стилей позволяет отделить структуру документа, составленную с помощью HTML, от особенностей её визуального оформления. Это очень практичный подход. Если у вас есть страница с правильно составленной разметкой, вы можете менять её внешний вид, подключив другой файл со стилями.

Заметка
Новые стандарты HTML5 запрещают использовать специальные атрибуты элементов для стилизации страниц. Браузеры по-прежнему обрабатывают эти возможности, но такая разметка не проходит проверку валидатора World Wide Web Consortium https://validator.w3.org/. Подключение CSS является стандартной и современной практикой.

Язык составления каскадных стилей за всё время существования обрел массу дополнительных возможностей. Он не сложен в изучении и совершенно необходим тем, кто хочет дальше развиваться в создании сайтов и веб-приложений.

Подключение стилей к странице

Для подключения стилей в HTML используется элемент <link>. Файл может храниться как на вашем сервере, так и скачиваться со стороннего ресурса. Место расположения указывается атрибутом href. В его значении должен содержаться абсолютный или относительный URL-адрес. Данный элемент не требует закрывающего тега.

Обычно элементы <link> размещаются внутри <head>. Такой подход позволяет логически структурировать документы и отделять основную разметку от вспомогательной.

Для определения отношения текущего документа и подключаемого файла необходимо задать атрибут rel со значением stylesheet. Это явным образом укажет браузеру, что содержимое нужно обработать как таблицу стилей и применить к текущей разметке.

Отметим, что стили могут быть применены к документу и без подключения файла. Для этого нужно использовать элемент <style>. Все правила стилей размещаются между его открывающим и закрывающим тегом «<style>правила стилей</style>».

Ниже приводится пример, в котором происходит подключение каскадных стилей, расположенных в одной папке с HTML-страницей. Правила стилизации приводятся сразу за разметкой. Их нужно разместить в файле с именем style-exapmle.css.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример подключения файла с каскадными стилями</title>
        <link rel="stylesheet" href="/style-example.css">
    </head>
    <body>
        <div class="container">
            <div class="trigger">
                <img src="https://coder-booster.ru/images/main-logo.png"
                    alt="логотип ресурса Coder Booster">
                <span class="appeal">Поместите курсор мыши внутрь блока</span>
            </div>

            <p class="descript">Анимации - это одна из возможностей CSS.
                Встроенным функционалом HTML такого эффекта не добиться.</p>
        </div>
    </body>
</html>
html {
    display: table;
    height: 99.9%;
    width: 100%;
}

body {
    vertical-align: middle;
    display: table-cell;
    height: 99.9%;
    width: 100%;
    margin: 0;
}

.container {
    transition: all 0.5s ease;
    overflow: hidden;
    height: 160px;
    width: 300px;
    margin: auto;
}

.container:hover {
    height: 260px;
}

.trigger {
    border: 3px dashed #a5a5a5;
    border-radius: 0.5em;
    text-align: center;
    cursor: pointer;
    padding: 1em;
}

.appeal {
    display: inline-block;
    margin-top: 10px;
    font-size: 20px;
    color: #444444;
}

.descript {
    text-align: center;
    padding-top: 15px;
    margin: 0;
}
Пример использования таблиц каскадных стилей в HTML
Рис 1. Пример использования CSS анимаций

Последние публикации