გაკვეთილის ამ ნაწილში ჩვენ გავეცნობთ ახალ ტერმინებს თქვენთვის, რომლებიც გამოიყენება საქაღალდეებისა და HTML ელემენტების აღწერისას.
შენიშვნა: საქაღალდეს ხშირად უწოდებენ კატალოგს ან დირექტორიას.
საიტის სტრუქტურა
არ შეინახოთ ყველა ფაილი ერთ საქაღალდეში. მცირე საიტების მართვაც კი ბევრად უფრო ადვილია, თუ HTML დოკუმენტებს, სურათებსა და სხვა რესურსებს სხვადასხვა საქაღალდეში იშლება, ამით იქმნება სპეციფიკური სტრუქტურა სხვადასხვა ფაილების ადგილმდებარეობისთვის. ფაილების სტრუქტურირებით, როგორც გსურთ, შეგიძლიათ აირჩიოთ ფაილების ორგანიზაციის საკმაოდ მოქნილი სისტემა, იმის გათვალისწინებით, რომ საიტი შეიძლება გაიზარდოს, ფაილური სისტემა დარჩება გასაგები და გასაგები. დირექტორიების სტრუქტურა (იერარქია), რომელშიც სხვადასხვა ფაილია განთავსებული, ჩვეულებრივ ხედვად გამოიყურება. მაგალითისთვის განვიხილოთ შემდეგი სურათი.
როგორც ხედავთ, სტრუქტურა მხოლოდ დიაგრამაა, რომელიც აჩვენებს ზოგიერთ დირექტორიაში სხვათა ბუდობას. მაგალითში, ჩვენ მხოლოდ სამი დირექტორია ვიყენეთ, მაგრამ ეს საკმარისი იქნება ყველა საჭირო ინფორმაციის აღსაწერად. დირექტორიები ხშირად აღწერილია მემკვიდრეობითი (ოჯახური) ურთიერთობების თვალსაზრისით. ჩვენ გვაქვს საქაღალდე სახელწოდებით "ბანანი", რომელიც მდებარეობს "ხილის" საქაღალდის შიგნით. ხილის საქაღალდე არის ბანანის საქაღალდის მშობელი, ხოლო ბანანის საქაღალდე არის ხილის საქაღალდის ბავშვი (ბავშვი). ასევე გვაქვს "Kiwi" საქაღალდე, რომელიც ასევე არის "ხილის" კატალოგის ბავშვი.
იმისათვის, რომ უკეთ გახსოვდეთ, ჩვენ აღწერს ტერმინებს ცალკე:
- ბავშვთა დირექტორია არის საქაღალდე, რომლის ზემოთ არის მშობლის დირექტორია იერარქიულ ხეში.
- მშობელთა დირექტორია არის საქაღალდე, რომელიც შეიცავს სხვა კატალოგს.
- ასევე არსებობს ისეთი რამ, როგორიცაა "ძირეული დირექტორია" - ეს არის მთავარი (მთავარი) საქაღალდე, რომელშიც ყველა სხვა დირექტორია და ფაილი მდებარეობს.
ელემენტის სტრუქტურა
ელემენტების სტრუქტურა ასევე შეიძლება წარმოდგენილი იყოს როგორც დიაგრამა, რომელიც გვიჩვენებს ზოგიერთი ელემენტის სხვაში ჩასმას. მოდით განვიხილოთ მარტივი მაგალითი:
დიაგრამა, რომელიც აჩვენებს ელემენტების ბუდობას, შეიძლება წარმოდგენილი იყოს შემდეგნაირად:
- ბავშვის ელემენტი არის ელემენტი, რომლის ზემოთ არის მშობელი იერარქიულ ხეში. ბავშვის ელემენტს ასევე უწოდებენ ბავშვი.
- და-ძმის ელემენტი იგივე მშობლის კიდევ ერთი შვილია იმავე ფილიალის დონეზე. ასეთ ელემენტებს ასევე უწოდებენ საექთნომაგალითში ასეთი ელემენტებია და ,
და
Как видите, таблица стилей расположена прямо в html файле. Всё это работает так-же, как и при первом способе подключения, но применяется реже, из за громоздкости, и главное, из-за невозможности воздействия стилей на несколько файлов.
Когда его применять? Я, например использую этот способ при создании дизайна в редакторе файлов.
Гораздо проще отлаживать документ, если и html и css находятся на одной странице и можно быстро подправить и то, и другое.
Третий способ подключения css — внутренние стили позволяет прописывать стили прямо внутри html тега.
Реализуется он при помощи атрибута style , который не стоит путать с одноимённым тегом.
Применяется он тогда, когда нужно оформить только один элемент контента.
Для примера возьмём кусочек текста, и зададим ему стили, заключив в тег span
Всем привет, друзья. Сегодня отвечу на простейший вопрос: “как подключить таблицу стилей 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. Прежде всего, нам необходимо создать файл со стилями, и сохранить его рядом с нашим файлам 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», при его использование.