Каскадные таблицы стилей есть много преимуществ. Они позволяют использовать одну и ту же таблицу стилей для всего сайта. Есть два способа сделать это:
- связь с элементом LINK
- импорт с помощью команды @import
Преимущества и недостатки внешних таблиц стилей
Одна из лучших вещей о каскадные таблицы стилей заключается в том, что вы можете использовать их, чтобы поддерживать целостность своего сайта. Самый простой способ сделать это - связать или импортировать внешнюю таблицу стилей. Если вы используете одну и ту же внешнюю таблицу стилей для каждой страницы своего сайта, вы можете быть уверены, что все страницы будут иметь одинаковые стили.
Некоторые из преимуществ использования внешних таблиц стилей включают то, что вы можете управлять внешним видом сразу нескольких документов. Это особенно полезно, если вы работаете с командой людей над созданием своего веб-сайта. Многие правила стиля бывает трудно запомнить, и хотя у вас может быть напечатанное руководство по стилю, иметь его утомительно. постоянно пролистывать его, чтобы определить, должен ли пример текста быть написан 12 кеглем шрифтом Arial или 14 кеглем Курьер.
Вы можете создавать классы стилей, которые затем можно использовать во многих различных элементах HTML. Если вы часто используете специальный шрифт Wingdings, чтобы выделить различные элементы на своей странице, вы можете использовать Wingdings. класс, который вы настроили в своей таблице стилей для их создания, а не для определения конкретного стиля для каждого экземпляра акцент.
Вы можете легко сгруппировать свои стили для большей эффективности. Все методы группировки, доступные для CSS, можно использовать во внешних таблицах стилей, и это дает вам больше контроля и гибкости на ваших страницах.
Тем не менее, есть также очень веские причины не использовать внешние таблицы стилей. Во-первых, они могут увеличить время загрузки, если вы дадите ссылку на многие из них.
Каждый раз, когда вы создаете новый файл CSS и связываете или импортируете его в свой документ, это требует от веб-обозревателя еще одного обращения к веб-серверу для получения файла. А серверные вызовы замедляют время загрузки страницы.
Если у вас мало стилей, они могут усложнить вашу страницу. Поскольку стили не видны прямо в HTML, любой, кто смотрит на страницу, должен получить другой документ (файл CSS), чтобы понять, что происходит.
Как создать внешнюю таблицу стилей
Внешние таблицы стилей пишутся так же, как встроенные и встроенные таблицы стилей. Но все, что вам нужно написать, это стиль селектор и декларация. Вам не нужен элемент или атрибут STYLE в документе.
Как и все остальные CSS, синтаксис правила:
селектор {свойство: значение; }
Эти правила записываются в текстовый файл с расширением.
.css. Например, вы можете назвать свою таблицу стилей.
styles.css.
Связывание документов CSS
Чтобы связать таблицу стилей, вы используете элемент LINK. У него есть атрибуты rel и href. Атрибут rel сообщает браузеру, что вы связываете (в данном случае таблица стилей), а атрибут href содержит путь к файлу CSS.
Существует также необязательный тип атрибута, который можно использовать для определения типа MIME связанного документа. Это не требуется в HTML5, но должно использоваться в документах HTML 4.
Вот код, который вы бы использовали для связывания таблицы стилей CSS под названием styles.css:
А в документе HTML 4 вы должны написать:
type = "текст / css">
Импорт таблиц стилей CSS
Импортированные таблицы стилей помещаются в элемент STYLE. Затем вы можете использовать встроенные стили, если хотите. Вы также можете включить импортированные стили в связанные таблицы стилей. Внутри документа СТИЛЬ или CSS напишите:
@import url (' http://www.yoursite.com/styles.css');