Розбіжності

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

--- subjects:basic:informatika:web:css [21.10.2022 01:56] – Адміністратор
+++ subjects:basic:informatika:web:css [28.10.2024 16:56] (поточний) – [Селектори та Псевдо-класи] Адміністратор
@@ Рядок 3: / Рядок 3: @@
 CSS (англ. Cascading Style Sheets, укр. Каскадні таблиці стилів) — це спеціальна мова стилю сторінок, що використовується для опису їхнього зовнішнього вигляду. Самі ж сторінки написані мовами розмітки даних.
-CSS є основною технологією всесвітньої павутини, поряд із HTML та JavaScript[1].
+CSS є основною технологією всесвітньої павутини, поряд із HTML та JavaScript.
 Найчастіше CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів.
@@ Рядок 98: / Рядок 98: @@
 CSS має спеціальні позначення (селектори, від англ. selector) для визначення діапазону застосування правила.
-**Всі елементи:** використовується селектор %%*%% (часто не пишеться, наприклад %%* p%% та %%p%% — рівнозначні)
+**Селектори** — це частини CSS, які вказують, до яких елементів застосовуються стилі. Вони можуть вибирати елементи за тегом, класом або ідентифікатором.
-**За назвою елементу:** наприклад для всіх %%p%% або %%h2%%
-**Наслідування:** наприклад для всіх %%a%% елементів які містяться в %%li%% елементах (посилання всередині списків), селектор матиме вигляд %%li a%%
-**Властивості** ''class'' та ''id'': наприклад <code>.<var>class</var></code> або <code>#<var>id</var></code> для елементів <code>class="<var>class</var>"</code> або <code>id="<var>id</var>"</code>
-; Суміжні елементи: наприклад для всіх елементів <code>p</code>, попереднім до яких є елемент <code>h2</code> (перший абзац після заголовка), селектор буде <code>h2 + p</code>
-; Пряме наслідування: наприклад для всіх <code>span</code> елементів всередині <code>p</code>, але не глибших за перший рівень наслідування <code>span</code>, селектор буде <code>p &gt; span</code>
-; За атрибутами: наприклад для всіх <code>&lt;input type="text"&gt;</code> селектор буде <code>input[type="text"]</code>
-Для точнішого визначення стилю можуть використовуватися ''псевдо-класи'' ({{lang-en|pseudo-classes}}). Мабуть найвідомішим є псевдо-клас <code>:hover</code>, що застосовується коли користувач вкаже на елемент, зазвичай наведенням курсору. Стиль визначається для <code>a:hover</code> або <code>#elementid:hover</code>. Інші псевдо-класи, наприклад, <code>:first-line</code> (перший рядок тексту), <code>:first-letter</code> (перша літера) <code>:visited</code> (посилання, що вже відкривалось) або <code>:before</code> (визначає стиль перед елементом). Спеціальний псевдо-клас <code>:lang(c)</code> буде застосовано до елементів якщо їхня мова ({{lang-en|language}}) «c».
+**Псевдо-класи** — це спеціальні селектори, які змінюють стиль елемента залежно від його стану. Наприклад, для наведення курсора або для активного елемента.
+Приклад
+<code css приклад.css>
+/* Вибір кнопки, на яку наведено курсор */
+button:hover {
+    background-color: yellow;
+}
+</code>
-Підтримка псевдо-класів залежить від браузеру, наприклад Internet Explorer 6 підтримує псевдо-клас <code>:hover</code> лише для посилань.
+**Всі елементи:** використовується селектор ''*'' (часто не пишеться, наприклад ''* p'' та ''p'' — рівнозначні)
-Селектори можуть поєднуватися й іншим чином для досягнення більшої гнучкості (див. [http://www.w3.org/TR/CSS21/selector.html визначення селекторів на сайті W3C] {{Webarchive|url=https://web.archive.org/web/20060423174213/http://www.w3.org/TR/CSS21/selector.html |date=23 квітня 2006 }}).
+**За назвою елементу:** наприклад для всіх ''p''або ''h2''
-В наступному прикладі кілька селекторів об'єднуються через кому<ref>{{Cite web |url=http://www.w3.org/TR/CSS1#contextual-selectors |title=contextual-selectors |accessdate=16 лютого 2007 |archive-date=9 лютого 2011 |archive-url=https://web.archive.org/web/20110209205309/http://www.w3.org/TR/CSS1/#contextual-selectors }}</ref>. Правило встановлює шрифт для HTML-заголовків всіх рівнів.
+**Наслідування:** наприклад для всіх ''a''елементів які містяться в ''li''елементах (посилання всередині списків), селектор матиме вигляд ''li a''
+**Властивості //class// та //id//:** наприклад ''.class'' або ''#id'' для елементів ''class="class"'' або ''id="id"''
+**Суміжні елементи:** наприклад для всіх елементів ''p'', попереднім до яких є елемент ''h2'' (перший абзац після заголовка), селектор буде ''h2 + p''
+**Пряме наслідування:** наприклад для всіх ''span'' елементів всередині ''p'', але не глибших за перший рівень наслідування ''span'', селектор буде ''p > span''
+**За атрибутами:** наприклад для всіх ''<input type="text">'' селектор буде ''input[type="text"]''
+Для точнішого визначення стилю можуть використовуватися **псевдо-класи** (pseudo-classes). Мабуть найвідомішим є псевдо-клас '':hover'', що застосовується коли користувач вкаже на елемент, зазвичай наведенням курсору. Стиль визначається для ''a:hover'' або ''#elementid:hover''. Інші псевдо-класи, наприклад, '':first-line'' (перший рядок тексту), '':first-letter'' (перша літера) '':visited'' (посилання, що вже відкривалось) або '':before'' (визначає стиль перед елементом).
+Підтримка псевдо-класів залежить від браузеру, наприклад Internet Explorer 6 підтримує псевдо-клас '':hover'' лише для посилань.
+В прикладі ничже кілька селекторів об'єднуються через кому. Правило встановлює шрифт для HTML-заголовків всіх рівнів.
 <code css>
  h1, h2, h3, h4, h5, h6 {
@@ Рядок 117: / Рядок 133: @@
  }
 </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]]