Как добавить CSS в веб-страницу

Подключение CSS-кода на странице можно производить четырьмя методами: в тело документа, встроить код в заголовочную часть страницы(header), указать ссылку на внешний файл, а также импортировать CSS-файл.

Встроенные стили

В первом случае стили применяются непосредственно к HTML-элементу. Вместо того чтобы объявить все стили сразу же, а далее применять их по ходу кода, вы стилизуете каждый элемент отдельно.

Пример:

<p style="color:olive;font-size:24px;">HTML Styles with CSS</p>

Посмотреть просмотр

Встроенный CSS считается быстрым и удобным методом стилизации HTML-документов, но злоупотреблять им не следует. Его применение значительно усложняет обслуживание веб-сайта. Необходимость внести незначительное изменение может привести к полной переработке кода.

Встроенная стилизация

Этот способ подключения CSS к HTML подразумевает, что вы добавляете весь необходимый программный код стилизации одним большим фрагментом. Это может стилизовать любой элемент на странице. Подобный подход можно реализовать путем встраивания CSS-кода при помощи <style> в заголовочную часть страницы. К примеру, поместите приведенный ниже программный код в раздел <head> HTML-документа:

<style> body { background-color: darkslategrey; color: azure; font-size: 1.1em; }   h1 {        color: coral;    }    #intro {        font-size: 1.3em;    }.colorful {        color: orange;    }</style>

Примерно так будет выглядеть программный код HTML страницы:

<!DOCTYPE html><html>    <head>        <title>My Example</title>        <style>            body {                background-color: darkslategrey;                color: azure;                font-size: 1.1em;            }            h1 {                color: coral;            }            #intro {                font-size: 1.3em;            }.colorful {                color: orange;            }        </style>    </head>    <body>        <h1>Встроенная стилизация</h1>        <p id="intro">Может вам определять стили сразу же для всей страницы.</p>        <p class="colorful">Этот абзац оформлен с помощью класса.</p>    </body></html>

Посмотреть просмотр

Внешние стили

Внешние стили – это один из самых распространенных методов подключения стилей CSS.

Он подразумевает создание отдельного файла, содержащего в себе CSS-код. Далее на этот файл ссылаются HTML-страницы. Обычно для оформления всего веб-сайта используется один файл.

Чтобы добавить внешние стили на веб-страницу, воспользуйтесь тегом <link> с указанием атрибутов href и rel=»stylesheet»:

<!DOCTYPE html><html>    <head>        <title>Пример</title>        <link rel="stylesheet" href="/css/tutorial/example.css">    </head>    <body>        <h1>Встроенная стилизация</h1>        <p id="intro">Может вам определять стили сразу же для всей страницы.</p>        <p class="colorful">Этот абзац оформлен с помощью класса.</p>    </body></html>

Сейчас в HTML-файле нет никакой информации относительно стилизации элементов. Благодаря подключению файла CSS все стили не загромождают код разметки страницы.

Посмотреть просмотр

Импорт стилей

Также можно легко использовать CSS-правило @import, чтобы импортировать внешние таблицы стилей. Для этого воспользуйтесь тегом <style>. Здесь будет уместен любой из следующих синтаксисов:

<style>    @import "imported_style_sheet.css";    @import url("imported_style_sheet.css");</style>

Здесь используются те же стили, что и в предыдущих примерах, но импортированные при помощи @import:

<!DOCTYPE html><html>    <head>        <title>Пример</title>        <style>            @import "/css/tutorial/example.css";        </style>    </head>    <body>        <h1>Встроенная стилизация</h1>        <p id="intro">Может вам определять стили сразу же для всей страницы.</p>        <p class="colorful">Этот абзац оформлен с помощью класса.</p>    </body></html>

Посмотреть просмотр

Учтите, что данный способ подключения шрифтов CSS может негативно сказываться на производительности веб-сайта, так что рекомендуется использовать <link>.

Однако правило @import можно использовать внутри самого внешнего файла таблиц стилей для встраивания одного кода CSS в другой, не влияя на производительность.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *