Пример за 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