1 Востаннє редагувалося Betterthanyou (09.02.2017 14:14:53)

Тема: Важливість селекторів

Я створив простий демонстраційний код, важливості селекторів, на основі Основи Web UI розробки.

Якщо вам потрібно, то ось

<!DOCTYPE html>
<html>
    <head>
        <title>The important of the selector</title>
        <link charset="UTF-8"/>
        
        <!--Begin debugging-->
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
        <meta http-equiv="Pragma" content="no-cache"/>
        <meta http-equiv="Expires" content="0"/>
        <!--End debugging-->
        
        <style type="text/css">
            p {
                color: Fuchsia;
            }
            .classStyle {
                color: Lime;
            }
            #idStyle {
                color: Red;
            }
            .classStyleImportant{
                color: Teal !important;
            }
        </style>
    </head>
    <body>
        <dl>
            <dt>Color styles</dt>
                <dd>
                    <table>
                        <thead>
                            <tr>
                                <th>Style type</th>
                                <th>Color</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Browser default style - </td>
                            <td><font color="Black">Black</font></td>
                        </tr>
                        <tr>
                            <td>Tag style - </td>
                            <td><font color="Fuchsia">Fuchsia</font></td>
                        </tr>
                        <tr>
                            <td>Class/pseudo, class/attribute - </td>
                            <td><font color="Lime">Lime</font></td>
                        </tr>
                        <tr>
                            <td>ID style - </td>
                            <td><font color="Red">Red</font></td>
                        </tr>
                        <tr>
                            <td>inline-style - </td>
                            <td><font color="Blue">Blue</font></td>
                        </tr>
                        <tr>
                            <td>Important style - </td>
                            <td><font color="Teal">Teal</font></td>
                        </tr>
                        </tbody>
                    </table>
                </dd>
            <dt>Demonstration</dt>
                <dd>
                    <p>It is browser default style. Its importance is equal to zero. +0<p>
                    <p>It is tag style. Its importance is equal to one. +1<p>
                    <p class="classStyle">It is class/pseudo, class/attribute. Its importance is equal to ten. +10<p>
                    <p class="classStyle" id="idStyle">It is ID style. Its importance is equal to hundred. +100<p>
                    <p class="classStyle" id="idStyle" style="color: Blue;">It is inline-style. Its importance is equal to thousand. +1000<p>
                    <p class="classStyleImportant" id="idStyle" style="color: Blue;">It is important style. Its importance is equal to infinity. +∞<p>
                </dd>
        </dl>
    </body>
</html>

Від найменш важливих до найбільш

Всі дефолтні (браузерні)
Всі теги
Всі класи, псевдокласи, атрибути
Всі ідентифікатори
Всі вбудовані стилі
І найважливіші !important

До параграфів додано попередні стилі для демонстрації пріоритетності.

Подякували: 221VOLT1

2

Re: Важливість селекторів

ви маєте на увазі --
http://everstudent.ru/blog/htmlcss/30-c … -memorize/
та
https://css-tricks.com/specifics-on-css-specificity/
? тобто які бувають та з якою вагою?

ще є
http://cssreference.io/

Подякували: Betterthanyou1

3 Востаннє редагувалося Betterthanyou (09.02.2017 00:14:27)

Re: Важливість селекторів

221VOLT написав:

ви маєте на увазі

Це демонстрація порядку виконання стилів, поділ їх на:

(Від найменш важливих до найбільш)

Всі дефолтні (браузерні)
Всі теги
Всі класи, псевдокласи, атрибути
Всі ідентифікатори
Всі вбудовані стилі
І найважливіші !important
(Дописав у тему, щоб було зрозуміліше)

4

Re: Важливість селекторів

Betterthanyou написав:
221VOLT написав:

ви маєте на увазі

Це демонстрація порядку виконання стилів, поділ їх на:

(Від найменш важливих до найбільш)

Всі дефолтні (браузерні)
Всі теги
Всі класи, псевдокласи, атрибути
Всі ідентифікатори
Всі вбудовані стилі
І найважливіші !important
(Дописав у тему, щоб було зрозуміліше)

є ще інлайн

і отак дуже не добре вчити людей

<p class="classStyleImportant" id="idStyle" style="color: Blue;">
Подякували: 221VOLT, Betterthanyou2

5 Востаннє редагувалося Betterthanyou (09.02.2017 15:51:30)

Re: Важливість селекторів

Key написав:
Betterthanyou написав:
221VOLT написав:

ви маєте на увазі

Це демонстрація порядку виконання стилів, поділ їх на:

(Від найменш важливих до найбільш)

Всі дефолтні (браузерні)
Всі теги
Всі класи, псевдокласи, атрибути
Всі ідентифікатори
Всі вбудовані стилі
І найважливіші !important
(Дописав у тему, щоб було зрозуміліше)

є ще інлайн

Я ж писав про інлайн (вони же вбудовані).

Key написав:

і отак дуже не добре вчити людей

<p class="classStyleImportant" id="idStyle" style="color: Blue;">

В не правильно зрозуміли що я цим хотів сказати.

Я спеціально до кожного нового параграфу додавав попередні стилі, щоб продемонструвати що попередні стилі не виконуються якщо застосувати більш пріоритетніші.

(Якщо би я до кожного параграфу застосовував тільки один стиль, то можна біло б засумніватися - чи справді тут правильна пріоритетність)

(Вже дописав)

Подякували: 221VOLT1

6

Re: Важливість селекторів

Betterthanyou написав:
221VOLT написав:

ви маєте на увазі

Це демонстрація порядку виконання стилів, поділ їх на:

(Від найменш важливих до найбільш)

Всі дефолтні (браузерні)
Всі теги
Всі класи, псевдокласи, атрибути
Всі ідентифікатори
Всі вбудовані стилі
І найважливіші !important
(Дописав у тему, щоб було зрозуміліше)

еге, і на css-tricks у статті доволі доступно пояснено)
ви можете зробити переклад, якщо хочете (мені - лінь))) )

Подякували: Betterthanyou1

7 Востаннє редагувалося Betterthanyou (09.02.2017 14:02:24)

Re: Важливість селекторів

221VOLT написав:

еге, і на css-tricks у статті доволі доступно пояснено)
ви можете зробити переклад, якщо хочете (мені - лінь))) )

Мені не лінь, але й часу зараз немає. (можливо потім)
Я ще викладу (сьогодні якщо встигну) свій список "Базовий CSS", коли я проходив кури, я його склав щоб нічого не забути.

8

Re: Важливість селекторів

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