Подключение CSS в HTML документ
Опубликованно 22.10.2018 00:48
Сейчас трудно представить себе изменение внешнего вида и форматирования HTML-документов без использования таблиц стилей CSS, так как HTML давно перестал быть самодостаточным язык для проектирования и начал выполнять свою родовую функцию структурирования и разметки веб-документов. В этой статье мы подробно расскажем о том, каким образом можно выполнить подключение CSS к документу HTML.
Кратко о CSS и HTML
Перед оформление веб-страниц был выполнен исключительно средствами HTML. Теперь этот подход не практикуется, и стиль, используемые инструменты CSS, которые имеют очень широкие возможности для создания потрясающего дизайна.
Для того, чтобы сделать ваш сайт правильно отображался на экране, необходимо выполнить подключение 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-документа с помощью атрибута style.
Синтаксис:
<p style="color:red">В этом абзаце текст красного цвета</p>
Очевидный недостаток-отсутствие универсальности, предписать значение, необходимое для каждого тега.
Бесплатный CSS в HTML с помощью внутренних таблиц стилей не позволяет браузеру кэшировать информацию, в отличие от предыдущего метода.
Этот метод не рекомендуется использовать, он перегружает документ и замедляет восприятие браузера. Если документ содержит несколько вариантов стиля для внутренней таблицы стилей будут в приоритете. Глобальный стиль
Если вам необходимо задать стиль для конкретного элемента, в документ HTML, используя тег <style>. В этом случае не придется прописать значения каждый раз, но можно указать только один раз.
Выглядеть код будет так:
<head> <style> 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, которая, в свою очередь, находится в корневом каталоге. Для удобства лучше создать отдельные папки для разных файлов и элементы (картинки, скрипты, таблицы стилей и т. д.).
Итак, в папке fonts у нас, вы найдете файл с именем open sans.ttf, с обычными параметрами. Теперь будет отображаться в браузере. Подключаем шрифт на Google Fonts
Одним из наиболее распространенных способов подключения шрифта в CSS и HTML-это сервис Google Fonts.
Интерфейс интуитивно понятен, необходимо найти подходящий шрифт по названию или параметрам, нажмите кнопку Select this font, и сервис моментально генерирует код, который вводится в поле тега <head> HTML-документа, а также в соответствующий CSS-файл со стилями.
Как это должно выглядеть в HTML:
<link href="https://fonts.googleapis.com/css?family=Open+S" rel="stylesheet">
И в CSS-файл со стилями:
font-family: 'Open Sans', sans-serif;
Этот метод полезен тем, что позволяет быстро найти нужный шрифт из очень большой базы данных, и позволяет сэкономить много времени, а также устранить проблемы, которые возникают из-за неправильного отображения шрифтов в некоторых браузерах.
Для того, чтобы подвести итоги
Таким образом, мы рассмотрели основные способы подключения стилей CSS в HTML-документы. Исходя из задач, которые ставятся перед разработчиком в любом случае, вы можете выбрать выше в списке.
Дизайн веб-страниц-это творческий процесс, который требует, однако, хороший подход. Используйте возможность комментировать код и не забывайте о оптимизации веб-сайтов. Автор: Ольга Чекмарева 1 Октября 2018 года
Категория: Строительство
