Файл CSS не включен в html-страницу

Обновлено: 21.11.2024

CSS экономит много времени. Он может одновременно управлять макетом нескольких веб-страниц.

Что такое CSS?

Каскадные таблицы стилей (CSS) используются для форматирования макета веб-страницы.

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

Подсказка. Слово "каскад" означает, что стиль, примененный к родительскому элементу, также будет применяться ко всем дочерним элементам родительского элемента. Таким образом, если вы установите цвет основного текста на «синий», все заголовки, абзацы и другие текстовые элементы в теле также получат тот же цвет (если вы не укажете что-то другое)!

Использование CSS

CSS можно добавить в документы HTML тремя способами:

Встроенный – с использованием атрибута стиля внутри HTML-элементов.
Внутренний – с помощью элемента в разделе.
Внешний – с помощью элемента для ссылки на внешний файл CSS.

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

Встроенный CSS

Встроенный CSS используется для применения уникального стиля к одному элементу HTML.

Встроенный CSS использует атрибут стиля HTML-элемента.

В следующем примере цвет текста элемента задается синим, а цвет текста

элемента — красным:

Пример

Внутренний CSS

Внутренний CSS используется для определения стиля отдельной HTML-страницы.

Внутренний CSS определяется в разделе HTML-страницы внутри элемента.

В следующем примере цвет текста ВСЕХ элементов (на этой странице) устанавливается синим, а цвет текста ВСЕХ

элементов — красным. Кроме того, страница будет отображаться с фоновым цветом "голубого цвета":

Пример

Внешний CSS

Внешняя таблица стилей используется для определения стиля многих HTML-страниц.

Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе каждой HTML-страницы:

Пример

Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением .css.

Вот как выглядит файл "styles.css":

"styles.css":

Совет. С помощью внешней таблицы стилей можно изменить внешний вид всего веб-сайта, изменив один файл!

Цвета, шрифты и размеры CSS

Здесь мы продемонстрируем некоторые часто используемые свойства CSS. Вы узнаете о них больше позже.

Свойство CSS color определяет используемый цвет текста.

Свойство CSS font-family определяет используемый шрифт.

Свойство CSS font-size определяет используемый размер текста.

Пример

Использование свойств CSS color, font-family и font-size:

Граница CSS

Свойство CSS border определяет границу вокруг элемента HTML.

Совет. Вы можете определить границу практически для всех элементов HTML.

Пример

Использование свойства границы CSS:

Заполнение CSS

Свойство CSS padding определяет отступ (пробел) между текстом и границей.

Пример

Использование свойств границ и отступов CSS:

Маржа CSS

Свойство CSS margin определяет поле (пробел) за пределами границы.

Пример

Использование свойств CSS border и margin:

Ссылка на внешний CSS

На внешние таблицы стилей можно ссылаться с помощью полного URL-адреса или пути относительно текущей веб-страницы.

Пример

В этом примере используется полный URL-адрес для ссылки на таблицу стилей:

Пример

Этот пример ссылается на таблицу стилей, расположенную в папке html на текущем веб-сайте:

Пример

Этот пример ссылается на таблицу стилей, расположенную в той же папке, что и текущая страница:

Подробнее о путях к файлам можно прочитать в главе Пути к файлам HTML.

Резюме главы

Используйте атрибут стиля HTML для встроенного стиля
Используйте элемент HTML для определения внутреннего CSS
Используйте элемент HTML для ссылки на внешний файл CSS
Используйте элемент HTML для хранения элементов и
Используйте свойство цвета CSS для цветов текста
Используйте свойство CSS font-family для текстовых шрифтов
Используйте свойство CSS font-size для размеров текста.
Используйте свойство границы CSS для границ
Используйте свойство CSS padding для пространства внутри границы.
Используйте свойство margin CSS для отступа за границей

Совет. Вы можете узнать больше о CSS в нашем учебнике по CSS.

HTML-упражнения

Теги стиля HTML

Тег	Описание
	Определяет информацию о стиле для документа HTML
	Определяет связь между документом и внешним ресурсом

Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.

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

Вот шесть исправлений, которые вы можете попробовать, чтобы ваш CSS работал на вашей HTML-странице

Убедитесь, что вы добавили атрибут rel в тег ссылки

При добавлении внешнего файла CSS в HTML-документ необходимо добавить атрибут rel="stylesheet" в тег, чтобы он заработал.

Если вы не укажете атрибут rel в теге, стиль не будет применен к странице.

Убедитесь, что вы указали правильный путь в атрибуте href

Если у вас есть файл CSS в той же папке, что и HTML-документ, вы можете добавить путь к файлу CSS напрямую, как показано ниже:

Если вы добавите / перед именем файла, CSS не будет применен:

Если ваш CSS находится на расстоянии одной папки, вам нужно указать имя папки внутри атрибута href без /.

Это неправильно:

Верно:

Убедитесь, что имя файла CSS указано правильно

Имя файла CSS, указанное в атрибуте href, должно совпадать с фактическим именем файла CSS.

Если у вас есть имя CSS с пробелами, вам нужно включить пробелы в формате, безопасном для URL, заменив его на %20

Например, предположим, что имя вашего файла CSS — my style.css, тогда вот правильное имя внутри атрибута href:

Поскольку URL не может содержать пробелы, рекомендуется заменить все пробелы в файле CSS дефисом или символом подчеркивания _, чтобы мой style.css стал my-style.css или my_style.css .

Убедитесь, что тег ссылки находится в нужном месте

Тег, который вы использовали в файле HTML, должен быть прямым потомком тега, как показано ниже:

Если вы поместите тег внутри другого действительного тега заголовка, такого как или тег, то CSS не будет работать.

Следующий пример неверен:

Внешний стиль МОЖЕТ быть помещен внутрь тега, хотя рекомендуется поместить его в тег, чтобы стиль загружался перед содержимым страницы.

Следующий пример все еще работает:

Убедитесь, что все ваши правила стиля верны

Если в таблице стилей указан недопустимый синтаксис CSS, браузер проигнорирует недопустимый синтаксис и применит допустимый.

Например, предположим, что у вас есть следующий файл CSS:

Поскольку браузеры не поддерживают имя цвета choco, указанное выше правило стиля для тегов будет игнорироваться, пока будет применяться свойство background-color для тега.

Убедитесь, что вы используете правильный синтаксис для своего стиля, потому что неправильный синтаксис CSS не приведет к появлению сообщения об ошибке.

Обнулить кеш жесткой перезагрузкой

Иногда вы можете правильно связать файл CSS с файлом HTML, но вы не видите изменения, внесенные в файл CSS, на веб-странице.

Обычно это происходит, когда браузер использует кешированную версию вашего файла CSS.

Чтобы аннулировать кеш и использовать последнюю версию вашего файла CSS, вы можете выполнить жесткую перезагрузку в браузере.

Для Edge, Chrome и Firefox в Windows/Linux необходимо нажать Shift + CTRL + R.
Для Edge, Chrome и Firefox на macOS необходимо нажать Shift + CMD + R.
Для Safari необходимо очистить кеши с помощью Option + CMD + E или нажать в верхнем меню "Разработка" > "Очистить кеши".

Откройте Chrome DevTools, нажав Shift + CTRL + J в Windows/Linux или Option + CMD + J на Mac.
Нажмите правой кнопкой мыши на значок перезагрузки (обновления) и выберите третий вариант.

На изображении ниже показаны параметры очистки кэша Chrome и полной перезагрузки, которые необходимо выбрать:

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

И это шесть исправлений, которые вы можете попробовать связать файл CSS с документом HTML.

Надеюсь, это руководство помогло вам решить проблему 👍

Статьи по теме:

Повысьте уровень своих навыков программирования

Я время от времени рассылаю электронные письма с последними руководствами по программированию. Оставьте свой адрес электронной почты в поле ниже, и я буду присылать новые материалы прямо на ваш почтовый ящик!

сообщить об этом объявлении

О нас

Натан Себхастян – инженер-программист, который любит писать технические руководства. Изучайте JavaScript и другие концепции технологий веб-разработки с помощью простых для понимания объяснений, написанных простым английским языком.

Использование неправильного тега HTML для связи HTML с CSS.
Размещение ссылки CSS не в той части веб-страницы.
Несоответствие имени файла и имени значения href ссылки
Пробелы в имени файла CSS
Расположение файлов HTML и CSS в одной или разных папках
Синтаксические ошибки в файле CSS

6 ошибок, которые вы совершаете при связывании CSS с HTML, и как их исправить.

Давайте рассмотрим каждую ошибку, которую вы можете совершать, и то, как правильно связать HTML с CSS.

1. Использование неправильного HTML-тега для связи HTML с CSS.

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

Теги HTML можно использовать только тогда, когда вы пишете свой CSS в разделе заголовка самого документа HTML, не связывая файл CSS.

Правильный HTML-тег для связывания файла CSS с файлом HTML – использование расширения . «main.css» — это имя файла CSS. Обратите внимание, что тег HTML является самозакрывающимся тегом и не может использоваться парами, как теги или HTML.

2. Размещение ссылки CSS не в той части веб-страницы.

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

Посмотрите, где вы разместили HTML-тег ссылки, и измените его соответствующим образом.

3. Несоответствие имени файла и имени значения href ссылки

Убедитесь, что имя файла CSS совпадает с именем, указанным в значении href в теге HTML. Если вы используете другое имя, браузер будет смотреть на ссылку, которую вы назначили для вашего HTML-файла. Если он там ничего не находит, он ничего не делает. Если они не совпадают, то вы нашли виновника.

Все, что вам нужно сделать, это изменить значение href на правильное имя файла CSS.

4. Пробелы в имени файла CSS

Если в имени файла CSS файла file.css есть пробелы, браузер не сможет правильно интерпретировать пробелы в значении href.

Чтобы это сработало, вы можете:

замените пробелы в значении href на %20 . то есть или
замените пробелы в имени файла CSS на дефис (-) или подчеркивание (_) как в имени файла, так и в значении ссылки href, чтобы разделить слова.

5. Расположение файлов HTML и CSS в одной или разных папках

Если ваши файлы HTML и CSS находятся в разных папках, у вас могут возникнуть проблемы с их связыванием. Вы можете решить эту проблему следующим образом:

Используя правильный путь к файлу CSS. Поэтому, если файл CSS находится в папке, отличной от пути HTML, вам необходимо определить имя пути и добавить его к значению href ссылки. например. Если файл css находится в папке с именем styles, которая находится в той же папке, что и файл HTML, правильный путь будет .
Перемещение CSS и HTML в одну папку. Когда вы перемещаете их в одну и ту же папку, значение href ссылки будет просто именем файла css: .

6. Синтаксические ошибки в файле CSS

Если у вас есть ошибка в файле CSS, это может привести к тому, что ваши стили CSS не будут применены к коду HTML. Самый простой способ исправить это:

Используйте текстовый редактор с подсветкой синтаксиса. Подсветка синтаксиса поможет вам определить, где ваш код неверен.
Используйте онлайн-инструмент проверки CSS. Онлайн-инструмент проверки CSS сообщит вам, где вы допустили ошибку в своем коде CSS.

Если вы будете следовать этому руководству, вы всегда сможете соединить файлы HTML и CSS вместе.

Поделитесь или поддержите:

Получать новый контент во входящие

Я отправляю электронное письмо, когда создаю что-то новое. Никакого спама, легко отписаться в любое время.

О нас

Если вы только начинаете, вы можете прощупать почву, попробовав учебное пособие по HTML для начинающих, которое я сделал специально для вас.

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

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

CSS определяет объявления стилей и применяет их к документам HTML. Существует три разных способа связать CSS с HTML на основе трех разных типов стилей CSS:

Встроенный – использует атрибут стиля внутри HTML-элемента.
Внутренний – записывается в разделе HTML-файла.
Внешний – связывает документ HTML с внешним файлом CSS.

В этой статье основное внимание будет уделено внешнему CSS-связыванию с HTML-файлом, поскольку он изменяет внешний вид всего вашего веб-сайта с помощью всего одного файла. Мы также включим более подробное объяснение CSS и его преимуществ.

Как связать файл CSS с файлом HTML — видеоурок

Ищете визуальное руководство? Посмотрите это видео.

Подключение внешней таблицы стилей CSS к файлу HTML

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

В отличие от внутренних и встроенных стилей, этот метод изменяет множество HTML-страниц, редактируя один файл CSS. Это экономит время — нет необходимости изменять каждое свойство CSS на HTML-странице каждого веб-сайта.

Начните связывать таблицы стилей с файлами HTML, создав внешний документ CSS с помощью текстового редактора HTML и добавив правила CSS. Например, вот правила стиля для example.css:

Не добавляйте пробел между значением свойства. Например, вместо margin-right: 30px напишите margin-right: 30 px .

Затем используйте тег в разделе HTML-страницы, чтобы связать файл CSS с документом HTML. Затем укажите имя вашего внешнего файла CSS. В данном случае это example.css, поэтому код будет выглядеть следующим образом:

Для лучшего понимания приведем разбивку атрибутов, содержащихся в теге:

rel — определяет отношение между связанным документом и текущим. Используйте атрибут rel только при наличии атрибута href.
type — определяет содержимое связанного файла или документа между тегами и. Он имеет текст или css в качестве значения по умолчанию.
href — указывает расположение файла CSS, который вы хотите связать с HTML. Если файлы HTML и CSS находятся в одной папке, введите только имя файла. В противном случае укажите имя папки, в которой хранится файл CSS.
media — описывает тип носителя, для которого оптимизированы стили CSS. В этом примере мы поместили screen в качестве значения атрибута, чтобы подразумевать его использование для экранов компьютеров. Чтобы применить правила CSS к печатным страницам, установите значение print .

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

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

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

Причины использования CSS

CSS – это язык таблиц стилей, управляющий визуальным представлением веб-сайта. Он состоит из списка правил форматирования для стилизации элементов, написанных на языках разметки, таких как HTML. Кроме того, CSS определяет отображение элементов HTML на различных типах носителей, таких как проецируемые презентации или устройства телевизионного типа.

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

Последовательный дизайн. Поддерживает единообразие форматирования и дизайна на всем веб-сайте. Одна корректировка правил CSS может быть применена ко всем областям веб-сайта.
Быстрая загрузка. Для оформления всех файлов HTML требуется только один файл CSS. С меньшим количеством строк кода веб-сайт может загружаться быстрее. Сайт также будет кэшировать файл CSS для следующего посещения вашими посетителями. . Сохранение стилей CSS в другом файле делает HTML-файл более лаконичным и упорядоченным. В результате код веб-сайта станет чище и легче, что упростит его сканирование поисковыми системами.

С другой стороны, у CSS есть несколько недостатков, например:

Имеется несколько уровней. Таблица стилей CSS имеет три уровня. Такие разные фреймворки могут сбивать с толку, особенно новичков.
Проблемы совместимости. Некоторые таблицы стилей могут не работать в определенных браузерах, поскольку разные браузеры по-разному читают CSS. Чтобы избежать этих проблем, используйте средства проверки кода CSS и HTML.
Уязвим для атак. Природа CSS с открытым исходным кодом может увеличить риск кибератак.Например, человек, имеющий доступ к файлу CSS, может написать вредоносный код или украсть личные данные. Однако надлежащие методы обеспечения безопасности могут предотвратить эту проблему.

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

Заключение

Встраивание правил CSS в элементы HTML может отнимать много времени и энергии. К счастью, внешние таблицы стилей делают этот процесс более эффективным.

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

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

Если вам интересно узнать больше о программировании, ознакомьтесь с нашим руководством по обучению программированию.

Джордана — автор цифрового контента в Hostinger. Обладая знаниями в области информационных систем и разработки веб-сайтов, она стремится помочь начинающим разработчикам и предпринимателям развивать свои технические навыки. В свободное время она путешествует и занимается литературным фристайлом.

Когда браузер читает таблицу стилей, он форматирует HTML-документ в соответствии с информацией, содержащейся в таблице стилей.

Три способа вставки CSS

Существует три способа вставки таблицы стилей:

Внешний CSS
Внутренний CSS
Встроенный CSS

Внешний CSS

С помощью внешней таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив всего один файл!

Каждая HTML-страница должна содержать ссылку на внешний файл таблицы стилей внутри элемента, внутри раздела заголовка.

Пример

Внешние стили определяются внутри элемента внутри раздела HTML-страницы:

Внешняя таблица стилей может быть написана в любом текстовом редакторе и должна быть сохранена с расширением .css.

Внешний файл .css не должен содержать тегов HTML.

Вот как выглядит файл mystyle.css:

"mystyle.css"

тело <
цвет фона: голубой;
>

цвет h1: темно-синий;
поле слева: 20 пикселей;
>

Примечание. Не добавляйте пробел между значением свойства и единицей измерения:
Неверно (пробел): поле слева: 20 пикселей;
Правильно (без пробела): поле слева: 20 пикселей;

Внутренний CSS

Внутренняя таблица стилей может использоваться, если одна HTML-страница имеет уникальный стиль.

Внутренний стиль определяется внутри элемента, внутри раздела заголовка.

Пример

Внутренние стили определяются внутри элемента внутри раздела HTML-страницы:

Встроенный CSS

Встроенный стиль можно использовать для применения уникального стиля к одному элементу.

Чтобы использовать встроенные стили, добавьте атрибут стиля к соответствующему элементу. Атрибут стиля может содержать любое свойство CSS.

Пример

Встроенные стили определяются в атрибуте "style" соответствующего элемента:

Совет. Встроенный стиль теряет многие преимущества таблицы стилей (из-за смешивания содержимого с представлением). Используйте этот метод экономно.

Несколько таблиц стилей

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

Предположим, что внешняя таблица стилей имеет следующий стиль для элемента:

Затем предположим, что внутренняя таблица стилей также имеет следующий стиль для элемента:

Пример

Если внутренний стиль определен после ссылки на внешнюю таблицу стилей, элементы будут "оранжевыми":

Пример

Однако, если внутренний стиль определен до ссылки на внешнюю таблицу стилей, элементы будут "темно-синими":

Каскадный порядок

Какой стиль будет использоваться, если для элемента HTML указано более одного стиля?

Все стили на странице будут "каскадироваться" в новую "виртуальную" таблицу стилей по следующим правилам, где номер один имеет наивысший приоритет:

Встроенный стиль (внутри HTML-элемента)
Внешние и внутренние таблицы стилей (в разделе заголовка)
Браузер по умолчанию

Таким образом, встроенный стиль имеет наивысший приоритет и переопределяет внешние и внутренние стили, а также настройки браузера по умолчанию.

Вы когда-нибудь слышали о W3Schools Spaces? Здесь вы можете бесплатно создать свой собственный веб-сайт или сохранить фрагменты кода для дальнейшего использования.

Читайте также: