—»     —»   Лучший способ применения CSS на странице?
  Раздел: CSS/Style Sheets   Комментариев: 2  

Лучший способ применения CSS на странице?



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

Лучший способ применения CSS на странице?

Использование тега «link» в HTML

Это лучший метод, который стоит применять (подробнее об этом можно прочесть в конце статьи). Внутри вашей веб-страницы, наряду с открывающими и закрывающими тегами «head», вы можете включить следующее:

<link rel="stylesheet" href="style.css">

С момента выхода HTML5, разработчики пристрастились добавлять атрибут type в элемент «link» для того, чтобы указать, какой тип файла вы включаете. Но валидаторы кода HTML никогда не требовали этого, а также это не требуется ни в одной версии любого браузера.

Применение @import At-Rule

Вместо элемента «link», вы можете включить ссылку на CSS-файл следующим образом:

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

Данный метод, так называемый At-Rule (это только один из типов At-Rule), должен быть включен либо внутри тегов «style» в головную часть вашего документа (head), либо внутрь таблицы стилей (на которую можно сослаться как раз посредством элемента «link», либо посредством другого правила @import).

Объявление @import должно быть перед каким-либо правилом CSS, в противном случае он не будет работать.

Применение элемента «style»

Вы можете включить CSS где-угодно на странице посредством внесения правил CSS в теги «style» следующим образом:

<style>
p {
margin: 0 0 20px 0;
}
</style>

Хотя подобное можно расположить где-угодно в документе HTML, лучше всего разместить эти строки внутри тега head.

Применение строчных стилей

Еще один способ внедрения CSS в веб-страницу заключается в применении строчных стилей. Данный метод позволяет вам определить стили для конкретного отдельного элемента. Например:

<p style="color: red; padding: 20px;">Example paragraph text goes here.</p>

Какой же метод – лучший?

Можно сразу сказать, что лучшим методом является первый описанный здесь. Конечно же, не стоит исключать случаи, когда и другие методы окажутся удобнее. В течение многих лет мы применяли каждый из этих способов. Меньше всего мы использовали и используем метод @import.

Метод @import потерял свою популярность по разным причинам. Во-первых, он был не совсем совместим с IE, что временами приводило к тому, что страница загружалась без стилей (если метод был включен в «head»). Также, раньше @import отлично подходил, когда в старых браузерах (типа Netscape 4) нужно было игнорировать CSS-стили, которые они не понимают. Но сейчас это уже не востребовано.

Также следует отметить, что «тело» нестилизованного контента не появляется, если вы используете элемент «link», поэтому нужно обратиться к другому файлу в CSS посредством метода @import.

Еще два предложенных метода (использование элемента «style» и строчные стили) следует избегать, так как они не очень хорошо подходят для долгосрочного применения. Например, если у вас целая куча кода CSS в «head», то этот CSS не будет влиять на что-либо. Как и в случае со строчными стилями, стили будут влиять только на определенные элементы.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 8929   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 13 января 2012 @ 04:44
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
На мой взгляд лучшего применения CSS на веб-странице нет - всё дело случая.
- Так как, для того чтобы подключить глобально стили к сайту,
мы в шапке кода, используем метод "link",
- Что бы временно поменять стиль (при редактировании), или добавить новый,
используем теги "<style>" или вписываем строчно к какому-либо элементу "style".
Так что применение данных "способов" зависит от обстановки.


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #2: 13 января 2012 @ 12:20
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3304   |   Комментариев: 500
ICQ: --- не указано ---
ITS, поддерживаю, все зависит от конкретной ситуации.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2019    »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031