Как подключить css файл к html файлу

Как связать Html с Css?

@Nadya, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом).

3 сен 2014 в 16:41

6 ответов 6

Сортировка: Сброс на вариант по умолчанию

Полагаю, необходим обобщающий ответ, чтобы новички, пришедшие сюда за ответом, получили полную информацию с примерами.

Имеется 4 способа.

1. Встроенные стили

Подключение встроенных или inline стилей заключается в применении атрибута style к определённому тегу на странице. В этом случае значением атрибута является одно или несколько (через точку с запятой) свойств CSS с соответствующими значениями. Как правило, такой способ используется в тех случаях, когда надо изменить характеристики конкретного элемента на одной странице.

      
Параграф 1
 
Параграф 2
  

2. Внутренние стили

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

       
Параграф 1
 
Параграф 2
  

3. Внешние стили

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

В первом блоке содержимое файла style.css , находящегося в папке style :

body < background: #ccccff; /* цвет фона страницы */ >p < color: red; /* цвет текста параграфов */ font-family: Helvetica, sans-serif; /* гарнитура шрифта параграфов */ font-size: 150%; /* размер шрифта */ text-align: center; /* текст по центру */ border: 5px green double; /* стили рамки */ >

      
Параграф 1
 
Параграф 2
  

4. Через правило @import

Это правило служит для объединения нескольких таблиц стилей в одну. Чтобы правило @import правильно работало, оно обязательно должно указываться в самом начале таблицы стилей, единственное исключение — правило @charset .

@import url("https://kristinitatest.github.io/Stack%20Exchange/HTML+CSS/1.css"); @import url("https://kristinitatest.github.io/Stack%20Exchange/HTML+CSS/2.css");

       
Содержимое страницы.
  

Как подключить дополнительный файл css?

Если создать его в шаблонах, то он не отображается в директории css. Если файл загрузить физически в директорию css, то он не отображается в шаблонах, для редактирования.

2 ответа

4

replicant 7 марта 2020 16:00 #

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

Создаете в шаблонах файл css, а в файле index.html или head.html, смотря где там у вас перечисляются подключаемые к шаблону css файлы, которые вы цепляете к теме дизайна, прописываете к нему ссылку примерно в таком виде.

или к какому-нибудь другому шаблону более локально так, если на то есть такая необходимость

Если вы хотите, чтобы файл лежал строго в какой-то директории CSS внутри папки с темой, а также одновременно был доступен в редакторе, то вам надо вручную править файл theme.xml и туда этот файл css прописывать. НО, повторюсь, это совсем не обязательно делать.

Обязательным является только подключение файла в виде строки кода (см. примеры выше) к шаблону. Без этого точно никак ничего не получится.

Подключение css к двум и более html

Подключение css к html
Вот код хтмл файла: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN".

Подключение css к html
Начну с того что я в этом деле новичок! Вообщем подключил файл .css к html файлу но при заходе на.

Подключение css к html
Друзья, Всем привет!))) У меня печаль. Нужна Ваша помощь! Никак не могу подключить css к html.

Подключение css к html
Всем привет. Помогите новичку пожалуйста. 😉 В общем хочу подключить css к html но не получается.

278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
adisen, А что Вы этим хотите добиться?
112 / 108 / 42
Регистрация: 22.01.2017
Сообщений: 452
adisen, для подключения css к файлу достаточно строки

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

2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928

Сообщение от adisen

подключить 2 и более html к одному и тому же css?

Подключается не html к css, а css к html. Можете использовать как один css файл для всех html файлов,так и разные css для разных html файлов. Или же подключать несколько css файлов к одному html файлу. Как вашей душе угодно.

Регистрация: 26.07.2018
Сообщений: 19
а как подключить 1 css ко всем html?

2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928

Сообщение от adisen

а как подключить 1 css ко всем html?
Да просто в каждом html файле прописываете линк на один и тот же css файл
Регистрация: 26.07.2018
Сообщений: 19

А на нормальных сайтах делают много css или к одному и тому же? По идее к каждому отдельно или я чего-то не понимаю?

112 / 108 / 42
Регистрация: 22.01.2017
Сообщений: 452
adisen, на нормальных сайтах делают один css, в котором все стили для сайта находятся.
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,707

Vlad03, на нормальных сайтах подключается как минимум 2 файла стилей. В первом хранится стили для layout, во втором для загружаемой страницы/раздела. Такой подход позволяет избежать лишней подгрузки множества стилей, которые не используются на странице.

2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928

Добавлено через 57 секунд

Сообщение от Mr Coder

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

Кеширование? Нет, не слышал
112 / 108 / 42
Регистрация: 22.01.2017
Сообщений: 452
Mr Coder, про кеш забыли.
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,707

Кэш он и в Африке кэш, зачем пихать юзеру лишние стили, которые не использует страница?

Добавлено через 8 минут
Vlad03, Vlad03, про скорость загрузки страницы не забывайте.

2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928

Сообщение от Mr Coder

лишние стили, которые не использует страница?
Т.е. юзер кроме как на главную страницу больше никуда заходить не будет?

Сообщение от Mr Coder

про скорость загрузки страницы не забывайте.

И про количество обращений к серверу тоже Как вариант можно использовать «асинхронную» загрузку css.

зы. На самом деле на этот вопрос нет однозначного ответа. У каждого способа есть свои плюсы и минусы

1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,707

Сообщение от AlexZaw

Т.е. юзер кроме как на главную страницу больше никуда заходить не будет?

Если у сайта поисковой трафик, то почти всегда так и происходит. Человек попал на страницу, узнал что ему нужно и закрыл вкладку с вашим сайтом.

2585 / 1676 / 731
Регистрация: 13.03.2010
Сообщений: 5,630

Но он попадает на целевую страницу, а не на главную. ИМХО, лучше иметь один общий кешируемый файл стилей. Ну и дополнительные для специфичных страниц, которых на сайте 1 из 1000.

2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928

Сообщение от Mr Coder

Если у сайта поисковой трафик

На таком сайте должно быть минимум css, и делить его на несколько файлов это уже перебор
А если взять теже гугл или яндекс, так у них все стили вообще в хтмл прописаны и никаких заморочек с файлами

112 / 108 / 42
Регистрация: 22.01.2017
Сообщений: 452

Сообщение от Mr Coder

Кэш он и в Африке кэш, зачем пихать юзеру лишние стили, которые не использует страница?
минимизация css и gzip помогают в этом.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Подключение css к html-письму
Добрый день уважаемые! Формирую рассылку для клиентов Шаблон выглядит примерно так Код HTML.

Подключение внешнего css-файла к html
Здравствуйте, форумчане! Меня интересует такой вопрос, как подключить внешний css-файл в html-код.

Подключение css файла к HTML странице
Привет, подскажите, пожалуйста, почему не подключается css файл к HTML странице: <link.

Подключение html кода с css к php
Здравствуйте!Помогите пожалуйста столкнулся с трудностью,создал сайт HTML и связал его с CSS теперь.

#11 – Теги для подключения файлов

В HTML есть два тега, что позволяют выполнить подключение CSS и JavaScript файлов. В уроке мы с вами изучим работу с тегами: «link» и «script».

Видеоурок

Подключение стилей

HTML тег head существует для создания описания страницы, а также для подключения стилей и скриптов. Чтобы к странице подключить CSS стили требуется использовать специальный тег link , который дополнительно не требует закрывающего тега и выглядит следующим образом:

В атрибуте href необходимо указывать полный путь к CSS файлу. Также необходимо добавлять атрибуты rel и type для указания информации о том, что конкретно находится в подключаемом файле.

Добавление скриптов на сайт

Помимо стилей мы также можем подключать различные скрипты. Они помещаются в теге . В атрибуте src можно указать полный путь к файлу со скриптом или же вы можете прописать JavaScript внутри тега «script».

Важно также понимать, что некоторые скрипты не всегда нужны при загрузке страницы. По этой причине их загрузку можно отложить на самый конец. Чтобы это сделать необходимо добавить скрипты не вначале кода страницы (не в теге head), а в конце страницы перед закрывающим тегом body . Кстати, такая же схема не подходит для подключения стилей. Они всегда должны находиться в теге head .

Описание сайта в meta-тегах

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

К некоторым основным мета-тегам можно отнести такие: тег с описанием страницы, тег с ключевыми словами, тег с указанием кодировки сайта.

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

Весь код будет доступен после подписки на проект!

Урок №2. Подключаем CSS-стили к HTML-файлу.

Здравствуйте, уважаемые читатели проекта «Анатомия Бизнеса». С вами вебмастер Александр! В прошлой статье мы разобрали, что такое CSS-стили и насколько огромное значение они имеют в WEB-программировании.

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

Не будем откладывать дело в долгий ящик и приступим!

Подключение отдельного CSS-файла!

Один из самых удобных и простых способов подключения стилей является подключение отдельного файла со стилями. Для этого нужно при помощи текстового редактора notepad++ (или любого другого) создать файл с расширением . css и поместить в той же папке, что и файл, к которому мы хотим его разместить.

После чего в HTML-файле между тегами разместить следующий код:

Теперь давайте разберем, что все это значит:

link # в переводе с английского обозначает «ссылка». Таким образом мы показываем браузеру, что далее у нас пойдет речь пойдет о ссылке. rel= # данным атрибутом мы показываем, какое отношение файл CSS имеет к файлу HTML. "stylesheet" # а именно то, что CSS-файл является каскадной таблицей стилей. type="text/css" # тут все просто: это указание того, что файл написан в текстовом формате и имеет расширение .css href="style.css" # это ссылка на файл с CSS-стилями.

Как по мне, это и есть наиболее предпочтительный способ подключения стилей CSS.

Прописываем стили непосредственно в HTML-файле (первый способ)

Следующим способом указывания CSS-стилей является их прописывание непосредственно в HTML-документе. Выглядит это так:

      
Тут пример: отображение CSS-стилей в документе HTML
  

Если мы посмотрим, как будет отображаться данный HTML-документ в браузере, то увидим, что текст между тегами стал красного цвета. И используя атрибут style, мы говорим, что далее у нас идут параметры стиля отображения. Color — это селектор, отвечающий за цвет. Red — это значение данного селектора. Таким способом мы можем выделять определенным типом отображения какие-то отдельные части текста.

Размещение каскадных таблиц стилей внутри HTML (второй способ)

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

       .p 
Тут пример: отображение CSS-стилей в документе HTML
  

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

Подключение нескольких CSS-файлов к одному HTML-документу.

Правила HTML допускают подключение сразу нескольких файлов CSS. Многие вебмастера используют это: создают отдельные CSS-файлы для текста и для картинок. Или отдельные файлы для хедера, футтера и основного тела страницы. Давайте разберемся, как это реализовать.

Мы создаем несколько файлов с CSS-стилями. Пусть их названия будут style-1.css и style-2.css. Размещаем, как и в способе номер один, в одной папке с HTML-файлом.

И далее выполняем следующие действия:

         
Тут пример: отображение CSS-стилей в документе HTML
  

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

Ссылка на CSS-файл внутри на файл этого же типа.

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

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

Во-вторых, в уже подключенный файл вписываем следующий код:

@import url("style-2.css");

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

Тест на закрепление материала:

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

Вариант 1:

Вариант 2:

Вариант 3:

Вариант 4:

Можем ли мы разместить каскады CSS непосредственно в файле HTML?

Вариант 1:
Да, можем! (Если можем, то почему?)

Вариант 2:
Нет, не можем! (Если не можем, то почему?)

Можем ли мы подключить несколько CSS-таблиц к одному файлу?

Вариант 1:
Да, можем! (Если можем, то почему?)

Вариант 2:
Нет, не можем! (Если не можем, то почему?)

Нам нужно сделать часть текста, выделенного тегом

, красным цветом. Какой из вариантов будет верным?

Вариант 1.

 
Я думаю, что правильный ответ - это первый вариант
 

Вариант 2.

 
Я думаю, что правильный ответ - это второй вариант
 

Итак, Вы выполнили задания. Что делать с ними дальше?
Пишите их в комментариях к этому посту, а я в свою очередь буду давать обратную связь!
До встречи в следующем уроке!

Подключение отдельного CSS-файла!

Один из самых удобных и простых способов подключения стилей является подключение отдельного файла со стилями. Для этого нужно при помощи текстового редактора notepad++ (или любого другого) создать файл с расширением . css и поместить в той же папке, что и файл, к которому мы хотим его разместить.

После чего в HTML-файле между тегами разместить следующий код:

Теперь давайте разберем, что все это значит:

link # в переводе с английского обозначает «ссылка». Таким образом мы показываем браузеру, что далее у нас пойдет речь пойдет о ссылке. rel= # данным атрибутом мы показываем, какое отношение файл CSS имеет к файлу HTML. "stylesheet" # а именно то, что CSS-файл является каскадной таблицей стилей. type="text/css" # тут все просто: это указание того, что файл написан в текстовом формате и имеет расширение .css href="style.css" # это ссылка на файл с CSS-стилями.

Как по мне, это и есть наиболее предпочтительный способ подключения стилей CSS.

Прописываем стили непосредственно в HTML-файле (первый способ)

Следующим способом указывания CSS-стилей является их прописывание непосредственно в HTML-документе. Выглядит это так:

      
Тут пример: отображение CSS-стилей в документе HTML
  

Если мы посмотрим, как будет отображаться данный HTML-документ в браузере, то увидим, что текст между тегами стал красного цвета. И используя атрибут style, мы говорим, что далее у нас идут параметры стиля отображения. Color — это селектор, отвечающий за цвет. Red — это значение данного селектора. Таким способом мы можем выделять определенным типом отображения какие-то отдельные части текста.

Размещение каскадных таблиц стилей внутри HTML (второй способ)

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

       .p 
Тут пример: отображение CSS-стилей в документе HTML
  

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

Подключение нескольких CSS-файлов к одному HTML-документу.

Правила HTML допускают подключение сразу нескольких файлов CSS. Многие вебмастера используют это: создают отдельные CSS-файлы для текста и для картинок. Или отдельные файлы для хедера, футтера и основного тела страницы. Давайте разберемся, как это реализовать.

Мы создаем несколько файлов с CSS-стилями. Пусть их названия будут style-1.css и style-2.css. Размещаем, как и в способе номер один, в одной папке с HTML-файлом.

И далее выполняем следующие действия:

         
Тут пример: отображение CSS-стилей в документе HTML
  

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

Ссылка на CSS-файл внутри на файл этого же типа.

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

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

Во-вторых, в уже подключенный файл вписываем следующий код:

@import url("style-2.css");

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

Тест на закрепление материала:

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

Вариант 1:

Вариант 2:

Вариант 3:

Вариант 4:

Можем ли мы разместить каскады CSS непосредственно в файле HTML?

Вариант 1:
Да, можем! (Если можем, то почему?)

Вариант 2:
Нет, не можем! (Если не можем, то почему?)

Можем ли мы подключить несколько CSS-таблиц к одному файлу?

Вариант 1:
Да, можем! (Если можем, то почему?)

Вариант 2:
Нет, не можем! (Если не можем, то почему?)

Нам нужно сделать часть текста, выделенного тегом

, красным цветом. Какой из вариантов будет верным?

Вариант 1.

 
Я думаю, что правильный ответ - это первый вариант
 

Вариант 2.

 
Я думаю, что правильный ответ - это второй вариант
 

Итак, Вы выполнили задания. Что делать с ними дальше?
Пишите их в комментариях к этому посту, а я в свою очередь буду давать обратную связь!
До встречи в следующем уроке!

CSS файлы в WordPress

Можно подключить CSS файл к HTML странице через указание метатега link в блоке head. Но в CMS WordPress есть несколько функций, которые позволяют подключать CSS файлы. При этом подключение происходит через отложенную очередь. А вывод стилей осуществляется при вызове функций wp_head() или wp_footer().

Подключение CSS через функции более предпочтителен, потому что даёт возможность использовать различные плагины для обработки CSS кода, к примеру, плагины для минификации кода. Разберём некоторые функции:

wp_register_style — регистрирует CSS файл в WordPress. После чего файл вставляется в документ через функции «wp_head» или «wp_footer» или с помощью функции wp_enqueue_style.

wp_register_style( $handle, $src, $deps, $ver, $media );

$handle	строка	Идентификатор (уникальное название). К примеру, название подключаемого файла стилей (в нижнем регистре).
$src	строка	Путь к файлу стилей. Лучше использовать относительные пути (функции «plugins_url()» для плагинов и «get_template_directory_uri()» для тем)
$deps	массив	Массив из стилей, которые будут подключены до этого стиля.
$ver	строка/логический	Версия стилей, которая добавляется в конец URL через параметр, к примеру, «style.css?ver=5.2.4. Если не указана, то используется версия WordPress.
$media	строка	Параметр в media запросе CSS. Принимает значения: all (по умолчанию), screen, handheld, print.

wp_deregister_style — снимает регистрацию стиля и не даёт ему выводиться.

wp_deregister_style( $handle );

$handle

строка

Идентификатор (уникальное название). К примеру, название подключаемого файла стилей (в нижнем регистре).

wp_dequeue_style — убирает стиль из вывода, но не удаляет стиль из зарегистрированных.

wp_dequeue_style( $handle );

$handle

строка

Идентификатор (уникальное название). К примеру, название подключаемого файла стилей (в нижнем регистре).

wp_style_is — показывает был ли файл стилей зарегистрирован, добавлен в очередь на вывод или уже выведен.

wp_style_is( $handle, $list );

$handle	строка	Идентификатор (уникальное название). К примеру, название подключаемого файла стилей (в нижнем регистре).
$list	строка	Проверяемое условие. Возможные значения: registered — файл стилей был зарегистрирован, используя wp_register_style(). enqueued или queue — стили были добавлены в очередь. to_do — стили еще не выведены на экран. done — стили уже выведены на экран.

wp_add_inline_style — добавляет к блоку стилей произвольный CSS код. Код вставляется после вывода зарегистрированного файла стилей.

wp_add_inline_style( $handle, $data );

$handle	строка	Идентификатор (уникальное название). К примеру, название подключаемого файла стилей (в нижнем регистре).
$data	строка	Чистый CSS код, который будет добавлен. Не нужно обрамлять в тег «style».

wp_get_custom_css — получает CSS код из настроек в темы. Код будет получен как есть без тега «style». Эта функция автоматически срабатывает при выполнении функции «wp_head».

wp_get_custom_css( $stylesheet = '' );

$stylesheet

строка

Название каталога текущей темы. По умолчанию используется текущая тема. Результат — чисты CSS код, поэтому для вывода в HTML необходимо обрамлять его в тег «style».

wp_enqueue_style — регистрирует и добавляет в очередь на вывод файл CSS стилей. Функция может быть использована в любом месте документа, а не только в «head» части.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

$handle	строка	Идентификатор (уникальное название). К примеру, название подключаемого файла стилей (в нижнем регистре).
$src	строка	Путь к файлу стилей. Лучше использовать относительные пути (функции «plugins_url()» для плагинов и «get_template_directory_uri()» для тем)
$deps	массив	Массив из стилей, которые будут подключены до этого стиля.
$ver	строка/логический	Версия стилей, которая добавляется в конец URL через параметр, к примеру, «style.css?ver=5.2.4. Если не указана, то используется версия WordPress.
$media	строка	Параметр в media запросе CSS. Принимает значения: all (по умолчанию), screen, handheld, print.

Как подключить JavaScript и стили CSS к HTML документу

При работе с HTML, стилями или JavaScript, особенно, если речь идёт о большом проекте, настоятельно рекомендую держать файлы со стилями (.css и другие) и твой код (.js и другие) в разных папках. JavaScript отдельно, каскадные стили отдельно. Отдельную папку рекомендую создать и для HTML-файла.

Чтобы присоединить стили к HTML, пропиши следующую строку внутри тэга :

Если ты всё-таки решил ходить по лезвию ножа и держишь.css- и.js-файлы в одной папке со HTML, то код будет следующим:

Если работаешь с шаблонами или темами Bootstrap, то просто размещаем ссылку на тему:

Для присоединения js-файла к HTML нужно просто указать путь к файлу.

Если же js-файл лежит в одной папке с HTML-файлом, код будет такой:

При работе с jQuery, внутри тега указываем ссылку на нужную нам библиотеку:

не подключается css

я начал процесс обучения верстке,на базе сайта о кино. в качестве редактора кода использую VS Code и Sublime. и там и там возникает ошибка при подключении стилей CSS. сначала все идет норм,но как только подключаю CSS, страница не обновляется и никак не изменяется (задаю ширину блока в HEADER и цвет фона)
причем делаю все точно так же как и в обучалке,но там все получается,а у меня нет.

         
 
 
 
КиноМонстр
 
Кино-наша страсть!
 
 
 
 
  

Максим Потапов
2 years ago

На диске — зайдите в Проводник (или какой-то менеджер файлов), найдите вашу рабочую папку — где лежит ваша страница index.html

проверьте чтобы в это папке были созданы папки стилей как у вас указано, т.е. /assets/css/ — и в этой папке должен быть файл style.css

если у вас нарушена структура папок, то вам нужно это исправить — создать нужные папки, переместить файл style.css в нужную папку и/или изменить путь указанный в index.html для подключения фала стилей.

Далее через Проводник откройте найденный на диске файл /assets/css/style.css — мышкой правой и открыть с помощью — выберите редактор кода и убедитесь, что код файла верный то что нужен (который вы писали по уроку)