три рабочих метода, как добавить CSS на сайт
🗓️ Обновлено: 09.08.2022
💬Комментариев: 0
👁️Просмотров: 1117
Вы можете по разному добавить css в ваш html-файл. Есть быстрые варианты, есть правильные. Мы рассмотрим все возможные.
1. Подключение внешнего файлы
Самый распространенный и правильный вариант — это просто подключить внешний файл CSS.
Это делается внутри тега <head> с помощью тега link.
<link href="css/styles.css" rel="stylesheet">
Какие преимущества у этого способа? Во-первых, это просто удобно. Все ваши стили будут лежать в отдельном файле. Не потеряются, как минимум. Да и редактировать можно без вмешательства в html. Во-вторых, вы сможете этот файл закешировать и ускорить загрузку вашего сайта.
Частый вопрос: что делать, если файл index.html лежит не в корне, а в отдельной папке — как тогда подключить стили?
Ответ простой: нужно прописать правильный путь к файлу styles.css.
Предположим ваш файл styles.css находится в папке css, а index.html в папке templates. Тогда внутри тега <head> в html подключаете стили таким образом:
<link rel="stylesheet" href="../css/styles.css">
Здесь вы, как бы, поднялись на один уровень вверх с помощью вот этих символов: «../». Если нужно подняться на два уровня вверх, то пишите вот так: «../../»
2. Внутренние стили
Внутренние стили можно прописать для конкретной html-страницы. Вы не подключаете файл, как в предыдущем примере, а вставляете css код прямо внутрь html. Но делаете это с двумя правилами.
Первое правило: вставляйте внутри тега <head>
Второе правило: вставляйте css стили внутри тега <style></style>
Таким образом у вас должен получиться вот такой код:
<style>
body {
background-color: #cccccc;
}
h2 {
font-size: 26px;
color: #eeeeee;
}
</style>И все это нужно вставить внутри тега <head>.
Зачем так делают? Возможно, у вас нет доступа к редактированию файлов css, либо вы хотите, чтобы новый css код срабатывал только на этой странице, а возможно вы не хотите ждать, когда загрузится файл styles.
Важно!
Если вы вставляете css код через <style></style> на странице, к примеру, contact.html, то эти стили будут действительны только на этой конкретной странице. На странице about.html они уже не будут работать.
3. Встроенные стили
Встроенные стили задаются для конкретного элемента через атрибут style. Давайте сразу покажем, как это выглядит. Предположим у вас есть заголовок h2 и вы хотите изменить размер шрифта и разместить текст по центру блока. Тогда прописываем вот так:
<h2>Заголовок страницы</h2>
Таким образом эти стили будут применены к конкретно этому элементу. Другие h2 будут без изменений, так как мы встроили инлайновые стили только для конкретно вот этого заголовка.
Одно из преимуществ такого метода, это то, что инлайновые стили как бы перекрывают стили прописанные в css файле.
То есть они считаются более весомыми.
Есть еще несколько «экзотичных» методов вставки css в html код. Однако, мы их не будем рассматривать.
Какой способ выберете вы — зависит от ваших задач. Все три имеют право на существования и могут быть применены в той или иной ситуации.
CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Перейти в Telegram
Как связать HTML и CSS файл с помощью Django?
Я новичок в изучении Django. Я пытался просто связать HTML и CSS файлы в Django, ссылаясь на некоторые сайты и видео, но кажется, что CSS файл не включен. Хотя я пробовал несколько раз, я не получаю цвет фона, который я поместил в CSS файл. CSS файл сохранен в static/css/style.css
body{
background-color: violet;
}
HTML файл сохранен в templates/bg.html
{%load static%}
<!<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> BG </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'style.
css' %}">
</head>
<body>
<h3>BG Colour</h3>
<p>
Background Color is to be changed.<br>
</p>
<script src="" async defer></script>
</body>
</html>
css' %}">
</head>
<body>
<h3>BG Colour</h3>
<p>
Background Color is to be changed.<br>
</p>
<script src="" async defer></script>
</body>
</html>
Также я настроил статический файл в файле settings.py.
STATIC_URL = '/static/'
STATIC_DIRS=[
os.path.join(BASE_DIR,'static')
]
Вместо «фиолетового» фона я все еще получаю «белый» фон. Пожалуйста, помогите мне исправить это.
Вы обслуживаете свои статические файлы?
Если вы используете manage.py runserver, вы можете добавить это в конец ваших проектов urls.py:
from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
if settings.DEBUG:
urlpatterns += staticfiles_urlpatterns()
например, здесь: https://github.com/almazkun/durls/blob/4b17a1b698430b442fc1e74e5b24f792f57cb17e/settings/urls.py#L28 или здесь: Как вы обслуживаете статические файлы при использовании сервера разработки django runserver?
Обратите внимание, что Django не обслуживает файлы static и media самостоятельно.
Вам нужно будет настроить их отдельно, используя такие вещи, как nginx или whitenoise.
Для управления статическим файлом. Сначала вам необходимо знать development и production настройки.
- В разработке необходимо установить
DEBUG=Trueвsettings.py. - В производстве необходимо установить
DEBUG=Falseвsettings.py
Развитие
Для обслуживания статического файла в проекте разработки. Вам нужно сделать две вещи .
Первый — изменение файла settings.py. Добавлен этот пример кода.
STATIC_URL = '/static/'
if DEBUG:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/static/',
]
else:
STATIC_ROOT = os.path.join(BASE_DIR, "static")
Второе изменение — urls.py файл. Добавьте этот пример кода-
## import this at the top from django.contrib.staticfiles.urls import staticfiles_urlpatterns ## bottom of the file `urls.
py`
if settings.DEBUG:
urlpatterns += staticfiles_urlpatterns()
Вы можете проверить этот проект django. как вы можете изменить свой код
Производство
Для производственной сборки вы должны следовать этому контрольному списку.
После выполнения контрольного списка вы можете обслуживать статическое содержимое с помощью nginx веб-сервера. Или вы можете использовать пакет whitenoise python.
- Настройка статических файлов для работы с NGINX или Средний блог (Настройка статических файлов Django с Nginx) .
- Использование WhiteNoise с Django.
Думаю, это поможет вам в дальнейшей работе.
Вернуться на верх
Последние вопросы и ответы
Connection Error while creating Database in Django
how to get only values from query dict
Unsafe redirect to URL with protocol django rest framework
Check how much progress is done in the backend using Django?
Trying to implement uploading products via excel sheet python react
Django: how do I implement a functional delete button for an object where the view loops thru api request data?
Django использует код css не полностью
how can i fix django lazy reference to app?
Django form data loop
Django Return redirect working for one view but not for the other
Рекомендуемые записи по теме
Python 3.
11: новые классные возможности, которые вы можете попробовать
Полное руководство по множествам в Python
Представления на основе классов или функции в Django?
Константы Python: Улучшение управляемости вашего кода
Параллелизм, конкурентность и AsyncIO в Python — на примере
Современный Python: начинаем проект с pyenv и poetry
Рабочий процесс проекта Python
Настройка проекта Python — виртуальные среды и управление пакетами
Использование requests в Python — тайм-ауты, повторы, хуки
Понимание декораторов в Python
Комментарии CSS
❮ Предыдущий Далее ❯
CSS-комментарии не отображаются в браузере, но могут помогите задокументировать исходный код.
Комментарии CSS
Комментарии используются для объяснения кода и могут помочь при редактировании исходного кода позднее.
Комментарии игнорируются браузерами.
Комментарий CSS помещается внутри элемента
Мой Заголовок
Здравствуйте! Мир!
Этот абзац оформлен с помощью CSS.
Комментарии CSS не отображается в выходных данных.