CSS (каскадные таблицы стилей) — это набор правил, обычно описываемых на отдельной от html странице, по которым браузер стилизует все элементы.
- также браузеры имеют набор базовых правил (для отображения на случай отсутствия оных)
Как править CSS[]
Чтобы узнать, какие правила применены к элементу, щелкните на нем правой кнопкой мыши и выберите «Исследовать элемент» (обычно самый последний пункт в контекстном меню). Появится панель или окно «Инструменты разработчика» (также вызываемые по нажатию Ctrl + Shift + I) с открытой вкладкой Elements. Слева-в центре перечислены все тэги html-страницы, справа же ─ стили, подсчитанные значения и другие параметры.
Выбрать другой элемент можно кликнув по тэгу в представлении html-страницы или «выбором элемента» (Ctrl + Shift + C) ─ кликом по иконке курсора в квадрате и последующим кликом на элементе
- при этом элемент и его отступы будут подсвечены синим и зеленым соответственно, а оранжевым — отступы
- при клике на + инспектор элементов автоматически добавит к элементу правило, к которому можно будет применить стили
Также для удобства можно воспользоваться расширением w:c:dev:PortableCSSPad ─ оно позволит хранить все применённые/измененные стили в одном месте.
(тогда как в инспекторе придется помнить, где вы правили стили и переключаться между различными элементами, либо же воспользоваться закладкой Sources и постоянно переключаться с неё на Elements)
Форма записи[]
Правила записываются в виде: селектор {правила}, где правила представляют собой пары свойство:значение; через ;
body {color:white;}
.WikiaPage {color:black;}
а {color:#963;}
- в примере выше задается цвет текста для тела страницы белым, черным непосредственно для элементов вики-страницы и коричневым для всех ссылок
В CSS для удобочитаемости и особенно при наличии нескольких правил и селекторов принято записывать их с переносом строки и 2-х пробельным отступом: (также предпочтительно в алфавитном порядке)
body,
.WikiaPage,
а {
color:green;
font-size: 16px;
line-height: 1.5;
}
- но это не строго обязательно, особенно в случае простых правил
Обратите внимание, что один и тот же набор правил (или правило) может быть применено к нескольким элементам, чьи селекторы записаны через ,
Комментарии[]
Также в CSS применяются комментарии для группировки правил и подсказок при чтении:
(каждое отдельное свойство описано только для примера)
/* Общие правила */
/** Параметры текста **/
body,
.WikiaPage,
а {
color:green; /*цвет текста*/
font-size: 16px; /*размер шрифта*/
line-height: 1.5;/*высота строки*/
}