Эта статья предназначена для пользователей, которые еще очень мало знакомы с CSS, хотя, надеюсь, здесь найдется что-то для всех.
(1) Грамматика
Как и любой язык, в CSS есть определенная грамматика, и на первый взгляд это может показаться немного «компьютерной программой», но на самом деле это просто список вещей. Весь CSS написан так:
SELECTOR {НЕДВИЖИМОСТЬ: ЗНАЧЕНИЕ; СТОИМОСТЬ ИМУЩЕСТВА; СТОИМОСТЬ ИМУЩЕСТВА;}
Как вы, возможно, уже знаете, CSS работает, применяя стиль к выбранному элементу на веб-странице. Например, чтобы стилизовать отображение всех ваших ссылок, вы должны использовать «a» в качестве селектора. Различные свойства и значения вы узнаете с опытом, но некоторые из них просты — такие вещи, как COLOR, BORDER, FONT-SIZE, HEIGHT — все это возможные свойства, значения которых могут быть красными, 14pt, 150%, 1000px — это действительно так легко. Давайте посмотрим, как мы будем стилизовать все ссылки красным цветом:
{цвет: красный;}
Вы также можете использовать один и тот же блок CSS для одновременного использования нескольких типов элементов с запятыми:
a, h2, h3 {цвет: красный;}
Это делает не только все ссылки, но и все заголовки h2 и h3 одинаковым красным цветом. Обратите внимание, что все они могут быть разных размеров, так как этот конкретный кодовый блок ТОЛЬКО меняет цвет.
(2) Селекторы класса и идентификатора
Однако иногда вы не хотите стилизовать ВСЕ элементы a одинаково — и в этих случаях вы можете использовать CLASS или ID . Как правило, идентификатор используется для одноразовых элементов и чаще всего используется для определения больших блоков контента или отдельных специальных кнопок и тому подобного.
Например, у вас может быть большой DIV для блоков HEADER, CONTENT и FOOTER вашей страницы, поэтому их определение в качестве идентификаторов будет разумным шагом. С другой стороны, классы используются, когда элементы стиля могут повторяться по всей странице. Возможно, вы хотите, чтобы группа элементов имела закругленные углы со сплошной красной рамкой размером 2 пикселя — вместо того, чтобы миллион раз писать один и тот же встроенный стиль, вы должны определить класс для него и вместо этого присоединить класс к этим элементам. Итак, как вы определяете эти идентификаторы и классы?
<div id = "sidebar"> <h1> SIDEBAR </ h1> <div> <img src = ".." alt = "" class = "округленный в красный цвет" /> </ div> </ div>
Для нацеливания этих элементов в CSS вы должны использовать:
.red-округленный {// это класс
пограничный радиус: 5px;
рамка: 2px сплошная красная;
}
#sidebar {..} // это идентификатор
(3) Потомки
Вам не нужно прикреплять классы и идентификаторы ко всему в вашем документе — вы также можете использовать то, что мы называем DESCENDANTS, чтобы выбирать элементы. Посмотрите на это утверждение CSS и посмотрите, сможете ли вы выяснить, что оно делает:
#sidebar h1 {font-size: 20px;}
Это ПЕРВЫЙ найдет элемент с идентификатором «sidebar», ТОГДА сузит выбор до всех <h1>, содержащихся в нем, и применяет только стиль к ним.
Итак, если вы можете как-то сгруппировать все свои элементы вместе, лучше использовать селекторы-потомки, так как это даже меньше кода, чем добавлять кучу определений class = ”” ко всему.
(4) Где поместить этот CSS?
Лучший способ справиться с CSS — это полностью отделить его от вашего HTML. Создайте файл с именем .css и просто добавьте эту строку в заголовок HTML:
Вы также можете добавить блоки CSS в раздел между тегами, но я не предлагаю этот метод, так как он приводит к беспорядочным и трудным для чтения файлам HTML.
Третье место для добавления CSS — встроенное, но вы должны быть осторожны с этим. Все, что добавлено в строку, например:
<img style = "height: 150px;" src = ".." alt = "" />
автоматически переопределит все, что определено в вашем отдельном стиле. Таким образом, вы можете сидеть и пытаться отлаживать целую вечность, почему ваши миниатюры не меняются, а ваш CSS может быть идеальным — но если элемент IMG уже включает встроенные стили, тогда они будут иметь приоритет. Как вы знаете, если что-то еще влияет на это, хотя?
(5) Получите FireBug или используйте Chrome
FireBug — это удивительный инструмент разработки, который особенно полезен для выяснения того, как работает CSS. Найдите минутку, чтобы скачать его и быстро взгляните на него. FireBug доступен для Firefox как плагин, или если вы используете Chrome, то идентичный набор функций уже встроен. После того, как вы активировали плагин в Firefox или используете Chrome, просто щелкните правой кнопкой мыши в любом месте страницы и выберите « Проверить элемент ».
Это откроет новую панель в нижней части вашего браузера. С левой стороны вид XHTML, красиво отформатированный и складной. Если вы наведите курсор мыши на какой-либо элемент, он выделит этот элемент на странице и покажет вам блочную модель CSS вокруг него (мы поговорим подробнее о блочной модели на следующем уроке). Ключевым моментом здесь является то, что вы также можете выбрать любой элемент и точно увидеть, какой CSS воздействует на него с правой стороны, и он разбьет те, в которых селекторы вызвали это. Все добавленные строки будут отображаться под заголовком «element.style». Попробуйте сейчас на этой странице. Обратите внимание, что очень часто большая часть CSS, перечисленного справа, перечеркнута центральной линией — это означает, что другой селектор, работающий с этим элементом, имеет приоритет и переопределяет тот, который вычеркнут.
Вот и все на сегодня, но не стесняйтесь оставлять комментарии, если вы считаете, что я упустил некоторые фундаментальные ключевые моменты для начинающих, или если у вас есть какие-либо конкретные вопросы или проблемы с CSS, тогда задавайте их в разделе технической поддержки нашего сайта. В следующий раз я бы хотел расширить ваши знания CSS за пределы базовых изменений цвета и размера.