Как вывести в live server значения CSS и HTML

У меня есть файлы:
index.js
index.html
index.css
Я вывожу через live server и там не меняются значения в прямом эфире
А если обновляю страницу, и, допустим я написал CSS класс и вывожу его - то там просто текстом написано, а не квадрат красный, в моем случае

создаю обычный блокнот - пишу там этот код и всё так же.Может какие либо расширения установить в visual studio code

Скриншот

И вот я написал - тоже скрин

1 лайк

сли вы хотите объединить несколько файлов в один файл в Visual Studio Code, вы можете воспользоваться функцией “Merge Files” (объединение файлов) расширения “File Utils”.

Для этого выполните следующие шаги:

  1. Установите расширение “File Utils”, если оно еще не установлено. Для этого откройте Visual Studio Code, нажмите на значок “Extensions” в левой панели, введите “file utils” в поисковой строке и установите расширение.
  2. Откройте папку с файлами, которые вы хотите объединить.
  3. Выберите все файлы, которые вы хотите объединить. Для этого зажмите клавишу “Ctrl” и щелкните на каждом файле.
  4. Нажмите на значок “…” в правом верхнем углу окна Visual Studio Code и выберите “File Utils” > “Merge Files”.
  5. В появившемся диалоговом окне выберите опцию “Merge to new file”.
  6. Введите имя файла, в который вы хотите объединить выбранные файлы, и нажмите на кнопку “Save”.
  7. Объединенный файл будет создан в текущей папке.

Это простой и удобный способ объединить файлы в Visual Studio Code с помощью расширения “File Utils”.
Это ответил чат GPT))))

1 лайк

В целом суть вопроса не понятна. Чтобы тебе могли помочь лучше всего оформлять вопрос в формате:

  • что я делаю
  • что я ожидаю увидеть
  • что я вижу

Я буду пытаться угадать в чем твоя проблема.


Я верно понимаю что ты ожидаешь увидеть результат применения стилей (красный квадрат) а не сам текст стилей?

Для этого нужно подключить стили в html файл. Подключения стией я не вижу. Вот как нужно оформить файлы чтобы подключить:

index.html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div class="my-element">
		<h1>Header text</h1>
		kokoko
	</div>
</body>
</html>

index.css

.my-element {
	background: yellow;
}

.my-element h1 {
	color: white;
	background: blue;
}

Результат:

2 лайка

Это прекрасный фон, спасибо

1 лайк

Спасибо