Как объединить HTML и CSS в один файл и убрать JavaScript?
Захотел продать личные вещи через Ebay (много), прочел что желательно создавать т.н. листинг (оформление описания) а не просто текст.
Купил программу Sparkle Visual Web Design (тип конструктор). Выгрузил необходимые фото на хостинг, и указал прямые ссылки. Все фото подгрузились и в программе все выглядит как задумывалось. (фото выставлял в строку, 3 фото рядом; также использовал button, box, и вроде бы стандартные шрифты)
После экспорта проекта есть три файла: html/css/js. Я попробовал вставить html в описании на Ebay и естественно все сползло и 3 box’а вообще пропали. Также Ebay начал ругаться на js, шрифты OpenSans, Arial вообще заменил непонятно чем.
Есть ли способ как то совместить html, css, а также убрать js?
Я мало понимаю в программировании. Но заметил в коде, что там указаны ссылки на подключение css стиля.
Возможно ли выгрузить css на хостинг и подключить его также как фото — прямой ссылкой?
- Вопрос задан более трёх лет назад
- 3866 просмотров
Комментировать
Решения вопроса 1
в head html файла прописать
сюда вставить весь .css шрифты использовать стандартные напр. arial без подгрузки из вне
или подгружать с папки
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
Добавление стилей на всем сайте
Теперь, когда у вас есть стилизованная страница «О нас», давайте добавим некоторые общие стили для остальной части вашего сайта!
- Применить стили на всем сайте
Добавление общего файла стилей
Вы знаете, что тег в Astro имеет область видимости по умолчанию, что означает, что он влияет только на элементы в своем собственном файле.
Существуют несколько способов определения общих стилей в Astro, но в этом руководстве вы создадите и импортируете файл global.css в каждую из ваших страниц. Это сочетание таблицы стилей и тега дает вам возможность управлять определенными стилями на всем сайте и применять некоторые специфические стили именно там, где вы их хотите увидеть.
- Создайте новый файл по адресу src/styles/global.css (сначала вам нужно создать папку styles).
- Скопируйте следующий код в свой новый файл, global.css
src/styles/global.css
html background-color: #f1f5f9; font-family: sans-serif;> body margin: 0 auto; width: 100%; max-width: 80ch; padding: 1rem; line-height: 1.5;> * box-sizing: border-box;> h1 margin: 1rem 0; font-size: 2.5rem;>src/pages/about.astro
---import '../styles/global.css'; const pageTitle = "Обо мне"; const identity = firstName: "Николай", country: "Нидерланды", occupation: "Технический автор", obbies: ["фотография", "дизайн", "тенис"],>; const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Оптимизация SEO"]; const happy = true;const finished = false;const goal = 3; const skillColor = "navy";const fontWeight = "bold";const textCase = "uppercase";---Попробуйте сами — импортируйте свой общий файл стилей
Добавьте необходимую строку кода в каждый файл .astro в вашем проекте, чтобы применить ваши глобальные стили на каждой странице вашего сайта.
✅ Показать мне код! ✅
Добавьте следующий оператор импорта к двум другим файлам страниц: src/pages/index.astro и src/pages/blog.astro
src/pages/index.astro
---import '../styles/global.css';---Внесите любые изменения или дополнения в содержимое своей страницы «Обо мне», добавив элементы HTML на шаблон страницы, как статические, так и динамические. Напишите любой дополнительный JavaScript в своем скрипте frontmatter, чтобы получить значения для использования в вашем HTML. Когда вы будете довольны этой страницей, зафиксируйте все внесенные вами изменения на GitHub, прежде чем перейти к следующему уроку.
Анализ шаблона
Теперь ваша страница «О нас» оформлена с помощью обоих стилей: импортированного файла global.css , и тега .
- Применяются ли стили из обоих методов оформления? Да
- Есть ли конфликтующие стили, и если да, какие применяются? Да, имеет глобальную ширину 2.5rem, но локально в теге — 4rem. Локальное правило 4rem применяется на странице «О нас».
- Опишите, как работают global.css и вместе. Когда конфликтующие стили определены как глобальные, так и в локальном теге страницы, то локальные стили должны переписывать любые глобальные стили. (Но могут быть и другие факторы, поэтому всегда визуально проверяйте свой сайт, чтобы убедиться, что ваши стили правильно применяются!)
- Как бы вы выбрали, где объявить стиль — в файле global.css или в теге ? Если вы хотите, чтобы стиль применялся на всем сайте, то выберите файл global.css . Однако, если вы хотите, чтобы стили применялись только к содержимому HTML в одном файле .astro , а не влияли на другие элементы на вашем сайте, вы можете использовать тег .
Чек-лист
- Я могу добавить глобальные CSS-стили, импортируя файл .css .