01 Предисловие

В CSS есть три способа ссылки на HTML-документы, но последняя ссылка требует хостинга кода, который я подробно объясню далее.

02 Метод ссылки на таблицу стилей CSS

2.1 Встроенные таблицы стилей

Встроенные стили. Встроенные стили можно <style>определить с помощью атрибутов непосредственно в HTML-разметке. Например:

<p style="color: red; font-size: 16px;">这是一段红色、字号为16px的文本。</p>

2.2 Встроенные таблицы стилей

Встроенные стили. Встроенные таблицы стилей можно <style>определить с помощью тегов в документах HTML. Например:

<head>
  <style>
    p {
      
      
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>这是一段红色、字号为16px的文本。</p>
</body>

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

2.3 Внешние таблицы стилей

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

2.3.1 Таблица стилей ссылки относительного пути

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>这是一段从styles.css文件中引用的样式。</p>
</body>

2.3.2 Ссылки на таблицы стилей

Кроме того, относительно новым подходом являются импортированные стили, которые используют оператор @import для ссылки на файл CSS в другом файле CSS. Например:

<head>
  <style>
    @import url("styles.css");
  </style>
</head>
<body>
  <p>这是一段从styles.css文件中引用的样式。</p>
</body>

2.3.3 Размещенные связанные таблицы стилей

<head>
  <link rel="stylesheet" type="text/css" href="https://仓库名.github.io/css/style.css">
</head>
<body>
  <p>这是一段从styles.css文件中引用的样式。</p>
</body>

03 Хостинг кода

Ознакомьтесь с официальной документацией

Облако Tencent Cloud, Alibaba Cloud и т. д., хотя они и могут размещать код, похоже, что они не могут использовать справочную страницу pagesили за нее необходимо взимать плату.
Домашние гости могут использовать страницы, но требуется аутентификация по реальному имени, а также требуется фотография удостоверения личности, что более проблематично и может быть передано.
Используя github для завершения хостинга css, можно использовать простые статические макеты, но сложные макеты требуют jsdelivr для ускорения CDN.

Процесс размещения кода GitHub выглядит следующим образом:

1. Введите команду: git initчтобы создать новый репозиторий git локально
2. Используйте команду git локально, чтобы установить соединение с удаленным репозиторием:

git remote add origin  github仓库地址

3. Используйте команду: git add ., добавьте все файлы в этом каталоге в область кеша
4. Используйте команду: git commit -m 'test'request
5. Используйте команду: git push origin masterpush

На данный момент код успешно отправлен в репозиторий.

Если у вас есть другие вопросы, вы можете написать мне в личное сообщение или прочитать другой мой учебник по использованию команд git, чтобы понять

1. В гитхабе нажмитеsettings

вставьте сюда описание изображения
2. Нажмите pages, чтобы настроить свою ветку и просмотреть URL-адрес доступа.

3. <link>Вставьте свою внешнюю ссылку в html по мере необходимости, и вы обнаружите, что стиль успешно загружен!

css ссылка на внешнюю таблицу стилей (хостинг кода)