Как? Так! Ответы на популярные вопросы

Поделиться:

Как вставить файл CSS в HTML

Содержимое:

2 метода:

Язык гипертекстовой разметки (HTML) определяет, какие элементы присутствуют на веб-странице. Язык программирования «Каскадные таблицы стилей» (CSS) описывает, как должны выглядеть эти элементы. Файл CSS можно добавить в HTML в качестве внешней (CSS добавляют в виде отдельного файла) или внутренней таблицы стилей (CSS включают в файл HTML). Узнайте, как вставить в HTML файл CSS, чтобы изменить дизайн сайта.

1 Как уставить внешнюю таблицу стилей

  1. 1 Создайте файл CSS. Подготовьте и сохраните файл CSS с расшиернием «.css».
  2. 2 Загрузите файл CSS на сайт.
  3. 3 Скопируйте адрес (URL) файла CSS. Адрес сайта будет выглядеть как-то так: www.yoursite.com/stylesheet.css.
    • Хорошей практикой является удаление из адреса (URL) основного имени домена. Исходя из этого, адрес http://мойсайт.com/css/default.css будет сокращен до «/css/default.css». Не забудьте включить ведущий слэш («/»). Он называется относительным путем.
  4. 4 Вставьте в файл ссылку. Найдите в файле HTML метку </head> и создайте пустую строку прямо над ней. Вставьте в эту строку <LINK rel=stylesheet type="text/css" href="www.ваш_сайт.com/stylesheet.css">, заменив «www.ваш...» на ссылку в файле CSS.
  5. 5 Сохраните файл HTML и загрузите его на сайт.
  6. 6 Убедитесь, что на сайте все выглядит так, как и должно выглядеть. В противном случае снова откройте файл HTML, найдите ошибки и внесите изменения.

2 Как вставить внутреннюю таблицу стиля

  1. 1 Создайте метку <style>. Откройте файл HTML и найдите метку </head>. Добавьте над ней несколько пустых строк и введите следующее:
<STYLE type="text/css">
 
</STYLE>
  1. 1 Вставьте все свои CSS между этими двумя метками.
  2. 2 Сохраните файл HTML (с расширением .HTML).
  3. 3 Убедитесь, что на сайте все выглядит так, как и должно выглядеть. В противном случае внесите нужные изменения.

Советы

  • Всегда проверяйте внешний вид сайта в разных браузерах и на разных операционных системах. Некоторые браузеры подключаются к CSS немного по-разному. Это даже может произойти в одном и том же браузере, но на разных версиях Mac и Windows. Если в другом браузере ваш сайт выглядит иначе (например, промежуток между некоторыми объектами, такими как списки, имеет другой размер), тогда проблема заключается в настройках этого браузера. Найдите таблицу мастер-стилей и вставьте ее в начало файла CSS, чтобы изменить стандартные настройки браузера. Это делается для того, чтобы ваши настройки ничего не меняли в самом браузере.
  • Вставьте внешнюю таблицу стилей, если у вас есть такая возможность. Это позволит вам менять внешний вид сайта, изменяя код в исходном файле. Так вам не придется менять CSS на каждой странице сайта.
  • Если сайт не реагирует на CSS так, как вы того ожидали, перепроверьте всю кодировку, чтобы удостовериться в правильности ее написания. В частности, уделите особое внимание точкам с запятыми («;») и закрывающимся скобкам («}»). В CSS файле довольно просто пропустить один из этих символов.
  • Сохраните файл HTML на компьютер, чтобы потом открыть его в различных веб-браузерах и перепроверить его внешний вид перед дальнейшей загрузкой. Но чтобы его загрузить, файл CSS необходимо вставлять в HTML в качестве внешней таблицы стилей.
  • Если таблица стилей сама себе противоречит – например, сначала в ней говорится, что текст будет синим, а затем, что он будет красным – выполняться всегда будет последнее условие. Если одна команда представляет собой внешнюю таблицу стилей, а другая – внутреннюю, активной будет внутренняя таблица.

Предупреждения

  • Не используйте «открытую» постановку CSS, то есть CSS, который включен в метку HTML. (Пример: «align="center"» является открытой постановкой CSS). Это устаревший вариант с плохой синтаксической конструкцией. Если через некоторое время вам придется обновлять сайт, эту постановку будет трудно изменить.
Прислал: Новикова Ксения . 2017-11-05 16:22:13
Поделиться: