Абсолютні і відносні посилання. Структура папок і елементів Посилання на CSS-файл всередині на файл цього ж типу

У цьому пості я наведу приклад організації стилів на типовому проекті.

Невелике вступ, спробую пояснити актуальність проблеми і навіщо це потрібно.
Розглянемо таку ситуацію. Розробнику ставлять завдання, реалізувати черговий функціонал на сайті. Це допустимо включає додавання нових розділів, блоків, елементів. Розробники часто не довіряють чужому коду, і коли доходять до верстки, знаходять 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.

Продовжуємо тему минулого уроку, де ми трохи спробували зрозуміти, що ж таке 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

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

Всім привіт, друзі. Сьогодні відповім на найпростіше запитання: "як підключити таблицю стилів css до html-сторінці?"
Відео-версія статті:

Для цього в вміст тега потрібно вставити наступний рядок:

Пояснюю: Тег link дозволяє підключати до сторінці зовнішні файли. Атрибут rel = "stylesheet" дає інструкції, що підключається файлом є саме таблиця стилів. Href - це шлях до файлу стилів. Як правило його значення "style.css" якщо таблиця стилів називається саме так і лежить в одній папці з html-сторінкою, для якої вона підключається.

Як прописати шлях до файлу

Відповідно, якщо css-файл лежить десь в іншому місці, то шлях до нього прописується по іншому. Приклади, щоб вам було зрозуміліше:
Файл table.css лежить в папці styles, яка знаходиться в тій же папці, що і html-сторінка: href = "styles / table.css"
Файл fonts.css лежить в папці styles, яка знаходиться в папці css, а та в свою чергу знаходиться там, де і html-сторінка: href = "styles / css / fonts.css"

Дві точки дозволяють у вказівці шляху повернутися назад від початкового місця (від місця, де знаходиться наша html-сторінка). Так що дотягнутися можна так:
Href = "../style.css" - файл лежить на один рівень вище html-файлу.
Href = "../../style.css" - на два рівні вище.
Href = "../../../css/style.css" - на три рівні вище + сам файл стилів лежить ще й в папці css.
Сподіваюся, цих простих прикладів вам зрозуміло, щоб повністю розібратися з тим, як поставити шлях до файлу.

застарілий атрибут

Раніше при підключенні таблиці стилів потрібно було також вказувати в тезі link атрибут type = "text / 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 є найпотужнішим інструментом, яким повинен опанувати кожен веб-майстер! Для поліпшення засвоєння матеріалу я вирішив в кінці кожного уроку додавати навчальне відео + тест на закріплення отриманої інформації.