CSS

Абсолютний і відносний шлях

В файловій системі комп’ютерів шляхи відіграють важливу роль у визначенні місця розташування файлів та папок. Шляхи можуть бути виражені як відносними, так і абсолютними. Давайте розглянемо основні концепції та надамо приклади кожного типу шляху.

Відносний шлях:

Відносний шлях вказує шлях до файлу або папки відносно поточного робочого каталогу (поточного місця, де ви знаходитесь в файловій системі).

Припустимо, у нас є така структура папок:

– root – documents – project – code – script.js – images – image.jpg – notes – todo.txt

Якщо ж поточний робочий каталог – це root, то відносний шлях до того ж файлу виглядатиме так: documents/project/code/script.js

Абсолютний шлях:

Абсолютний шлях повністю вказує шлях до файлу або папки від кореневого каталогу файлової системи.

Наприклад, абсолютний шлях до файлу script.js виглядатиме так: /root/documents/project/code/script.j, де / вказує на кореневий каталог.

Приклади:

  1. Відносний шлях: Припустимо, що поточний робочий каталог – code. Відносний шлях до image.jpg: ../../images/image.jpg.
  2. Абсолютний шлях: Абсолютний шлях до todo.txt: /root/notes/todo.txt.
  3. Відносний шлях: Якщо поточний каталог – root/documents, то відносний шлях до script.py: project/code/script.py.
  4. Абсолютний шлях: Абсолютний шлях до image.jpg: /root/images/image.jpg.

додатковий приклад, де я покажу, як можна використовувати відносний та абсолютний шляхи для підключення картинки в веб-сторінці.

Припустимо, у нас є така структура папок для веб-проекту:

– website – css – styles.css – images – picture.jpg – index.html

Відносний шлях для підключення зображення:

Якщо ви хочете підключити зображення picture.jpg в файлі index.html, який знаходиться у тому ж каталозі, що й папка images, ви можете використовувати відносний шлях:

<img src=”images/picture.jpg” alt=”Picture”>

Якщо index.html знаходиться в каталозі website, ви також можете використовувати відносний шлях:

<img src=”images/picture.jpg” alt=”Picture”>

Абсолютний шлях для підключення зображення:

Якщо ви хочете використовувати абсолютний шлях для підключення зображення, ви можете вказати повний шлях від кореневого каталогу веб-сайту:

<img src=”/website/images/picture.jpg” alt=”Picture”>

Обидва варіанти, відносний та абсолютний шлях, виконують одне й те саме завдання – підключення зображення до веб-сторінки. Вибір між ними залежить від контексту вашого проекту та того, як ви хочете організувати шляхи до ресурсів.

Переходьте на мій канал YouTube для більше інформації

fontawesome icons free

Добавляєм Іконки Fontawesome в HTML.

Друзі привіт)
А цій статі я покажу вам я швидко і без зайвих проблем підключити і використовувати Іконки Fontawesome в HTML швидко і безкоштовно.

Крок 1

Переходимо на сайт https://cdnjs.com/libraries/font-awesome

Крок 2

Вибираємо саме перше посилання і копіюємо “Copy Link Tag” як показано на фото нижче.

Крок 3

Вставляємо скопійований тег між відкриваючим і закриваючим тегом head

Крок 4

Переходим на сайт https://fontawesome.com/icons на сторінку з іконками, і шукаємо потрібну нам іконку

Крок 5

Нажимаємо на потрібну нам іконку і копіюємо HTML код/тег

Крок 6

Вставляємо скопійований HTML код/тег в нас код HTML там де ми хочемо добавити іконку

Крок 7

Ура, іконка появилася )

Як стилізувати іконку ?

Для стилізації іконки, використовуються властивості CSS як для звичайнісінького шрифту. Наприклад:
Для зміни розміру:

i {
font-size: 20px;
}

Для зміни кольору:

i {
color: red;
}

Як бачити, добавити стильні іконки в HTML дуже просто а головне безкоштовно)
Подивитися більше інформації, ви можете на моєму каналі https://youtube.com/@bilyki

Одиниці вимірювання в CSS: rem, em, px, vh, vw, %

У CSS існує безліч одиниць вимірювання, кожна з яких має свої особливості та використовується для різних завдань. В даній статті ми детально розглянемо такі одиниці: rem, em, px, vh, vw та %, розкриємо їх особливості та дослідимо, як їх використовувати для створення адаптивних та відзначених веб-сайтів.

Rem (Root EM):

Rem – це одиниця відносної висоти шрифту. Особливість rem полягає в тому, що вона відноситься до кореневого (html) елемента сторінки, тому змінюється тільки один раз, коли задається значення. Наприклад, якщо задати шрифт кореневому елементу сторінки 16px, то 1rem буде еквівалентно 16px. Якщо ви задаєте шрифт для дочірнього елементу (тегу) в батьківському елементі, вони будуть наслідувати значення rem, що дозволяє створювати легко масштабовані компоненти.

html {
  font-size: 16px; /* Задає розмір шрифту кореневого елемента у 16 пікселях */
}

p {
  font-size: 1.5rem; /* Задає розмір шрифту у 1.5 раза більше розміру шрифту кореневого елемента, тобто 24px (16px * 1.5) */
  margin-bottom: 1.2rem; /* Задає відступ знизу у 1.2 раза більше розміру шрифту кореневого елемента, тобто 19.2px (16px * 1.2) */
}

Em (Relative to Parent):

Em – це також одиниця відносної висоти шрифту, але вона вимірюється відносно батьківського елементу. Якщо ви задаєте розмір шрифту у батьківському елементі, всі дочірні елементи, що мають значення em, будуть використовувати його як основу. Якщо ніякий батьківський елемент не має заданого розміру шрифту, тоді em буде відноситись до шрифту документа (за замовчуванням 16px).

Px (Pixels):

Px – це абсолютна одиниця вимірювання, яка не залежить від жодного іншого елементу. Вона використовує фіксований розмір в пікселях. При використанні px, елементи завжди матимуть фіксований розмір, що може призводити до проблем з адаптивністю на різних екранах.

Vh (Viewport Height) та Vw (Viewport Width):

Vh та Vw – це відносні одиниці вимірювання, які залежать від висоти (vh) та ширини (vw) видимої області (viewport) браузера. Наприклад, 1vh відповідає 1% висоти видимої області, а 1vw – 1% ширини. Ці одиниці дозволяють створювати елементи, що адаптуються до розміру екрану користувача, що покращує взаємодію з веб-сайтом на різних пристроях.

Пликлад vh:

Пликлад vw:

% (Percentage):

% – це одиниця відносної величини, яка використовує відсотки від батьківського елементу. Наприклад, якщо ширина дочірнього елемента задана як 50%, це означає, що його ширина буде половина ширини батьківського елемента.

Приклад:

Висновок:

Використання правильних одиниць вимірювання в CSS допомагає створювати гнучкі, адаптивні та легко управляються компоненти для веб-сайтів. Rem та em дозволяють забезпечити зручний масштаб, px – точність, а vh, vw та % – адаптивність. Залежно від потреб вашого проекту, ви можете комбінувати ці одиниці, щоб створити привабливі та відзначені веб-інтерфейси для користувачів на будь-яких пристроях.

Відео по Одиницях Виміру в CSS ви можете подивитися у мене на каналі https://youtu.be/9iIahi1AyyQ

ТОП 5 VS Code Розширень

В цій статті я хочу поділитися з вами 5 крутими розширеннями для редактора коду Visual Studio Code. За допомогою даних розширень, ви зможете прискорити вашу роботу в рази.

ТОП 5

Prettier

Розширення Prettier – це незамінний інструмент для автоматичного форматування вашого коду згідно з установленими правилами стилю. Забудьте про ручне форматування – Prettier зробить ваш код стильним і консистентним автоматично. Зосередьтеся на логіці вашого коду, а Prettier забезпечує його привабливий вигляд.

Prettier автоматично відформатую ваш код після зберігання файлу.

prettier extension

ТОП 4

Code Snap

З розширенням Code Snap ви зможете легко створювати скріншоти фрагментів коду та додавати їх до вашого проекту. Забудьте про копіювання і вставлення коду в різних місцях – тепер ви зможете швидко захопити та використовувати фрагменти коду.

ТОП 3

Live Share

Розширення Live Share дозволяє вам спільно працювати над проектами з іншими розробниками в режимі реального часу. Поділіться своїм редактором, виконуйте спільні редагування, налагодження та спілкуйтеся зі своїми колегами безпосередньо у VS Code. Live Share зробить співпрацю із командою простою та продуктивною.

Live share extension

ТОП 2

Bracket Pair

“Bracket Pair Colorizer” – це розширення для Visual Studio Code, яке допомагає зробити код більш читабельним і зрозумілим, особливо при використанні багато рівнів вкладеності та багатогранних умов. Це досягається завдяки візуальному виділенню парних дужок різними кольорами.

Основні функції:

  1. Підсвічування парних дужок: Розширення підкреслює парні дужки, такі як круглі дужки (), квадратні дужки [], фігурні дужки {} та інші, відображаючи їх різними кольорами. При цьому парні дужки одного рівня вкладеності матимуть один колір, що полегшує їх розрізнення у коді.
  2. Кастомізація кольорів: Ви можете налаштувати кольори парних дужок, використовуючи стандартні CSS-кольори або HEX-коди, що дозволяє вам адаптувати розширення до вашого стилю.
  3. Підтримка вкладених дужок: Розширення підтримує різні рівні вкладеності, що дозволяє візуально зрозуміти структуру вкладеного коду.
  4. Ефективне використання простору: Візуальне підсвічування парних дужок допомагає виявити неправильно розміщені або незакриті дужки, що допомагає уникнути помилок.

Загалом, розширення “Bracket Pair Colorizer” є корисним інструментом для програмістів, які працюють з кодом, де часто використовуються парні дужки. Воно спрощує розуміння структури коду і забезпечує більш зручний досвід редагування коду в Visual Studio Code.

Regenerate response

Bracket pair extension

ТОП 1

Tabnine AI

“Tabnine AI” використовує машинне навчання, зокрема технологію глибокого навчання, щоб надавати інтелектуальні підказки та автоматичне доповнення коду під час написання програмного коду. За допомогою цього розширення, розробники можуть покращити продуктивність та швидкість написання коду, так як воно вміє прогнозувати, який код ви намагаєтесь написати на основі введеного контексту.

Основні функції:

Автоматичне доповнення коду: “Tabnine AI” аналізує ваши попередні вирази та шаблони коду, щоб пропонувати автоматичні підказки та завершення під час набору нового коду. Воно пропонує можливі варіанти коду, засновані на тому, як кодували раніше та практиках зміни коду для схожих завдань.

Змішані мови: Розширення може працювати з багатьма мовами програмування та змішувати їх у одному контексті. Це корисно, коли ви маєте справу з проєктами, що використовують різні мови програмування.

Інтелектуальна підказка: “Tabnine AI” намагається передбачити ваші інтенції на основі збережених шаблонів коду та наявних змін в поточному проекті. Воно може зрозуміти, що ви хочете зробити та пропонує варіанти коду для збільшення вашої продуктивності.

Підтримка різних редакторів: “Tabnine AI” може інтегруватися з різними популярними редакторами коду, дозволяючи розробникам використовувати його в зручному середовищі, де вони зазвичай працюють.

Загалом, “Tabnine AI” – це інноваційне розширення, яке пропонує інтелектуальні підказки та автоматичне доповнення коду на основі збережених даних та шаблонів. Воно може бути корисним інструментом для розробників, які хочуть збільшити свою продуктивність та зручність під час написання програмного коду.

tabnine AI extension

І це ще далеко не всі розширення, які доступні для Visual Studio Code. Обираючи найкращі для вашого потреб, ви зможете значно полегшити свою роботу та збільшити продуктивність. Візуальне використання цих розширень можна на моєму каналі https://youtu.be/T9_T07OwzLQ!

Scroll to Top