Где хранить css файлы
Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.
Необходимые знания: | Базовая компьютерная грамотность, Базовое программное обеспечение, базовые знания работа с файлами, и базовые знания HTML (статья Введение в HTML), и знание о том Как работает CSS |
---|---|
Задача: | Подробно узнать основные синтаксические структуры CSS. |
Небольшое отступление о регистре и пробелах
Вы заметите, что в этой статье, мы просим вас называть папки и файлы полностью в нижнем регистре без пробелов. Это потому что:
- Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в test-site/MyImage.jpg , а затем в другом файле вы пытаетесь вызвать изображение как test-site/myimage.jpg , это может не сработать.
- Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: my-file.html лучше чем my_file.html .
Говоря простым языком, вы должны использовать дефис для имён файлов. Поисковая система Google рассматривает дефис как разделитель слов, но не относится к подчёркиванию таким образом. По этим причинам, лучше всего приобрести привычку писать названия ваших папок и файлов в нижнем регистре без пробелов, разделяя слова дефисами, по крайней мере, пока вы не поймёте, что вы делаете. Так в будущем вы столкнётесь с меньшим количеством проблем.
Внутренняя таблица стилей
Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента , содержащейся внутри HTML .
Таким образом, HTML будет выглядеть вот так:
Это может быть полезно в некоторых обстоятельствах (возможно, вы работаете с системой управления контентом, где вы не можете изменить CSS-файлы непосредственно), но это менее эффективно, чем внешние таблицы стилей: CSS будет необходимо прописывать отдельно для каждой страницы и изменять, если требуются изменения.
Файловые пути
Для того, чтобы файлы общались друг с другом, вы должны указать файлам путь друг к другу - обычно один файл знает, где находится другой. Чтобы продемонстрировать это, мы вставим немного HTML в наш файл index.html и научим его отображать изображение, которое вы выбрали в статье "Каким должен быть ваш веб-сайт?"
- Скопируйте изображение, которое вы выбрали ранее, в папку images .
- Откройте ваш файл index.html и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит - позже в этом руководстве мы рассмотрим структуры более подробно.
Некоторые общие правила о путях к файлам:
- Для ссылки на целевой файл в той же директории, что и вызывающий HTML файл, просто используйте имя файла, например, my-image.jpg .
- Для ссылки на файл в поддиректории, напишите имя директории в начале пути, плюс косую черту (forwardslash, слеш), например: subdirectory/my-image.jpg .
- Для ссылки на целевой файл в директории выше вызывающего HTML файла, напишите две точки. Например, если index.html находится внутри подпапки test-site , а my-image.jpg - внутри test-site , вы можете обратиться к my-image.jpg из index.html , используя ../my-image.jpg .
- Вы можете комбинировать их так, как вам нравится, например ../subdirectory/another-subdirectory/my-image.jpg .
На данный момент это все, что вам нужно знать
Примечание: Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например C:\windows . Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы всё равно должны использовать обычные слеши в вашем коде.
Селекторы
Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве Начало работы с CSS. Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.
Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:
Примечание: вы узнаете больше о селекторах в руководстве CSS-селекторы в следующем модуле.
Игра с CSS в этой статье
Существует много возможностей, чтобы поиграть с CSS в этой статье. Для этого мы рекомендуем создать новый каталог / папку на вашем компьютере и внутри него создать копии следующих двух файлов:
Затем, когда вы столкнётесь с CSS и захотите поэкспериментировать со стилями, измените содержимое HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.
Если вы не используете систему, в которой вы можете легко создавать файлы, вы можете вместо этого использовать интерактивный редактор ниже чтобы экспериментировать.
Читайте дальше и получайте удовольствие!
Внешняя таблица стилей
В статье Начало работы с CSS мы связывали внешнюю таблицу стилей с нашей страницей. Это самый распространённый и полезный способ крепления CSS к документу, так вы можете привязать CSS сразу к нескольким страницам, что позволяет стилизовать их всё с той же таблицей стилей. В большинстве случаев различные страницы сайта будут выглядеть почти так же, поэтому вы можете использовать один и тот же набор правил для основного вида.
Внешняя таблица стилей - это когда у вас есть CSS отдельным файлом с расширением .css , и ссылка на него из HTML-элемента :
Файл CSS может выглядеть следующим образом:
В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:
@правила
До сих пор не сталкивались мы с правилами @rules (произносится как эт-рулс, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил @rules простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать @import :
Чаще других встречается @rules под названием @media : оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).
Ниже у нас CSS-файл, в котором значение заднего фона элемента равно pink . Однако после мы добавили правило @media , которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.
Вы столкнётесь и с другими правилами @rules в продолжение следующих уроков.
Добавьте правило, которое изменяет стиль элемента, основываясь на ширине окна. Измените ширину окна, чтобы увидеть результат.
Спецификация
Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента p — он будет синим; также я задал класс, который сделает элемент красным:
А теперь допустим, что в нашем HTML-коде у нас есть абзац p с классом special . Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?
В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p , но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.
А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.
Попрактикуйтесь сами — добавьте два правила для параграфа p < . >в вашу таблицу стилей. Затем добавьте класс к одному элементу p и попробуйте применить к нему какой-нибудь стиль.
Понимание каскадов, или правил, улучшается с практикой. В статье Каскад и наследование я хорошенько объясню, как определить уровень спецификации. А пока что запомните, что иногда CSS не применяется так, как вы того хотели бы, так как у чего-то в таблице стилей больший уровень спецификации.
Какую структуру должен иметь ваш веб-сайт?
Далее, давайте взглянем на то, какую структуру должен иметь наш тестовый сайт. Наиболее распространённые вещи, присутствующие в любом проекте сайта, которые мы создаём: индексный файл HTML и папки, содержащие изображения, файлы стилей и файлы скриптов. Давайте создадим их сейчас:
- index.html : Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем index.html и сохраните его прямо внутри вашей папки test-site .
- Папка images : Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем images внутри вашей папки test-site .
- Папка styles : Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем styles внутри вашей папки test-site .
- Папка scripts : Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем scripts внутри вашей папки test-site .
Что должно быть сделано?
К настоящему моменту структура вашей папки должна выглядеть примерно так:
Функции
Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию calc() . Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:
В результате получим это:
Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!
В следующем примере будут различные значения для свойства rotate() .
Результат этого кода будет:
Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл:
- transform
- background-image , в частности со значениями градиента
- color (en-US),в частности со значениями rgb/rgba/hsl/hsla
Стенография
Некоторые свойства вроде font , background , padding , border и margin называются стенографическими свойствами, — они позволяют установить несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.
Вопрос, стоит ли хранить javascript и css ресурсы веб-страницы в LocalStorage браузера или позволить ему самому отрабатывать кэширование, не имеет однозначного ответа. Есть плюсы и минусы. С моей точки зрения, основной плюс — скорость загрузки — перевешивает все остальное. Это очень хорошо чувствуют пользователи EDGE и 3G.
Предлагаемая схема хранения ресурсов в LocalStorage достаточно проста.
Во-первых, реализовано отслеживание изменения файлов, для этого используется время последнего изменения файла как его «версия». При его изменении ресурс перегружается в локальное хранилище.
Ресурс линкуется следующим образом:
Функции requireResource передается название ресурса (под этим именем он пойдет в локальное хранилище), тип, версия и url ресурса. Логика кода ls.js простая — если ресурс есть в хранилище и версия его совпадает с указанной — инлайнится он. Если нет — грузится заново, помещается в хранилище и инлайнится в HTML код.
Есть выбор как инлайнить код — или через document.write(); или через вставку элемента в DOM. В первом случае мы получаем копию того, как если бы ресурс подцеплялся самой страницей. Второй, в свою очередь, логически более правильный, но есть минусы — js код не исполняется, например. Нужно в ручном режиме проводить инициализацию — что несложно, но нужно об этом помнить.
Еще один момент — очередность загрузки ресурсов. Если нужен определенный порядок, это нужно предусмотреть — или компоновкой ресурсов в этом порядке в один файл, или синхронной загрузкой.
В данном примере используется 2 типа ресурсов — js и css. В принципе, можно расширить на всё, что можно сериализовать в локальное хранилище браузера.
Результат очевиден — мои css и js файлы больше в Средствах разработки браузера и Fiddler'e не появляются (если не происходит их обновление на сервере). Сайт открывается ощутимо быстрей. Процесс js и css дебага на продакшне затрудняется не сильно. А на девелопмент машине все js и css файлы грузятся по отдельности для удобства работы.
Нужно учитывать, что средства замера скорости и производительности сайта типа Google Pagespeed не понимают такого самодельного кэширования и не покажут прироста производительности.
main.css
Плюсы:
- единый файл для стилей
- общие свойства можно объявлять сразу нескольким тегам, и быстро исправлять
- компоненты проще переносить из проекта в проект (нет излишних стилей)
Минусы:
- с ростом проекта его труднее читать и редактировать
- все равно иногда нужно добавить стиль в компонент, но это усложняет правку стилей еще больше
css в компонентах
Плюсы:
- хорошая инкапсуляция стилей
- не нужны методологии (БЭМ. )
- простота переноса из проекта в проект
Минусы:
- избыточность. Простые свойства могут повторяться почти в каждом компоненте
- сложность правки общих свойств
Как вариант, можно очень общие теги (body, a, p . ) описывать в main.css, все остальное - в компонентах.
Как делаете Вы и почему? Есть ли лучшие практики в оформлении при работе с компонентами?
В Vue приложении используем препроцессор (scss). Кроме того используем внешние пакеты для вертикального ритма и сетки.
Хочется хранить стили в однофайловых компонентах, при этом имея возможность определить глобально часть sass-переменных, кое-какие миксины и функции. Также нужно как-то подключить миксины сетки и ритма, возможно подключать стили от сторонних пакетов.
Вариант импортировать scss-файл с определениями в каждом компоненте сразу откинули, ибо люди мы ленивые.
Что делаем:
Подключаем в точке входа (main.js) основной стилевой файл:
В нем подключаем всякое-разное-глобальное-базовое:
Далаем два файла: env-development.scss и env-production.scss
Переменная $NODE_ENV нам нужно. чтобы управлять стилями в зависимости от окружения.
Дальше в cfg-vars.scss подключаем/пишем все необходимые глобальные конфиги
Почти всё готово. Осталось только автоматически подключить эти конфиги к сборке.
Идём в vue.config.js и добавляем секцию css:
Теперь мы спокойно пишем стили компонентов на scss прямо vue-файлах, и оставляем возможность какие-то стили писать в отдельных файлах.
floydback, в основном использую разные миксины для визуализации чего-либо при верстке, чего не должно быть в конечном продукте, или добавляю какие служебные классы через if.
Таким образом, даже если я забуду удалить отладочный код из исходников, он точно не попадет в сборку.
Сергей delphinpro, Сергей, добрый день!
Скажите, существует ли способ задать где-то в одном месте $переменную и использовать её внутри scoped стилей компонентов?
немного поменялся файл конфигурации
теперь вместо data prependData
Vue-way - хранить стили в .vue , для того оно и придумано. Компонентный подход улучшает восприятие кода.
css-файл можно оставить только если, например, он уже остался от верстальщика и лень раскидывать по компонентам.
А общие стили, такие как
вы где храните, в App.vue?
1. Используем препроцессор, любой: sass, less, stylus
2. Общие стили(все что используется или может использоваться часто) в общее.
Один файл точка входа, в него импортируется другие файлы с общими стилями.
Файлы с общими стилями, максимально разбиты, по назначению, разделам. Зависит от проекта. На огромных проэктах, можно дополнительно по подпапкам разбивать. Главное что бы удобно было в этом ориентироваться.
Все общие переменные обязательно в отдельный файл*
Все общие миксины обязательно в отдельный файл*
** Дает возможность быстро изменить препроцессор, если понадобится. У всех разные синтаксис переменных и миксинов
Если миксин статичный, без параметров, лучше заменить его на класс, например .some-mixin-class
И использовать его так:
.some-class @extend .some-mixin-class;
.
>
При этом .some-mixin-class нельзя использовать как обычный класс напримую, только экстендить в других классах
@extend .some-mixin-class - Работает одинаково во всех препроцессорах и хорошо читается
Все общие стили только по БЕМ
3. Специфичные стили для компонента пишем в файле компонента.
Или scoped или БЕМ - как удобней
Если таких стилей очень много, то выносим в отдельный файл и импортируем в компаненте
В эти стили по необходимости(если нужно использовать) и импортируем файл с общими переменными или миксинами
Самое сложное, научится определять, что общее а что специфичное, это не объяснить. Приходит с опытом и постепенно
Размер: 18,4 Мб.
Длительность: 14 мин. 45 сек.
Сегодня у нас на повестке дня вопрос хранения файлов, которые есть у вас на сайте.
Я хочу рассказать вам о некоторых из способов, которые можно использовать для этих целей.
Вообще почему этот вопрос актуален? Ведь, казалось бы - храни себе все необходимые файлы на сервере хостера - и все будет ок.
Это так, но только с рядом оговорок:
1. Как правило, хостеры не выдают изначально большого пространства под ваши проекты.
2. Вы можете перейти на более дорогой тарифный план, и вам прибавят места, которые вы можете использовать.
Но здесь тоже есть свой минус. Скажем, ваш сайт не требователен именно к вычислительным ресурсам хостинга, т.е. его посещает не такая уж и толпа людей.
Поэтому выходит так, что вы получаете дополнительное место под файлы, однако ежемесячно переплачиваете за потенциально доступные вам вычислительные ресурсы, которые вам точно не пригодятся.
3. И, наконец, не все хостеры адекватно относятся к генерации вами достаточно большого объема трафика. Поэтому, если ваши файлы будут скачивать слишком уж активно, вас могут попросту отключить, т.к. вы создаете чрезмерную нагрузку на сервер.
Учитывая все эти моменты, стоит серьезно задуматься о том, где хранить ваши файлы, особенно, если их много, и скачивают их часто.
Краткий обзор урока (все подробности смотрите в видео):
Начнем с, наверное, самого известного решения, которое, увы, уже почти ушло в прошлое.
Это сервис Яндекс.Файлы, т.е. знаменитый Народ. Я сам пользуюсь этим сервисом до сих пор, хотя сейчас он как таковой уже упразднен и Яндекс предлагает использовать вместо него свой более новый сервис Яндекс.Диск.
Те файлы, которые были закачаны еще на Народ, успешно там хранятся, однако, я подозреваю, что Яндекс все настойчивее будет переводить всех именно на Яндекс.Диск, т.к. им очень накладно хранить огромные объемы информации бесплатно.
Вместо безлимитного народа на Яндекс.Диске вам выделяется не очень-то много места под файлы (10 Гб. по умолчанию).
При этом у вас на компьютере будет папка, с которой будет совершаться синхронизация, т.е. то, что вы положите в эту папку, будет закачано на Яндекс.Диск, и наоборот - то, что вы закачаете через веб-интерфейс на Яндекс.Диск, будет сохранено на ваш компьютер.
Вы можете создавать свою структуру папок и файлов так, как вам будет удобно. Также есть возможность делать файлы личными и публичными. Личные доступны только вам, публичные же могут скачать любые люди, которые имеют ссылку на этот файл.
Несомненное достоинство сервиса - его бесплатность, поэтому для хранения относительно небольших объемов информации он подходит очень хорошо. Сейчас я использую его для хранения части архивов с видеоуроками, которые публикую на сайте.
Однако, наряду с достоинствами, у Яндекс.Файлов есть и свои недостатки. Я бы назвал два основных:
1. Нет возможности использовать этот сервис как классический хостинг.
Что я имею в виду? Вот смотрите, когда вы закачали файл (скажем, какое-то изображение) себе на хостинг, то в коде страницы вы указываете адрес до этого изображения в атрибуте src, в результате чего изображение выводится на экран в браузере.
Здесь это невозможно. Все, что вы можете - это дать другим людям возможность скачать это изображение - использовать его как иллюстрацию в статье не получится.
2. Второй недостаток - это имиджевая составляющая.
Понятно, что если вы раздаете со своего сайта какие-то файлы и уроки бесплатно, то Яндекс.Диск - прекрасное решение. Но если вы что-то продаете, например, обучающие видеокурсы и т.п. вещи, которые много весят, то было бы не очень профессионально давать человеку ссылки на скачивание, ведущие на Яндекс.Диск.
Ваш покупатель, скорее всего, ожидает получить ссылки в вашем домене, либо ссылки, которые выдают факт того, что файлы хранятся на каком-то специальном сервере. Яндекс.Диск выглядел бы здесь не очень уместно.
Какие альтернативы есть у этого сервиса?
Сразу скажу, что здесь не будет подробного обзора сервисов, я расскажу еще о двух решениях, которыми пользовался и продолжаю пользоваться сейчас.
Amazon Simple Storage Service (Amazon S3) — онлайновая веб-служба, предлагаемая Amazon Web Services, предоставляющая возможность для хранения и получения любого объёма данных, в любое время из любой точки сети, так называемый файловый хостинг.
Я пользуюсь этим сервисом уже более полутора лет, хотя в настоящее время использую его в качестве резерва на случай возникновения проблем с другим сервисом, о котором я расскажу чуть позже.
Зарегистрировавшись в этом сервисе, вы получаете возможность создавать свою структуру папок и хранить в них неограниченное количество файлов. Идея похожа на Яндекс.Диск.
Точно так же, как и там, вы можете разрешать или запрещать доступ к файлам, однако возможностей здесь больше.
Из минусов для русскоговорящего пользователя я бы отметил то, что интерфейс полностью английский, и изменить язык возможности нет.
Второй момент - это то, что для пользования им вам понадобится завести долларовую карточку, с которой Amazon будет ежемесячно списывать плату за пользование услугами Amazon S3.
И, наконец, не самые низкие цены. Поскольку сервис рассчитан, в первую очередь, на страны Запада, стоимость их услуг находится на соответствующем уровне.
Конечно, хранить там небольшие объемы информации, которые скачиваются не очень часто, вполне можно, однако не очень рекомендовал бы вам хранить там много больших файлов, которые скачиваются часто - в этом случае ежемесячный чек может быть вполне ощутимым.
Я пользуюсь им уже более полугода и очень доволен как качеством самих услуг, так и уровнем технической поддержки.
Они предлагают очень широкий спектр услуг, однако я на данный момент использую только "Облачное хранилище".
Принцип использования все тот же. Вы создаете нужные вам папки (здесь они называются контейнерами) и помещаете в них файлы, которые должны быть доступны для скачивания.
Вы можете загружать новые файлы как через веб-интерфейс, так и по протоколу FTP, используя одну из специальных программ, которые будут вам предложены.
К плюсам данного решения можно отнести следующие моменты:
1. Все на русском языке, удобно и понятно;
2. Привычные способы оплаты (от электронных денег и до банковских карт);
3. Отличная техническая поддержка (реагирует в течение 15-20 минут);
4. Приятные цены.
Т.е. если в Яндекс.Диске нет возможности добавить изображение и вывести его на экран браузера, то здесь у вас такая возможность есть.
Когда это может пригодиться?
Это может быть актуально, если вы ожидаете приток на ваш сайт большого количества людей одновременно.
В этом случае вы можете разместить все медиа-файлы (изображения, анимацию, видео и др.) на серверах Selectel, а в коде веб-страницы просто указывать пути до этих файлов.
Так вы можете разгрузить ресурсы своего хостинга и предотвратить его падение при большом наплыве посетителей.
Разумеется, этот подход отлично работает, если нет других ограничивающих факторов, скажем, ограничения по количеству одновременных подключений к базе данных. Т.е. наиболее актуален такой подход при работе с высоконагруженными страницами со статической информацией.
Ну что ж, вот в общем-то все, что я хотел вам рассказать по данному вопросу, по данным сервисам. Я надеюсь, что этот небольшой обзор был для вас полезен, если перед вами уже встал вопрос о хранении файлов сайта.
Если же пока он не актуален, это может произойти уже в самом ближайшем будущем, и на этот случай у вас уже есть полезная информация.
На этом я заканчиваю, спасибо вам за внимание!
Если краткий текстовый обзор вам не до конца понятен, то изучите полную версию урока в видеоформате на этой странице выше.
С уважением, Дмитрий Науменко.
P.S. Занимаетесь веб-разработкой? Присмотритесь к премиум-урокам по различным аспектам сайтостроения, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить веб-технологии: начиная с HTML и CSS и заканчивая JavaScript, PHP и SQL.
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге загрузите их на сервер. В статье Работа с файлами обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта.
Встроенные стили
Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте style :
Пожалуйста, не делайте этого! Это очень плохо для технического обслуживания (вам, возможно, придётся обновить одну и ту же информацию несколько раз в одном документе), а также смешивает ваши презентационные данные CSS с структурной информацией HTML, что делает код трудным для чтения и понимания. Хранение различных типов кода отделено делает работу гораздо более лёгкой для всех, кто работает над кодом.
Есть несколько мест, где встроенные стили являются более распространёнными или даже желательными. Вам, возможно, придётся прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.
Свойства и значения
Если говорить в общем, CSS строится на двух его составляющих:
Свойства Определяют, какую характеристику вы желаете изменить (например, font-size , width , background-color ). Значения Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.
На изображении внизу выделены свойство и его значение. Здесь свойство — color , а его значение — blue .
Свойство вкупе со значением называется CSS-объявлением. CSS-объявления помещаются внутри блока объявлений CSS. Ниже показан наш CSS-код с выделенным блоком объявлений.
Наконец блок объявлений воссоединяется с селекторами, образуя CSS-правила. Наше изображение содержит два правила — одно для селектора h1 , другое для селектора p . Правило для h1 выделено.
Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием ( : ).
Попробуйте подобрать нужные значения к следующим свойствам, а свойства добавить в ваш код:
Важно: Если свойство или значение не определено, то объявление считается недействительным — и будет попросту проигнорировано.
Важно: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, color надо всегда писать color ; британский вариант colour не будет работать.
Применение CSS к вашему HTML
Первое, что мы рассмотрим, это три метода применения CSS к документу.
Где ваш веб-сайт должен располагаться на вашем компьютере?
Когда вы работаете на веб-сайте локально на вашем компьютере, вы должны держать все связанные файлы в одной папке, которая отражает файловую структуру опубликованного веб-сайта на сервере. Эта папка может располагаться где угодно, но вы должны положить её туда, где вы сможете легко её найти, может быть, на ваш рабочий стол, в домашнюю папку или в корень вашего жёсткого диска.
- Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем web-projects (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.
- Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её test-site (или как-то более творчески).
Читайте также: