В какой папке файлы css. Абсолютные и относительные ссылки

Здравствуйте, уважаемые читатели проекта «Анатомия Бизнеса». С вами вебмастер Александр! В прошлой статье мы разобрали, что такое CSS-стили и насколько огромное значение они имеют в WEB-программировании.

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

Не будем откладывать дело в долгий ящик и приступим!

Подключение отдельного CSS-файла!

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

После чего в HTML-файле между тегами разместить следующий код:

Теперь давайте разберем, что все это значит:

Link # в переводе с английского обозначает «ссылка». Таким образом мы показываем браузеру, что далее у нас пойдет речь пойдет о ссылке. rel= # данным атрибутом мы показываем, какое отношение файл CSS имеет к файлу HTML. "stylesheet" # а именно то, что CSS-файл является каскадной таблицей стилей. type="text/css" # тут все просто: это указание того, что файл написан в текстовом формате и имеет расширение.css href="style.css" # это ссылка на файл с CSS-стилями.

Как по мне, это и есть наиболее предпочтительный способ подключения стилей CSS.

Прописываем стили непосредственно в HTML-файле (первый способ)

Следующим способом указывания CSS-стилей является их прописывание непосредственно в HTML-документе. Выглядит это так:

Если мы посмотрим, как будет отображаться данный HTML-документ в браузере, то увидим, что текст между тегами стал красного цвета. И используя атрибут style, мы говорим, что далее у нас идут параметры стиля отображения. Color — это селектор, отвечающий за цвет. Red — это значение данного селектора. Таким способом мы можем выделять определенным типом отображения какие-то отдельные части текста.

Размещение каскадных таблиц стилей внутри HTML (второй способ)

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

Тут пример: отображение CSS-стилей в документе HTML

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

Подключение нескольких CSS-файлов к одному HTML-документу.

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

Мы создаем несколько файлов с CSS-стилями. Пусть их названия будут style-1.css и style-2.css. Размещаем, как и в способе номер один, в одной папке с HTML-файлом.

Тут пример: отображение CSS-стилей в документе HTML

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

Ссылка на CSS-файл внутри на файл этого же типа.

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

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

Во-вторых, в уже подключенный файл вписываем следующий код:

@import url("style-2.css");

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

Тест на закрепление материала:

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

Вариант 1:

Вариант 2 :

Вариант 3:

Вариант 4:

Можем ли мы разместить каскады CSS непосредственно в файле HTML?

В этом посте я приведу пример организации стилей на типичном проекте.

Небольшое вступление, попробую объяснить актуальность проблемы и зачем это нужно.
Рассмотрим такую ситуацию. Разработчику ставят задачу, реализовать очередной функционал на сайте. Это допустим включает добавление новых разделов, блоков, элементов. Разработчики зачастую не доверяют чужому коду, и когда доходят до верстки, находят css-файл с названием типа main.css и дописывают в конец свои новые стили.
Проходит некоторое время, приходит новый разработчик, ему ставят подобную задачу, он если и пытается разобраться в стилях, то видит, что там нет никакой закономерности, и повторяет то же, что делали предыдущие.
Руководство ставит сроки, разрабатывается все новый и новый функционал, проект растет. В итоге css файлы превращаются в мусорку, сайт грузится дольше, появляется больше дефектов и т.д..
Я думаю, многим это знакомо.

Теперь поговорим непосредственно о самой структуризации стилей.
Держать все стили в одном файле неразумно, со временем в нем довольно сложно становится ориентироваться. Плюс на каждой странице используются около 10% правил из этого файла, а весит он не мало.
Гораздо оптимальнее разделять стили по логическим блокам сайта.

Так же к проекту необходимо подключить библиотеку для работы с css (LESS, SASS, SCSS). Нам понадобится работа с переменными, функциями.
Для уменьшения запросов на сервер необходима сборка файлов. Файлы должны склеиваться по специальной конструкции, можно, например, использовать стандартную констукцию css - import . Здесь возможно потребуется помощь разработчика для редактирования исходников выбранной вами библиотеки css.
Плюс, для уменьшения объема, файлы должны приходить клиенту сжатые. dotLess , например, сжимает файлы при значении в web.config.

Каждому логическому блоку будет соответствовать отдельный css файл. Так упрощается поддержка, поиск нужных стилей, да и вообще ориентация в файлах. Все данные файлы являются исходниками, будем содержать их в папке /css/sources/. Остальные css-файлы - сборщики, они линкуются на страницы и собирают импортом исходники.
Допустим рассматриваемый проект это некая соцсеть, исходя из этого можно выделить следующую структуру:

/css
/sources - папка для ресурсов, не выкладывается на сервер
/global-vars - файлы данной папки подключаются в каждый css-файл сборщик по мере необходимости
locals.css - глобальные переменные
functions.css - глобальные функции
/common
reset.css - думаю, объяснять не нужно, понятно, что за стили
utils.css - стили типа.clearfix
/content
base.css - основные стили для контента, а именно - h1-h6, p, буллиты для списков (ul.text, ul.dashed и т.д.), dl, dd, dt, изображения и панели в тексте (обтекание текстом), текстовые колонки и т.д.
panels.css - различные панели
tables.css - стили для таблиц в контенте (th, черезполосица)
/controls
buttons.css - виды кнопок
forms.css - общие стили для input-полей (к примеру, внутренняя тень, фокус (рамка), оформление валидационных сообщений и их скрытие по умолчанию)
tabs.css - табы, вкладки
system-notifications.css - системные сообщения, как правило бывают 3-х типов: success (зеленые), failure (красные) и info (серые, синие)
pager.css - пейджер
banners.css - баннеры на сайте
balloons.css - всякие баллуны, всплывающие подсказки, кастомные тултипы и т.д.
/member
thumb.css - аватарка пользователей
card.css - карточка пользователя (аватарка, имя, краткие данные)
cards-list.css - например, грид с карточками
profile.css - профиль пользователя
/modules - различные модули к сайту
search.css
news-list.css
gifts.css
games.css
/not-auth - для неавторизованных пользователей
login.css - форма авторизации
registration.css - форма регистрации
/auth - для авторизованных пользователей
my-account.css
mail-system.css - inbox сообщения, outbox и т.д.
auth-menu.css - меню навигации в авторизованной зоне
my-profile.css - просмотр своего профайла, редактирование
/layouts
common.css
header.css
top-menu.css
footer.css
overlay.css - например, все всплывающие поверх слои будут с затемнением 0.5
main.css - основной сборщик, линкуется на всех мастер-страницах
/layouts
default.css - основной layout сайта, собирает файлы из папки /layouts, подключается на мастере с основным layout"ом
popup-windows.css - стили для popup’ов, подключается на мастер-страницах для popup окон
not-auth.css - собирает стили из папки /sources/not-auth/
auth.css - собирает стили из папки /sources/auth/
/themes - различные тематики сайта
new-year.css
st-valentine.css
/%section-name% - какой-нибудь новый раздел сайта, «сайт в сайте», характерный наличием своего подменю и т.д.
/css
%section-name%.css
layout.css
/sources
menu.css

Конечно же для каждого проекта своя уникальная структура. Важен принцип разделения файлов.

Дополнительное описание к некоторым файлам:

main.css - собирает файлы из папок:
/sources/global-vars
/sources/common
/sources/content
/sources/controls
/sources/member
/sources/modules

functions.css - содержит глобальные функции, типа:

.rounded-corners(@radius)
{
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
* behavior: url (/libs/progressive-IE.htc ) ;
}

sources/layouts/common.css - глобальные стили по layout"у:

.columns-wrapper
{
display : table;
* zoom: 1 ;
}
.columns-wrapper .column
{
display : table-cell ;
* float : left ;
}

Подключение файлов not-auth.css и auth.css зависит от состояния авторизации пользователя. Например, в asp.net это будет выглядеть так:

< asp:LoginView runat ="server" >
< AnonymousTemplate >
< link href ="/css/not-auth.css" rel ="stylesheet" type ="text/css" />

< LoggedInTemplate >
< link href ="/css/auth.css" rel ="stylesheet" type ="text/css" />

* This source code was highlighted with Source Code Highlighter .

Хочу привести концепцию, которой, я считаю, следует держаться.
Новые страницы должны строиться из компонентов, «кирпичиков» - css классов. Некоторые неверно понимают данную концепцию и строят страницу из классов типа mar-bottom-15 , float-left или pad-20 , что тоже является большой ошибкой.
На всем сайте должен сохраняться единый стиль элементов, т.е. заголовок h1 на одной странице должен выглядеть так же, как и h1 на другой. Заголовки, абзацы, списки, панели, табы, пейджеры, контентные таблицы и т.д. по дизайну должны соблюдать единый стиль.
Перед тем как писать стили для новой страницы сайта следует проанализировать уже существующие css-файлы проекта, возможно там уже есть необходимые стили. Css файл не должен увеличиваться без необходимости.

В заключении скажу, что все описанное выше так же актуально и для JS.

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.

В примере 8.2 показано создание абсолютной ссылки на другой сайт.

Пример 8.2. Использование абсолютных ссылок

Изучение HTML

При указании в качестве ссылки каталога сайта (например, http://сайт/css/), отображается индексный файл . Это файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла. Обычно в качестве индексного файла выступает документ с именем index.html .

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

Ссылки относительно текущего документа

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

1. Файлы располагаются в одной папке (рис. 8.4).

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

2. Файлы размещаются в разных папках (рис. 8.5).

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

Две точки в данном случае означают выйти из текущей папки на уровень выше.

3. Файлы размещаются в разных папках (рис. 8.6).

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

Ссылка

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках (рис. 8.7).

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

Ссылка

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

Ссылка

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как "/Папка/Имя файла" со слэшем вначале. Так, запись Курсы означает, что ссылка ведет в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить индексный файл.

Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

Продолжаем тему прошлого урока, где мы немного попытались понять, что же такое CSS. Прежде всего, нам необходимо создать файл со стилями, и сохранить его рядом с нашим файлам HTML. Но поскольку, в процессе создания сайта файлов, с расширением CSS может быть несколько, то лучше создать, для них отдельную папку. И так открываем ту папку, где хранится наш файл index.html, в открытой папке создаём папку и называем её «CSS», так нам легче будет понять, что здесь хранится. Далее открываем редактор «Notepad++» Файл > Новый, и сохраняем документ под именем «STYLE» с расширением «CSS», то есть должно получиться вот так, style.css. И у нас появляется две папки и один индексный файл.

Рисунок № 1.

Подключаем CSS к HTML.

Для того что бы наш фай style.css смог взаимодействовать с файлом index.html, необходимо меду тегами «HEAD» разместить, код вот такой строки:

Первым что мы видим это тег который переводится как «канал связи», то есть мы говорим браузеру сейчас будет произведено подключение документа, далее атрибут rel (relation- отношение) и stylesheet (стилям). То есть данный канал связи имеет отношения к стилям. Затем «type», то есть тип документа "text/css" и завершающим ответственным этапом здесь является сама ссылка на подключаемый файл, href="css/style.css", где указываем имя созданной папки со стилями и сам стилевой файл.

Рисунок № 2.

Переносим стили с HTML в CSS.

На предыдущих занятиях, мы с вами практически создали стили, на всей нашей странички HTML. Теперь эти готовые стили нам необходимо перенести в файл style.css, и начнём с тега BODY, где у нас указан фон нашего шаблона. В файле CSS пишем следующее body{}, где BODY является селектором тегов, а фигурные скобки это то место где будут размещаться стилевые правила для данного тега. Теперь в файле index.html, где после тега BODY идёт атрибут style, копируем всё то содержимое что идёт между двойных кавычек и вставляем в css. Немного подровняв, должно получиться вот так:

Body{ background-image: url("images/fon.jpg"); background-attachment: fixed; }

В файле index.html удаляем лишний код в теги BODY, что бы он остался вот таким чистым , как будто мы его только создали. Сохраняем изменения в документе и идём к просмотру в браузере. Если всё сделали правильно, то фон нашей страницы должен исчезнуть, произошло это, потому что браузер не может найти путь к изображению. Давайте найдём причину ошибки. Обратите внимание на верхний код, браузер заходит и читает, что фон должен быть изображением, далее url, то есть путь и он видит. Что в папке, в которую он вошёл, должна быть папка images и в ней файл fon.jpg, вроде всё правильно. Но всё дело в том, что браузер вошёл в папку CSS а в этой директории у нас нет никакой папки images и мы должны сказать браузеру начинай поиск с корневой папки, то есть основной. Для этого следует указать браузеру отступ на один шаг назад, вот таким образом (../) две точки, и косой слеш. Если бы наш файл style.css находился ещё глубже на одну папку то пришлось бы указать возврат на две директории, то есть продублировать (../../). В общем, постарайтесь это понять и запомнить, чтобы отличать пути для файлов и документов, как прямые и вложенные. В данном случае файл style.css вложенный и не может иметь прямых путей, для документов.

Body{ background-image: url("../images/fon.jpg"); background-attachment: fixed; }

После исправления этого пути, всё должно заработать и наш фон появится. На этом я предлагаю закончить данный урок, а вы в качестве домашнего задания протестируйте, моменты вложенности папок и пути к файлам. То есть создайте ещё одну папку, например с именем «STYLES» вложите туда папку «CSS» вместе с документом style.css и задайте правильный путь к изображению, что бы всё заработало.

А я жду вас в следующем уроке «Простая вёрстка в HTML + CSS. Урок №11», где мы займёмся переносом всех оставшихся стилей и сравним разницу и преимущество «CSS», при его использование.

В данной статье опишу только самые необходимые папки и файлы шаблона Joomla 1.5, но планирую в дальнейшем (по мере возможности и времени) дополнять статью дополнительными описаниями.

Где находятся файлы шаблонов Joomla 1.5

Место положение папок и файлов шаблона на Вашем хостинге или сервере определить легко. Все шаблоны располагаются в специальной папке /templates . Которая, в свою очередь, расположена в корневой папке Joomla.

Откройте папку /templates . Там по умолчанию находятся папки с шаблонами: beez, ja_purity, rhuk_milkyway, system. К рассмотрению содержимого последней папки system я вернусь в одной из последующих статей. А пока рассмотрим содержимое папки шаблона rhuk_milkyway.

Список папок и файлов шаблона rhuk_milkyway

Папки:
1. css
2. html
3. images

Файлы:
1. favicon.ico
2. index.html
3. index.php
4. params.ini
5. templateDetails.xml
6. template_thumbnail.png

Папка №1. CSS

В папке css содержатся файлы стилей шаблона. Здесь вы можете создавать сколько угодно файлов стилей css (если это необходимо). Конкретно в рассматриваемом шаблоне они называются: black.css, black_bg.css, blue.css, blue_bg.css, green.css, green_bg.css, ieonly.css, orange.css, orange_bg.css, red.css, red_bg.css, template.css, template_rtl.css, white.css, white_bg.css.

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

Папка №2. HTML

Т.к. в Joomla все расширения имеют готовый для вывода html код с необходимой разметкой и собственными стилями, разработчики предусмотрели возможность изменить его не исправляя файлы самих расширений. Это необходимо для того, что бы при обновлении Joomla или ее расширений внесенные изменения не были потеряны. Для этого достаточно скопировать нужный файл в папку html и поправить его так как это необходимо Вам. Я сейчас не буду описывать подробно как это делается правильно, потому что статья не об этом:), но обязательно опишу в одной из следующих статей.

Папка №3. IMAGES

Здесь хранятся изображения шаблона.

Файл №1. favicon.ico

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

Файл №2. index.html

Файл №3. index.php

Файл предназначен для html разметки шаблона. Здесь прописывается: где будут размещаться модули, где будет выводиться содержимое компонентов, какие файлы стилей будут подключены к шаблону, условия вывода модулей. С этим файлом придется работать больше остальных, потому что это не что иное как каркас и основа шаблона.

Файл №4. params.ini

Файл params.ini необходим для сохранения настроек Вашего шаблона. Он обязательно должен присутствовать в шаблоне с правами на запись 777.

Файл №5. templateDetails.xml

Файл templateDetails.xml несет в себе несколько полезных функции: используется для установки шаблона через админку Joomla; Содержит информацию о названии шаблона, авторе, дате создания, версии, лицензии и т.д.; Параметры шаблона.

Файл №6. template_thumbnail.png

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