Приклад коментування CSS - Як коментувати CSS

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

Як одно-, так і багаторядкові коментарі в CSS починаються /*і закінчуються */, і ви можете додати скільки завгодно коментарів у свою таблицю стилів. Наприклад:

/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */

Ви також можете зробити свої коментарі більш читабельними, стилізуючи їх:

/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */

Організація CSS з коментарями

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

/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/

Трохи більше про CSS: Синтаксис та селектори CSS

Коли ми говоримо про синтаксис CSS, ми говоримо про те, як все викладено. Існують правила щодо того, куди йдеться, і для того, щоб ви могли писати CSS послідовно, а програма (наприклад, браузер) могла його інтерпретувати та правильно застосувати до сторінки.

Існує два основних способи написання CSS.

Вбудований CSS

Особливості специфіки CSS: Хитрості CSS

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

Щоб застосувати вбудований CSS, додайте атрибут “style” до елемента HTML, який ви хочете змінити. Всередині лапок включайте список пар ключів / значень, розділених крапкою з комою (кожна, у свою чергу, розділена двокрапкою), із зазначенням стилів, які потрібно встановити.

Ось приклад вбудованого CSS. Слова "Один" і "Два" матимуть колір тла жовтим, а текст - червоним. Слово "Три" має новий стиль, який замінює перший, і матиме колір тла зелений та колір тексту блакитного кольору. У цьому прикладі ми застосовуємо стилі до тегів, але ви можете застосувати стиль до будь-якого елемента HTML.

 One Two Three 

Внутрішній CSS

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

Внутрішній CSS має свої стилі, зазначені в тезі, і він вбудований у тег.

Ось приклад, який має подібний ефект, як приклад “вбудований” вище, за винятком того, що CSS було витягнуто до власної області. Слова "Один" і "Два" будуть відповідати divселектору і будуть червоним текстом на жовтому фоні. Слова "Три" та "Чотири" також відповідатимуть divселектору, але вони також відповідають .nested_divселектору, який застосовується до будь-якого елемента HTML, який посилається на цей клас. Цей більш конкретний селектор замінює перший, і вони в кінцевому підсумку відображаються у вигляді блакитного тексту на зеленому тлі.

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

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

Ось приклад, коли ми вказуємо стиль, який слід застосовувати лише до divелементів, які є безпосереднім нащадком інших divелементів. В результаті «Два» та «Три» відображатимуться як червоний текст на жовтому фоні, але «Один» та «Чотири» залишаться незмінними (і, швидше за все, чорний текст на білому тлі).

 div > div { color: red; background: yellow; } One Two Three Four 

Зовнішній CSS

Всі стилі мають свій власний документ, на який посилається тег. Розширення зв’язаного файлу:.css