CSS для Початківців

Sun 27 October 2024

Як це працює разом

Більшість з вас повинні бути готові до HTML, подібної до тої, що я зробив в кінці мого керівництва по HTML для початківців. Лише рядок коду з посиланням на CSS-файл повинен бути доданий в ваш HTML-документ.

Код, представлений нижче, включає всі CSS-техніки, які були описані в цій секції керівництва. Ви можете зберегти його як CSS-стиль, поглянути, як працюють усі властивості в HTML-файлі і перевірити, як саме вони були застосовані в таблиці стилів. На мою думку, найкращий підхід до розуміння засобів CSS полягає в роботі з реальними файлами, коли ви бачите, що відбувається, якщо змінити ті чи інші речі.

    
            01
            body 
        
            02
                font-family: arial, helvetica, sans-serif;
        
            03
                font-size: 80%;
        
            04
                color: black;
        
            05
                background-color: #ffc;
        
            06
                margin: 1em;
        
            07
                padding: 0;
        
            08
            
            09
             
            10
            /* До речі, це коментар */
        
            11
             
            12
            p 
        
            13
                line-height: 1.5em;
        
            14
            
            15
             
            16
            h1 
        
            17
                color: #ffc;
        
            18
                background-color: #900;
        
            19
                font-size: 2em;
        
            20
                margin: 0;
        
            21
                margin-bottom: 0.5em;
        
            22
                padding: 0.25em;
        
            23
                font-style: italic;
        
            24
                text-align: center;
        
            25
                letter-spacing: 0.5em;
        
            26
                border-bottom-style: solid;
        
            27
                border-bottom-width: 0.5em;
        
            28
                border-bottom-color: #c00;
        
            29
            
            30
             
            31
            h2 
        
            32
                color: white;
        
            33
                background-color: #090;
        
            34
                font-size: 1.5em;
        
            35
                margin: 0;
        
            36
                padding: 0.1em;
        
            37
                padding-left: 1em;
        
            38
            
            39
             
            40
            h3 
        
            41
                color: #999;
        
            42
                font-size: 1.25em;
        
            43
            
            44
             
            45
            img 
        
            46
                border-style: dashed;
        
            47
                border-width: 2px;
        
            48
                border-color: #ccc;
        
            49
            
            50
             
            51
            a 
        
            52
                text-decoration: none;
        
            53
            
            54
             
            55
            strong 
        
            56
                font-style: italic;
        
            57
                text-transform: uppercase;
        
            58
            
            59
             
            60
            li 
        
            61
                color: #900;
        
            62
                font-style: italic;
        
            63
            
            64
             
            65
            table 
        
            66
                background-color: #ccc;
        
            67

Thu 25 October 2012

Керівництво по CSS для початківців

Як і у випадку з «Керівництвом по HTML для початківців», «Керівництво по CSS для початківців» базується на припущенні, що ваше знання CSS не більше того, що вам відомо про вплив морських відливів на хімічні процеси мозку головоногих молюсків. Призначення цього керівництва полягає в тому, щоб навчити основам . Проміжне і Просунуте керівництва по CSS містять більш докладні відомості про каскадні таблиці стилів.

CSS, або каскадні таблиці стилів, – це те, як HTML представлений. Точно так само як HTML описує контент, таблиці стилів визначають, як документ виглядає.

Стилі не нагадують структуру HTML. Вони використовують формат “властивість: значення” і велика частина властивостей може використовуватися для більшості HTML-тегів.

Зміст

Застосування CSS – Як застосувати CSS до HTML.
Селектори, Властивості і значення – Елементи CSS.
Кольори – Використання кольору.
Текст – Маніпуляція з розміром і формою тексту.
Margins і Padding – Розставляємо речі по місцях.
Межі
Кладемо все разом – Готуємо гостру страву із цих інгредієнтів.

Wed 24 October 2012

Переваги каскадних таблиць стилів (CSS)

Несхвалення більшості елементів форматування HTML, які використовувалися в HTML 4.0, означає, що навіть якщо браузери як і раніше підтримують їх, відповідно до рекомендації Консорціуму W3C вони не повинні більше використовуватися. Веб-дизайнерам рекомендується використовувати CSS (Cascading Style Sheets – каскадні таблиці стилів).

Головні переваги CSS:

Більш чистий код
- Цей код легше підтримувати
- Він швидше завантажується
- Він краще оптимізований для пошукових систем
Модульний код
- Правила стилю можуть застосовуватися до безлічі сторінок
- Однаковий дизайн
- Код легше підтримувати
Сила дизайну
- Точність контролю (позиціонування, розмір, поля та ін)
Поділ праці
- Завдання розробника – розробляти, завдання дизайнера – створювати дизайн
Краще доступність
- Теги більше не використовуються не за призначенням (наприклад, <blockquote> для форматування)
- Немає необхідності в позиціонуванні невидимих картинок
- Користувачі можуть переписувати стильові таблиці автора

Правила CSS

Правила CSS містять визначення стилю елемента або групи елементів. Вони використовують наступний синтаксис:

селектор властивість:значення; властивість:значення; властивість:значення;

Всі пари властивість:значення є деклараціями. Множинні (складові) декларації розділяються крапкою з комою. Селектор визначає елементи, на які впливають правила. Давайте розглянемо наступне правило:

    
            1
            p 
        
            2
             color:darkgreen;
        
            3
             font-family:Verdana;
        
            4
             font-size:10pt
        
            5

Це правило визначає, що текст у всіх параграфах повинен бути темно-зеленого кольору, розмір тексту повинен бути 10 точок, а в якості шрифту можна використовувати шрифт Verdana.

Коментарі в CSS

Коментарі в CSS починаються з «/*» і закінчуються «*/». Погляньте на цей приклад:

    
            1
            p 
        
            2
            color:red; /* Текст у всіх параграфах повинен бути червоного кольору */
        
            3

Tue 23 October 2012

Специфіка

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

Це може здатися не таким вже і важливим, і в більшості випадків такі конфлікти ніяк не виявляються. Але в міру того, як CSS файли ростуть у розмірі та складності, ви почнете працювати з декількома окремими CSS-файлами. І тоді ризик появи конфліктів збільшується значно.

Якщо два селектора ідентичні, тоді завжди пріоритет отримає останній з них. Наприклад, у вас є:

    
            1
            p  color: red; 
        
            2
            p  color: blue;

Елемент p завжди буде синього кольору, тому що відповідне правило зазначено останнім.

Тим не менше, люди зазвичай не використовують ідентичні і конфліктуючі селектори спеціально (тому що це безглуздо). Конфлікти цілком можуть з’явитися, коли у вас є вкладені селектори. Розгляньте наступний приклад:

    
            1
            div p  color: red; 
        
            2
            p  color: blue;

Виглядає так, ніби елементи p в межах елементу div будуть показані синім кольором, тому що правило, яке встановлює колір p, зазначено останнім. Однак насправді вони будуть показані червоним кольором через специфічність першого селектора. Говорячи простою мовою, пріоритет у конфліктних ситуаціях збільшується разом зі специфікою селектора.

Справжня специфіка групи вкладених елементів вимагає обчислень. По суті, ви прирівнюєте кожен селектор id (“#anything”) до значення 100, кожен селектор class (“.anything”) до 10, а кожен селектор HTML (“anything”) до 1. Потім ви складаєте їх значення, а загальний результат і буде вашим значенням специфіки.

p має специфіку 1 (1 HTML селектор)
div p має специфіку 2 (2 HTML селектора; 1 +1)
.tree має специфіку 10 (1 селектор class)
div p.tree має специфіку 12 (2 HTML селектора і 1 селектор class; 1 +1 +10)
#baobab має специфіку 100 (1 селектор id)
body #content .alternative p має специфіку 112 (HTML селектор, id селектор, class селектор, HTML селектор, 1 +100 +10 +1)

Таким чином, у разі, якщо всі ці приклади будуть використані, div p.tree (зі специфікою 12) буде більш специфічний, ніж div p (зі специфікою 2), а body #content .alternative p буде більш специфічний, ніж всі вони, незалежно від порядку.

Mon 22 October 2012

Фонові зображення

Передбачено кілька властивостей, які використовуються для маніпуляції фоновими зображеннями. На щастя властивість background використовується з усіма ними.

    
            1
            body 
        
            2
                background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
        
            3

Це включає в себе наступні властивості:

background-color, з яким ми стикалися раніше.
background-image, яке представляє собою місцезнаходження самого зображення.
background-repeat, яке вказує, як зображення повторюється. Це може бути repeat — фактично еквівалент ефекту «мозаїки» по всьому фону; repeat-y — зображення повторюється по координатній осі Y, тобто зверху і знизу; repeat-x — зображення повторюється по координатній осі X, тобто слідує одне за одним зліва на право; no-repeat — зображення показується тільки один раз і не повторюється.
background-position, показує розташування зображення. Це може бути top (зверху), center (по центру), bottom (знизу), left (ліворуч), right (праворуч) або будь-яка розсудлива їх комбінація.

Фонові зображення можуть використовуватися для більшості елементів HTML, а не тільки для сторінки повністю (body). Фонові зображення можуть використовуватися і для простих, але ефективних рішень – наприклад, для створення закруглених куточків.

Легко захопитися технікою фонових зображень і почати розміщувати їх по всій сторінці. Деякі візуально гіперактивні люди впевнені, що сторінка виглядає добре, коли яскраві кольорові фотографії накладаються одна на одну по всьому фону веб-сторінки, примушуючи користувача «розгадувати» текст на передньому плані. Це, звичайно ж, екстремальний приклад. Але факт полягає в тому, що найбільш дружній до користувача легкий для читання текст, набраний чорним кольором на білому фоні або білим кольором на простому чорному фоні (є також пропозиції злегка приглушати білий і чорний фон, щоб знизити відблиски).

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

Sun 21 October 2012

Ет-правила CSS

Прим. перекладача: англійською мовою знак “@” вимовляють як “Ет”. Ет-правила CSS починаються зі знака “@” і тому так називаються

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

Імпортування

Ет-правило import приєднує іншу таблицю стилів. Припустимо, ви хочете додати стилі з іншої таблиці стилів до вже існуючої. У цьому випадку, ви швидше за все зробите так:

    
            1
            @import url(addonstyles.css);

Ця конструкція часто використовується в місці, де елемент link посилається на CSS файл HTML-сторінки, маючи при цьому внутрішню таблицю стилів, яка виглядає приблизно так:

    
            1
            <style type="text/css" media="all">@import url(monkey.css);</style>

Перевага цього підходу полягає в тому, що старі браузери, такі як Netscape, не здогадуються про ет-правила і, відповідно, не будуть посилатися на таблицю стилів. У результаті, якщо у вас є документ з хорошою розміткою тексту, він збереже працюючий простий HTML, хоча і не стилізований.

Медіа-типи

Ет-правило media застосує вміст до певного типу медіа, наприклад, до друку:

    
            1
            @media print 
        
            2
                body 
        
            3
                    font-size: 10pt;
        
            4
                    font-family: times new roman, times, serif;
        
            5
                
            6
                #navigation 
        
            7
                    display: none;
        
            8
                
            9

Можливі типи медіа:

all – правила CSS застосовуються до всіх можливих типів медіа
aural – для мовних синтезаторів.
handheld – для портативних пристроїв.
print – для принтерів.
projection – для проекторів.
screen – для дисплеїв комп’ютерів.

Ви також можете використовувати такі типи медіа: braille, embossed, tty і tv.

Примітка: не дивлячись на все вищесказане, браузер IE підтримує всього декілька медіа-типів – all, screen і print.

Кодування

Ет-правило charset просто встановлює кодування зовнішньої таблиці стилів. Правило вказується у верхній частині таблиці CSS і виглядає приблизно так:

    
            1
            @charset "ISO-8859-1";

Шрифтовий комплект (font-face)

Ет-правило font-face використовується для детального опису шрифту і може використовуватися для впровадження зовнішнього шрифту в ваш CSS. Правило вимагає наявності описувача font-family, до якого шрифт може відсилати й значенням якого може бути ім’я поточного шрифту або повністю нове ім’я. Щоб впровадити шрифт, використовують описувач drc. Інші описувачі, додані до ет-правила font-face, стають умовами для шрифту, який використовується. Наприклад, якщо ви додали стиль font-weight:bold в ет-правило, описувач src властивості font-family буде застосовуватися до селектора з властивістю font-family, якщо властивістю font-weight буде bold.

Ви можете використовувати схоже ет-правило font-face:

    
            1
            @font-face 
        
            2
                font-family: somerandomfontname;
        
            3
                src: url(somefont.eot);
        
            4
                font-weight: bold;
        
            5
             
            6
            p 
        
            7
                font-family: somerandomfontname;
        
            8
                font-weight: bold;
        
            9

Це правило застосує шрифт somefont.eot до параграфів (за винятком випадків, коли для селектора p не встановлено font-weight: bold).

Підтримка впроваджуваних шрифтів дуже уривчаста. Браузери на основі коду Mozilla не підтримують їх і не мають найближчим часом таких планів. Тільки Internet Explorer, схоже, має певний ступінь підтримки. Щоб впроваджувати шрифти з IE, вам потрібно буде використовувати додаток Microsoft http://www.microsoft.com/typography/web/embedding/weft3/default.htm style="background:transparent;border:0px;margin:0px;padding:0px;vertical-align:baseline;color:rgb(0,102,204);" target="_blank">WEFT, який конвертує символи формату TrueType у формат OpenType (і потім ними можна скористатися тільки за певним вашим посиланням). Через обмеження (і складності) сумісності, рекомендується не використовувати шрифти, які не мають адекватної альтернативи серед системних шрифтів.

Сторінки

Ет-правило page регулює посторінкові медіа і є просунутим способом застосовувати стилі до друкованих медіа. Це правило визначає блок сторінки, який розширюється на блоковій моделі (box model, докладніше див Margins і Padding). Завдяки цьому правилу ви визначаєте розмір і подання єдиної сторінки.

Існує кілька угод, які застосовуються до ет-правила page: не повинно бути полів чи рамок; стиль створюється не для показу на екрані комп’ютера, тому не допускається використання в якості одиниць вимірювань пікселів (точок) і em.

Існує кілька певних властивостей, які можуть використовуватися. Наприклад, size може приймати значення portrait, landscape, auto або length. Властивість marks використовується для визначення мітки кадрування:

    
            1
            @page 
        
            2
                size: 15cm 20cm;
        
            3
                margin: 3cm;
        
            4
                marks: cross;
        
            5

Псевдокласи для посторінкових медіа

Існує три псевдокласи, які використовуються спеціально в зв’язці з ет-правилом page. Виглядає їх використання наступним чином:

    
            1
            @page :pseudo-class stuff .

:first — цей псевдоклас застосовується до першої сторінки посторінкових медіа.

:left та :right застосовуються для лівих і правих сторінок відповідно. Може використовуватися для вказівки великих полів зліва при друці лівої сторінки і праворуч – при друці правої сторінки.

Є й ряд інших особливостей ет-правила page, такі як перехід на нову сторінку, найменування сторінок, але враховуючи, що це ет-правило з труднощами працює в будь-якому з браузерів, ви можливо і так витратили достатньо часу на читання цієї частини. Хоча ідея непогана.

Sun 21 October 2012

Класи та ідентифікатори

В Керівництві з CSS для початківців ми аналізували тільки селектори HTML – ті, що представляють HTML-тег. Ви можете також задавати свої власні селектори, які можуть приймати форму класів та ідентифікаторів.

Перевага такого підходу полягає в тому, що ви отримуєте один і той же елемент HTML, але уявляєте його різними способами в залежності від його класу або ідентифікатора.

У CSS селектор класу позначають іменем, яке слідує за точкою (.). Ідентифікатор позначають іменем, яке слідує за знаком решітки (#).

Таким чином CSS може нагадувати наступний код:

    
            1
            #top 
        
            2
                background-color: #ccc;
        
            3
                padding: 1em
        
            4
             
            5
             
            6
            .intro 
        
            7
                color: red;
        
            8
                font-weight: bold;
        
            9

HTML робить відсилання до стилю CSS значеннями атрибутів id і class. Наприклад:


<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>

Різниця між ідентифікатором id і класом полягає в тому, що ідентифікатор може застосовуватися для визначення одного елемента, а клас може використовуватися для визначення декількох елементів.

На додаток ви можете використовувати селектор для певного елемента HTML, просто вказавши спочатку HTML-селектор. Наприклад p.jam якийсь стиль буде застосовуватися для елементів параграфів, у яких є клас “jam”.

Sat 20 October 2012

CSS межі

Ви можете використовувати межі (рамки), застосовуючи їх до більшості елементів HTML в межах сторінки. Все, що вам потрібно, щоб зробити межу навколо елементу – це border-style. Можливі значення, які можна застосовувати: solid (тонка межа), dotted (межа складається з точок, пунктир), dashed (межа складається з коротких відрізків), double (подвійна), groove (ефект поглиблення), ridge (ефект крайки), inset (ефект врізання) і outset (ефект піднесення).

border-width використовується для вказівки ширини межі, яка вимірюється у пікселях. У числі інших властивостей: border-top-width, border-right-width, border-bottom-width та border-left-width.

І, нарешті, border-color використовують для вказівки кольору межі.

Додайте цей код в CSS-файл:

    
            1
            h2 
        
            2
                border-style: dashed;
        
            3
                border-width: 3px;
        
            4
                border-left-width: 10px;
        
            5
                border-right-width: 10px;
        
            6
                border-color: red;
        
            7

У результаті ви повинні отримати червону переривчасту межу навколо заголовка HTML другого рівня (елемент h2) шириною 3 пікселі зверху і знизу, а також 10 пікселів зліва і праворуч (Ширина усього кордону в 3 пікселі в результаті була визначена).

Fri 19 October 2012

Відносне позиціонування

Коли елементи позиційовані відносно, вони позиціонуються відносно того місця, де вони зазвичай з’являються в потоці. На відміну від абсолютно позиційованих елементів, відносно позиційовані елементи впливають на позиціонування наступних споріднених елементів (нащадків). Елементи позиціонуються відносно зазначенням властивості relative і вказівкою одного або декількох властивостей “зміщення”:

Приклад коду

    
            01
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        
            02
            <html xmlns="http://www.w3.org/1999/xhtml target="_blank">http://www.w3.org/1999/xhtml">
        
            03
            <head>
        
            04
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
            05
            <style type="text/css">
        
            06
            h1 
        
            07
            position:relative;
        
            08
            top:60px;
        
            09
            left:50px;
        
            10
            border:2px solid #006;
        
            11
            padding:1px;
        
            12
            background-color:#600;
        
            13
            color:#eee;
        
            14
             
            15
            #explanation 
        
            16
            color:#006;
        
            17
            font-weight:bold;
        
            18
            font-size:1.2em;
        
            19
             
            20
            #wrapper 
        
            21
            width:600px;
        
            22
            background-color:#def;
        
            23
            border:1px solid #006;
        
            24
             
            25
            </style>
        
            26
            <title>CSS Relative Positioning</title>
        
            27
            </head>
        
            28
            <body>
        
            29
            <div id="wrapper">
        
            30
            <h1>CSS Relative Positioning</h1>
        
            31
            <h2>From the Left and the Top</h2>
        
            32
            <div id="explanation">
        
            33
            <p>The h1 element on this page has been positioned relative to where it otherwise would be.</p>
        
            34
            <p>All other content on the page (including these sentences) will show up in the same position it would have if the h1 had not been positioned at all.</p>
        
            35
            </div>
        
            36
            </div>
        
            37
            </body>
        
            38
            </html>

Зверніть увагу як текст абзацу був би спозиційований, якби елемент h1 не був би переміщений зі свого початкового положення. Це сталося тому, що елемент h1 позиційований відносно

Подивимося, що станеться, якщо ми спозиціонуємо елемент h1 з правого нижнього кута, використовуючи відносне позиціонування як в цьому коді:

    
            1
            h1 
        
            2
             position:relative;
        
            3
             bottom:40px;
        
            4
             right:40px;
        
            5
             border:2px solid #006;
        
            6
             padding:1px;
        
            7
             background-color:#600;
        
            8
             color:#eee;
        
            9

Фіксоване позиціонування

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

У зазначеному нижче прикладі фіксоване позиціонування використовується для утримання знака «додому», який посилається на головну сторінку у верхньому лівому кутку.

Приклад коду

    
            01
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        
            02
            <html xmlns="http://www.w3.org/1999/xhtml target="_blank">http://www.w3.org/1999/xhtml">
        
            03
            <head>
        
            04
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
            05
            <style type="text/css">
        
            06
            #homeLink 
        
            07
            position:fixed;
        
            08
            top:20px;
        
            09
            left:0px;
        
            10
             
            11
            ---- Code Omitted ----
        
            12
             
            13
            </style>
        
            14
            <title>CSS Fixed Positioning</title>
        
            15
            </head>
        
            16
            <body>
        
            17
            <div id="wrapper">
        
            18
            <a href="l" id="homeLink"><img src="Images/littleHome.png" alt="Home"></a>
        
            19
            <h1>CSS Fixed</h1>
        
            20
            <h2>In Upper-Left Corner</h2>
        
            21
            <div id="explanation">
        
            22
            <p>The h1 element on this page has fixed positioning.</p>
        
            23
            <p>It will not move from it's place in the upper-left corner when the window is scrolled.</p>
        
            24
            </div>
        
            25
            </div>
        
            26
            </body>
        
            27
            </html>

Thu 18 October 2012

Ієрархія селекторів

Групування

Коми, які поділяють селектори, дозволяють «розділяти» декларації між селекторами. Правило, яке продемонстровано нижче, вказує, що всі елементи i, елементи класу “warning” і елементи з ідентифікатором id “important” будуть підкреслені.

    
            1
            i, .warning, #important 
        
            2
             text-decoration: underline;
        
            3

Ієрархія селекторів

Якщо правила конфліктують:

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

Як визначається специфічність селектора

Припустимо, ваші селектори об’єднані в наступному порядку і ті, що нагорі мають найвищий рівень специфічності

Декларації в атрибутах стилю йдуть без селектора і володіють найвищим пріоритетом
Селектори з атрибутом ідентифікатора id (наприклад, h1 # foo ) є наступними по важливості в ієрархії
Селектори з іншими атрибутами (наприклад, h1.foo і a [target]) або псевдокласи (наприклад, a: hover) розміщуються наступними в ієрархії найбільш важливих
Селектори без інших атрибутів крім імені елемента (наприклад, h1) займають наступну сходинку в ієрархії найбільш важливих
Універсальний селектор (*) володіє найменшим пріоритетом

Для коректного визначення точного значення специфічності, пройдіть наступний процес:

Почніть зі значення 0.0.0.0
Якщо ви знайдете декларацію в атрибуті стилю, ви повинні змінити першу цифру на 1, що дасть вам 1.0.0.0. Тоді ви отримуєте найвище значення специфічності і необхідності в подальших розрахунках немає
Кожного разу, коли настає умова 2, додайте 1 до другої цифри. Наприклад, для ol # foo li # bar додайте 2 (1 за кожний id), що дає вам 0.2.0.0
Кожного разу як ви стикаєтеся з третім випадком, додайте одиницю до третьої цифри. Наприклад, для ol # foo li # bar a [target] додайте 1, що дає вам 0.2.1.0.
Кожного разу, коли виконується умова 4, додайте 1 до четвертої цифрі. Наприклад, для ol # foo li # bar a [target] додайте 3 (по одному за кожне ім’я елемента), що дає нам 0.2.1.3

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

Каскад

Правила стилю можуть визначатися веб-дизайнерами в трьох різних місцях:

У запровадженому стилі
У зовнішній таблиці стилів (на яку посилається HTML-файл або яка імпортується)
У рядку елемента

Впроваджені таблиці стилів

Впроваджені таблиці стилів можуть бути виявлені в елементі стилю у верхній частині HTML-сторінки. Наступний код демонструє приклад сторінки з вбудованою таблицею стилів:

Приклад коду

01