Учимся использовать @import в CSS

Правило CSS import позволяет импортировать внешние таблицы стилей не только на HTML-страницу , но и в другой стилевой документ. Это упрощает управление файлами и их интеграцию.

Импорт в HTML

Чтобы воспользоваться правилом @import в HTML-файле , добавьте следующий код в шапку страницы:

Данный код импортирует CSS для использования на HTML-странице . Это позволяет редактировать все ее стили при помощи отдельного файла. Недостаток такого подхода заключается в отсутствии параллельной загрузки. То есть, страница не начнет загружаться до тех пор, пока браузер не загрузит файл CSS полностью. Это негативно скажется на скорости загрузки сайта и общей производительности.

В качестве альтернативного способа применения import url CSS в HTML можно сослаться на таблицу стилей следующим образом:

Эта ссылка работает по принципу @import , и позволяет управлять всем CSS-кодом с помощью отдельного файла. Данный метод предпочтительнее с точки зрения параллельной загрузки. Если вам все еще хочется распределить CSS по отдельным файлам, то можно воспользоваться @import внутри основного стилевого файла.

Импорт в CSS

Применение в приведенном выше примере позволит внедрить файл » default.css » в HTML-страницу . Внутри этого CSS-файла находятся различные правила стилизации. Эти стили можно разместить как на одной странице, так и разбить их на отдельные фрагменты. А также импортировать в основной файл CSS .

Предположим, что мы используем четыре отдельных CSS-файла : один для разметки, второй для шрифтов и третий для картинок. Четвертым будет основной файл, в котором указаны ссылки на все остальные файлы. В самом верху основного файла ( так как правила импорта должны размещаться над всем остальным содержимым ) добавьте следующий код CSS import :

@import url('/styles/layout.css'); @import url('/styles/type.css'); @import url('/styles/images.css');

Уже после этих правил можно добавлять любой CSS-код для оформления страниц.

При загрузке страницы сначала все отдельные файлы будут подгружены в основной CSS , а уже после этого файл загрузится в HTML-страницу . Таким образом у вас будет более простой доступ к отдельным сегментам стилизации.

Используем @import в медиа-запросах

Разделение основного CSS-файла может пригодиться при адаптации сайта под мобильные устройства, где для разных разрешений и размеров экрана применяются различные стили. Главная проблема заключается в том, что подключения CSS import расположены в самом верху страницы, поэтому медиа-запросы будут загружены после стилей. При разработке адаптивных дизайнов важно учитывать производительность сайта. Рекомендуется не разделять CSS адаптивного сайта и использовать @import для их загрузки на ресурс.

Всегда ли нужно использовать @import?

Вовсе нет. На многих сайтах весь CSS расположен прямо в коде страниц, и в этом нет ничего страшного.

Поддержка браузерами

У старых браузеров наблюдаются некоторые проблемы поддержки правила CSS import , но сейчас этими версиями программ практически никто не пользуется. Времена Internet Explorer уже давно позади.

Импорт CSS

Одним из способов подключения стилей, расположенных в отдельных файлах, заключается в применении правила @import, с помощью которого можно импортировать содержимое CSS-файла в выбранную стилевую таблицу.

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

Файл, который будет подключён к HTML-странице, может располагаться в назначенной директории или в корне сайта. Название файла выбирается произвольно, как правило, это style.css где и записывают пути к расположению необходимых стилей, согласно выше упомянутому правилу.

Содержимое файла style.css

 @import url( /design/layout.css ); @import url( /design/modules.css ); 

/design/layout.css – путь к файлу layout.css , в котором записаны стили дизайна сайта

/design/modules.css – путь к файлу modules.css , где расположены стили содержимого сайта

CSS — сделай это красиво!

Наш блог всё ещё выглядит довольно скверно, не так ли? Пора сделать его красивым! Для этого будем использовать CSS.

Что такое CSS?

Каскадные таблицы стилей (англ. Cascading Style Sheets, или сокращённо CSS) — специальный язык, используемый для описания внешнего вида и форматирования сайта, написанного на языке разметки (как HTML). Воспринимай это как своего рода макияж для нашей веб-страницы 😉

Но мы же не хотим начинать всё с нуля, правда? Мы просто снова возьмём что-то, что уже было создано программистами и опубликовано в Интернете для свободного пользования. Ты же знаешь, заново изобретать велосипед совсем не весело.

Давай использовать Bootstrap!

Bootstrap — один из наиболее популярных HTML и CSS фреймворков для разработки красивых сайтов: https://getbootstrap.com/

Он был написан программистами, которые работали в Twitter, а сейчас совершенствуется волонтёрами со всего мира.

Установка Bootstrap

Для установки Bootstrap тебе нужно добавить следующие строки в твоего .html файла ( blog/templates/blog/post_list.html ):

link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 

Это не добавит ни одного файла к твоему проекту. Эти строки просто указывают на файлы, опубликованные в Интернете. Просто продолжай, открой свой веб-сайт и обнови страницу. Вот и результат!

Выглядит уже лучше!

Статические файлы в Django

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

Куда поместить статические файлы в Django

Django уже знает, где искать статические файлы для встроенного приложения «admin». Теперь нам нужно добавить статические файлы для своего приложения blog .

Мы сделаем это, создав папку static внутри каталога с нашим приложением:

djangogirls ├── blog │ ├── migrations │ ├── static │ └── templates └── mysite 

Django будет автоматически находить папки static внутри всех каталогов твоих приложений и сможет использовать их содержимое в качестве статических файлов.

Твой первый CSS файл!

Давай создадим CSS файл, чтобы добавить свой собственный стиль для твоей веб-страницы. Создай новую папку под названием css внутри твоей папки static . Затем создай новый файл под названием blog.css внутри папки css . Готово?

djangogirls └─── blog └─── static └─── css └─── blog.css 

Пришло время написать несколько строк CSS! Открой файл blog/static/css/blog.css в своем редакторе кода.

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

Но давай сделаем хотя бы немного. Возможно, мы могли бы изменить цвет заголовка? Чтобы понимать цвета, компьютеры используют специальные коды. Они начинаются с # и далее следуют 6 букв (A-F) и цифр (0-9). Ты можешь найти коды цветов, например, здесь: http://www.colorpicker.com/. Также можешь пользоваться предопределенными цветами, такими как red и green .

В файле blog/static/css/blog.css тебе нужно добавить следующий код:

h1 a < color: #FCA205; > 

h1 a — это CSS-селектор. Это означает, что мы применяем наши стили к каждому элементу a внутри элемента h1 (например, когда у нас в коде что-то вроде:

link

). В этом случае мы говорим о том, что нужно изменить цвет элемента на #FCA205 , то есть на оранжевый. Конечно, ты можешь указать свой собственный цвет!

В CSS файле мы определяем стили для элементов файла HTML. Элементы идентифицируются именами (то есть a , h1 , body ), атрибутом class или атрибутом id . Class и id – это имена, которые ты сама присваиваешь элементам. Классы (сlass) определяют группы элементов, а идентификаторы (id) указывают на конкретные элементы. Например, следующий тег может быть идентифицирован CSS с использованием имени тега a , класса external_link или идентификатора link_to_wiki_page :

a href="https://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page"> 

Почитай про CSS селекторы в CSS Selectors на w3schools.

Затем нам также нужно сообщить нашему HTML-шаблону о том, что мы добавили CSS. Открой файл blog/templates/blog/post_list.html и добавь эту строку в самое начало:

Мы просто загружаем здесь статические файлы 🙂 Далее между и , после ссылок на файлы Bootstrap CSS, добавь такую строку:

link rel="stylesheet" href=""> 

Браузер читает файлы в порядке их следования, поэтому нам необходимо удостовериться, что файл расположен в необходимом месте. Иначе код нашего файла может переопределить код в файлах Bootstrap. Мы только что сказали нашему шаблону, где находится наш CSS файл.

Твой файл должен теперь выглядеть следующим образом:

 html> head> title>Django Girls blog title> link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> link rel="stylesheet" href=""> head> body> div> h1>a href="/">Django Girls Blog a> h1> div> div> p>published: > p> h1>a href="">> a> h1> p>> p> div> body> html> 

Ок, сохрани файл и обнови страницу!

Отличная работа! Может быть, мы также хотели бы добавить нашему веб-сайту немного пространства и увеличить отступ слева? Давай попробуем!

body < padding-left: 15px; > 

Добавь это к твоему CSS, сохрани файл и посмотри, как это работает!

Возможно, мы можем настроить шрифт нашего заголовка? Вставь это внутрь тега в файле blog/templates/blog/post_list.html :

link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic" rel="stylesheet" type="text/css"> 

Как и ранее, проверь порядок и вставь эту строку перед ссылкой на blog/static/css/blog.css . Эта строка импортирует шрифт под названием Lobster из шрифтов Google (https://www.google.com/fonts).

Теперь добавь строку font-family: ‘Lobster’; в CSS файле blog/static/css/blog.css внутри блока определения стиля h1 a (код помещается между скобками < и >) и обнови страницу:

h1 a < color: #FCA205; font-family: 'Lobster'; > 

Как было указано выше, в CSS используется концепция классов, которая позволяет назвать часть HTML кода и применять стили только для этой части без всякого эффекта для других. Это очень полезно, если у тебя есть, скажем, два блока div, но они выполняют совершенно разные функции (как ваш заголовок и пост), следовательно, ты не хочешь, чтобы они выглядели одинаково.

Дадим имена определённым частям HTML кода. Добавь класс под названием page-header в блок div , содержащий наш заголовок, как это сделано здесь:

div class="page-header"> h1>a href="/">Django Girls Blog a> h1> div> 

А теперь добавь класс post в твой div , содержащий сообщение в блоге:

div class="post"> p>published: > p> h1>a href="">> a> h1> p>> p> div> 

Теперь добавим определения блоков для различных селекторов. Селекторы, которые начинают с символа . , относятся к классам. В Интернете много хороших справочников по CSS, которые могут помочь тебе понять следующий код. А сейчас просто скопируй и вставь код в файл djangogirls/static/css/blog.css :

.page-header < background-color: #ff9400; margin-top: 0; padding: 20px 20px 20px 40px; > .page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active < color: #ffffff; font-size: 36pt; text-decoration: none; > .content < margin-left: 40px; > h1, h2, h3, h4 < font-family: 'Lobster', cursive; > .date < color: #828282; > .save < float: right; > .post-form textarea, .post-form input < width: 100%; > .top-menu, .top-menu:hover, .top-menu:visited < color: #ffffff; float: right; font-size: 26pt; margin-right: 20px; > .post < margin-bottom: 70px; > .post h1 a, .post h1 a:visited < color: #000000; > 

Далее переделаем код HTML, отображающий посты, используя классы. Замени:

 div class="post"> p>published: > p> h1>a href="">> a> h1> p>> p> div> 

в blog/templates/blog/post_list.html этим кодом:

div class="content container"> div class="row"> div class="col-md-8"> div class="post"> div class="date"> p>Опубликовано: > p> div> h1>a href="">> a> h1> p>> p> div> div> div> div> 

Сохрани эти файлы и обнови свой веб-сайт.

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

Не бойся немного повозиться с этим CSS-файлом и попробуй поменять некоторые вещи. Если что-то сломается, не волнуйся, ты всегда можешь отменить предыдущее действие!

В любом случае, мы настоятельно рекомендуем пройти бесплатный онлайн курс Codeacademy HTML & CSS course в виде домашней работы после воркшопа, чтобы изучить всё, что нужно знать об оформлении веб-сайтов с помощью CSS.

Готова к следующей главе?! 🙂

results matching » «

No results matching » «

CSS: Подключение файла через @IMPORT или LINK

Для подключения файла стилей CSS можно воспользоваться несколькими способами. Кто-то предпочитает использовать вставку через LINK а кто-то любит @IMPORT . Как же понять — какой способ использовать предпочтительнее всего? Ответ на этот вопрос нам даст Google (думаю, ему можно доверять в этом плане). Корпорация добра дает следующие характеристики описанных выше методов.

Итак, для подключения файла стилей у нас есть 2 способа:

Или же внутри самого файла стилей через директиву @import

@import url('style.css'); 

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

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

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

Если же не получится, то загружайте их параллельно:

Как импортировать css-файл?

В корневой папки сайта есть файл style.css, а также папка css, в которой хранятся другие файлы style1.css, style2.css style3.css. Как сделать так, чтоб все изменения в style1, style2 и style3 отображались в style.css. Я пробовал импортировать адреса — не получается. Вот код style.css:

@import url(/css/style1.css); @import url(/css/style2.css); @import url(/css/style3.css); 

Отслеживать

51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков

Как импортировать css в css

При помощи директивы @import можно импортировать один файл со стилями в другой файл со стилями.

Пример

Предположим, в проекте для удобства стили разделены на несколько файлов:

1. fonts.css — файл с подключением шрифтов и стилями.
2. buttons.css — файл со стилями для кнопок.
3. main.css — основной файл стилей с остальным CSS-кодом.

Нам нужно, чтобы все стили загружались при открытии страницы. Для этого импортируем отдельные файлы в наш основной файл main.css:

Как пишется

Начнём с важного: все директивы импорта должны быть в самом верху CSS-файла, до всего остального кода. Иначе не сработает.

Равнозначные варианты импорта:

Технической разницы между этими двумя вариантами нет. Файлы будут импортироваться одинаково в обоих случаях. Путь до файла может быть как абсолютным, так и относительным.

Можно указать, для каких типов устройств должны применяться стили из импортируемого файла:

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

Допустимо указывать несколько медиавыражений после пути:

Можно проверить, поддерживается ли какое-то конкретное правило или выражение в браузере пользователя, и загрузить для него конкретные стили. Для этого используется правило supports :

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

Как это понять

Во время загрузки страницы браузер пройдёт по всем указанным в импортах путям и загрузит таблицы стилей. Затем прочитает правила ниже импортов и отрисует страницу на основании комбинации всего CSS.

Подсказки

�� Желательно не злоупотреблять импортами. Потенциально это может замедлить загрузку страницы.

�� Все импорты всегда должны быть в начале CSS-файла.

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

На практике

Алёна Батицкая

�� Кроме импорта файлов внутри проекта можно встретить использование этой директивы для импорта шрифтов с сайта Google Fonts. Это один из предложенных на их сайте вариантов подключения.

После этого в коде ниже можно использовать подключённый шрифт. Минимум усилий — максимум результата.

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

Из двух предложенных на сайте Google Fonts вариантов подключения шрифта выбирайте тот, что через .

�� Если проект большой, то удобно разделять стили на разные файлы. Отдельно стили для разметки, отдельно для типографики, отдельно для форм и кнопок. В этом случае в основном файле стилей — назовём его style.css — будут только импорты. Так удобнее содержать код в чистоте. И всегда точно знаешь, в какой файл залезть, чтобы что-нибудь поправить.

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

@import

The @import CSS at-rule is used to import style rules from other style sheets.

Syntax

Is a or a () representing the location of the resource to import. The URL may be absolute or relative.

Is a comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL. If the browser does not support any of these queries, it does not load the linked resource.

Description

Imported rules must precede all other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules.

So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media queries after the URL. In the absence of any media query, the import is unconditional. Specifying all for the medium has the same effect.

@import

Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import .

Синтаксис

В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.

Табл. 1. Типы носителей и их описание

Использование типов носителей совместно с импортом файла дает возможность указывать стиль только для определенных устройств.

Обозначения

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

В качестве значения используется путь к стилевому файлу, который указывается внутри необязательной конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.

Пример

Примечание

Браузер Internet Explorer до версии 7 включительно не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается.

Спецификация

Спецификация	Статус
Media Queries	Рекомендация
CSS Level 2 Revision 1 (CSS 2.1)	Рекомендация
CSS Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

5.5

12

1

5

1

1

1

1

5

1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Как использовать @import в каскадных таблицах стилей (CSS)

Существует несколько способов применения стилей CSS к веб-странице, включая как внешние таблицы стилей, так и даже встроенные стили. Если вы используете внешнюю таблицу стилей, которая является рекомендуемым способом определения внешнего вида HTML-документа, один из подходов заключается в использовании @import.

Правило @import позволяет импортировать внешние таблицы стилей в ваш документ – либо на страницу HTML, либо даже в другие документы CSS. Разбиение множества стилей на несколько более мелких, сфокусированных файлов (один для макета, один для типографики, один для изображений и т. Д.) Может иногда облегчать управление этими файлами и различными стилями, которые они содержат. Если вы хотите воспользоваться этим преимуществом, то вам нужно будет импортировать эти различные файлы, чтобы все они работали для отображения вашей веб-страницы.

Импорт в HTML

Чтобы использовать правило @import в своем HTML, вы должны добавить следующее в документ:

Этот код теперь импортирует эту таблицу стилей для использования на этой HTML-странице, и вы можете управлять всеми своими стилями в этом одном файле. Недостатком импорта таблиц стилей таким способом является то, что этот метод не допускает параллельной загрузки. Страница должна загрузить всю таблицу стилей, прежде чем она перейдет к остальной части страницы, включая любые другие файлы CSS, которые вы импортируете с использованием этого метода. Это отрицательно скажется на скорости вашей страницы и производительности загрузки. Учитывая, насколько важна производительность страницы для успеха сайта, сам по себе этот недостаток может быть причиной, по которой вы хотели бы избежать использования @import.

Альтернативный подход

В качестве альтернативы использованию @import в вашем HTML, вы можете сделать ссылку на этот файл CSS следующим образом:

Эта функция очень похожа на @import в том смысле, что она позволяет вам управлять всеми вашими CSS из одного центрального местоположения/файла, но этот метод предпочтителен с точки зрения загрузки. Если вы все еще хотите сегментировать различные виды стилей в отдельные файлы, вы можете продолжить делать это и использовать функцию @import в своем основном CSS-файле. Это означает, что ваши внешние CSS-файлы все еще могут управляться индивидуально, но, поскольку все они импортируются в один основной CSS, производительность улучшается.

Импорт в CSS

Использование приведенного выше примера кода принесет файл «default.css» для использования на вашей HTML-странице. Внутри этого CSS-файла у вас будут различные стили страницы. Вы можете подробно описать все эти стили на одной странице или использовать @import, чтобы разбить их на части для упрощения управления. Еще раз, скажем, мы используем 4 отдельных файла CSS – один для макета, один для типографии и один для изображений. Четвертый файл – это наш «главный» файл, на который ссылается наша страница (в данном примере это «default.css»). В самом верху этого основного CSS-файла мы можем добавить правила, показанные ниже:

Обратите внимание, что эти правила должны быть перед всем другим содержимым в вашем CSS-файле, чтобы они работали. Перед этими правилами импорта не может быть никаких других стилей CSS.

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

Использование @import для медиазапросов

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

Нужно ли использовать @import?

Нет, ты не. Многие сайты просто отображают все свои основные стили внутри одного файла, и, насколько бы большим ни был этот файл, им управляют таким образом (именно так я делаю это в своей собственной работе). Если вы найдете @import полезным, это может стать частью вашего рабочего процесса.В противном случае вы можете безопасно создавать веб-страницы, которые являются вашей единой таблицей стилей из всех ваших правил CSS.

Поддержка браузера

Очень, очень старые браузеры имеют проблемы с некоторыми из этих правил @import, но эти браузеры вряд ли станут проблемой для вас в наши дни. Это особенно верно сейчас, когда крайний срок жизни для старых версий Internet Explorer прошел. В конечном счете, если вы решите использовать правила @import в своем HTML или CSS, вам не следует сталкиваться с проблемами с унаследованными версиями веб-браузеров, если у вас нет странной необходимости поддерживать невероятно старые версии IE.

Похожие публикации:

1. Как обращаться по id в css
2. Как округлить рамку в css
3. Почему появляется горизонтальный скролл css
4. Сколько стоит earphones 2 basic

Настройка и подключение статических файлов в 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») загрузите статический файл в верхней части страницы.


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

Использование тега static в шаблоне
После этого вы можете использовать тег «static» в шаблоне для работы с источником изображения.
dstatic > templates > home.html
 
        
Привет Django
 
   
Стоит отметить, что этот файл использует также Bootstrap CDN. Результат:

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». Файл должен вызываться так же, как и в случае с изображениями.
Не забудьте и о в верхней части страницы для корректной работы тегов.
 
         
Привет Django
 
   
7. Создание папки и файла для CSS
Также можно подключить CSS-файлы. Для этого создайте папку «css» внутри «static». Вы также можете использовать элемент и вложить все стили туда.

Но в случае создания отдельных классовых атрибутов, которые затем используются в разных шаблонах, лучше создавать отдельные папки и файлы.
Создание файла стилей css
Создайте файл «stylesheet.css» в static > css . Там будут храниться все ваши стили.
 .custom
8. Загрузите ссылку на CSS в шаблон
Для подключения собственных стилей к проекту, добавьте HTML-элемент в «header.html». Файл вызывается так же, как изображения и JS-файлы.
 
      " type="text/css">    
Привет Django
 
   
И снова не забудьте о в верхней части страницы. Если не добавить эту строку, то будет ошибка.
Если класс custom добавить к container вы увидите изменения:

Ошибки, связанные с загрузкой статических файлов 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 
Как собрать проект на Webpack
Webpack — это сборщик модулей для JavaScript-приложений. Он позволяет разделять код на модули, которые затем могут быть импортированы и использованы в других частях приложения. Это полезно для структурирования кода, оптимизации производительности и поддержки сторонних библиотек.
Подробнее о Webpack мы писали в другой статье, а пока давайте создадим простой проект, который складывает два числа, а заодно научимся пользоваться Webpack.
Подготовка
Для начала установите Node.js с официального сайта https://nodejs.org, если у вас его ещё нет. Затем создайте новую папку для проекта и перейдите в нее с помощью командной строки или терминала. В нашем случае это папка two_numbers , но у вас может быть любая другая.
mkdir two_numbers cd two_numbers 
Инициализация проекта
Находясь внутри папки, инициализируйте проект с помощью следующей команды:
npm init -y 
Эта команда создаст файл package.json , который является основным файлом для управления зависимостями и настройками проекта на Node.js.
Параметр -y означает, что все вопросы, которые обычно задаются при создании файла package.json , будут пропущены, и будут использованы значения по умолчанию. В результате будет создан файл package.json с минимальными настройками, без дополнительного ввода со стороны пользователя.
Он выглядит примерно так:
< "name": "two_numbers", "version": "1.0.0", "description": "", "main": "index.js", "scripts": < "start": "webpack serve", "build": "webpack" >, "keywords": [], "author": "", "license": "ISC", "devDependencies": < "css-loader": "^6.7.3", "style-loader": "^3.3.2", "webpack": "^5.78.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.13.2" >> 
Установка webpack, webpack-cli и webpack-dev-server
Установите webpack , webpack-cli и webpack-dev-server с помощью следующей команды:
npm install webpack webpack-cli webpack-dev-server --save-dev 
Команда webpack-cli позволит запускать Webpack из терминала.
webpack-dev-server — это удобный сервер разработки с горячей перезагрузкой. Это означает, что при изменении файлов в вашем проекте сервер автоматически пересоберёт сборку и обновит страницу в браузере. Без этого пакета вам придется самостоятельно настраивать сервер разработки и обновлять страницу в браузере после каждого изменения в коде.
О ключе --save-dev мы уже писали в одной из статей журнала.
Установка css-loader и style-loader
Webpack по умолчанию обрабатывает только JavaScript-файлы, поэтому для корректной работы с другими типами файлов, такими как CSS или HTML, необходимы специальные загрузчики и плагины.
css-loader позволяет Webpack обрабатывать и импортировать CSS в JavaScript-файлы. Он интерпретирует @import и url() как import/require() и разрешает их. В результате, после обработки css-loader , ваш CSS будет представлен в виде строки в JavaScript-коде.
style-loader . Поскольку после обработки css-loader ваш CSS превратился в строку JavaScript, style-loader используется для внедрения этих стилей в DOM. style-loader добавляет тег внутри вашего HTML-файла, содержащий все стили, включенные в сборку.
Таким образом, чтобы импортировать CSS в наш проект, нам нужно установить style-loader и css-loader . Для этого выполните следующую команду:
npm install style-loader css-loader --save-dev 
Установка html-webpack-plugin
html-webpack-plugin автоматически генерирует HTML-файл на основе шаблона, вставляет туда ссылки на ваши файлы (например, JavaScript и CSS), и сохраняет его в указанной директории (обычно в папке dist )
npm install html-webpack-plugin --save-dev 
C подготовкой и установкой закончили, теперь переходим к структуре проекта и коду.
Структура проекта
Для удобства откройте папку с проектом прямо в VS Code через меню Файл→Открыть папку (File→Open Folder). В итоге слева будет находиться структура проекта и все файлы, а справа вы будете их редактировать.

В корне проекта создайте пустой файл webpack.config.js и добавьте туда следующий код базовой конфигурации проекта. Обратите внимание на поясняющие комментарии.
const path = require('path'); // Импортируем модуль "path" для работы с путями файлов const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = < entry: './src/index.js', // Точка входа для сборки проекта output: < filename: 'bundle.js', // Имя выходного файла сборки path: path.resolve(__dirname, 'dist'), // Путь для выходного файла сборки >, module: < rules: [ < test: /\.css$/, // Регулярное выражение для обработки файлов с расширением .css use: ['style-loader', 'css-loader'], // Загрузчики, используемые для обработки CSS-файлов >, ], >, plugins: [ new HtmlWebpackPlugin(< template: './src/index.html', >), ], devServer: < static: < directory: path.join(__dirname, 'dist'), // Каталог для статики >, open: true, // Автоматически открывать браузер >, mode: 'development', // Режим сборки >; 
В файле package.json измените поле scripts на следующее:
"scripts": < "start": "webpack serve", "build": "webpack" >, 
Это позволит запускать сервер разработки и сборку проекта с помощью кратких и удобных команд npm start и npm run build , вместо того чтобы вводить полные команды в терминал каждый раз.
Теперь создайте внутри проекта папку src , а в ней пустой файл index.js . В этом файле напишем основной код приложения, которое складывает два числа из текстовых полей.
function addNumbers() < const num1 = parseFloat(document.getElementById("number1").value); const num2 = parseFloat(document.getElementById("number2").value); const result = num1 + num2; document.getElementById("result").innerText = `Result: $`; > document.getElementById("calculate").addEventListener("click", addNumbers); 
Теперь создайте в той же папке файл index.html и добавьте туда этот код:
         Сложить   
В папке src создайте файл styles.css и добавьте следующий код:
body < display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; >input, button, p
Итоговая структура проекта после всех действий будет выглядеть так:

Теперь ваш проект готов к использованию. Для запуска сервера разработки выполните следующую команду в терминале:
npm start 
Webpack автоматически откроет браузер, и вы увидите страницу с текстовыми полями для ввода чисел и кнопкой Add. Также после запуска сервера вы можете перейти по адресу localhost:8082 .
В открывшемся окне ведите два числа и нажмите кнопку Add для выполнения сложения. Результат будет отображаться под кнопкой. Готово!

Так зачем использовать Webpack
Webpack позволяет легко структурировать код, разделяя его на модули и импортируя их при необходимости. Если в дальнейшем вы решите добавить сторонние библиотеки или фреймворки, то Webpack поможет вам интегрировать их в ваш проект, минимизировать размер файла сборки и улучшить производительность. А с использованием webpack-dev-server вы получаете автоматическую перезагрузку страницы при изменении исходного кода, что ускоряет процесс разработки.
В этом примере мы использовали только базовые возможности Webpack, но с его помощью вы можете сделать гораздо больше, например, обрабатывать и минифицировать CSS, использовать различные загрузчики (loaders) и плагины для транспиляции и оптимизации кода.
Если хотите лучше разобраться в Webpack, записывайтесь на курс — там узнаете все подробности и научитесь использовать Webpack как профи.
Дальше

Что такое Webpack
Как копировать статические файлы с помощью Webpack

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Dev Mode в Figma. Быстрый обзор бета-версии
Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.
Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.
Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.

10 августа 2023


Горячие клавиши Figma для быстрой работы
Figma — это инструмент для создания дизайна, который очень любят веб-разработчики. Одна из причин, почему Figma так популярна — это горячие клавиши. Они помогают работать быстрее и проще. Давайте рассмотрим самые важные из них.
Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)
Эта комбинация клавиш позволяет вам быстро убрать все лишнее с экрана, чтобы вы могли сосредоточиться на своем дизайне. Или, наоборот, показать все элементы интерфейса, если вам нужно что-то найти или изменить.
Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)
Эта комбинация клавиш открывает поиск по меню. Это очень удобно, когда вы знаете, что вам нужно, но не помните, где это находится. Просто начните вводить то, что вы ищете, и Figma покажет вам нужный пункт меню. Если пользуетесь Spotlight или PowerToys, вам будет очень удобно.
А если не пользуетесь — попробуйте.

7 августа 2023


Старт в Figma для верстальщика
Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.
Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

2 августа 2023


Инструменты для работы со шрифтами
Работа со шрифтами и типографикой — важная часть вёрстки текста. Новые шрифты появляются очень часто, за этим сложно уследить. Существует множество инструментов, которые помогают находить нужные шрифты, управлять ими и улучшать внешний вид текста.
Рассмотрим несколько инструментов для работы со шрифтами, которые будут полезны при создании сайта.

29 июня 2023


10 горячих клавиш VS Code, которые ускорят вашу работу
Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.

13 июня 2023


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

11 июня 2023


10 полезных плагинов VS Code для вёрстки
Visual Studio Code — один из самых популярных редакторов кода. Его удобно использовать, и у него есть множество полезных расширений, с помощью которых легко оптимизировать работу. Такие плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы.
Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.

9 июня 2023


17 полезных плагинов JavaScript в VS Code
Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.
Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.

6 июня 2023


Подборка микроанимаций для фронтенда с CodePen в 2023
⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.
Например, нажатие на кнопку лайка в социальных сетях или изменение фона, индикатор загрузки, и многое другое. Микроанимация используется везде, где есть интерфейс пользователя, а именно, веб-сайтах, мобильных приложениях, играх. На примерах с CodePen покажем, какими они бывают.

12 апреля 2023


Webpack: инструкция по применению
Webpack — это инструмент для сборки JavaScript-приложений, который также применяется для обработки статических файлов — изображений, шрифтов и других ресурсов. У Webpack множество функций, которые легко расширяются с помощью добавления плагинов.
Копирование статических файлов в каталог сборки — одна из таких функций. Выполнить эту задачу можно несколькими способами, наиболее простой — использование плагина CopyWebpackPlugin . Рассмотрим подробнее, как это делать.
CopyWebpackPlugin позволяет скопировать файлы из одного каталога в другой, сохраняя их иерархию. Для начала установите CopyWebpackPlugin в свой проект:
npm install copy-webpack-plugin --save-dev 
После установки настройте конфигурацию Webpack, добавив новый экземпляр плагина в секцию plugins конфига. Пример:
const CopyWebpackPlugin = require('copy-webpack-plugin'); const path = require('path'); module.exports = < // ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: path.resolve(__dirname, 'src/assets'), to: path.resolve(__dirname, 'dist/assets') >] >) ] >; 
В плагине содержится массив объектов patterns . Каждый объект patterns указывает на исходный файл или каталог назначения, куда копировать файлы. В примере указано, что нужно скопировать все файлы из каталога src/assets в dist/assets во время сборки.
Теперь все статические файлы будут скопированы в каталог сборки при запуске команды npm run build или той, которую вы используете для запуска сборки.
�� Научитесь работать с webpack и сократите время на разработку, сборку и тестирование проекта.
Копирование нескольких файлов
Для копирования нескольких файлов с помощью плагина CopyWebpackPlugin добавляем каждый каталог или файл в отдельный объект-шаблон в массиве patterns .
Каждый объект-шаблон содержит свойство from , оно указывает путь к файлу или каталогу для копирования. Свойство to — это путь, по которому нужно скопировать файлы или каталоги.
const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = < //ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: 'src/images', to: 'dist/images' >, < from: 'src/index.html', to: 'dist' >, ], >), ], >; 
В примере первый объект-шаблон копирует каталог images из src в dist/images , а второй — копирует файл index.html из src в dist . Добавляйте столько объектов-шаблонов, сколько нужно для копирования всех необходимых файлов и каталогов.
Для более детальной настройки копирования файлов существуют другие опции, доступные в CopyWebpackPlugin , их подробное описание можно прочитать в документации.
Другие способы
Кроме CopyWebpackPlugin , существуют и другие плагины и загрузчики, их также часто называют лоадерами, которые позволяют копировать статические файлы в каталог сборки.
Лоадер file-loader позволяет копировать статические файлы в указанную папку при сборке проекта. Чтобы использовать file-loader , установите его с помощью npm :
npm install file-loader --save-dev 
Затем добавьте его в конфигурационный файл webpack.config.js :
module.exports = < // . ваша конфигурация webpack . module: < rules: [ < test: /\.(png|jpe?g|gif)$/i, use: [ < loader: 'file-loader', options: < name: '[name].[ext]', outputPath: 'images/', >, >, ], >, ], >, >; 
В этом примере file-loader используется для копирования файлов изображений в каталог images внутри каталога сборки.
Лоадер url-loader работает аналогично file-loader , но может преобразовывать маленькие файлы в Data URL, вместо копирования их в каталог сборки. Это может быть полезно для уменьшения количества запросов к серверу.
Для использования url-loader необходимо его установить:
npm install url-loader --save-dev 
Затем добавить в конфигурационный файл webpack.config.js :
module.exports = < module: < rules: [ < test: /\.(png|jpg|gif)$/i, use: [ < loader: 'url-loader', options: < limit: 8192, >, >, ], >, ], >, >; 
Поместите файлы, которые хотите скопировать, в соответствующий каталог в вашем проекте, например, в папку src/images . Если размер файла меньше 8 кБ, он будет встроен в виде Data URL. При сборке проекта все файлы будут обработаны и скопированы.
Описанные лоадеры ещё используются в разработке, но рекомендуем ознакомиться с новой версией Webpack и её обновлениями.

30 марта 2023

Читать:
Как стереть часть рисунка в ворде