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

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

Главными типами отображения являются inline (встроенный), none (не показывать) и block-line (блок). Вы можете применять их, используя значения свойства display: inline, block и none.

inline действует так, как подсказывает его имя. Элементы, представленные с помощью inline всегда следуют потоку линии. Элементы strong (жирное начертание), emphasis (курсив) и anchor (якорь) обычно представлены инлайном на большинстве страниц.

block помещает разрыв строки над и под элементом. Элементы абзац и заголовок обычно отображаются в стиле block-line.

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

Изначальная таблица стилей для моего сайта, например, использовала несколько элементов, которые традиционно применяются in-line и block-line, чтобы сделать дизайн лучше.

 

 

 

 

 

 

 

 

 

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

 

 

Код, указанный выше, применяется для страниц для печати. Этот стиль «отключает» панель навигации, комментарии и т.д., которые обычно избыточны при распечатке.

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

Таблицы

Самый простой способ понять значения табличных свойств отображения, это рассматривать их в контексте HTML-таблиц. table – это базовое представление. Вы также можете представить элементы tr и td значениями свойств table-row и table-cell соответственно.

Свойство display дает вам еще больше возможностей и предлагает вам в качестве значений table-column, table-row-group, table-column-group, table-header-group, table-footer-group и table-caption. Я думаю, все эти значения говорят сами за себя. Что сразу приходит на ум – это преимущество конструирования таблиц колонками вместо метода, который применяется в HTML

В конечном счете значение inline-table фактически помещает вашу таблицу без разрывов строк сверху и снизу.

Если вы позволите себе увлечься CSS таблицами, доступность вашего сайта может серьезно пострадать. Цель HTML – передать значение. Следовательно, любые данные, которые должны быть представлены в табличном виде, лучше отображать при помощи значений HTML. Если вы используете только CSS-таблицы, это можете привести к смешению информации, что недопустимо для людей с отсутствием CSS. Это неправильно.

Другие типы отображения

list-item говорит сам за себя. Работает практически идентично элементу li в HTML. Для корректного отображения, элементы должны быть вложены внутри элементов ul или ol.

run-in показывает элемент в строке или блоке. Это зависит от того, как показывается родительский элемент. Помните, что этот функционал недоступен в IE и браузерах на основе Mozilla.

compact также показывает элемент встроенным в линию или блок в зависимости от контекста. Он также не очень полезен...

marker используется только вместе с псевдоэлементами :before и :after, чтобы описать отображение значения свойства content. По умолчанию свойство content уже отображается как marker. Поэтому marker полезен тогда, когда вы пытаетесь переписать предыдущее свойство display для псевдоэлемента.

Когда элементы спозиционированы относительно, они позиционируются относительно того места, где они обычно появляются в потоке. В отличие от абсолютно спозиционированных элементов, относительно спозиционированные элементы воздействуют на позиционирование последующих родственных элементов (потомков). Элементы позиционируются относительно установкой свойства relative и указанием одного или нескольких свойств «смещения»:
 

Пример кода

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Обратите внимание как текст абзаца был бы спозиционирован, если бы элемент h1 не был бы перемещен из своего изначального положения. Это произошло потому, что элемент h1 спозиционирован относительно

Посмотрим, что произойдет, если мы спозиционируем элемент h1 из правого нижнего угла, используя относительное позиционирование как в этом коде:

 

 

 

 

 

 

 

 

Фиксированное позиционирование

Элементы с зафиксированным позиционированием (fixed) остаются в том же месте браузерного окна, даже когда страница прокручивается. Это может использоваться для постоянного удержания элемента (например, меню) на странице.

В указанном ниже примере фиксированное позиционирование используется для удержания знака «домой», который ссылается на главной страницу в верхнем левом углу.

Пример кода

01

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Группировка

Запятые, которые разделяют селекторы, позволяют «разделять» декларации между селекторами. Правило, которое продемонстрировано ниже, указывает, что все элементы i, элементы класса «warning» и элементы с идентификатором id «important» будут подчеркнуты.

 

 

Иерархия селекторов

Если правила конфликтуют:

• Правило с более специфичным селектором идет первым

• Если два селектора имеют одинаковый уровень специфичности, правило, которое указано позднее в документе, идет первым

Как определяется специфичность селектора

Допустим, ваши селекторы объединены в следующем порядке и те, что наверху имеют самый высокий уровень специфичности

1. Декларации в атрибутах стиля идут без селектора и обладают самым высоким приоритетом

2. Селекторы с атрибутом идентификатора id (например, h1#foo ) являются следующими по важности в иерархии

3. Селекторами с другими атрибутами (например, h1.foo и a[target]) или псевдоклассы (например, a:hover) размещаются следующими в иерархии наиболее важных

4. Селекторы без других атрибутов кроме имени элемента (например, h1) занимают следующую строчку в иерархии наиболее важных

5. Универсальный селектор (*) обладает наименьшим приоритетом

Для корректного определения точного значения специфичности, пройдите следующий процесс:

1. Начните со значения 0.0.0.0

2. Если вы найдете декларацию в атрибуте стиля, вы должны изменить первую цифру на 1, что даст вам 1.0.0.0. Тогда вы получаете самое высокое значение специфичности и необходимости в дальнейших расчетах нет

3. Каждый раз, когда наступает условие 2, добавьте 1 ко второй цифре. Например, для ol#foo li#bar добавьте 2 (1 за каждый id), что дает вам 0.2.0.0

4. Каждый раз как вы сталкиваетесь с третьим случаем, добавьте единицу к третьей цифре. Например, для ol#foo li#bar a[target] добавьте 1, что дает вам 0.2.1.0.

5. Каждый раз, когда выполняется условие 4, добавьте 1 к четвертой цифре. Например, для ol#foo li#bar a[target] добавьте 3 (по одном за каждое имя элемента), что дает нам 0.2.1.3

Когда вы сравниваете специфичность двух селекторов, начните с самых больших цифр слева. Число, которое больше другого, будет более специфичным. Если они равны, идите дальше и сравнивайте следующие цифры.

Каскад

Правила стиля могут определяться веб-дизайнерами в трех различных местах:

1. Во внедренном стиле

2. Во внешней таблице стилей (на которую ссылается HTML-файл или которая импортируется)

3. В строке элемента

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

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

Пример кода

01

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Псевдоэлементы прикрепляются к селекторам схожим образом, что и псевдоклассы. Их структура выглядит так: селектор:псевдоэлемент свойство: значение; .

Буквица и первая линия

Псевдоэлемент first-letter описывает первую букву элемента, а first-line — первую строку элемента. Например, можно подготовить буквицу и первую строку для абзаца благодаря этому коду:
 

p:first-letter

    font-size: 3em;

    float: left;

 

p:first-line

    font-weight: bold;

 

Псевдоэлементы before и after применяются совместно со свойством content для того, чтобы разместить контент по любой из сторон элемента, не внося изменений в HTML.

Значением свойства content могут быть open-quote, close-quote, no-open-quote, no-close-quote, любая строка текста, заключенная в кавычки, или любое изображение, если использовать url(imagename).

blockquote:before

    content: open-quote;

 

blockquote:after

    content: close-quote;

 

li:before

    content: "POW: "

 

p:before

    content: url(images/jam.jpg)

 

Выглядит удивительно, не правда ли? Увы, но большая часть пользователей не смогут восхититься эффектами before и after, т.к. IE просто не распознает их. Ну разве парни из Microsoft не ленивы?

Это не сложно – подготовить раскладку страницы с помощью CSS. Многие люди используют для создания раскладки страницы таблицы, поэтому на первый взгляд использование CSS может показаться сложным. Однако на самом деле это не так. Этот способ просто другой и, что важно, имеет больше смысла.

Важно воспринимать каждую часть вашей страницы как отдельный фрагмент, который можно перемещать и трансформировать по своему желанию. Эти фрагменты могут быть размещены абсолютно или относительно другого фрагмента.
 

Позиционирование

Свойство position применяется для описания элемента, когда он спозиционирован (размещен) абсолютно (absolute), относительно (relative), статично (static) или фиксированно (fixed).

Значение static – это значение по умолчанию для всех элементов. Оно определяет нормальное расположение элементов, как они обычно встречаются в HTML-документе.

Значение relative очень схоже с static, с той лишь разницей, что вы можете сместить элементы с его прежнего расположения при помощи значений top, right, bottom и left.

Значение absolute вытаскивает элемент из стандартного потока HTML-документа и трансформирует его в полностью новый мир. В этом маленьком и безумном мире можно размещать абсолютно спозиционированный элемент в любой части страницы, если использовать значения top, right, bottom и left.

Значение fixed действует похожим образом, что и absolute. Разница в том, что элемент позиционируется относительно окна браузера, а не страницы. В результате элемент, спозиционированный с помощью fixed всегда находится на одном и том же месте, даже если вы прокручиваете окно в браузере. Это в теории. На практике техника идеально работает в браузерах Mozilla и Opera, но в IE вы можете столкнуться с проблемами.

Раскладка страницы с использованием абсолютного позиционирования

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

 

 

 

 

 

 

 

 

 

 

 

 

Достигнем желаемого с помощью этих значений CSS:

 

 

 

 

 

 

 

 

 

Этот фрагмент кода размещает панель навигации на левой стороне и задает ширину колонки в 10 em. Т.к. навигация спозиционирована абсолютно, она не затрагивается потоком остальной страницы. Следовательно, все, что требуется, это установить левое поле (left margin) области контента равным ширине панели навигации.

Несложно. Разумеется, двухколоночной техникой это не ограничивается. Используя позиционирование с умом, вы можете расставить практически неограниченное количество колонок. Когда нужно добавить третью колонку, вы просто добавляете в HTML-документ новый фрагмент «navigation2″ и изменяете CSS:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Единственный недостаток абсолютно спозиционированных элементов связан с маленьким миром, который они населяют – невозможно сказать, где они заканчиваются. Тем из вас, кто решит воспользоваться приведенными выше примерами на своих страницах с небольшой навигацией и большой зоной контента, решение подойдет отлично, особенно в случае использования относительных значений для задания ширины и размеров. Однако вы должны оставить надежды разместить что-либо, например, подвал, под этими элементами. Для достижения этой цели надо использовать float для размещения фрагментов, а не абсолютное позиционирование.

Floating

Элемент с атрибутом float будет перемещен на правую или левую сторону, а окружающий контент будет его обтекать.

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

Рассмотрим HTML-пример. Можно добавить следующие правила CSS:

 

 

 

 

 

 

 

 

 

 

 

 

Если следующий элемент не должен «огибать» float-объекты, можно добавить свойство clear. clear: left очищает float-элементы слева, clear: right — справа, а clear: both делает так, чтобы float-элементов не было с обеих сторон – слева и справа. Таким образом, чтобы, например, добавить подвал на страницу, вам потребуется поместить HTML-фрагмент id «footer» и добавить эту строчку в CSS-файл:

 

 

Вот и все. У вас будет подвал (футер), который всегда будет показываться под колонками, независимо от их длины.

Это было лишь краткое введение в позиционирование и расстановку элементов при помощи float, где размещение больших элементов на странице может обернуться стрессом. Но надо всегда помнить, что такие техники могут быть применимы ко всем элементам, внутри этих фрагментов. Используя значения Float, позиционирование, padding, marging и границы вы можете реализовать любой проект. И все, что можно достигнуть при помощи таблиц, можно сделать при помощи CSS.

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

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

Например, вы можете объединить margin, padding и border-width и записать margin-top-width, margin-right-width, margin-bottom-width и т.п. в виде свойство: top right bottom left;

Следовательно, вместо того, чтобы указывать стиль так:

 

 

 

 

 

Вы можете записать их так:

 

 

Вы также можете объединить border-width, border-color и border-style:

 

 

(вы можете использовать это вместе с border-top, border-right и др.)

Если вы указываете только два значения (например, margin: 1em 10em;), то первое значение — это верх и низ, а второе — лево и право.

Также можно собирать несколько свойств, которые влияют на шрифт, используя свойство font:

 

 

(где /1.5 – высота строки)

Подводя итог, рассмотрите этот код:

view sour

print

?

 

 

 

 

 

 

 

Работает отлично.

Псевдоклассы – это атрибуты, назначаемые строго к селекторам с намерением определить реакцию или состояние для данного селектора. Они обладают следующей структурой: selector:pseudo class property: value; , т.е. вам лишь надо поместить двоеточие между селектором и псевдоклассом.

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

• link используются для непосещенных ссылок

• visited используется лля ссылки на страницу, которую уже посетили.

• active используется, когда пользователь кликает по ссылке.

• hover используется, когда пользователь наводит курсор на ссылку.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Считается хорошей практикой использовать различные цвета для посещенных ссылок, и большая часть пользователей ожидает именно этого, хотя CSS предоставляет вам средства контроля, чтобы обойти такое поведение. Так как псевдоклассы (отличные от hover) используются нечасто, это свойство к сожалению встречается все реже и реже. Учитывая этот факт, псевдокласс потерял большую часть своего значения, хотя когда требуется оптимальная пользовательская реакция, он должен использоваться.

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

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

Мы создаем внешние каскадные таблицы стилей в отдельных документах, давая им расширение «.css». Внешняя каскадная таблица стилей представляет собой простой список правил. Она не содержит HTML-тегов. CrashCourse/Demos/Stylesheet.css — пример внешней таблицы стилей.

Пример кода

 

 

Мы можем подключить указанный CSS-файл к любому количеству страниц HTML. Тег <link>, который размещается в верхней части HTML-страницы, ссылается на внешнюю каскадную таблицу стилей.

Пример кода

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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

Образец кодаprint

?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CSS дает возможность использования 16777216 цветов. Они могут быть представлены именем, rgb-значением (red/green/blue, т.е. красный/зеленый/синий) или hex-кодом.

Тоже самое, что и:

Что аналогично этому:

этому:

и этому:

В нашем распоряжении 17 допустимых заранее определенных имен для цветов. Этот список включает в себя: aqua (аква, цвет морской волны), black (черный), синий, fuchsia (фуксия, т.е. пурпурно-розовый), gray (серый), green (зеленый), lime (лайм), maroon (коричнево-малиновый), navy (темно-синий), olive (оливковый), orange (оранжевый), purple (фиолетовый), red (красный), silver (серебряный), teal (сине-зелёный), white (белый) и yellow (желтый).

Допустимым цветом является transparent (прозрачный).

Три значения rgb могут принимать значения от 0 до 255, где 0 – это самый низкий уровень (например, нет красного), а 255 – самый высокий уровень (например, полностью красный). Эти значения также могут быть представлены в виде процентов.

Hexadecimal (hex) — это шестнадцатеричная система счисления. Мы обычно используем десятичную систему исчисления (base-10, значения от 0 до 9). В шестнадцатеричной же системе используется 16 значений: от 0 до f.

Дизайнер, использующий шестнадцатеричную систему, обозначает цвет 3 или 6 знаками, перед которыми ставится символ решетки (#). В общем виде, 3-х значная версия — это сжатая версия 6-и значной (#f00 становится #ff0000, а #c96 превращается в #cc9966 и т.п.). Расшифровывать легче 3-х значную версию (первый символ обозначает красный цвет, второй — зеленый, третий — синий, также как и в системе rgb), однако 6-и значная система дает больше возможности и контроля для выбора конкретного цвета.

‘color’ и ‘background-color’

Вы можете применять цвета, используя color и background-color (помните, что надо использовать американский английский, а не британский, т.е. нельзя написать «colour», только «color»).

Синий фон и желтый текст можно представить следующим кодом:

 

 

 

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

 

 

 

 

 

 

 

 

После сохранения файла CSS, обновите страницу в браузере. Вы заметите, что первый заголовок (элемент h1) станет желтого цвета на синем фоне.

Свойства color и background-color могут применяться к большинству элементов HTML, включая body, что изменит цвета страницы и ее содержимого.

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

У каждого селектора есть свойства, которые находятся внутри фигурных скобок. Примеры свойств: color, font-weight, background-color.

За свойством следует знак двоеточия (не путайте со знаком равенства), а затем указывается значение этого свойства. Несколько свойств разделяются между собой точкой с запятой (;):

 

 

 

Это код устанавливает значения для свойств font-size и color селектора <body>. В нашем случае, стиль, примененный к HTML-документу, приведет к тому, что текст страницы (размещенный между тегами body) будет темно-синего цвета и размера 0,8 em.

Длина и проценты

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

em (например, font-size: 2em) – это единица измерения, которая определяет вычисляемый размер шрифта. Например, 2em указывает на то, что размер должен быть в два раза больше величины текущего шрифта.

px (например, font-size: 12px) — это единица измерения в пикселях.

pt (например, font-size: 12pt) — типографский пункт (1/72 дюйма, приблизительно 0,35 мм).

% (например, font-size: 80%) – единица измерения в процентах.

Среди других единиц измерения можно отметить pc (пика = 4.512мм), cm (сантиметры), mm (миллиметры) и in (дюймы).

Когда значение равно нулю необходимости указывать единицу измерений нет. Например, используя border: 0, вы указываете, что границы (рамки) быть не должно.

Веб-страница – это динамичная, гибка среда. По своему определению она изменчива. Пользователи должны иметь возможность видеть страницу так, как они желают, включая размер шрифта и экрана. По общему мнению, «em» и «%» являются наилучшими единицами измерений для шрифтов (а также, возможно, для указания высоты и ширины, с чем мы должны будем познакомиться в Продвинутом руководстве по CSS). «px» в большинстве браузеров не позволяет изменять размер текстов. Это единица измерения не должна использоваться очень часто (за исключением определения размеров границ).