CSS для Чайников

Как и в случае с «Руководством по HTML для начинающих», «Руководство по CSS для начинающих» основано на предположении, что ваше знание CSS не больше того, что вам известно о влиянии морских отливов на химические процессы мозга головоногих моллюсков. Назначение этого руководства состоит в том, чтобы научить основам. Промежуточное и Продвинутое руководства по CSS содержат более подробные сведения о каскадных таблицах стилей.

CSS, или каскадные таблицы стилей, – это то, как HTML представлен. Точно также как HTML описывает контент, таблицы стилей определяют, как документ выглядит.

Стили не напоминают структуру HTML. Они используют формат «свойство: значение» и большая часть свойств может использоваться для большинства HTML-тегов.

Содержание

• Применение CSS – Как применить CSS к HTML.

• Селекторы, Свойства и значения – Элементы CSS.

• Цвета – Использование цвета.

• Текст – Манипуляция с размером и формой текста.

• Margins и Padding – Расставляем вещи по местам.

• Границы

• Кладем все вместе – Готовим острое блюдо из этих ингридиентов.

Неодобрение большинства элементов форматирования HTML, которые использовались в HTML 4.0, означает, что даже если браузеры по-прежнему поддерживают их, согласно рекомендации Консорциума W3C они не должны больше использоваться. Веб-дизайнерам рекомендуется использовать CSS (Cascading Style Sheets — каскадные таблицы стилей).

Главные преимущества CSS:

1. Более чистый код

   • Этот код легче поддерживать

   • Он быстрее загружается

   • Он лучше оптимизирован для поисковых систем

2. Модульный код

   • Правила стиля могут применяться ко множеству страниц

   • Единообразный дизайн

   • Код легче поддерживать

3. Сила дизайна

   • Точность контроля (позиционирование, размер, поля и др.)

4. Разделение труда

   • Задача разработчика — разрабатывать, задача дизайнера — создавать дизайн

5. Лучше доступность

   • Теги больше не используются не по назначению (например, <blockquote> для форматирования)

   • Нет необходимости в позиционировании невидимых картинок

   • Пользователи могут переписывать стилевые таблицы автора

Правила CSS

Правила CSS содержат определения стиля элемента или группы элементов. Они используют следующий синтаксис:

селектор свойство:значение; свойство:значение; свойство:значение;

Все пары свойство:значение являются декларациями. Множественные (составные) декларации разделяются точкой с запятой. Селектор определяет элементы, на которые воздействуют правила. Давайте рассмотрим следующее правило:

 

 

 

 

Это правило определяет, что текст во всех параграфах должен быть темно-зеленого цвета, размер текста должен быть 10 точек, а в качестве шрифта можно использовать шрифт Verdana.

Комментарии в CSS

Комментарии в CSS начинаются с «/*» и заканчиваются «*/». Взгляните на этот пример:

 

 

 

В случаях, когда два и более правила CSS конфликтуют друг с другом относительно одного и того же элемента, браузер следует набору правил, которые позволяют определить приоритет CSS правила.

Это может показаться не таким уж и важным, и в большинстве случаев такие конфликты никак не проявляются. Но по мере того, как CSS файлы растут в размере и сложности, вы начнете работать с несколькими отдельными CSS-файлами. И тогда риск появления конфликтов увеличивается значительно.

Если два селектора идентичны, тогда всегда приоритет получит последний из них. Например, у вас есть:

 

Элемент p всегда будет синего цвета, т.к. соответствующее правило указано последним.

Тем не менее, люди обычно не используют идентичные и конфликтующие селекторы специально (потому что это бессмысленно). Конфликты вполне могут появиться, когда у вас есть вложенные селекторы. Рассмотрите следующий пример:

 

Выглядит так, будто элементы p в пределах элемента div будут показаны синим цветом, потому что правило, которое устанавливает цвет p, указано последним. Однако на самом деле они будут показаны красным цветом из-за специфичности первого селектора. Говоря простым языком, приоритет в конфликтных ситуациях увеличивается вместе со спецификой селектора.

Настоящая специфика группы вложенных элементов требует вычислений. По существу, вы приравниваете каждый селектор id («#anything») к значению 100, каждый селектор class («.anything») к 10, а каждый селектор HTML («anything») к 1. Затем вы складываете их значения, а общий результат и будет вашим значением специфики.

• p имеет специфику 1 (1 HTML селектор)

• div p имеет специфику 2 (2 HTML селектора; 1+1)

• .tree имеет специфику 10 (1 селектор class)

• div p.tree имеет специфику 12 (2 HTML селектора и 1 селектор class; 1+1+10)

• #baobab имеет специфику 100 (1 селектор id)

• body #content .alternative p имеет специфику 112 (HTML селектор, id селектор, class селектор, HTML селектор; 1+100+10+1)

Таким образом, в случае, если все эти примеры будут использованы, div p.tree (со спецификой 12) будет более специфичен, чем div p (со спецификой 2), а body #content .alternative p будет более специфичем, чем все они, независимо от порядка.

Предусмотрено несколько свойств, которые используются для манипуляции фоновыми изображениями. К счастью свойство background используется со всеми ими.

 

 

Это включает в себя следующие свойства:

• background-color, с которым мы сталкивались прежде.

• background-image, которое представляет собой местонахождение самого изображения.

• background-repeat, которое указывает, как изображение повторяется. Это может быть repeat — фактически эквивалент эффекта «мозаики» по всему фону; repeat-y — изображение повторяется по координатной оси Y, т.е. сверху и снизу; repeat-x — изображение повторяется по координатной оси X, т.е. следует одно за другим слева на право; no-repeat — изображение показывается только один раз и не повторяется.

• background-position, показывает расположение изображения. Это может быть top (сверху), center (по центру), bottom (снизу), left (слева), right (справа) или любая благоразумная их комбинация.

Фоновые изображения могут использоваться для большинства элементов HTML, а не только для страницы целиком (body). Фоновые изображения могут использоваться и для простых, но эффективных решений — например, для создания закругленных уголков.

Легко увлечься техникой фоновых изображений и начать размещать их по всей странице. Некоторые визуально гиперактивные люди уверены, что страница выглядит хорошо, когда яркие цветные фотографии накладываются друг на друга по всему фону веб-страницы, заставляя пользователя «разгадывать» текст на переднем плане. Это, конечно же, экстремальный пример. Но факт состоит в том, что наиболее дружественен к пользователю легко читаемый текст, набранный черным цветом на белом фоне или белым цветом на простом черном фоне (есть также предложения слегка приглушать белый и черный фон, чтобы снизить блики).

Поэтому лучше использовать фоновые изображения там, где на верхнем слое не будет контента, либо делать фоновые изображения очень светлыми, что, кстати, может уменьшить вес файла изображения, потому что в этом случае задействовано меньше цветов (при условии, что вы применяете формат с индексированной палитрой цветов — например, GIF).

В Руководстве по CSS для новичков мы анализировали только селекторы HTML — те, что представляют HTML-тег. Вы можете также задавать свои собственные селекторы, которые могут принимать форму классов и идентификаторов.

Преимущество такого подхода состоит в том, что вы получаете один и тот же элемент HTML, но представляете его различными способами в зависимости от его класса или идентификатора.

В CSS селектор класса обозначают именем, которое следует за точкой (.). Идентификатор обозначают именем, которое следует за знаком решетки (#).

Таким образом CSS может напоминать следующий код:

 

 

 

 

 

 

 

 

HTML делает отсылку к стилю CSS значениями атрибутов id и class. Например:

 

<div id="top">

<h1>Chocolate curry</h1>

<p class="intro">This is my recipe for making curry purely with chocolate</p>

<p class="intro">Mmm mm mmmmm</p>

</div>

 

Разница между идентификатором id и классом заключается в том, что идентификатор может применяться для определения одного элемента, а класс может использоваться для определения нескольких элементов.

В дополнение вы можете использовать селектор для определенного элемента HTML, просто указав сначала HTML-селектор. Например p.jam какой-то стиль будет применяться для элементов параграфов, у которых есть класс «jam».

Вы можете использовать границы (рамки), применяя их к большинству элементов HTML в пределах страницы. Все, что вам требуется, чтобы сделать границу вокруг элемента — это border-style. Возможные значения, которые можно применять: solid (тонкая граница), dotted (граница состоит из точек, пунктир), dashed (граница состоит из коротких отрезков), double (двойная), groove (эффект углубления), ridge (эффект кромки), inset (эффект врезки) и outset (эффект возвышения).

border-width используется для указания ширины границы, которая измеряется в пикселах. В числе других свойств: border-top-width, border-right-width, border-bottom-width и border-left-width.

И, наконец, border-color используют для указания цвета границы.

Добавьте этот код в CSS-файл:

 

 

 

 

 

 

В результате вы должны получить красную прерывистую границу вокруг заголовка HTML второго уровня (элемент h2) шириной 3 пикселя наверху и внизу, а также 10 пикселей слева и справа (Ширина всей границы в 3 пикселя в результате была определена).

Прим. переводчика: в английском языке знак «@» произносят как «Эт». Эт-правила CSS начинаются со знака «@» и потому так называются

Эт-правила содержат внутри себя набор CSS-правил и применяют их к чему-то конкретному.
 

Импортирование

Эт-правило import присоединяет другую таблицу стилей. Допустим, вы хотите добавить стили из другой таблицы стилей к уже существующей. В этом случае, вы скорее всего поступите так:

Эта конструкция часто используется в месте, где элемент link ссылается на CSS файл HTML-страницы, имея при этом внутреннюю таблицу стилей, которая выглядит приблизительно так:

Преимущество этого подхода состоит в том, что старые браузеры, такие как Netscape, не догадываются об эт-правилах и соответственно не будут ссылаться на таблицу стилей. В результате если у вас есть документ с хорошей разметкой текста, он сохранит работающий простой HTML, хотя и не стилизованный.

Медиа-типы

Эт-правило media применит содержимое к определенному типу медиа, например, к печати:

 

 

 

 

 

 

 

 

Возможные типы медиа:

• all – правила CSS применяются ко всем возможным типам медиа

• aural – для речевых синтезаторов.

• handheld – для портативных устройств.

• print – для принтеров.

• projection – для проекторов.

• screen – для дисплеев компьютеров.

Вы также можете использовать следующие типы медиа: braille, embossed, tty и tv.

Примечание: несмотря на все вышесказанное браузер IE поддерживает всего несколько медиа-типов – all, screen и print.

Кодировка

Эт-правило charset просто устанавливает кодировку внешней таблицы стилей. Правило указывается в верхней части таблицы CSS и выглядит примерно так:

Шрифтовой комплект (font-face)

Эт-правило font-face используется для детального описания шрифта и может использоваться для внедрения внешнего шрифта в ваш CSS. Правило требует наличия описателя font-family, к которому шрифт может отсылать и значением которого может быть имя текущего шрифта или полностью новое имя. Чтобы внедрить шрифт, используют описатель drc. Другие описатели, добавленные в эт-правило font-face, становятся условиями для шрифта, который используется. Например, если вы добавили стиль font-weight: bold в эт-правило, описатель src свойства font-family будет применяться к селектору со свойством font-family, если свойством font-weight будет bold.

Вы можете использовать похожее эт-правило font-face:

 

 

 

 

 

 

 

 

Это правило применит шрифт somefont.eot к параграфам (за исключением случаев, когда для селектора p не установлено font-weight: bold).

Поддержка внедряемых шрифтов очень обрывочна. Браузеры на основе кода Mozilla не поддерживают их и не имеют в ближайшее время таких планов. Только Internet Explorer, похоже, обладает определенной степенью поддержки. Чтобы внедрять шрифты с IE, вам потребуется использовать приложение Microsoft WEFT, которое сконвертирует символы формата TrueType в формат OpenType (и затем ими можно воспользоваться только по определенной вами ссылке). Из-за ограничений (и сложности) совместимости, рекомендуется не использовать шрифты, которые не имеют адекватной альтернативы среди системных шрифтов.

Страницы

Эт-правило page регулирует постраничные медиа и является продвинутым способом применять стили к печатным медиа. Это правило определяет блок страницы, который расширяется на блочной модели (box model, подробнее см Margins и Padding). Благодаря этому правилу вы определяете размер и представление единой страницы.

Существует несколько соглашений, которые применяются к эт-правилу page: не должно быть полей или рамок; стиль создается не для показа на экране компьютера, поэтому не допускается использование в качестве единиц измерений пикселей (точек) и em.

Существует несколько определенных свойств, которые могут использоваться. Например, size может принимать значение portrait, landscape, auto или length. Свойство marks используется для определения метки кадрирования:

 

 

 

 

Псевдоклассы для постраничных медиа

Существует три псевдокласса, которые используются специально в связке с эт-правилом page. Выглядит их использование следующим образом:

1

:first — этот псевдокласс применяется к первой странице постраничных медиа.

:left и :right применяются для левых и правых страниц соответственно. Может использоваться для указания больших полей слева при печати левой страницы и справа – при печати правой страницы.

Есть и ряд других особенностей эт-правила page, такие как переход на новую страницу, наименование страниц, но учитывая, что это эт-правило с трудом работает в любом из браузеров, вы возможно и так потратили достаточно времени на чтение этой части. Хотя идея хороша.

Большинство из вас должны быть готовы к HTML, подобному тому, что я сделал в конце моего руководства по HTML для новичков. Лишь строка кода с ссылкой на CSS-файл должна быть добавлена в ваш HTML-документ.

Код, представленный ниже, включает все CSS-техники, которые были описаны в этой секции руководства. Вы можете сохранить его как CSS-стиль, взглянуть, как работают все свойства в HTML-файле и проверить, как именно они были применены в таблице стилей. По моему мнению, лучший подход к понимаю средств CSS состоит в работе с реальными файлами, когда вы видите, что происходит, если изменить те или иные вещи.

01

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Встроенные стили

Встроенные стили прикрепляются напрямую к HTML-тегам значением атрибута style.

Они напоминают следующий код:

В результате применения этого стиля, параграф будет показан красного цвета.

Но, как ранее уже отмечалось, более верным подходом является создание HTML-документа без оформления и стилей. И вот почему использование встраиваемых стилей не рекомендуется.

Внутренние стили

Внедренные, или внутренние, стили применяются ко всей странице целиком. Теги style размещаются между тегами head.

Способ подключения и применения стилей выглядит так:

 

 

 

 

 

 

 

 

 

 

 

 

В результате использования этого стиля все параграфы на странице будут красного цвета, а все ссылки — синего.

Напомню, что хорошей практикой является разделение HTML-содержания и CSS-представления в разных файлах. И здесь приходит спаситель…

Внешние каскадные таблицы стилей

Внешние таблицы стилей применяются ко всему сайту со множеством страниц. Для этого создается CSS-файл приблизительно следующего содержания:

 

 

 

 

 

Если вы сохраните это в файле “web.css”, вам также потребуется указать в HTML-файле ссылку на внешнюю таблицу стилей. Выглядит это следующим образом (см последнюю строку):

 

 

 

 

 

В продвинутом руководстве по CSS мы покажем другие способы подключения внешней каскадной таблицы стилей, а пока достаточно и этого.

Чтобы следовать данному руководству наиболее эффективно, рекомендуется пробовать и тестировать код по мере прогресса. Поэтому используйте ваш текстовый редактор, чтобы создать полностью новый файл, а затем сохраните пустой документ как “web.css” в той же директории, что и HTML-файл.

Затем измените HTML-файл таким образом, чтобы он напоминал следующий код:

 

 

 

 

 

 

Сохраните HTML-файл. Этот файл ссылается на CSS-файл, который в настоящее время пуст. Поэтому ничего не изменится. Но по мере работы с Руководством по CSS для начинающих, вы научитесь, как добавлять и изменять CSS-файл, и сможете проверять результаты изменений обновлением окна браузера с открытым в нем HTML-документом, как это было сделано ранее.

Свойство Z-index описывает уровень стека представления элемента на странице относительно остающихся в потоке элементов. Его значением является число. Вместе с увеличением z-index элемента, близость к пользователю также увеличивается.
 

Пример кода

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Обратите внимание, как определенные элементы div расположены поверх других. Если z-index этих элементов изменяется, расположение их стека изменится также.

Display

Свойство display применяется для установки, должен ли элемент появиться на странице или нет. Самыми популярными значениями для этого элемента являются следующие:

• block

• inline

• none

Наиболее типичные примеры применения свойства display:

1. Для показа и сокрытия элементов в зависимости от взаимодействия с пользователем. Частый пример – это ниспадающее меню. Такие динамические изменения стилей представлены значениями javascript.

2. Чтобы скрыть элементы для определенных типов медиа. Например, можно «отключить» показ картинок, просто указав значение none для свойства display в таблице стилей, которая используется для печати документа

3. Конвертация инлайновых элементов, таких как link, в блочные элементы при помощи изменения значения свойства display на block

Пример ниже демонстрирует, как свойство display может применяться для изменения ссылок в элементы block.

Пример кода

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Visibility (Видимость)

Свойство visibility применяется, когда вы хотите воздействовать на видимость элемента. Возможные значения этого свойства:

• visible

• hidden

Самое главное различие между visibility и hidden элемента состоит в том, что если указано значение hidden, то скрытый элемент по прежнему может влиять на раскладку вашей страницы. Элементы, у которых свойство display имеет значение none, такого эффекта не имеют.