diff options
Diffstat (limited to 'files/uk/web/css/_doublecolon_before/index.html')
| -rw-r--r-- | files/uk/web/css/_doublecolon_before/index.html | 237 |
1 files changed, 0 insertions, 237 deletions
diff --git a/files/uk/web/css/_doublecolon_before/index.html b/files/uk/web/css/_doublecolon_before/index.html deleted file mode 100644 index 675b0c375d..0000000000 --- a/files/uk/web/css/_doublecolon_before/index.html +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: '::before (:before)' -slug: 'Web/CSS/::before' -tags: - - CSS - - Web - - Псевдо-елемент - - Розмытка -translation_of: 'Web/CSS/::before' ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary">В CSS, <strong><code>::before</code></strong> створює <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-елемент</a>, що є першим дочірнім елементом вибраного елемента. Це часто використовується для косметичного вмісту елемента з властивістю {{cssxref("content")}}.</span> Він за замовчуванням лінійний</p> - -<pre class="brush: css"><code class="language-css"><span class="comment token">/* Додає серце перед посиланнями */</span> -<span class="selector token">a<span class="pseudo-class token">::before</span> </span><span class="punctuation token">{ -</span> <span class="property token">content: "</span></code>♥<code class="language-css"><span class="property token">";</span> -<span class="punctuation token">}</span></code></pre> - -<div class="note"> -<p><strong>Нотатка:</strong> Псевдо-елемент згенерований за допомогою <code>::before</code> і<code>::after</code> <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">міститься в вікні форматування об'єкта</a>, і таким чином не приймає <em><a href="/en-US/docs/Web/CSS/Replaced_element">замінювані елементи</a> як </em> {{htmlelement("img")}}, або {{htmlelement("br")}} елементи.</p> -</div> - -<h2 id="Синтаксис">Синтаксис</h2> - -{{csssyntax}} - -<div class="note"> -<p><strong>Нотатка:</strong> CSS3 представляє позначення <code>::before</code> (з двома двокрапками) щоб розрізняти <a href="/en-US/docs/Web/CSS/Pseudo-classes">псевдо-класи</a> і <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-елементи</a>. Браузер також приймає <code>:before</code>, представлений в CSS2.</p> -</div> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Додавання_лапок">Додавання лапок</h3> - -<p>Простий приклад використання псевдо-елемента <code>::before</code> додає лапки. Тут ми використовуємо і <code>::before</code> і <code>{{Cssxref("::after")}}</code> замість символів лапок.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush:html"><q>Деякі цитати,</q> сказав він, <q> кращі за інші.</q></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush:css">q::before { - content: "«"; - color: blue; -} - -q::after { - content: "»"; - color: red; -}</pre> - -<h4 id="Результат">Результат</h4> - -<p>{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}</p> - -<h3 id="Декоративний_приклад">Декоративний приклад</h3> - -<p>Ми можемо стилізувати текст чи зображення у властивості {{cssxref("content")}} майже як завгодно.</p> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><span class="ribbon">Зверніть увагу де помаранчевий блок</span></pre> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">.ribbon { - background-color: #5BC8F7; -} - -.ribbon::before { - content: "Подивіться на цей помаранчевий блок."; - background-color: #FFBA10; - border-color: black; - border-style: dotted; -}</pre> - -<h4 id="Результат_2">Результат</h4> - -<p>{{EmbedLiveSample('Decorative_example', 450, 60)}}</p> - -<h3 id="Список_завдань">Список завдань</h3> - -<p>В цьому прикладі ми створимо простий список завдань, використовуючи псевдо-елемент. Цей метод може часто використовуватись щоб додавати невеликі штрихи до UI щоб покращити user experience.</p> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html"><ul> - <li>Купити молоко</li> - <li>Вигуляти собаку</li> - <li>Вправи</li> - <li>Писати код</li> - <li>Грати музику</li> - <li>Відпочити</li> -</ul> -</pre> - -<h4 id="CSS_3">CSS</h4> - -<pre class="brush: css">li { - list-style-type: none; - position: relative; - margin: 2px; - padding: 0.5em 0.5em 0.5em 2em; - background: lightgrey; - font-family: sans-serif; -} - -li.done { - background: #CCFF99; -} - -li.done::before { - content: ''; - position: absolute; - border-color: #009933; - border-style: solid; - border-width: 0 0.3em 0.25em 0; - height: 1em; - top: 1.3em; - left: 0.6em; - margin-top: -1em; - transform: rotate(45deg); - width: 0.5em; -}</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">var list = document.querySelector('ul'); -list.addEventListener('click', function(ev) { - if (ev.target.tagName === 'LI') { - ev.target.classList.toggle('done'); - } -}, false); -</pre> - -<p>Вище - код живого прикладу. Відмітьте, що ми не використовуємо іконки, а галочкою являється псевдо-елемент <code>::before</code> які стилізовані за допомогою CSS.</p> - -<h4 id="Результат_3">Результат</h4> - -<p>{{EmbedLiveSample('To-do_list', 400, 300)}}</p> - -<h2 id="Нотатки">Нотатки</h2> - -<p>Також виправлення позиціонування в Firefox 3.5 не дозволяють вмісту бути згенерованим як окремий попередній елемент (відповідно до <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">специфікації CSS</a> "Псевдо-елемент :before і :after впливають на інші блоки так як вони були б справжніми елементами"), Вони можуть використовуватись, щоб впроваджувати незначні поліпшення для не табличних розміток. (наприклад, щоб досягти центрування) в випадку доки вміст, що має центруватись поміщений в дочірній наступний , колонка до і після контенту може бути представлена без додавання попереднього чи наступного сусіднього блоку (наприклад, це, можливо, найбільш семантично правильніше, додавати допоміжний span як нижче, чим додавати <div/> перед і після). (І завжди пам'ятайте додавати ширину до float об'єкта, інакше він не буде обтікати!)</p> - -<h4 id="HTML_4">HTML</h4> - -<pre class="brush: html"><div class="example"> -<span id="floatme">"Floated Before" має згенеруватись ліворуч від -вікна перегляду і не виносити за межі рядка на потік нижче. Аналогічно -"Floated After" має з'являтись праворуч</span> -</div></pre> - -<h4 id="CSS_4">CSS</h4> - -<pre class="brush: css">#floatme { float: left; width: 50%; } - -/* Щоб отримати пусту колонку просто позначте в hex коді - нерозривний пробіл: \a0 у якості контенту -(Використовуйте \0000a0 коли іде після такого символа як пробіл ) -*/ -.example::before { - content: "Floated Before"; - float: left; - width: 25%; -} -.example::after { - content: "Floated After"; - float: right; - width: 25%; -} - -/* For styling */ -.example::before, .example::after { - background: yellow; - color: red; -}</pre> - -<h4 id="Результат_4">Результат</h4> - -<p>{{EmbedLiveSample("Notes")}}</p> - -<h2 id="Специфікація">Специфікація</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td> - <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> - <td>No significant changes to the previous specification.</td> - </tr> - <tr> - <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td> - <td>{{Spec2("CSS3 Transitions")}}</td> - <td>Allows transitions on properties defined on pseudo-elements.</td> - </tr> - <tr> - <td>{{Specname("CSS3 Animations", "", "")}}</td> - <td>{{Spec2("CSS3 Animations")}}</td> - <td>Allows animations on properties defined on pseudo-elements.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Introduces the two-colon syntax.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Initial definition, using the one-colon syntax</td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_браузерів">Підтримка браузерів</h2> - -<div> -<div class="hidden">Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлінть нам pull request.</div> - -<p>{{Compat("css.selectors.before")}}</p> -</div> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{Cssxref("::after")}}</li> - <li>{{Cssxref("content")}}</li> -</ul> |