Преимущества каскадных таблиц стилей

Получить факты с этим коротким курсом CSS

Каскадные таблицы стилей имеют много преимуществ. Они позволяют вам использовать одну и ту же таблицу стилей для всего вашего сайта. Есть два способа сделать это:

  • связывание с элементом LINK
 
  • импорт с помощью команды @import
 
@import url ('http://www.yoursite.com/styles.css');

Преимущества и недостатки внешних таблиц стилей

Одна из лучших особенностей каскадных таблиц стилей заключается в том, что вы можете использовать их для обеспечения согласованности своего сайта. Самый простой способ сделать это – связать или импортировать внешнюю таблицу стилей. Если вы используете одну и ту же внешнюю таблицу стилей для каждой страницы вашего сайта, вы можете быть уверены, что все страницы будут иметь одинаковые стили.

Некоторые из преимуществ использования внешних таблиц стилей заключаются в том, что вы можете контролировать внешний вид нескольких документов одновременно. Это особенно полезно, если вы работаете с командой людей для создания вашего сайта. Многие правила стиля могут быть трудны для запоминания, и, хотя у вас может быть печатное руководство по стилю, утомительно постоянно пролистывать его, чтобы определить, нужно ли писать пример текста шрифтом Arial с 12 точками или курьером с 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 = "text/css" > 

Импорт таблиц стилей CSS

Импортированные таблицы стилей помещаются в элемент STYLE. Затем вы можете использовать встроенные стили, если хотите. Вы также можете включить импортированные стили в связанные таблицы стилей. Внутри СТИЛЯ или CSS-документа напишите:

 @import url ('http://www.yoursite.com/styles.css'); 

Оцените статью
Solutics.ru
Добавить комментарий