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

Загрузить PDF
Загрузить PDF

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

Метод 1
Метод 1 из 2:

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

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/05\/Add-a-CSS-File-to-HTML-Step-1-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/05\/Add-a-CSS-File-to-HTML-Step-1-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Подготовьте и сохраните файл CSS с расшиернием «.css».
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7e\/Add-a-CSS-File-to-HTML-Step-2-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7e\/Add-a-CSS-File-to-HTML-Step-2-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a2\/Add-a-CSS-File-to-HTML-Step-3-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a2\/Add-a-CSS-File-to-HTML-Step-3-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Адрес сайта будет выглядеть как-то так: www.yoursite.com/stylesheet.css .
    • Хорошей практикой является удаление из адреса (URL) основного имени домена. Исходя из этого, адрес http://мойсайт.com/css/default.css будет сокращен до «/css/default.css». Не забудьте включить ведущий слэш («/»). Он называется относительным путем.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2e\/Add-a-CSS-File-to-HTML-Step-4-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Add-a-CSS-File-to-HTML-Step-4-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Найдите в файле HTML метку </head> и создайте пустую строку прямо над ней. Вставьте в эту строку <LINK rel=stylesheet type="text/css" href="www.ваш_сайт.com/stylesheet.css">, заменив «www.ваш...» на ссылку в файле CSS.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1d\/Add-a-CSS-File-to-HTML-Step-5-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1d\/Add-a-CSS-File-to-HTML-Step-5-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/82\/Add-a-CSS-File-to-HTML-Step-6-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/82\/Add-a-CSS-File-to-HTML-Step-6-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    В противном случае снова откройте файл HTML, найдите ошибки и внесите изменения.
    Реклама
Метод 2
Метод 2 из 2:

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

Загрузить PDF
  1. 1
    Создайте метку <style>. Откройте файл HTML и найдите метку </head>. Добавьте над ней несколько пустых строк и введите следующее:
 < 
 STYLE 
 type 
 = 
 "text/css" 
 > 
 </ 
 STYLE 
 >
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cc\/Add-a-CSS-File-to-HTML-Step-7-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cc\/Add-a-CSS-File-to-HTML-Step-7-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d7\/Add-a-CSS-File-to-HTML-Step-8-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d7\/Add-a-CSS-File-to-HTML-Step-8-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/78\/Add-a-CSS-File-to-HTML-Step-9-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-9-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/78\/Add-a-CSS-File-to-HTML-Step-9-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fa\/Add-a-CSS-File-to-HTML-Step-10-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-10-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fa\/Add-a-CSS-File-to-HTML-Step-10-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-10-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    В противном случае внесите нужные изменения.
    Реклама

Советы

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

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

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

Дополнительные статьи

Как
запустить файл Python с помощью Командной строки Windows
Как
написать программу в блокноте
Как
вставить пробелы в HTML
Как
добавить веб–сайт в надежные узлы
Как
добавлять и удалять учетные записи пользователей через командную строку Windows
Как
добавить горизонтальную линию в HTML
Как
научиться писать программы
Как
использовать Net Send
Как
скомпилировать программу C, используя компилятор GNU Compiler (GCC)
Как
менять цвета в Командной строке
Как
создать гиперссылку в HTML
Как
сделать задержку в командном файле
Как
использовать DOSBox
Как
создать базу данных в среде SQL Server
Реклама

Источники

  1. http://www.w3.org/TR/html4/sgml/entities.html
  2. http://w3schools.com/css/css_howto.asp

Об этой статье

На других языках
Эту страницу просматривали 15 369 раз.

Была ли эта статья полезной?

Реклама