Розбіжності

Тут показані розбіжності між вибраною ревізією та поточною версією сторінки.

Посилання на цей список змін

Порівняння попередніх версій Попередня ревізія
Наступна ревізія
Попередня ревізія
subjects:basic:informatika:web:css [21.10.2022 02:06] – [Селектори та Псевдо-класи] Адміністраторsubjects:basic:informatika:web:css [28.10.2024 16:56] (поточний) – [Селектори та Псевдо-класи] Адміністратор
Рядок 3: Рядок 3:
 CSS (англ. Cascading Style Sheets, укр. Каскадні таблиці стилів) — це спеціальна мова стилю сторінок, що використовується для опису їхнього зовнішнього вигляду. Самі ж сторінки написані мовами розмітки даних. CSS (англ. Cascading Style Sheets, укр. Каскадні таблиці стилів) — це спеціальна мова стилю сторінок, що використовується для опису їхнього зовнішнього вигляду. Самі ж сторінки написані мовами розмітки даних.
  
-CSS є основною технологією всесвітньої павутини, поряд із HTML та JavaScript[1].+CSS є основною технологією всесвітньої павутини, поряд із HTML та JavaScript.
  
 Найчастіше CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів. Найчастіше CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів.
Рядок 97: Рядок 97:
 ===== Селектори та Псевдо-класи ===== ===== Селектори та Псевдо-класи =====
 CSS має спеціальні позначення (селектори, від англ. selector) для визначення діапазону застосування правила. CSS має спеціальні позначення (селектори, від англ. selector) для визначення діапазону застосування правила.
 +
 +**Селектори** — це частини CSS, які вказують, до яких елементів застосовуються стилі. Вони можуть вибирати елементи за тегом, класом або ідентифікатором.
 +
 +**Псевдо-класи** — це спеціальні селектори, які змінюють стиль елемента залежно від його стану. Наприклад, для наведення курсора або для активного елемента.
 +Приклад
 +<code css приклад.css>
 +/* Вибір кнопки, на яку наведено курсор */
 +button:hover {
 +    background-color: yellow;
 +}
 +</code>
  
 **Всі елементи:** використовується селектор ''*'' (часто не пишеться, наприклад ''* p'' та ''p'' — рівнозначні) **Всі елементи:** використовується селектор ''*'' (часто не пишеться, наприклад ''* p'' та ''p'' — рівнозначні)
Рядок 108: Рядок 119:
 **Суміжні елементи:** наприклад для всіх елементів ''p'', попереднім до яких є елемент ''h2'' (перший абзац після заголовка), селектор буде ''h2 + p'' **Суміжні елементи:** наприклад для всіх елементів ''p'', попереднім до яких є елемент ''h2'' (перший абзац після заголовка), селектор буде ''h2 + p''
  
-**Пряме наслідування:** наприклад для всіх ''span'' елементів всередині ''p'', але не глибших за перший рівень наслідування <code>span</code>, селектор буде ''p > span''+**Пряме наслідування:** наприклад для всіх ''span'' елементів всередині ''p'', але не глибших за перший рівень наслідування ''span'', селектор буде ''p > span''
  
 **За атрибутами:** наприклад для всіх ''<input type="text">'' селектор буде ''input[type="text"]'' **За атрибутами:** наприклад для всіх ''<input type="text">'' селектор буде ''input[type="text"]''
Рядок 122: Рядок 133:
  }  }
 </code> </code>
 +
 +===== Приєднання до сторінки =====
 +Щоб включити таблицю стилів CSS, потрібно зберегти код CSS у файл (це можна зробити будь-яким текстовим редактором), наприклад example.css, і потім включити або імпортувати його в HTML або XHTML-сторінку.
 +
 +Включення CSS-файлу до сторінки (XHTML):
 +<code html><link rel="stylesheet" href="example.css" type="text/css" /></code>
 +Включення CSS-файлу до сторінки (HTML):
 +<code html><link rel="stylesheet" href="example.css" type="text/css"></code>
 +Імпорт CSS-файлів до HTML та XHTML-сторінок:
 +<code html>
 +<style type="text/css">
 + @import "example.css";
 +</style>
 +</code>
 +
 +CSS може бути визначений в ''<head>'' частині сторінки або для елементу сторінки через style.
 +
 +Включення CSS-файлу до XML-сторінки:
 +<code html> <?xml-stylesheet type="text/css" href="example.css"?></code>
 +
  
 ===== Джерела ===== ===== Джерела =====
   * [[wp>CSS]]   * [[wp>CSS]]
  • subjects/basic/informatika/web/css.1666307189.txt.gz
  • Востаннє змінено: 4 років тому
  • повз Адміністратор