Подключение CSS к HTML-документу
Опубликованно 05.11.2018 00:10
Теперь трудно представить себе изменение внешнего вида и форматирования документов HTML, без использования CSS, HTML давно перестал быть самодовлеющей язык для проектирования и стал выполнять свои главные функции структурирования и разметки веб-документов. В этой статье мы подробно расскажем, какие способы подключения CSS к HTML-документу.
Короче говоря CSS и HTML
Перед оформление веб-страниц осуществляется исключительно HTML. Теперь этот подход не практикуется, и для стиля используются инструменты CSS, которые имеют широкие возможности для создания великолепного дизайна.
Для того, чтобы сделать ваш web-сайт отображался правильно, необходимо выполнить подключение CSS в HTML-документе, эти средства работают неотрывно друг от друга, HTML создается структура и содержание стили отвечают за внешний вид.
Есть несколько способов, вы можете настроить отображение стилей в HTML-код, каждый из них имеет свои преимущества и недостатки.
Подключение файла CSS
Это основной метод, который, по мнению разработчиков, как наиболее практичный и удобный.
Благодаря этому методу, вы можете быстро изменять оформление веб-страницы, если заданная структура HTML-документа, например, для одного сайта, вы можете написать несколько вариантов оформления и подключать их в зависимости от необходимости.
Для подключения файла стиля, сначала необходимо настроить структуру файла (это делается, чтобы прописать путь к документу непосредственно в код.
Создайте каталог, где будет лежать основной документ HTML в той же папке, в текстовом редакторе создайте файл с именем style и сохранить его в резолюции .css. Она будет содержать код CSS, все правила, определенные стилизации документа.
Подключение CSS с помощью HTML, тег <link> с атрибутом href. Он выглядит следующим образом:
<head> <link href="style.css" rel="stylesheet"> </head>
Здесь код в тег <head>, он считается лучшим, но не обязательно. Он может быть размещен в любом месте в документе.
Этот метод заключается в том, что все изменения в таблице стилей записываются в файл, что облегчает понимание и читаемость кода и делает документ более чистым.
Если вы вносите изменения в стиле.css и открыть index.html в браузере можно будет увидеть все изменения, которые были изложены.
Таким же образом, вы можете определить не только путь к файлу, в структуре сайта, но ссылку на страницу с стиле, расположен в интернете. В этом случае, она также вписывается в кавычки атрибута href.
Способ подключения таблицы стилей из файла оптимизирует работу сайта, поскольку это позволяет браузеру загружать данные из кэша, в результате чего страница загружается быстрее.
Таблицы стилей внутри HTML-документа
Иногда значение текущего параметра непосредственно в тело HTML-документа с помощью атрибута стиля.
Синтаксис:
<p style="color:red">В этом абзаце текст в красный цвет</p>
Очевидный недостаток — отсутствие универсальности, прописать значение каждого тега.
Также подключение CSS в HTML с помощью внутренних таблиц стилей не позволяет браузеру кэшировать информацию, в отличие от предыдущего метода.
Этот метод не рекомендуется использовать, он перегружает документ и замедляет восприятие браузер. Если в документе используется несколько вариантов стилизации, внутри таблицы стилей будут в первую очередь. Глобальный стиль
Если вы хотите задать стиль для конкретного элемента в документ HTML, используя тег <style>. В этом случае, чтобы не иметь, чтобы определить значение каждый раз, и вы можете указать только один раз.
Смотреть код будет:
<head> <стиль> H1 { font-size: 130%; font-family: Georgia; color: #000000; } </style> </head>
Заданный стиль применяется к тегу <h1>, как только он регистрируется на странице.
Подключение CSS, так будет в приоритет воспроизведения браузера выше, чем внешнюю таблицу стилей.
Как войти на сайт полиции
Полиция является одним из основных элементов веб-страницы. Впечатление, что сайт производит на пользователя, зависит от используемого шрифта. К счастью, можно не ограничиваться стандартом гарнитур, есть возможность подключения всех других — объяснить, как это делается.
CSS подключение шрифта следующим образом: Найдите и скачайте соответствующей гарнитуры. Откройте файл CSS и пропишите в нем следующий код:
@font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans.ttf") format("truetype"); font-style: normal; font-weight: normal; }
Сначала задается имя шрифта, а затем путь, в конце вариантов. Обратите внимание, на этом примере, файл шрифта в папке fonts, которая, в свою очередь, находится в корневой директории. Для удобства лучше создать отдельные папки для разных файлов и элементов (изображения, скрипты, css, etc).
Таким образом, в папке fonts нас находится файл с именем OpenSans.ttf, классические параметры. Теперь он будет отображаться в браузере. Подключаем шрифты Google Fonts
Одним из самых распространенных способов подключения шрифтов в CSS и HTML, является сервис Google Fonts.
Интуитивно понятный интерфейс-вам нужен соответствующий шрифт по имени или критерии, нажмите на кнопку Select this font, и сервис мгновенно генерирует код, который вставляется в поле тега <head> HTML-документа, а также в CSS-файл со стилями.
Как это должно выглядеть в HTML-коде:
<link href="https://fonts.googleapis.com/css?family=Open+Без" rel="stylesheet">
И в CSS-файл со стилями:
font-family: 'Open Sans', sans-serif;
Этот способ удобен тем, что позволяет быстро найти шрифт очень большой, и позволяет сэкономить много времени, но и устраняет проблемы, которые возникают из-за отображения шрифтов в некоторых браузерах.
Подводя итог
Таким образом, мы рассмотрели основные способы подключения CSS-стилей к HTML-документов. В зависимости от целей, которые ставятся перед разработчиком в каждом конкретном случае, вы можете выбрать приоритет.
Оформление веб-страниц-это процесс творческий, требующий, однако, точность этого подхода. Используйте возможность прокомментировать код и не забудьте оптимизации веб-сайтов. Автор: Ольга Чекмарева 1 Октября 2018 года
Категория: обо всём
