CSS (каскадные таблицы стилей) - это набор правил, обычно описываемых на отдельной от html странице, по которым браузер стилизует все элементы.

  • также браузеры имеют набор базовых правил (для отображения на случай отсутствия оных)

Как править CSS

Google Chrome Inspect Example.png

Чтобы узнать, какие правила применены к элементу, щелкните на нем правой кнопкой мыши и выберите "Исследовать элемент" (обычно самый последний пункт в контекстном меню). Появится панель или окно "Инструменты разработчика" (также вызываемые по нажатию Ctrl + Shift + I) с открытой вкладкой Elements. Слева-в центре перечислены все тэги html-страницы, справа же ─ стили, подсчитанные значения и другие параметры.

Style Locations in Inspect Element.png

Выбрать другой элемент можно кликнув по тэгу в представлении html-страницы или "выбором элемента" (Ctrl + Shift + C) ─ кликом по иконке курсора в квадрате и последующим кликом на элементе

  • при этом элемент и его отступы будут подсвечены синим и зеленым соответственно, а оранжевым - отступы
    • при клике на + инспектор элементов автоматически добавит к элементу правило, к которому можно будет применить стили

350?cb=20121208104241

Также для удобства можно воспользоваться расширением 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;/*высота строки*/
}

См. также

Материалы сообщества доступны в соответствии с условиями лицензии CC-BY-SA, если не указано иное.