Как загрузить css в html
Перейти к содержимому

Как загрузить css в html

  • автор:

Какими способами можно в input поставить картинку перед placeholder?

введите сюда описание изображения

Каким способом можно в самом input поставить изображение перед текстом-подсказкой(как на скрине)? Гуглил но выкидывало только о том,что такое placeholder и как с ним взаимодействовать(но ничего что мне нужно)

Отслеживать

MrSilentBeast

задан 28 июл 2020 в 19:52

MrSilentBeast MrSilentBeast

11 6 6 бронзовых знаков

Вы не правильно прописываете классы и scss разметку пишете тоже не правильно. В html основной класс не стоит писать через «__» — оно используется для определения вложенных классов для scss. Вам следовало написать «wrapper-form-container», а вложенному элементу «wrapper-form-container__item» и потом в scss пишете «.wrapper-form-container <&__item

Настройка и подключение статических файлов в Django

Если вы искали способ добавить изображения, стили и js в свой проект на Django, то пришли по адресу.

Что такое статические файлы в Django?
Изображения, JS и CSS-файлы называются статическими файлами или ассетами проекта Django.

1. Создадим папку для статических файлов

В папке проекта Django создайте новую папку «static». В примере выше она находится в директории «dstatic».

Создадим папку для статических файлов

2. Укажите статический URL Django в настройках

Теперь убедитесь, что статические файлы Django django.contrib.staticfiles указаны в списке установленных приложений в settings.py.

 
# dstatic > dstatic > settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ]

Они должны быть там по умолчанию.

После этого пролистайте в нижнюю часть файла настроек и укажите статический URL, если такого еще нет. Вы также можете указать статическую папку, чтобы Django знал, где искать статические файлы.

 
# dstatic > dstatic > settings.py STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"), ]

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

После завершения базовой настройки рассмотрим, как добавлять и показывать изображения в шаблонах, а также как подключить свои JavaScript и CSS файлы.

3. Создайте папку для изображений

Создайте папку в «static» специально для изображений. Назовите ее «img». Главное после этого правильно ссылаться на нее в шаблонах.

Создайте папку для изображений

4. Загрузите статический файл в свой HTML-шаблон

Теперь в выбранном шаблоне (например, в «home.html») загрузите статический файл в верхней части страницы.

Загрузите статический файл в свой HTML-шаблон

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

Использование тега static в шаблоне

После этого вы можете использовать тег «static» в шаблоне для работы с источником изображения.

dstatic > templates > home.html

 
     Home   

Привет Django

photo

Стоит отметить, что этот файл использует также Bootstrap CDN. Результат:

Настройка и подключение статических файлов в Django

5. Создание папки и файла JavaScript

Если нужно добавить кастомные JS-файлы в проект, создайте папку «js» внутри «static».

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

Создание файла script.js

В папке static > js создайте файл «script.js», в котором будут храниться все функции JavaScript.

 
$(window).scroll(function() < if ($(document).scrollTop() >600 && $("#myModal").attr("displayed") === "false") < $('#myModal').modal('show'); $("#myModal").attr("displayed", "true"); >>);

6. Загрузите скрипт в шаблон

Теперь для подключения JS-файла к проекту добавьте файл в «header.html». Файл должен вызываться так же, как и в случае с изображениями.

Не забудьте и о в верхней части страницы для корректной работы тегов.

 
     Home    

Привет Django

photo

7. Создание папки и файла для CSS

Также можно подключить CSS-файлы. Для этого создайте папку «css» внутри «static». Вы также можете использовать элемент и вложить все стили туда.

Создание папки и файла для CSS

Но в случае создания отдельных классовых атрибутов, которые затем используются в разных шаблонах, лучше создавать отдельные папки и файлы.

Создание файла стилей css

Создайте файл «stylesheet.css» в static > css . Там будут храниться все ваши стили.

.custom

8. Загрузите ссылку на CSS в шаблон

Для подключения собственных стилей к проекту, добавьте HTML-элемент в «header.html». Файл вызывается так же, как изображения и JS-файлы.

 
     Home " type="text/css">    

Привет Django

photo

И снова не забудьте о в верхней части страницы. Если не добавить эту строку, то будет ошибка.

Если класс custom добавить к container вы увидите изменения:

Загрузите ссылку на CSS в шаблон

Ошибки, связанные с загрузкой статических файлов Django

Если вы получили ошибку «Invalid block tag on line 8: ‘static’, expected ‘endblock’. Did you forget to register or load this tag?», то вы наверняка забыли добавить тег загрузки статических файлов в верхней части страницы: до вызова самого изображения.

 
 

Такая ошибка «Could not parse the remainder: ‘/photo.jpg’ from ‘img/photo.jpg’» значит, что вы забыли добавить кавычки вокруг ссылки на изображения. В этом случае нужно использовать две пары кавычек: одни для всего содержимого src , а вторые — для ссылки на изображение.

«Invalid block tag on line 9: »static/img/photo.jpg», expected ‘endblock’. Did you forget to register or load this tag?» говорит о том, что вы случайно добавили тег static в URL.

Если страница не загружается, и появляется следующая ошибка: «django.core.exceptions.ImproperlyConfigured: You’re using the staticfiles app without having set the required STATIC_URL setting», то это указывает на то, что вы забыли указать статический URL в файле настроек. Его нужно задать в settings.py и сохранить документ.

STATIC_URL = '/static/'

Наконец, если вы не получаете ошибку, но изображение не отображается, то убедитесь, что вы правильно используете тег.

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

Мои контакты: Почта
Python Q https://yandex.ru/q/loves/python Online

Python Q CEO Pythonru admin@pythonru.com https://secure.gravatar.com/avatar/b16f253879f7349f64830c64d1da4415?s=96&d=mm&r=g CEO Pythonru Python Александр Редактор https://t.me/cashncarryhttps://pythonru.com/https://yandex.ru/q/profile/cashnc/ PythonRu.com admin@pythonru.com Alex Zabrodin 2018-10-26 Online Python, Programming, HTML, CSS, JavaScript

Цвет¶

Цвет является важной частью любого сайта, а в CSS существует множество вариантов типов, функций и обработок цвета.

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

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

Числовые цвета¶

Вполне вероятно, что первое знакомство с цветами в CSS происходит через числовые цвета. Мы можем работать с числовыми значениями цветов в нескольких различных формах.

Шестнадцатеричные цвета¶

1 2 3
h1  color: #b71540; > 

Шестнадцатеричная нотация (часто сокращаемая до hex) — это сокращенный синтаксис для RGB, который присваивает числовое значение красному, зеленому и синему цветам, которые являются тремя основными цветами.

Шестнадцатеричные диапазоны — 0-9 и A-F. При использовании шестизначной последовательности они переводятся в числовые диапазоны RGB, которые составляют 0-255 и соответствуют красному, зеленому и синему цветовым каналам соответственно.

Также можно задать альфа-значение для любых числовых цветов. Альфа-значение — это процент прозрачности. В шестнадцатеричном коде к шестизначной последовательности добавляются еще две цифры, и получается восьмизначная последовательность. Например, чтобы задать черный цвет в шестнадцатеричном коде, напишите #000000 . Чтобы добавить 50% прозрачности, измените его на #00000080 .

Поскольку шестнадцатеричная шкала имеет вид 0-9 и A-F, значения прозрачности, вероятно, не совсем такие, как вы ожидаете. Вот некоторые ключевые, общепринятые значения, добавляемые к черному шестнадцатеричному коду #000000 :

  • 0% альфа, т. е. полная прозрачность — 00: #00000000
  • 50% альфа — это 80: #00000080
  • 75% альфа — это BF: #000000BF

Чтобы преобразовать двузначное шестнадцатеричное число в десятичное, нужно взять первую цифру и умножить ее на 16 (поскольку шестнадцатеричное число имеет основание 16), а затем прибавить вторую цифру. На примере BF для 75% альфа:

  1. B равно 11, что при умножении на 16 равно 176
  2. F равно 15
  3. 176 + 15 = 191
  4. Значение альфа равно 191-75% от 255

Сокращенная hex запись

Можно также записывать шестнадцатеричные коды в виде трехзначной стенограммы. Трехзначный шестнадцатеричный код — это сокращение эквивалентной шестизначной последовательности. Например, #a4e идентичен #aa44ee . Если добавить альфу, то #a4e8 расширится до #aa44ee88 .

RGB (Red, Green, Blue)¶

1 2 3
h1  color: rgb(183, 21, 64); > 

Цвета RGB задаются с помощью цветовой функции rgb() , используя в качестве параметров либо числа, либо проценты. Числа должны находиться в диапазоне 0-255, а проценты — в диапазоне от 0% до 100%. RGB работает по шкале 0-255, поэтому 255 будет эквивалентно 100%, а 0 — 0%.

Чтобы задать черный цвет в RGB, определите его как rgb(0 0 0) , то есть ноль красного, ноль зеленого и ноль синего. Черный цвет также можно определить как rgb(0%, 0%, 0%) . Белый цвет — полная противоположность: rgb(255, 255, 255) или rgb(100%, 100%, 100%) .

Альфа задается в rgb() одним из двух способов. Либо добавить символ / после параметров красного, зеленого и синего цветов, либо использовать функцию rgba() . Альфа может быть задана в процентах или в десятичной дроби от 0 до 1. Например, чтобы задать 50% альфа черного цвета в современных браузерах, напишите: rgb(0 0 0 / 50%) или rgb(0 0 0 / 0,5) . Для более широкой поддержки, используя функцию rgba() , напишите: rgba(0, 0, 0, 50%) или rgba(0, 0, 0, 0.5) .

Запятые и пробелы

Запятые были удалены из обозначений rgb() и hsl() , поскольку в новых цветовых функциях, таких как lab() и lch() , в качестве разделителя используются пробелы, а не запятые. Это изменение обеспечивает большую согласованность не только с новыми цветовыми функциями, но и с CSS в целом. Для лучшей обратной совместимости можно по-прежнему использовать запятые для определения rgb() и hsl() .

HSL (Hue, Saturation, Lightness)¶

1 2 3
h1  color: hsl(344, 79%, 40%); > 

HSL расшифровывается как hue, saturation и lightness. Оттенок описывает значение на цветовом круге, от 0 до 360 градусов, начиная с красного (это и 0, и 360). Оттенок 180, или 50%, будет находиться в синем диапазоне. Это источник того цвета, который мы видим.

Насыщенность — это степень яркости выбранного оттенка. Полностью ненасыщенный цвет (с насыщенностью 0% ) будет выглядеть полутоновым. И, наконец, светлота — это параметр, описывающий шкалу от белого до черного цвета добавленного света. Светлота, равная 100% , всегда будет давать белый цвет.

Используя функцию цвета hsl() , вы определяете истинный черный цвет, написав hsl(0 0% 0%) или даже hsl(0deg 0% 0%) . Это связано с тем, что параметр hue определяет градус на цветовом круге, который, если использовать числовой тип, равен 0-360. Можно также использовать тип angle, который имеет вид ( 0deg ) или (0turn) . Насыщенность и светлота задаются в процентах.

Тип angle в CSS отлично подходит для определения оттенка, поскольку он очень хорошо представляет угол цветового круга. Этот тип принимает градусы, повороты, радианы и градианы.

Альфа задается в hsl() , так же как и в rgb() , путем добавления символа / после параметров оттенка, насыщенности и светлоты или с помощью функции hsla() . Альфа может быть задана в процентах или десятичных числах от 0 до 1. Например, чтобы задать 50% альфа черного, используйте: hsl(0 0% 0% / 50%) или hsl(0 0% 0% / 0.5) . Используя функцию hsla() , напишите: hsla(0, 0%, 0%, 50%) или hsla(0, 0%, 0%, 0.5) .

В CSS появилось несколько новых типов цветов. К ним относятся lab() и lch(), которые позволяют задать гораздо более широкий диапазон цветов, чем это возможно в RGB.

Ключевые слова цветов¶

В CSS существует 148 названий цветов. Это такие простые английские названия, как purple , tomato и goldenrod . По данным Web Almanac, наиболее популярными являются черный, белый, красный, синий и серый. Нашими любимыми являются goldenrod , aliceblue и hotpink .

Помимо стандартных цветов, существуют также специальные ключевые слова:

  • transparent — полностью прозрачный цвет. Он также является начальным значением background-color .
  • currentColor — это контекстно вычисляемое динамическое значение свойства color . Если у вас есть цвет текста red , а затем установить border-color в значение currentColor , то он также будет красным. Если элемент, для которого задается currentColor , не имеет определенного значения для color , то currentColor будет вычисляться каскадом.

Системные ключевые слова — это цвета, которые определяются темой операционной системы. Примерами таких цветов являются Background — цвет фона рабочего стола или Highlight — цвет подсветки выделенных элементов. Это только два из множества вариантов.

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

Где использовать цвет в правилах CSS¶

Для фона можно задать цвет в качестве значения для background или background-color . Цвета также могут использоваться в градиентах, например, в linear-gradient . Градиенты — это тип изображения, который может быть программно задан в CSS. Градиенты могут содержать два или более цветов в любой комбинации цветовых форматов, таких как hex, rgb или hsl.

С градиентами можно многому научиться, поэтому мы написали целый урок о том, как их использовать.

Наконец, свойства border-color и outline-color задают цвет границ и контуров боксов. Свойство box-shadow также принимает цвет в качестве одного из значений.

Ресурсы¶

  • Удобная демонстрация, показывающая, как можно использовать углы с HSL
  • Исчерпывающее руководство по цвету
  • Исчерпывающее руководство по цвету в широкой гамме
  • [видео] Объяснение, как читать шестнадцатеричные коды
  • Как работают шестнадцатеричные коды

Как импортировать сайт в проект — HTML в Figma [Плагин]

Когда речь заходит о доработке уже действующего сайта, часто оказывается, что нет не только исходников макетов (или они есть только в PSD, что на текущий момент — более чем реалистичный вариант), но и какой либо еще информации по проекту: ни UI-кита, ни бренд-бука и т.д.

Быстрым и очень эффективным решением этой проблемы станет плагин HTML To Figma, который позволяет импортировать по слоям любую доступную страницу html из сети.

Плагин HTML to Figma

Ограничения плагина

Не поддерживаются псевдоэлементы и внешние элементы вроде iframe

Поддерживаются не все свойства CSS

Не поддерживается анимация и видео

Шрифты должны быть уже загружены в Figma

Как импортировать HTML в Figma

Настройка импорта сайта в Фигму

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

  1. Вызываем плагин
  2. Выбираем разрешение из предустановленных значений (десктоп, планшет, телефон) или задаем свои
  3. Нажимаем IMPORT

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

Некоторые особенности, которые стоит учитывать

Сайт Tesla, импортированный в Фигму

  1. Плагин делает копию всей страницы
  2. Плагин никак не группирует и не называет слои
  3. На тяжелый сайты плагин тратит до минуты времени на обработку

Наш отзыв

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

Без тени сомнения ставим плагину 10 из 10 и оставляем в коллекции.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *