Σε ποιον φάκελο βρίσκονται τα αρχεία css; Απόλυτοι και σχετικοί σύνδεσμοι. Σύνδεση πολλών αρχείων CSS σε ένα έγγραφο HTML

28.08.2021

Γεια σε όλους, φίλοι. Σήμερα θα απαντήσω στην απλούστερη ερώτηση: "πώς να συνδέσω ένα φύλλο στυλ css σε μια σελίδα html;"
Έκδοση βίντεο του άρθρου:

Για να το κάνετε αυτό, πρέπει να εισαγάγετε την ακόλουθη γραμμή στο περιεχόμενο της ετικέτας:

Επιτρέψτε μου να εξηγήσω: Η ετικέτα συνδέσμου σάς επιτρέπει να συνδέσετε εξωτερικά αρχεία στη σελίδα. Το χαρακτηριστικό 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.
Ελπίζω να καταλαβαίνετε αυτά τα απλά παραδείγματα για να κατανοήσετε πλήρως πώς να ορίσετε τη διαδρομή σε ένα αρχείο.

Καταργήθηκε χαρακτηριστικό

Προηγουμένως, κατά τη σύνδεση ενός φύλλου στυλ, ήταν επίσης απαραίτητο να καθοριστεί το χαρακτηριστικό type = "text/css" στην ετικέτα συνδέσμου, αλλά σήμερα αυτό δεν είναι πλέον υποχρεωτική απαίτηση - τα προγράμματα περιήγησης καταλαβαίνουν ήδη τα πάντα τέλεια. Ωστόσο, για πλήρη υποστήριξη σε παλαιότερα προγράμματα περιήγησης, μπορείτε να το παίξετε με ασφάλεια και να το προσθέσετε.

Το οποίο θα εξετάσουμε τώρα με τη σειρά.

Όπως είπα προηγουμένως, το css έχει σχεδιαστεί για να σχεδιάζει δομές html, δηλαδή να τους δίνει εμφάνιση, χρώμα, μέγεθος, τοποθεσία και ούτω καθεξής, και επομένως επηρεάζει άμεσα τον κώδικα html.

Για να διασφαλιστεί αυτό το αποτέλεσμα, πραγματοποιείται μια σύνδεση css στο έγγραφο html.

Ο πρώτος τρόπος συμπερίληψης css είναι τα συνδεδεμένα στυλ. Χρησιμοποιείται όταν το φύλλο στυλ είναι γραμμένο σε ξεχωριστό αρχείο.

Σε αυτήν την περίπτωση, το αρχείο style.css με το φύλλο στυλ συνδέεται με το αρχείο html στην ετικέτα head, χρησιμοποιώντας την ετικέτα συνδέσμου

<σύνδεσμος href ="css/style.css " type ="text/css " rel ="style.css ">
Έγγραφο χωρίς τίτλο

Ο σύνδεσμος είναι μια ενιαία ετικέτα.

href – ένα χαρακτηριστικό συνδέσμου γνωστό σε εμάς, css/stile.css – μια τιμή που υποδεικνύει τη διαδρομή προς το αρχείο και το όνομα του αρχείου.

type – ένα χαρακτηριστικό που υποδεικνύει τον τύπο του στοιχείου που θα συνδεθεί, στην περίπτωσή μας είναι text/css.

Το rel είναι ένα χαρακτηριστικό που καθορίζει μια σχέση και η τιμή του είναι συνήθως γραμμένο φύλλο στυλ.

Σε αυτόν τον κώδικα, συνήθως αλλάζει μόνο η τιμή του style.css (το όνομα του συνδεδεμένου πίνακα). Τα τραπέζια είναι συνδεδεμένα.

Τώρα το πρόγραμμα περιήγησης θα εμφανίσει το αρχείο html με τη μορφή που θα γραφτεί για αυτό στο αρχείο style.css.

Παρεμπιπτόντως, για το μέλλον. Μπορείτε να συνδέσετε όσα φύλλα στυλ θέλετε σε ένα αρχείο html. Όλα αυτά περιλαμβάνονται στην ετικέτα κεφαλής.

Και, αυτό που χρησιμοποιείται πολύ πιο συχνά, αντίθετα, ένας πίνακας μπορεί να συνδεθεί με πολλά αρχεία html.

Αυτός είναι ο πιο προτιμώμενος τρόπος για να συμπεριλάβετε φύλλα στυλ, καθώς είναι όλα σε ένα αρχείο και επομένως είναι πιο εύκολο να οριστούν.

Και επίσης, εάν πρέπει να αλλάξετε το στυλ πολλών στοιχείων του ίδιου τύπου, θα είναι πολύ πιο εύκολο να το κάνετε εάν συγκεντρωθούν σε έναν επιλογέα ομάδας.

Το γεγονός είναι ότι ένα από τα καθήκοντα του webmaster είναι να μειώσει την ποσότητα του κώδικα διατηρώντας το ίδιο τελικό αποτέλεσμα και ένα ξεχωριστό αρχείο style.css πληροί πλήρως αυτήν την απαίτηση.

Απλά φανταστείτε, για να γράψετε έναν τίτλο για ένα άρθρο, πρέπει να ορίσετε το μέγεθος, το χρώμα, τη γραμματοσειρά και, ενδεχομένως, κάποια άλλα στυλ. Και έτσι για κάθε ανάρτηση.

Στο αρχείο style.css, μπορείτε να ορίσετε στυλ μία φορά, αλλά για όλους τους τίτλους αναρτήσεων στον ιστότοπο.

Τώρα καταλαβαίνεις τη διαφορά;

Ωστόσο, άλλες μέθοδοι σύνδεσης στυλ έχουν το δικαίωμα να υπάρχουν, οπότε ας τις δούμε και τις καταστάσεις στις οποίες χρησιμοποιούνται.

Ο δεύτερος τρόπος σύνδεσης css είναι τα καθολικά στυλσας επιτρέπει να συνδέσετε (τοποθετήσετε) ένα φύλλο στυλ απευθείας σε ένα αρχείο html.

Αυτό γίνεται χρησιμοποιώντας την ετικέτα στυλ και γράφεται με τον ίδιο τρόπο όπως στην πρώτη περίπτωση στην ετικέτα κεφαλιού.

Έγγραφο χωρίς τίτλο

Как видите, таблица стилей расположена прямо в html файле. Всё это работает так-же, как и при первом способе подключения, но применяется реже, из за громоздкости, и главное, из-за невозможности воздействия стилей на несколько файлов.

Когда его применять? Я, например использую этот способ при создании дизайна в редакторе файлов.

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

Третий способ подключения css — внутренние стили позволяет прописывать стили прямо внутри html тега.

Реализуется он при помощи атрибута style , который не стоит путать с одноимённым тегом.

Применяется он тогда, когда нужно оформить только один элемент контента.

Для примера возьмём кусочек текста, и зададим ему стили, заключив в тег span

В этой части самоучителя мы познакомимся с новыми для вас терминами, которые используются при описании папок и HTML-элементов.

Примечание: папку также часто называют директорией или каталогом.

Структура сайта

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

Как вы видите, структура - это всего лишь схема, отображающая вложенность одних каталогов в другие. В примере мы использовали всего три каталога, однако этого будет достаточно для того, чтобы описать всю необходимую информацию. Часто каталоги описывают с помощью терминов наследственных (семейных) связей. У нас есть папка под названием "Бананы", она расположена внутри папки "Фрукты". Папка "Фрукты" - это родитель каталога "Бананы", а каталог "Бананы" - ребенок (дочерний каталог) папки "Фрукты". Также у нас есть еще папка "Киви", которая является тоже ребенком каталога "Фрукты".

Чтобы вам лучше запомнить, опишем термины отдельно:

Дочерний каталог - это папка, над которой в иерархическом древе есть родительский каталог.
Родительский каталог - это папка, содержащая другой каталог.
Есть еще такое понятие как "корневой каталог" - это основная (главная) папка, в которой расположены все прочие каталоги и файлы.

Структура элементов

Структуру элементов также можно представить в виде схемы, отображающей вложенность одних элементов в другие. Рассмотрим простой пример:

Ένα διάγραμμα που δείχνει την ένθεση των στοιχείων μπορεί να αναπαρασταθεί ως εξής:

Παιδικό στοιχείοείναι ένα στοιχείο που έχει ένα γονικό στοιχείο πάνω από αυτό στο ιεραρχικό δέντρο. Ένα στοιχείο παιδιού ονομάζεται επίσης παιδί.
Σχετικό στοιχείοείναι ένα άλλο θυγατρικό στοιχείο του ίδιου γονικού στοιχείου στο ίδιο επίπεδο κλάδου. Τέτοια στοιχεία ονομάζονται επίσης αδελφικός, στο παράδειγμα τέτοια στοιχεία είναι Και , Και <style> .</li> <li><span>Στοιχείο ρίζας</span>- το ανώτατο στοιχείο στην ιεραρχία ( <html>), όλα τα άλλα στοιχεία είναι απόγονοί του.</li> <li><span>Γονικό στοιχείο</span>είναι ένα στοιχείο που περιέχει ένα άλλο στοιχείο. Μερικές φορές ονομάζεται απλώς γονέας.</li> <li>Ένα παιδί μπορεί να είναι άμεσο παιδί ενός στοιχείου, αλλά είναι συνήθως ένα γενικό όνομα για όλα τα στοιχεία που είναι ένθετα μέσα σε άλλα στοιχεία, ανεξάρτητα από το πόσο βαθιά είναι φωλιασμένα, π.χ. <head>, <title>, <body>, <p>Και <style>είναι απόγονοι του στοιχείου <html>.</li> </ul> <p>Σε αυτό το άρθρο θα περιγράψω μόνο τους πιο απαραίτητους φακέλους και αρχεία του προτύπου Joomla 1.5, αλλά σκοπεύω στο μέλλον (όσο είναι δυνατόν και χρόνο) να συμπληρώσω το άρθρο με πρόσθετες περιγραφές.</p> <h3>Πού βρίσκονται τα αρχεία προτύπων Joomla 1.5;</h3> <p>Η θέση των φακέλων και των αρχείων προτύπων στη φιλοξενία ή τον διακομιστή σας είναι εύκολο να προσδιοριστεί. Όλα τα πρότυπα βρίσκονται σε έναν ειδικό φάκελο <b>/πρότυπα</b>. Το οποίο, με τη σειρά του, βρίσκεται στον ριζικό φάκελο του Joomla.</p> <p>Ανοίξτε το φάκελο <b>/πρότυπα</b>. Υπάρχουν φάκελοι με πρότυπα εκεί από προεπιλογή: beez, ja_purity, rhuk_milkyway, system. Για να εξετάσετε τα περιεχόμενα του τελευταίου φακέλου <b>Σύστημα</b>Θα επανέλθω σε επόμενο άρθρο. Προς το παρόν, ας δούμε τα περιεχόμενα του φακέλου προτύπου rhuk_milkyway.</p> <h3>Λίστα φακέλων και αρχείων του προτύπου rhuk_milkyway</h3> <p><b>Φάκελοι:</b> <br>1. css <br>2.html <br>3. εικόνες</p><p><b>Αρχεία:</b> <br>1.favicon.ico <br>2.index.html <br>3.index.php <br>4. παραμ.ini <br>5. templateDetails.xml <br>6. template_thumbnail.png</p> <h3>Φάκελος Νο. 1. CSS</h3> <p>Ο φάκελος 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.</p> <p>Αλήθεια πολλά; Σε αυτήν την περίπτωση, ο αριθμός των στυλ οφείλεται στο γεγονός ότι είναι δυνατή η αλλαγή του συνδυασμού χρωμάτων του προτύπου. Συνήθως χρησιμοποιώ μόνο ένα αρχείο. Επειδή Όταν φτιάχνω ένα πρότυπο για τον εαυτό μου, δεν βλέπω το νόημα σε μια τέτοια ποικιλία χρωμάτων.</p> <h3>Φάκελος Νο 2. HTML</h3> <p>Επειδή Στο Joomla, όλες οι επεκτάσεις έχουν έτοιμο κώδικα HTML για έξοδο με την απαραίτητη σήμανση και τα δικά τους στυλ, οι προγραμματιστές έχουν παράσχει τη δυνατότητα να τον αλλάξουν χωρίς να επεξεργαστούν τα ίδια τα αρχεία των επεκτάσεων. Αυτό είναι απαραίτητο ώστε κατά την ενημέρωση του Joomla ή των επεκτάσεών του, να μην χαθούν οι αλλαγές που έγιναν. Για να το κάνετε αυτό, απλώς αντιγράψτε το απαιτούμενο αρχείο στον φάκελο html και διορθώστε το όπως το χρειάζεστε. Τώρα δεν θα περιγράψω λεπτομερώς πώς γίνεται αυτό σωστά, γιατί δεν πρόκειται για αυτό το άρθρο :), αλλά σίγουρα θα το περιγράψω σε ένα από τα παρακάτω άρθρα.</p> <h3>Φάκελος Νο. 3. ΕΙΚΟΝΕΣ</h3> <p>Εδώ αποθηκεύονται οι εικόνες προτύπου.</p> <h3>Αρχείο Νο. 1. favicon.ico</h3> <p>Αυτή είναι μια εικόνα 16x16 pixel που είναι το εικονίδιο του ιστότοπου. Το εικονίδιο εμφανίζεται στην καρτέλα του προγράμματος περιήγησης και σε ορισμένες μηχανές αναζήτησης δίπλα στον ιστότοπό σας στα αποτελέσματα για σχετικά ερωτήματα αναζήτησης.</p> <h3>Φάκελος Νο 2. index.html</h3> <h3>Αρχείο Νο. 3. index.php</h3> <p>Το αρχείο προορίζεται για σήμανση html του προτύπου. Εδώ είναι γραμμένο: πού θα τοποθετηθούν οι μονάδες, πού θα εμφανιστούν τα περιεχόμενα των στοιχείων, ποια αρχεία στυλ θα συνδεθούν στο πρότυπο, οι συνθήκες για την εμφάνιση των λειτουργικών μονάδων. Θα πρέπει να εργαστείτε με αυτό το αρχείο περισσότερο από άλλα, γιατί αυτό δεν είναι τίποτα άλλο από το πλαίσιο και τη βάση του προτύπου.</p> <h3>Φάκελος Νο 4. παραμς.ini</h3> <p>Το αρχείο params.ini απαιτείται για την αποθήκευση των ρυθμίσεων προτύπου. Πρέπει να υπάρχει στο πρότυπο με άδεια εγγραφής 777.</p> <h3>Φάκελος Νο 5. templateDetails.xml</h3> <p>Το αρχείο templateDetails.xml περιέχει πολλές χρήσιμες λειτουργίες: χρησιμοποιείται για την εγκατάσταση του προτύπου μέσω του πίνακα διαχείρισης του Joomla. Περιέχει πληροφορίες σχετικά με το όνομα του προτύπου, τον συγγραφέα, την ημερομηνία δημιουργίας, την έκδοση, την άδεια χρήσης κ.λπ. Παράμετροι προτύπου.</p> <h3>Φάκελος Νο 6. template_thumbnail.png</h3> <p>Το αρχείο (εικόνα) δείχνει πώς φαίνεται το πρότυπο. Είναι απαραίτητο ώστε κατά τη διανομή να μπορείτε να δείτε γρήγορα ποιο είναι το πρότυπο, χωρίς να το εγκαταστήσετε στον ιστότοπο. Και αν είναι ήδη εγκατεστημένο, τότε εκτελεί την ίδια λειτουργία αλλά από τον πίνακα διαχείρισης.</p> <p>Συνεχίζουμε το θέμα του τελευταίου μαθήματος, όπου προσπαθήσαμε λίγο να καταλάβουμε τι είναι το CSS. Πρώτα απ 'όλα, πρέπει να δημιουργήσουμε ένα αρχείο στυλ και να το αποθηκεύσουμε δίπλα στα αρχεία HTML μας. Επειδή όμως, κατά τη διαδικασία δημιουργίας ενός ιστότοπου, μπορεί να υπάρχουν πολλά αρχεία με την επέκταση CSS, είναι προτιμότερο να δημιουργήσετε έναν ξεχωριστό φάκελο για αυτά. Και έτσι ανοίγουμε το φάκελο όπου είναι αποθηκευμένο το αρχείο μας index.html, δημιουργούμε έναν φάκελο στον ανοιχτό φάκελο και τον ονομάζουμε "CSS", αυτό θα μας διευκολύνει να καταλάβουμε τι είναι αποθηκευμένο εδώ. Στη συνέχεια, ανοίξτε το αρχείο επεξεργασίας «Notepad++» > Νέο και αποθηκεύστε το έγγραφο με το όνομα «STYLE» με την επέκταση «CSS», δηλαδή θα πρέπει να μοιάζει με αυτό, style.css. Και έχουμε δύο φακέλους και ένα αρχείο ευρετηρίου.</p> <p><b>Εικόνα Νο. 1.</b></p> <p><img src='https://i0.wp.com/xn----7sbqldprbrfejdd6m.xn--p1ai/uploads/posts/2014-02/thumbs/1393062529_lesson_10_1.jpg' width="100%" loading=lazy loading=lazy></p> <h3><span>Σύνδεση CSS σε HTML.</span></h3> <p>Για να μπορεί το αρχείο style.css να αλληλεπιδρά με το αρχείο index.html, πρέπει να τοποθετήσουμε την ακόλουθη γραμμή κώδικα μεταξύ των ετικετών "HEAD":</p><p> <link rel="stylesheet" type="text/css" href="css/style.css"> </p><p>Το πρώτο πράγμα που βλέπουμε είναι η ετικέτα <link>που μεταφράζεται ως "κανάλι επικοινωνίας", δηλαδή, λέμε στο πρόγραμμα περιήγησης να συνδέσει τώρα το έγγραφο, μετά το χαρακτηριστικό rel (σχέση) και το φύλλο στυλ (στυλ). Δηλαδή, αυτό το κανάλι επικοινωνίας σχετίζεται με στυλ. Στη συνέχεια, "type", δηλαδή ο τύπος εγγράφου "text/css" και το τελικό κρίσιμο στάδιο εδώ είναι ο σύνδεσμος προς το ίδιο το αρχείο που περιλαμβάνεται, href="css/style.css", όπου υποδεικνύουμε το όνομα του φακέλου που δημιουργήθηκε με στυλ και το ίδιο το αρχείο στυλ.</p> <p><b>Εικόνα Νο. 2.</b></p> <h3><span>Μεταφορά στυλ από HTML σε CSS.</span></h3> <p>Στα προηγούμενα μαθήματα, πρακτικά δημιουργήσαμε στυλ σε ολόκληρη τη σελίδα HTML μας. Τώρα πρέπει να μεταφέρουμε αυτά τα έτοιμα στυλ στο αρχείο style.css και ας ξεκινήσουμε με την ετικέτα BODY, όπου έχουμε το φόντο του προτύπου μας. Στο αρχείο CSS γράφουμε το ακόλουθο body(), όπου το BODY είναι ο επιλογέας ετικέτας και οι σγουρές αγκύλες είναι όπου θα τοποθετηθούν οι κανόνες στυλ για αυτήν την ετικέτα. Τώρα στο αρχείο index.html, όπου το χαρακτηριστικό style έρχεται μετά την ετικέτα BODY, αντιγράψτε όλο το περιεχόμενο που βρίσκεται ανάμεσα στα διπλά εισαγωγικά και επικολλήστε το στο css. Με λίγο τρίψιμο, θα πρέπει να μοιάζει με αυτό:</p><p>Body( background-image: url("images/fon.jpg"); background-attachment: fixed; )</p><p>Στο αρχείο index.html, αφαιρούμε τον επιπλέον κώδικα στις ετικέτες BODY ώστε να παραμείνει καθαρός έτσι <body>σαν να το είχαμε δημιουργήσει μόλις. Αποθηκεύουμε τις αλλαγές στο έγγραφο και πηγαίνουμε να το προβάλουμε στο πρόγραμμα περιήγησης. Εάν όλα έγιναν σωστά, τότε το φόντο της σελίδας μας θα πρέπει να εξαφανιστεί επειδή το πρόγραμμα περιήγησης δεν μπορεί να βρει τη διαδρομή προς την εικόνα. Ας βρούμε την αιτία του σφάλματος. Προσοχή στον επάνω κωδικό, μπαίνει ο browser και διαβάζει ότι το φόντο πρέπει να είναι εικόνα, μετά το url, δηλαδή το μονοπάτι και το βλέπει. Ότι στον φάκελο που μπήκε θα έπρεπε να υπάρχει φάκελος εικόνων και αρχείο fon.jpg, όλα δείχνουν να είναι σωστά. Αλλά το όλο θέμα είναι ότι ο browser μπήκε στον φάκελο CSS και σε αυτόν τον κατάλογο δεν έχουμε φάκελο εικόνων και πρέπει να πούμε στον browser να ξεκινήσει την αναζήτηση από τον ριζικό φάκελο, δηλαδή τον κύριο. Για να το κάνετε αυτό, πρέπει να πείτε στο πρόγραμμα περιήγησης να κάνει εσοχή ένα βήμα πίσω, όπως αυτό (../) δύο τελείες και μια κάθετο προς τα εμπρός. Εάν το αρχείο style.css μας βρισκόταν ακόμη πιο βαθιά κατά έναν φάκελο, θα έπρεπε να καθορίσουμε μια επιστροφή σε δύο καταλόγους, δηλαδή διπλό (../../). Γενικά, προσπαθήστε να το κατανοήσετε και να το θυμάστε αυτό για να διακρίνετε τις διαδρομές για αρχεία και έγγραφα, τόσο άμεσες όσο και ένθετες. Σε αυτήν την περίπτωση, το αρχείο style.css είναι ένθετο και δεν μπορεί να έχει άμεσες διαδρομές για έγγραφα.</p><p>Body( background-image: url("../images/fon.jpg"); background-attachment: fixed; )</p><p>Μετά τη διόρθωση αυτής της διαδρομής, όλα θα πρέπει να λειτουργήσουν και θα εμφανιστεί το φόντο μας. Με αυτό, προτείνω να ολοκληρώσετε αυτό το μάθημα και ως εργασία για το σπίτι, δοκιμάζετε την ένθεση φακέλων και μονοπατιών προς αρχεία. Δηλαδή, δημιουργήστε έναν άλλο φάκελο, για παράδειγμα με το όνομα “STYLES”, βάλτε τον φάκελο “CSS” μαζί με το έγγραφο style.css και ορίστε τη σωστή διαδρομή προς την εικόνα ώστε να λειτουργούν όλα.</p> <p><b><span><i>Και σας περιμένω στο επόμενο μάθημα «Απλή διάταξη σε HTML + CSS. Μάθημα Νο. 11», όπου θα μεταφέρουμε όλα τα υπόλοιπα στυλ και θα συγκρίνουμε τη διαφορά και τα πλεονεκτήματα του «CSS» κατά τη χρήση του.</i> </span> </b></p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </article> </div> </div> <div id="secondary"> <aside id="search-2" class="widget widget_search clearfix"> <form action="/" class="search-form searchform clearfix" method="get"> <div class="search-wrap"> <input type="text" placeholder="Αναζήτηση" class="s field" name="s"> <button class="search-icon" type="submit"></button> </div> </form> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widget-title"><span>Πρόσφατες καταχωρήσεις</span></h3> <ul> <li> <a href="https://olegshein.ru/el/system-and-update/kak-otklyuchit-nochnoi-draiv-na-tele-2-nochnoi-bezlimit-tele2--/">Night unlimited Tele2 - τι σημαίνει και πώς να το συνδέσετε;</a> </li> <li> <a href="https://olegshein.ru/el/applied/optimizaciya-operativnoi-pamyati-dlya-windows-xp-programmy-dlya-ochistki/">Προγράμματα για τον καθαρισμό της μνήμης RAM</a> </li> <li> <a href="https://olegshein.ru/el/contacts-and-messages/prilozhenie-chtob-govorit-po-internetu-luchshie-prilozheniya/">Οι καλύτερες εφαρμογές για ραντεβού και επικοινωνία</a> </li> <li> <a href="https://olegshein.ru/el/applied/krymskii-rouming-ot-megafona-stoimost-zvonkov-sms-i/">Περιαγωγή Κριμαίας από το Megafon: κόστος κλήσεων, SMS και Internet</a> </li> <li> <a href="https://olegshein.ru/el/instructions/pri-skanirovanii-prosmotr-mac-os-kontrast-izobrazheniya-kak/">Πώς να σαρώσετε έγγραφα και φωτογραφίες στο OS X</a> </li> <li> <a href="https://olegshein.ru/el/security/blade-soul-zapuskaetsya-oshibka-1073-oshibki-blade-and-soul-i-sposoby-ih/">Σφάλματα Blade and Soul και πώς να τα διορθώσετε</a> </li> <li> <a href="https://olegshein.ru/el/security/kak-nastroit-monitor-dlya-pravilnoi-cvetoperedachi-s-pomoshchyu-po/">Οδηγίες: Βαθμονόμηση οθόνης φορητού υπολογιστή - προσαρμογή χρωματικής απόδοσης Κακή απόδοση χρώματος της οθόνης</a> </li> <li> <a href="https://olegshein.ru/el/security/pochemu-gnezdo-usb-ne-rabotaet-kak-otklyuchit-ili-vklyuchit-usb-porty-v/">Πώς να απενεργοποιήσετε ή να ενεργοποιήσετε τις θύρες USB στα Windows</a> </li> </ul> </aside> <aside id="text-5" class="widget widget_text clearfix"> <div class="textwidget"> <script type="text/javascript" src="//vk.com/js/api/openapi.js?144"></script> <div id="vk_groups"></div> </div> </aside> <aside id="text-4" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> <aside id="text-3" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> </div> </div> </div> <footer id="colophon" class="clearfix"> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> </div> <div class="footer-socket-left-sectoin"> <div class="copyright">2024 <a href="https://olegshein.ru/el/" title="olegshein.ru"><span>olegshein.ru</span></a>. Λέσχη υπολογιστών του Oleg Shein. <br></div> </div> </div> </div> </div> </footer> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div> <script type="text/javascript"> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "colormag_right_sidebar", "margin_top": 10, "margin_bottom": 0, "stop_id": "", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['text-3'] }; </script> <script type="text/javascript"> (function(w, doc) { if (!w.__utlWdgt) { w.__utlWdgt = true; var d = doc, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset = 'UTF-8'; s.async = true; s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js'; var h = d[g]('body')[0]; h.appendChild(s); } })(window, document); </script> <div style="text-align:left;" data-lang="ru" data-url="/global-blue-vozvrat-tax-free-v-minske/" data-background-alpha="0.0" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-size="12" data-top-button="false" data-share-counter-type="common" data-share-style="1" data-mode="share" data-like-text-enable="false" data-mobile-view="true" data-icon-color="#ffffff" data-orientation="fixed-left" data-text-color="#000000" data-share-shape="round-rectangle" data-sn-ids="fb.vk.tw.ok.gp.ps.mr.ln." data-share-size="30" data-background-color="#ffffff" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.ok.wh.vb." data-pid="cmsvpolshuby" data-counter-background-alpha="1.0" data-following-enable="false" data-exclude-show-more="true" data-selection-enable="true" class="uptolike-buttons"></div> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/bootstrap-2.3.2/js/bootstrap.min.js?ver=2.3.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.validate.min.js?ver=1.15.0'></script> <script type='text/javascript'> /* <![CDATA[ */ var pwebcontact_l10n = pwebcontact_l10n || {}; pwebcontact_l10n.form = { "INIT": "Initializing form...", "SENDING": "Sending...", "SEND_ERR": "Wait a few seconds before sending next message", "REQUEST_ERR": "Request error: ", "COOKIES_ERR": "Enable cookies and refresh page to use this form" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.pwebcontact.min.js?ver=2.3.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/simple-tooltips/zebra_tooltips.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/wp-cloudy/js/wp-cloudy-ajax.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/modernizr.custom.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/navigation.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <div id="pwebcontact1" class="pwebcontact pweb-bottom pweb-offset-right pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal" dir="ltr"> <div id="pwebcontact1_toggler" class="pwebcontact1_toggler pwebcontact_toggler pweb-closed pweb-theme-free"> <span class="pweb-text">Έχετε ερωτήσεις;</span> <span class="pweb-icon"></span> </div> <div id="pwebcontact1_box" class="pwebcontact-box pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal pweb-init" dir="ltr"> <div class="pwebcontact-container-outset"> <div id="pwebcontact1_container" class="pwebcontact-container"> <div class="pwebcontact-container-inset"> <form name="pwebcontact1_form" id="pwebcontact1_form" class="pwebcontact-form" action="/" method="post" accept-charset="utf-8"> <div class="pweb-fields"> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-name pweb-field-name"> <div class="pweb-label"> <label id="pwebcontact1_field-name-lbl" for="pwebcontact1_field-name">Ονομα</label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="text" name="fields[name]" id="pwebcontact1_field-name" autocomplete="on" class="pweb-input" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-email pweb-field-email"> <div class="pweb-label"> <label id="pwebcontact1_field-email-lbl" for="pwebcontact1_field-email">ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="email" name="fields[email]" id="pwebcontact1_field-email" autocomplete="on" class="pweb-input required" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-textarea pweb-field-message"> <div class="pweb-label"> <label id="pwebcontact1_field-message-lbl" for="pwebcontact1_field-message">Μήνυμα <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <textarea name="fields[message]" id="pwebcontact1_field-message" cols="50" rows="5" class="required" data-role="none"></textarea> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-buttons"> <div class="pweb-field"> <button id="pwebcontact1_send" type="submit" class="btn pweb-button-send" data-role="none">Στείλετε</button> </div> </div> </div> </div> </div> <div class="pweb-msg pweb-msg-after"> <div id="pwebcontact1_msg" class="pweb-progress"> <script type="text/javascript"> document.getElementById("pwebcontact1_msg").innerHTML = "Initializing form..." </script> </div> </div> <input type="hidden" name="5eb40beb9e" value="1" id="pwebcontact1_token"> </form> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(function() { jQuery(".tooltips img").closest(".tooltips").css("display", "inline-block"); new jQuery.Zebra_Tooltips(jQuery('.tooltips').not('.custom_m_bubble'), { 'background_color': '#000000', 'color': '#ffffff', 'max_width': 250, 'opacity': 0.95, 'position': 'center' }); }); </script> <script type="text/javascript"> jQuery(document).on('ready post-load', function() { jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create"]').addClass('nolightbox'); }); jQuery(document).on('ready post-load', easy_fancybox_handler); jQuery(document).on('ready', easy_fancybox_auto); </script> <div id="mistape_dialog" data-mode="comment" data-dry-run="0"> <div class="dialog__overlay"></div> <div class="dialog__content"> <div id="mistape_confirm_dialog" class="mistape_dialog_screen"> <div class="dialog-wrap"> <div class="dialog-wrap-top"> <h2>Αναφέρετε ένα τυπογραφικό λάθος</h2> <div class="mistape_dialog_block"> <h3>Κείμενο που θα σταλεί στους συντάκτες μας:</h3> <div id="mistape_reported_text"></div> </div> </div> <div class="dialog-wrap-bottom"> <div class="mistape_dialog_block comment"> <h3><label for="mistape_comment">Το σχόλιό σας (προαιρετικό):</label></h3> <textarea id="mistape_comment" cols="60" rows="3" maxlength="1000"></textarea> </div> <div class="pos-relative"> </div> </div> </div> <div class="mistape_dialog_block"> <a class="mistape_action" data-action="send" data-id="389" role="button">Στείλετε</a> <a class="mistape_action" data-dialog-close role="button" style="display:none">Ματαίωση</a> </div> <div class="mistape-letter-front letter-part"> <div class="front-left"></div> <div class="front-right"></div> <div class="front-bottom"></div> </div> <div class="mistape-letter-back letter-part"> <div class="mistape-letter-back-top"></div> </div> <div class="mistape-letter-top letter-part"></div> </div> </div> </div> <script type="text/javascript">  </script><br> <br> </body> </html>