Введение в css2

Содержание

Глава 10

Следующие две главы посвящены замечательному и широко используемому средству HTML, значительно облегчающему реализацию единого стилевого оформления при разработке больших веб?сайтов, – каскадным таблицам стилей (CSS, Cascade Style Sheets).

10.1. Возможности CSS

Таблицы стилей позволяют управлять отображением практически любого содержимого HTML?документа. Например, с их помощью можно задать цвет, шрифт и прочие параметры, влияющие на то, как должны показываться заголовки. Можно задать полужирное или еще какое?нибудь начертание шрифта определений в списке определений. Помните, как это приходилось делать вручную в примерах гл. 4?

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

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

(200 штук). При использовании CSS достаточно изменить (или добавить) одну запись в таблице стилей. И это лишь один из множества возможных примеров.

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

Чтобы использовать таблицы стилей в документах, нужно сначала научиться их создавать, не так ли? Именно с рассмотрения особенностей создания таблиц стилей и начнем.

10.2. Внешние и встроенные таблицы стилей

Для начала нужно рассмотреть, где могут находиться таблицы стилей. Итак, внешние таблицы стилей названы так потому, что помещаются в отдельных файлах. Данные файлы являются обычными текстовыми файлами, созданными, например, в редакторе Блокнот. Нужно лишь при сохранении этих файлов использовать расширение CSS (например, mystyle.css). Внешние таблицы стилей подключаются к документу при помощи HTML?элемента LINK. При этом используются следующие атрибуты этого элемента:

• href – задает URI файла с подключаемой таблицей стилей;

• rel – для подключения таблицы стилей этому атрибуту присваивается значение stylesheet;

• type – при подключении CSS задается значение text/css;

• media – задает тип устройства, для которого применяется подключаемая таблица стилей (эта замечательная возможность будет рассмотрена далее).

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

Встроенные таблицы стилей задаются внутри HTML?элемента STYLE (между парными тегами ), помещенного в разделе HEAD документа. При создании встроенных таблиц стилей нужно указывать значение атрибута type элемента STYLE, также можно задать значение атрибута media. Назначение этих атрибутов в этом случае совпадает с назначением одноименных атрибутов HTML?элемента LINK.

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

@import url(«URI внешней таблицы стилей»);

Пример подключения внешней CSS может выглядеть так:

@import url(«external_stylesheer.css»); /*подключение таблицы стилей*/

В примерах данной главы используются встроенные таблицы стилей. Однако имейте в виду, что это сделано только потому, что, во?первых, примеры небольшие и создавать для них два файла просто нерационально, а во?вторых, такие примеры проще помещать в книгу и они так лучше воспринимаются. На практике удобнее использовать внешние таблицы стилей. Тогда не придется при изменении стиля одного элемента заново выкладывать на сервере все содержимое документа: достаточно обновить файл с измененной таблицей стилей.

10.3. Записи таблицы стилей

Таблицы стилей представляют собой множество записей, называемых правилами. Каждое правило CSS состоит из двух частей: селектора и объявления стиля. Селектор несет в себе информацию, достаточную для нахождения в документе элементов, к которым применяется стиль. Объявление стиля представляет собой набор пар свойство/значение, заключенный в фигурные скобки <>. Синтаксис правила CSS следующий:

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

То, что обозначено в приведенном примере как селектор, может быть названием HTML?элемента (например, P, STRONG, H1), идентификатором фрагмента документа (#par1, #tabl1), именем стилевого класса (.par1, P.par1) или более сложной конструкцией, описанной ниже.

Свойство представляет один из предопределенных строковых идентификаторов, обозначающих тот или иной параметр, поддерживаемый для HTML?элемента (например, color, backgroundcolor, font-family). Тип присваиваемого значения зависит от конкретного параметра.

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

Свойства CSS, которые можно задать для различных элементов, существенно отличаются. Часть их мы рассмотрим на примерах в тексте книги. Более полный перечень свойств с их описаниями вы сможете найти в приложении 2.

Правила отображения HTML-элементов

Рассмотрим самое простое применение CSS – задание стиля текста (или прочего содержимого), содержащегося внутри определенных HTML?элементов. Для этого нужно указать в качестве селектора название HTML?элемента (или нескольких HTML?элементов), например:

Теперь все заголовки первого уровня будут отображаться красным цветом шрифтом Arial, заголовки второго и третьего уровней будут отличаться только размером шрифта, а текст внутри каждого HTML?элемента P будет отображаться курсивом.

Приведенный выше текст уже является таблицей стилей. Его можно поместить в отдельный CSS?файл. Тогда получится внешняя таблица стилей. Можно поместить определение CSS внутрь HTML?документа так, как это показано в примере 10.1.

Спецификация CSS2

Название: Спецификация CSS2

Содержание

Лекция 1. О спецификации CSS2

Лекция 2. CSS2. Введение

Лекция 3. Соответствие: Требования и Рекомендации

Лекция 4. Синтаксис CSS2 и базовые типы данных

Лекция 5. Селекторы

Лекция 6. Установка значений свойств. Каскадирование и Наследование

Лекция 7. Типы носителя

Лекция 8. Модель бокса

Лекция 9. Модель визуального форматирования

Лекция 10. Модель визуального форматирования. Детали

Лекция 11. Визуальные эффекты

Лекция 12. Генерируемое содержимое, автоматическая нумерация и списки

Лекция 13. Страничные носители

Лекция 14. Цвета и фон

Лекция 15. Шрифты

Лекция 16. Текст

Лекция 17. Таблицы

Лекция 18. Интерфейс пользователя

Лекция 19. Звуковые таблицы стилей

Дополнение. Приложение A. Образец таблицы стиля для HTML 4.0

Дополнение. Приложение B. Изменения по сравнению с CSS1

Дополнение. Приложение C. Замечания по реализации и выполнению для шрифтов

Дополнение. Приложение D. Грамматика CSS2

Дополнение. Приложение F. Индекс свойств

Дополнение. Приложение G. Индекс дескрипторов

Лекция 1. О спецификации CSS2

Эта спецификация определяет Каскадные таблицы Стилей, уровень 2 (CSS2). CSS2 — это язык таблиц стилей, позволяющий авторам и пользователям подключать стили (например, шрифты, пробелы и звуковые сигналы) в структурированные документы (например, документы HTML и приложения XML). CSS2 упрощает создание и обслуживание Web-сайта путём разделения структуры и стиля представления документов.

CSS2 построен на основе CSS1, и, с очень небольшими исключениями, все таблицы стилей CSS1 остаются действующими в CSS2. CSS2 поддерживает таблицы для конкретных носителей, так что авторы могут создавать представление своих документов для визуальных браузеров, звуковых устройств, принтеров, брайль-устройств, ручных портативных устройств и т.д. Данная спецификация поддерживает также позиционирование содержимого, загружаемые шрифты, отображение таблиц, возможности интернационализации, автоматические счётчики и нумерацию и некоторые свойства, относящиеся к пользовательскому интерфейсу.

Этот документ был просмотрен Членами W3C и другими заинтересованными сторонами и одобрен Директором как Рекомендации W3C. Это неизменяемый документ, он может использоваться как справочный материал или цитироваться в других документах. Задачей W3C является привлечение внимания к Рекомендациям и этой спецификации и её широкое распространение. Это расширит функциональные возможности Web.

Список текущих Рекомендаций W3C и другую техническую документацию можно найти на: http://www.w3.org/TR.

Публичная дискуссия о возможностях CSS проходит на: [email protected]

Спецификация CSS2 доступна в следующем формате:

HTML: http://www.w3.org/TR/1998/REC-CSS2-19980512 и в других форматах на W3C.

В случае разночтений между различными формами спецификации, http://www.w3.org/TR/1998/REC-CSS2-19980512 имеет приоритет.

Английская версия этой спецификации является единственным нормативным документом. Однако переводы этого документа можно найти по адресу http://www.w3.org/Style/css2-updates/translations.html.

Список ошибок и опечаток, найденных в этой спецификации (в английской версии), находится в http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html

Об ошибках, замеченных Вами в этом документе, сообщайте, пожалуйста, по адресам: [email protected] и [email protected] (переводчик русской версии).

Внимание!

Официальная нормативная версия этой спецификации возможна только на английском языке и находится по адресу: http://www.w3.org/TR/1998/REC-CSS2-19980512.

Данный перевод НЕ является официальным документом W3C.

Все Авторские Права Принадлежат W3C.

Данный документ может содержать ошибки перевода и опечатки.

Данная спецификация написана в расчёте на читателей двух типов: CSS-авторов и CSS-разработчиков. Мы надеемся, что эта спецификация снабдит авторов средствами, необходимыми для создания эффективных, привлекательных и доступных документов без излишнего углубления в детали реализации CSS. Разработчики к тому же смогут найти всё необходимое для создания соответствующих пользовательских агентов (ПА).

Спецификация начинается общим представлением CSS и постепенно всё более углубляется в технические подробности и специфику. Для быстрого доступа к информации служат общие и специализированные оглавления в начале каждого раздела и индексы — в электронном и печатном виде.

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

Эта спецификация содержит следующие разделы:

Раздел 2: Введение в CSS2

Введение содержит краткий учебник по CSS2 и обсуждение принципов дизайна вне CSS2.

Раздел 3 — 20: Справочник-учебник CSS2

Основу составляет справочник языка CSS2. Этот справочник определяет, что может входить в таблицы стилей CSS2 (синтаксис, свойства, значения свойств) и как ПА обязаны интерпретировать эти таблицы стилей, чтобы претендовать на соответствие.

Приложения:

Содержат образцы таблиц стилей для HTML 4.0, изменения относительно CSS1, замечания по реализации и выполнению, грамматике CSS2, список нормативных и информативных ссылок и три индекса: Свойства, Дескрипторы и Общий индекс.

[x]. В CSS имена свойств, дескрипторов и псевдоклассов ограничиваются одиночными кавычками.

[x]. Значения в CSS ограничиваются одиночными кавычками.

[x]. Элементы языка документа записываются буквами в верхнем регистре.

[x]. Имена атрибутов языка документа записываются в нижнем регистре и ограничиваются двойными кавычками.

Каждое определение свойства CSS начинается общей ключевой информацией:

‘property-name’

Значение: действительные значения & синтаксис

Начальное: начальное значение

Применяется: к соответствующим элементам

Наследуется: если свойство наследуется

Процентное: интерпретация процентных значений

Носитель: к каким группам носителей применяется свойство

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

1ключевые слова (например, auto, disc и т.д.);

2базовые типы данных, вводимые между символами » » (например, ,

и т.д.). В электронной версии документа каждый объект базового типа данных связан со своим определением;

3типы, имеющие те же диапазоны значений, что и свойство, имеющее то же имя (например, , и т.д.). В данном случае имя типа является именем свойства (заключённым в кавычки) между символами » » (например, ). В электронной версии документа каждый объект такого типа не-терминала ссылается на соответствующее определение свойства;

4не-терминалы, не использующие имя свойства. В данном случае имя не-терминала выводится между символами » «, например, . Заметьте разницу между и ; последнее определено в терминах предыдущего. Определение не-терминала размещается поблизости от его первого вхождения в данной спецификации. В электронной версии документа каждый объект этого типа ссылается на соответствующее определение значения.

Другие слова в этих определениях являются ключевыми словами, которые обязаны появляться буквально, без кавычек (например, red). Слэш (/) и запятая (,) также обязаны появляться буквально.

Значения должны быть организованы так:

[x]. Несколько соседних слов означают, что все они должны появляться в указанном порядке.

[x]. Вертикальная линия (|) разделяет две или более альтернативы: только одна из них должна быть записана.

CSS3 для начинающих

Дата публикации: 2012-01-29

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

В этой статье «CSS3 для начинающих», я попытаюсь осветить некоторые из самых широко распространившихся достижений CSS3, показав вам не только как их можно использовать, но также и поддержку, которую вы наверняка ожидаете от основных браузеров.

Почему сейчас возможно пользоваться CSS3

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

Характеристикой доступности подобных технологий является то, поддерживают их браузеры или нет, а в случае с CSS3 достигается достаточная поддержка браузерами некоторого количества свойств, чтобы можно было начать использовать их для улучшения своих вебсайтов. Ключевое слово здесь — улучшение дизайна. Любой освоенный вами CSS3 должен быть сделан так, чтобы не ухудшить впечатление от сайта в более старых браузерах.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Не имеет значения, называете ли вы это системами Progressive Enhancement (прогрессивное улучшение), Graceful Degradation (поэтапная деградация) или Hardboiled, пока вы принимаете тот факт, что вебсайту не нужно выглядеть одинаково во всех браузерах. Если принять эту простую истину, то вы увидите, что CSS3 сегодня может применяться без отрицательного влияния на впечатления пользователей, пользующихся более старыми браузерами.

Префиксы, определяемые фирмой-разработчиком

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

Используемые сейчас префиксы:

-webkit- : Браузеры Webkit, такие как Safari и Chrome

-ms- : Internet Explorer

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

Приступаем к изучению CSS3 с нуля

Border Radius (закругленные углы)

Нашу статью CSS3 для начинающих, мы начнем с изучения закруглённых углов. Border radius, или, как некоторые называют его, «закругленные углы» (‘Rounded Corners’), возможно, самый широко используемый из всех элемент CSS3, так как он меньше всех влияет на пользователей со старыми браузерами. Спорно утверждение о том, что он самый выигрышный, так как гибкая реализация закругленных углов всегда требует некоторого количества дополнительных div’ов и изображений.

По большей части основные закругленные углы можно написать тремя способами:

Как показывает вышеприведенный код, border radius можно написать так, чтобы все углы можно было задать индивидуально или сокращенно. Однако, при использовании префиксов, определенных фирмой-разработчиком, имеется пара проблем:

Webkit

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

Mozilla

Mozilla точно доказал, зачем нам все еще нужны префиксы разработчика при различной реализации объявления в полной форме. Так, при использовании префикса -moz- должны использоваться следующие потребности, хотя и краткая форма работает так, как нужно:

Илон Маск рекомендует:  Что такое код fbsql_insert_id

Примеры CSS3

Поддержка

IE9+, Safari 3.2+[-webkit- prefix], Safari 5+, Chrome 4+, Firefox 3.0+ [-moz- prefix], Opera 10.5+

Цвета

Наряду с CSS3 идет поддержка rgba (Red, Green, Blue, Alpha – красный, зеленый, синий, альфа) и hsla (Hue, Saturation, Lightness, Alpha- тон, насыщенность, яркость). В обоих «альфа» означает прозрачность цвета, позволяя нам определять непрозрачность индивидуальных свойств данного элемента, такого как фон, рамка и текст. Раньше было возможно применять непрозрачность только к целому элементу или пользоваться вместо того изображениями.

Оба типа определения цвета можно использовать без альфа-канала, опустив ‘a’ в ‘rgba’ или ‘hsla’ и удалив последнее число свойства. В таком виде rgb шире поддерживается старыми браузерами, но hsl все еще такая же новинка, как и hsla.

Эти свойства цвета также можно безопасно использовать в любом другом свойстве CSS3, требующем цвета, таком как box-shadow и градиенты, но при использовании их в более старых свойствах важно обеспечить альтернативный вариант.

Запасной цвет может быть в любом поддерживаемом виде, таком как rgb и hex.

Примеры CSS3

Поддержка

IE9+, Safari 3.2+, Chrome 5+, Firefox 3.0+, Opera 10.1+

Text-Shadow (тень текста)

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

Вы можете назначить цвет текстовой тени каким угодно способом, включая rgba и hsla. Координата Х – это позиция тени по отношению к тексту по горизонтали, координата У – то же самое, но по вертикали. У обеих могут быть положительные или отрицательные значения.

Радиус размывания – это назначенный тени размер размывания, не имеющий верхнего предела. Его нижний предел – ноль (0) и так обеспечивается попиксельное сходство с текстом без размывания.

Текстовая тень была изначально предложена в CSS2, а в последнее время занимает видное положение в CSS3, и, хотя она пока не указана в превью как поддерживаемая предшественниками IE9, надеемся, это скоро изменится.

Примеры CSS3

Поддержка

Safari 3.2+, Chrome 4+, Firefox 3.0+, Opera 10.1+

Box-Shadow (тень блока)

Тень блока не так уж отличается от тени текста, но применяется ко всему элементу как div’у, а не только тексту в нем.

Вышеприведенный код показывает объявление, аналогичное текстовой тени, кроме добавления вкладки inset в третьей строке. Использование вкладки позволяет нам расположить тень внутри рамки элемента, а не вовне его.

С box-shadow, кроме того, можно комбинировать множественные тени блоков, как показано в коде внизу:

Примеры CSS3

Поддержка

IE9+, Safari 3.2+[-webkit- prefix], Safari 5+, Chrome 4+, Firefox 3.5+ [-moz- prefix], Opera 10.5+

Множественные фоны

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

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

Примеры CSS3

Поддержка

IE9+, Safari 3.2+, Chrome 4+, Firefox 3.6+, Opera 10.5+

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

Размер фона

Следующая за множественными фонами – возможность установить размер фона:

Как видно из этого кода, вы можете обеспечить как ширину, так и высоту изображения, при этом ширина заявляется первой. Третья строка также показывает, как использовать размер фона в сочетании с множественными фонами.

Поддержка

IE9+, Safari 3.2+, Chrome 4+, Firefox 3.6[-moz- prefix], Firefox 4+, Opera 10.5+

Обрезка фона и точка отсчета фона

Говоря простыми словами, это позволяет вам лучше управлять расположением фона.

Точка отсчета фона background-origin позволяет управлять стартовой точкой, при помощи которой вы измеряете офсет, применяемый при использовании позиции фона, в то время, как обрезка фона background-clip позволяет расположить фон так, чтобы тот появлялся только внутри данной области. Внизу на изображении это показано более детально:

Border-box: значение по умолчанию, где в любые расчеты включают фон, так что изображение выходит за пределы рамки.

Padding-box: сдвигает границу, так что любое фоновое изображение или цвет не появятся за пределами рамки.

Content-box: смещает все за содержимое, уменьшает как ширину рамки, так и любой отступ, примененный при расчете расположения рамки.

В действительности этот элемент расширяет границы того, что сейчас возможно делать, так как ни одна версия Firefox не поддерживает этих свойств. У Opera возникают проблемы, а у браузеров webkit некоторые реализации требуют префикса фирмы-разработчика, а некоторые нет.

Поддержка

IE9+, Safari 3.2+[-webkit- prefix], Chrome 4+[-webkit- prefix], Firefox 4+, Opera 10.5+

*не все свойства требуют префикса –webkit, за более полной классификацией обратитесь к Quirksmode.

Рамки-изображения

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

При создании изображения для рамок вам нужно создать изображение вроде этого:

Таким образом, ваше изображение действительно показывает рамку. Срез затем используется для определения области рамки и удаления наполнения из центра. При определении среза вы устанавливаете от 1 до 4 значений в процентном соотношении, либо в пикселях (странно, но без px) в следующем порядке: верх, право, низ, лево. Если вы определяете одно единственное число, это значит, вы берете, скажем, 5 пикселей рамки заданного изображения.

Существуют, кроме того, опции для изменения того, каким образом повторяется рамка-изображение — repeat, stretch или round (повтор, растяжение или округление). Растяжение объяснить легко, так как оно растягивает изображение на краях рамки, повтор действует так, как это ожидается и может привести к появлению половинок изображения на рамке. Округление – действительно полезная опция, она действует таким же образом, как повтор, но масштабирует для того, чтобы половинок изображений не было видно.

Примеры CSS3

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

Как видите, определять ширину рамки тоже необходимо.

Поддержка

Safari 3.2+[-webkit- prefix], Chrome 5+[-webkit- prefix], Firefox 3.5+ [-moz- prefix], Opera 10.5+

Множественные колонки

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

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

Масштаб колонок затем устанавливается так, как вы определили бы рамку, но проявится только в зазорах между колонками.

Примеры CSS3

Поддержка

Safari 3.2+[-webkit- prefix], Chrome 4+[-webkit- prefix], Firefox 3.0+ [-moz- prefix], Opera 11+

Градиенты

Последними идут градиенты, которые в данный момент являются самыми сложным элементом CSS3. Почему? Потому что не существует ни одного префикса, не определенного фирмой-разработчиком, и реализация версий Mozilla и webkit сильно различается:

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

Поддержка

Safari 4+[-webkit- prefix], Chrome 4+[-webkit- prefix], Firefox 3.6+ [-moz- prefix]

И еще…

На горизонтах CSS3 имеется еще многое, включая преобразования, переходы и анимацию, и если хотите, можете все это тоже использовать. По большей части то, что не было затронуто в этой статье, менее широко поддерживается, а в случае с анимацией CSS, то успевает за ней только webkit. В случае с менее поддерживаемыми достижениями следует решить, стоят ли того ваши время и усилия. Должны ли вы проводить часы, реализуя анимацию, если на сайт заходят всего 10 пользователей webkit в месяц? Я сказал бы, что нет, но вы можете думать по-другому.

Что можно сделать, так это почитать о них, и когда вы реально наткнетесь на вебсайт, от которого достаточное количество пользователей действительно получат отличное впечатление, то сможете начать реализовать их тут же.

Селекторы

Ниже приведена выборка новых селекторов, доступных благодаря CSS3 и маленькое описание каждого:

X[att^=»val»] — Любой элемент X со значением атрибута, начинающимся с ‘val’;

X [att$=»val»] — Любой элемент X со значением атрибута, заканчивающимся на ‘val’;

X [att*=»val»] — Любой элемент X со значением атрибута с ‘val’, содержащимся где-то внутри значения атрибута;

X:checked — Управление любой проверенной формой X;

X:disabled — Управление любой неработоспособной формой X;

X:enabled — Управление любой активированной формой X;

X:empty — Любой элемент X, пустой или не имеющий дочерних записей;

X:first-of-type — Элемент X, являющийся первым элементом одного уровня своего вида;

X:last-child — Последняя дочерняя запись элемента X своего исходного элемента;

X:last-of-type — Элемент X, являющийся последним элементом одного уровня своего вида;

X:nth-child(n) — Любой элемент X, который является определенной N-ной дочерней записью своего исходного элемента;

X:nth-last-child(n) — Любой элемент X, который является определенной N-ной дочерней записью своего исходного элемента, но отсчитывается от последней дочерней записи;

X:nth-of-type(n) — Любой элемент X, который является определенным N-ным элементом одного уровня своего вида;

X:nth-last-of-type(n) — Любой элемент X, который является определенным N-ным элементом одного уровня своего вида, но отсчитывается от последней дочерней записи;

X:not(s) — Любой элемент X, не равный селектору s;

X:only-child — Элемент X, являющийся единственной дочерней записью своего исходного элемента;

X:only-of-type — Элемент X, являющийся единственной дочерней записью своего исходного элемента и данного вида;

X:selection — Любая часть X, которая выбирается или подсвечивается пользователем;

X:target — Любой элемент X, который является целью ссылающегося URL’а;

Y — Любой элемент Y, предваряемый элементом одного уровня X.

Media Queries

Media Queries дает нам возможность обеспечить отзывчивый дизайн, основанный на виде устройства, где пользователь смотрит вебсайт. Чтобы полностью отдать должное Media Queries, потребуется целая статью, но для начала вот вам краткий обзор:

Media Queries может быть двух видов, первый – для использования их внутри своего CSS. Следующий пример показывает, как это происходит по отношению к браузеру, находящемуся на экране и имеющему максимальную ширину 800px.

Кроме того, можно устанавливать Media Queries в своем html, чтобы можно было сослаться на отдельную таблицу стилей исключительно для данного запроса. В следующем примере запрос нацелен отдельно на iPhone 4.

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

Поддержка

IE9+, Safari 3.2+, Chrome 5+, Firefox 3.5+, Opera 10.1+

@font-face

Это, строго говоря, не совсем CSS3, просто так получилось, что все детали паззла легли по своим местам в то самое время, когда получил развитие CSS3. Font-face дает нам возможность добавлять на свой вебсайт нестандартные шрифты, видимые всеми пользователями, без применения обходных маневров, таких как Cufon и sIFR.

Font-face все еще есть к чему стремиться, пять объявлений шрифта – это слишком много, но необходимо для гарантии полной поддержки.

За исключением пользования платными сервисами вроде Typekit и Fontdeck вышеприведенный код считается лучшим способом установить свои объявления @font-face. 5 объявлений шрифта полностью охватывают каждый браузер, а также шрифты svg для iPhone и iPad.

Для более исчерпывающего описания @font-face, бесплатных шрифтов, фантастического генератора @font-face и способа избежать нестилизованного контента Firefox Flash посетите Font Squirrel.

Поддержка

IE6+, Safari 3.2+, Chrome 5+, Firefox 3.5+, Opera 10.1+

Самое лучшее из CSS3

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

Достоинства CSS3

Богатые интерфейсы — Имея такое управление своими вебсайтами, есть возможность создавать более роскошные пользовательские интерфейсы. Хотя в прошлом мы могли достигнуть того же эффекта, использовав изображение, мы их не обязательно использовали, CSS3 дает нам больше свободы для реализации подобных вещей.

Реализация — Довольно ясно, что применение закругленных углов border radius занимает при реализации гораздо меньше времени, чем создание четырех изображений углов и div’ов для их расположения. Многое созданное в CSS3 сделано так, чтобы дать нам возможность перевести созданное с использованием изображений в код или сократить код, используемый для реализации более сложных интерфейсов. Так мы получаем возможность строить сайты быстрее и легче.

Скорость — Сокращение количества используемых изображений и величины кода, необходимого для реализации дизайна, делает его более легковесным и, таким образом, быстрее загружающимся. Это также имеет сногсшибательный эффект в SEO, где скорость сайта сейчас стала весомым фактором ранжирования в Google.

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

CSS3: чего следует остерегаться

При правильном использовании CSS3 не должен делать слишком много ошибок, но остерегайтесь следующего:

Запасные варианты — Всегда старайтесь писать свой код так, чтобы если вдруг свойству CSS3 потребовалась бы альтернатива для более старого браузера, то она была бы установлена. Запасной вариант, конечно, должен быть не из CSS3 и предшествовать любому коду CSS3. Таким образом, более старый браузер увидит и реализует то, что понимает и просто пройдет мимо того, чего не понимает.

Неработоспособный CSS — Хотя в W3C есть контрольное устройство CSS3, оно не очень совершенно и многие в данный момент допустимые реализации будут возвращать ошибки. Проверка данных – не святой Грааль, каковой ее многие признают, а то, к чему нужно отнестись с осторожностью. Так что при валидации сайта используйте свой опыт для суждения о том, что является настоящей ошибкой, а что нет.

Безобразные сайты — К счастью, большинство читающих OXP (onextrapixel.com) должны уже хорошо понимать, что делают, и никогда не поддадутся соблазну использовать слишком много CSS3. Но многие только начинают употреблять CSS3, в результате чего неизбежно появятся уродливые вебсайты. При изучении CSS3 лучше начать с малого, чем сразу все смешать в одну кучу.

Префиксы фирмы-разработчика — Приведенные примеры демонстрируют многие свойства CSS3, требующие префиксов фирмы-разработчика для работы в некоторых браузерах. Это означает удвоение или даже утроение количества кода, требуемого для одного эффекта. Хотя это может привести к смешанному коду и головной боли при его написании и управлении, сейчас при использовании CSS3 это необходимость.

Заключение статьи «CSS3 для начинающих»

Итак, вот краткое пошаговое введение в то, что можно делать с помощью CSS3. Большая часть информации написана как введение в разные свойства, и существует множество статей, посвященных каждой по отдельности. Для более досконального понимания каждого свойства прочтите их.

Но, к счастью, читая этот выпуск посвящённый CSS3 для начинающих, вы убедитесь, что сможете пользоваться данной технологией, если даже этого раньше и не делали. Если нет, то это, конечно, ваш выбор, но сейчас действительно пора начать учиться, иначе можно сильно отстать.

Автор: Kean Richmond

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Введение в css2

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

Илон Маск рекомендует:  Восемь ферзей

psywalker (Автор записи)

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

Денис

А вот тут http://jsfiddle.net/CWLTD/2/ при увеличении маржинов по горизонтали в Мозилле, Опере и ИЕ9 текст переносится, а вот в Хроме нет. Это такая особенность Хрома или ошибка?

Алексей

«но так как последний попросту не поместился на эту же строку, он перескочил на новую, а на предыдущей (т.е. на той где наш элемент), в правой части теперь балом правит правый margin -а.» — вот тут, на мой взгляд сформулированно не достаточно полно.
Пришлось скопировать пример в песочницу и подвигать размеры, чтоб понять, что там вообще происходит. А происходит там, действительно, довольно забавные явления…
Казалось бы, если у элемента есть большое правое поле, то это не должно разбивать сам инлайн элемент. И, если поля не хватает на одной строке, то поле попросту должно перепрыгивать на следующую строку, и сдвигать текстовое содержимое другой строки. Ну то есть, по мере уменьшения размеров окна, пока правое поле помещается в текущей строке, оно двигает содержимое на этой строке, а когда место не хватает, то на этой строке поле занимает всё оставшееся место, но по мере уменьшения окна, это место также уменьшается, и весь тот размер поля, который не уместил на текущей строке, переходит на следующую, автоматически сдвигая содержимое. В пределе, когда для поля нет места, всё поле переходит на следующую строку и содержимое сдвигается на величину поля. Ну, наверное, к этому прибавляется отступ для всего инлайнового содержимого блока.
Это, на мой взгляд, наиболее очевидный сценарий, я не говорю что он наиболее правильный…
Но происходит по-другому, по мере уменьшения окна:
В Лисе (Мозиле):
1. Сначала на другую сторону переходит содержимое, сдвигаемое полем (марджином).
2. Потом размер поля уменьшает ровно до того момента, как последнее слово можно перенести на следующую строчку. Когда происходит перенос поля на этой строчке увеличивается до исходных размеров.
3. Как только хотя бы одно слово перенеслось на следующую строчку, к этому слову добавляется правое поле натурального размера. Получается у нас два одинаковых поля справа, на исходной, и следующей строке. Эти поля сохраняются, пока есть место справо.
4. Далее, ситуация, вроде бы, должна повторяться для следующего слова, так почему-то не происходит. На следующей строчке отступ остаётся прежним, пока есть возможность двигать содержимое, когда содержимое всё сдвинуто на третью строчку, отступ просто уменьшается. Также происходит и на первой строчке — отступ просто уменьшается пока вплотную не приблизится к правому краю.
5. Далее оставшиеся слова перетекают на следующую строчку, и, как только самое первое слово нашего инлайна-бокса оказалось на следующей строке, у инлайн-бокса, на этой новой строке, появляется свой левый отступ, заданный в стилях.
До этого, левый отступ был лишь на первой строке, то содержимое инлайн бокса, которое попало на следующую строчку, располагалось в начала новой строки (ну, видимо, с учётом отступов контейнера, в котором они лежат). Отступ слева появляется только когда ВСЁ содердимое инлайн-бокса переместится на следующую строчку.
6. Далее правый отступ сокращается до нуля. При этом отступ слева остаётся таким, каким он задан в стилях. Вообще, последний раз инлайн бокс может полностью разместится в строке, пока позволяет его содержимое плюс ЛЕВЫЙ маржин (поле). И, похоже, минимальный возможный размер строки, до появления полос прокрутки это первое слово инлайн-бокса + левый марджин.
7. Далее последнее слово инлайн бокса перескакивает на следующую строку. При этом, как и следовало ожидать, появляется правый отступ, сдвигающий содержимое на следующую (третью) строку.
8. Далее второе с конца слово смещается вправо до конца и потом перепрыгивает на следующую строку.
9. При этом содержимого слева в строке нет до тех пор, пока ему не позволяет уместится левое поле. По мере того, как слова инлайн-бокса перепрыгивают на следующую строчку, освобождается место слева, и, если его больше левого поля (марджина) нашего инлайн-бокса, то появляется содержимое слева на первой строчке нашего инлайн-бокса.
10. Далее ширина становится меньше натуральной величины нашего инлайн-бокса, без учёта марджинов (полей), и, на верхней строчке работает левый марджин, на нижней — правый марджин. Что логично, поскольку читаем мы слева на право, значит в первой (верхней) строчке наш инлайн бокс от остального инлайн-содержимого отделяет именно левый марджин, а на нижней — правый.
11. Как видно из предыдущего пункта, левый марджин «давит» на содержимое верхней строки и как только поле + первое слово + второе слово в верхней строчке не умещается, второе слово перепрыгивает на вторую строчку.
12. после этого правый отступ у второй строчки сокращается. когда он заканчивается, последнее слово переносится на следующую строчку.
13. на первой строчке если левый отступ + первое слово не помещается, появляется полоса прокрутки.
Ну вот как бы и всё :) Стоит отметить что поведение Лисы несколько не последовательно, поскольку в первых пунктов, оно перенесло сначала одно слово, а дальше это правило не применяется для следующего слова.
Что касается Хрома, то всё немного по-другому.
1. Сначала, понятное дело, содержимое справо двигается правым полем, пока не сдвинет его на следущую строку.
2. Потом правое поле тупо сокращается до нуля.
3. После этого последнее слово инлайн-бокса перепрыгивает на следующую строку. И сдвигает содержимое на правый марджин своего инлайн-бокса.
4. Далее история повторяется для следующего слова.
5. Потом всё содержимое нашего инлайн-бокса оказывается на одной строке. Отметим что с той строки, с которой наш инлайн-бокс сместился, содежимое ещё некоторое время будет «недотягивать» до своего правого края. При уменьшении окна у нашего инлайн-бокса сокращается правый марджин, левый марджин не меняется.
6. Как только свободное место заканчивается, последнее слово переносится, и на следующей строке появляется правый марджин.
7. По мере переноса слов с верхней строки, место слево может оказаться достаточным, чтоб слева присоседилось содержимое. Для этого нужно чтоб это ему позволил левый марджин инлайн-бокса.
8. Далее слова переносятся, сдвигаются, и вообще поведение похоже на поведение в мозиле. Общая логика такая — сверху главное — левый марджин, снизу — правый. Как я уже говорил, вызвано это видимо тем, что читаем мы справа налево, поэтому эти марджину «охраняют» края инлайн-бокса с двух сторон.
При этом, как мне кажется, что хоть для Лисы, хоть для Хрома минимальной шириной является первой слово + левый отступ. Если ширина окна меньше, то появляются полосы прокрутки.

Отличие между Хромом и Мозилой состоит в том, что Лиса более «бережно» относится к своему правому отступу — как только ему не хватает места, переносит последнее слово на следующую строчку (и к этому слову также добавляется отступ). Хром же позволяет отступу уменьшится до нуля, и только потом переносит последнее слово, добавляюю к нему отступ.
Поведение Лисы мне нравится больше, но оно не последовательное, поскольку Лиса не делает аналогичных действий для следующего слова.
Что ближе к спецификации — виднее Вам :-)
Одно могу сказать, хоть можно скопировать Ваш пример в песочницу и посмотреть как «в правой части теперь балом правит правый margin -а», то, каким образом, он правит этот бал, как мне кажется, не совсем очевидно и было бы здорово, если это, в том или ином виде, это было отражено в статье.
Спасибо!

Алексей

Кстати, «отрицательное» поле возникает и в случае, если инлайн-блок расширился относительно того, чего браузер просчитал изначально:

Алексей

Но, кстати, с учётом сказанного, в последнем Вашем выделенном пункте, про разрыв инлайн-бокса, когда разные его части, лежат в разных лайн-боксах, поведения Хрома выглядит более логичным, чем поведение Лисы.
Единственная особенность, когда полосы прокрутки уже появились, из-за верхней строчки (которая, напомню, образуется, по принципу левый марджин + первое слово), то, в нижних строчках, если размер окна позволяет, слова остаются на одной строчке, не смотря на правый марджин. При этом, как только размер окна БЕЗ ПРОКРУТКИ, не помещает очередное слово, оно переносится на следующую строчку.
В результате получается, на первой строчке левый марджин + первое слово, на последующих строчках слова прижаты к правому краю (всё это без учёта паддингов блока).

Основы CSS3. Селекторы

Введение в стили

Любой html-документ, сколько бы он элементов не содержал, будет по сути «мертвым» без использования стилей. Стили или лучше сказать каскадные таблицы стилей ( Cascading Style Sheets ) или попросту CSS определяют представление документа, его внешний вид. Рассмотрим вкратце применение стилей в контексте HTML5.

Стиль в CSS представляет правило, которое указывает веб-браузеру, как надо форматировать элемент. Форматирование может включать установку цвета фона элемента, установку цвета и типа шрифта и так далее.

Определение стиля состоит из двух частей: селектор , который указывает на элемент, и блок объявления стиля — набор команд, которые устанавливают правила форматирования. Например:

В данном случае селектором является div . Этот селектор указывает, что этот стиль будет применяться ко всем элементам div.

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

Каждая команда состоит из свойства и значения . Так, в следующем выражении:

background-color представляет свойство, а red — значение. Свойство определяет конкретный стиль. Свойств css существует множество. Например, background-color определяет цвет фона. После двоеточия идет значение для этого свойства. Например, выше указанная команда определяет для свойства background-color значение red . Иными словами, для фона элемента устанавливается цвет «red», то есть красный.

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

Наборы таких стилей часто называют таблицами стилей или CSS ( Cascading Style Sheets или каскадные таблицы стилей). Существуют различные способы определения стилей.

Атрибут style

Первый способ заключается во встраивании стилей непосредственно в элемент с помощью атрибута style :

Здесь определены два элемента — заголовок h2 и блок div. У заголовка определен синий цвет текста с помощью свойства color . У блока div определены свойства ширины ( width ), высоты ( height ), а также цвета фона ( background-color ).

Второй способ состоит в использования элемента style в документе html. Этот элемент сообщает браузеру, что данные внутри являются кодом css, а не html:

Результат в данном случае будет абсолютно тем же, что и в предыдущем случае.

Часто элемент style определяется внутри элемента head , однако может также использоваться в других частях HTML-документа. Элемент style содержит наборы стилей. У каждого стиля указывается вначале селектор , после чего в фигурных скобках идет все те же определения свойств css и их значения, что были использованы в предыдущем примере.

Второй способ делает код html чище за счет вынесения стилей в элемент style . Но также есть и третий способ, который заключается в вынесении стилей во внешний файл.

Создадим в одной папке с html странице текстовый файл, который переименуем в styles.css и определим в нем следующее содержимое:

Это те же стили, что были внутри элемента style . И также изменим код html-страницы:

Здесь уже нет элемента style , зато есть элемент link , который подключает выше созданный файл styles.css:

Таким образом, определяя стили во внешнем файле, мы делаем код html чище, структура страницы отделяется от ее стилизации. При таком определении стили гораздо легче модифицировать, чем если бы они были определены внутри элементов или в элементе style , и такой способ является предпочтительным в HTML5.

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

Также возможна ситуация, когда все эти подходы сочетаются, а для одного элемента одни свойства css определены внутри самого элемента, другие свойства css определены внутри элемента style , а третьи находятся во внешнем подключенном файле. Например:

А в файле style.css определен следующий стиль:

В данном случае в трех местах для элемента div определено свойство width , причем с разным значением. Какое значение будет применяться к элементу в итоге? Здесь у нас действует следующая система приоритетов:

Если у элемента определены встроенные стили (inline-стили), то они имеют высший приоритет, то есть в примере выше итоговой шириной будет 120 пикселей

Далее в порядке приоритета идут стили, которые определены в элементе style

Наименее приоритетными стилями являются те, которые определены во внешнем файле.

Атрибуты html и стили css

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

Введение в CSS

Каскадные таблицы стилей впервые были реализованы в браузере Internet Explorer 3.0, иначе говоря, браузер мог работать с CSS. По мере развития CSS произошло разделение каскадных таблиц на CSS1 – уровень 1 и CSS2 – уровень 2. Одна веб-страница может быть связанна с несколькими таблицами стилей, т.е. из образуется некий каскад, отсюда и произошло название каскадные. Чтобы при применении нескольких каскадных таблиц стилей к одному документу не возникало конфликтов, приоритет CSS оговорен специальными правилами.

CSS1 представляет собой простую технологию определения и присоединения стилей к документу. Стиль – это все то, что влияет на внешний вид документа, т.е. уже знакомое нам форматирование.

CSS2 позволяют осуществлять более сложное форматирование веб-страниц. Например, CSS2 дают возможность абсолютного позициони­рования любого элемента веб-страницы относительно границ окна браузера, в том числе с наложением элемен­тов друг на друга.

В примере мы создадим каскадную таблицу стилей уровня 1 (CSS1). Уберем все форматирование из HTML-кода нашей страницы и вынесем его в отдельный файл каскадной таблицы стилей. Файл каскадной таблицы стилей имеет расширение css. Создать каскадную таблицу стилей можно при помощи приложения Блокнот, но в данном случае использоем редактор FrontPage 2003 или SharePoint Designer и создал файл style.css.

После связи страницы с каскадной таблицы стилей средствами FrontPage 2003, в окне браузера мы увидим страницу в том же виде как и на предыдущем скриншоте, а вот как выглядит теперь HTML-код страницы:

Создание CSS файлов

Чтобы просмотреть это видео, включите JavaScript и используйте веб-браузер, который поддерживает видео в формате HTML5

Основы HTML и CSS

Half Faded Star

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

Рецензии

Half Faded Star

Ребята, классный курс! Может, работы проверять нужно только менторам?

Сначала кажется сложно, но стоит чуть начать и понеслось

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

Введение в CSS

Стили представляют собой набор свойств, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.

Рис. 1. Веб-страница, созданная на HTML

Это обычная веб-страница, в которой нет никакого дизайна, только чистый HTML. Тот же самый документ, но уже с добавлением стилей выглядит совершенно иначе (рис. 2).

Рис. 2. Веб-страница, оформленная с помощью CSS

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

Пример 1. Исходный код веб-страницы

Сам код HTML никаких изменений не претерпел и единственное добавление — следующая строка:

Она ссылается на внешний стилевой файл с именем style.css . Содержимое этого файла показано в примере 2.

Пример 2. Содержимое style.css

В файле style.css как раз и описаны все параметры оформления таких элементов как ,

. Заметьте, что сами элементы в коде HTML пишутся как обычно.

CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.

Типы стилей

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

Илон Маск рекомендует:  Что такое код domxml_version

Стиль браузера

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

, в большинстве браузеров выводится шрифтом с засечками размером 32 пункта.

Стиль автора

Стиль, который добавляет к документу его разработчик. В примере 2 показан авторский стиль.

Стиль пользователя

Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство браузера > Кнопка «Оформление», как показано на рис. 3.

Рис. 3. Подключение стиля пользователя в браузере Internet Explorer

Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.

Введение в CSS (часть 2)

Блочная модель

Блочная модель, или поведение и внешний вид блока в зависимости от стилей, является очень важной, если не самой важной, частью CSS. Структуру блока я описывал в лекции по HTML. Ширина контентной части задаётся свойством width, её высота — свойством height:

Отступы от границы до контентной части задаются свойством padding. Можно задавать отдельно отступы с каждой стороны, используя свойства pagging-top, padding-right, padding-bottom и padding-left. То же самое можно сделать, передав четыре значения в свойство padding:

Значения перечисляются в следующей последовательности: top, right, bottom left. Отступы блока от окружающего задаются свойством margin, оно задаётся аналогичным образом, как и padding, только означает отступ не внутри, а снаружи блока. Вся ширина, которую занимает блок, складывается из ширины контента, паддинга справа и слева, марджина справа и слева и толщины границы справа и слева. Аналогичным образом вычисляется высота блока. Граница блока задаётся свойством border (также можно использовать border-top, border-right, border-bottom и border-left). Помимо ширины, границе можно задать задаётся цвет и стиль:

Либо в сокращённом варианте:

Возможные стили границы:

  • dotted — точечками,
  • dashed — чёрточками,
  • solid — сплошной линией,
  • double — двойной сплошной линией,
  • groove — граница в виде канавки,
  • ridge — в виде бугорка,
  • inset — создаёт ощущение того, что блок вдавлен в страницу,
  • outset — создаёт ощущение того, что блок выпирает из страницы,
  • none — никакой границы.

Кроме собственно границы блока, существует так называемое свойство outline. Outline — это ещё одна граница блока, рисуется вокруг его обычный границы и точно таким же образом стилизуется через CSS. Однако, outline не влияет на ширину и высоту блока, в отличие от границы (border).

Для блоков больше значение имеют свойства display и position. Свойство display может обладать следующими значениями:

    block — элемент превращается в блочный. Если задать элементу свойство display: block;, то он будет выглядеть и вести себя, как

Последние три значения не поддерживаются Internet Explorer и поэтому не рекомендуются к использованию. Кстати, есть свойство visibility, если задать блоку свойство visibility: hidden, то блок будет невидимым, но место под него свободное останется.

Свойство position определяет позиционирование элемента. Может принимать значения:

Статичное (position: static;) позиционирование — это позиционирование элементов по умолчанию, ничего особенного. Позиционирование фиксированное привязывает элемент к определённой области экрана — страницу можно прокручивать вниз и вверх, элемент с position: fixed; будет оставаться на одном и том же месте экрана. При относительном позиционировании элемент остаётся на своём месте, однако, с помощью задания значения свойствам top, right, bottom или left его можно смещать в стороны относительно занимаемого им места. При этом надо иметь в виду, что он будет залезать на другие элементы, а место, которое он занимал ранее, останется свободным. Самое интересное — это абсолютное позиционирование. Под абсолютно спозиционированный элемент не резервируется место на странице, он может отображаться в любом её месте, налезая на другие элементы. Месторасположение такого элемента на странице задаётся свойствами top, right, bottom и left:

Элемент с такими свойствами будет представлять из себя прямоугольник высотой 100 пикселей, размещённый на 30 пикселей ниже верха страницы, причём его ширина будет зависеть от ширины самой страницы. Либо от ширины своего родительского элемента, если элемент со свойством position: absolute; размещён внутри элемента, спозиционированного также абсолютно. Вообще все координаты и размеры абсолютно спозиционированного элемента отсчитываются относительно ближайшего родительского (то есть такого, в который он вложен) элемента, спозиционированного не статично. Либо от размеров страницы. Координата top считается сверху вниз, координата right — справа налево.

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

На рисунке приведены примеры жёлтого блока со свойством float: none; слева, со свойством float: left; в средней колонке, и со свойством float: right; в правой. Так как блок со свойством float: left; пропускает текст справа от себя, то если будут идти подряд несколько блоков со свойством float: left;, то они встанут рядомс друг с другом, а текст будет обтекать их справа. Аналогично и блоки ссо свойством float: right;, только они будут прижаты к правой стороне, а текст будет обтекать их слева. Таким образом блоки можно размещать рядом друг с другом. Этот способ несколько сложнее, чем указывать блокам display: inline-block;, но все старые браузеры отрисовывают его без проблем, а вот с display: inline-block; в старых браузерах могут быть проблемы.

Для того, чтоб вынести элемент ниже элементов с float, используется свойство clear. Например, надо, чтоб от элемента справа не было плавающих блоков (или картинок), тогда для него в CSS задаётся clear: right; Аналогично clear: left;, и для обеих сторон clear: both;

Свойства текста

color — цвет текста. Задаётся в виде значения #RRGGBB, где RR, GG, BB — значения цветов в системе RGB в шестнадцатеричной системе. Максимальное значение каждого компонента — 255 (ff). Белый цвет, соответственно, #ffffff, жёлтый — #ffff00, и так далее. Некоторые цвета можно задавать английскими названиями (black, red, white и так далее);

font — основное свойство для задания шрифта. Существует несколько «подсвойств», которые меняют только одно свойство шрифта. Их все разом можно задать в свойстве font, перечислив через пробел, но рекомендуется выносить отдельно свойство font-family, так как там тоже задаются свойства через пробел;

font-size — размер шрифта;

font-style — стиль шрифта, бывает normal, italic и oblique. Всё, что не normal, выглядит, как курсив, но рекомендуется пользоваться italic;

font-family — устанавливается шрифт. Название шрифта, если содержит больше одного слова, заключается в кавычки. И строго рекомендуется, помимо указания шрифта, указывать ещё семейство шрифтов и начертание, чтоб браузер попытался найти более подходящий шрифт для отображения, если на компьютере пользователя не найдётся требуемого. Например:

Здесь «Times New Roman» — название шрифта. Если такого шрифта нет на компьютере, браузер попытается найти шрифты, которые похожи на гарнитуру Times. Если ничего похожего нет, браузер возьмёт шрифт, соответствующий начертанию sans-serif. Названий шрифтов и гарнитур можно указывать несколько, браузер будет проверять наличие шрифтов в системе слева направо. Начертаний бывает всего три:

  • serif — шрифты с засечками,
  • sans-serif — шрифты без засечек,
  • monospace — моноширинные шрифты (все символы имеют одну ширину)

font-variant — бывает normal или small-caps, что означает превращение всех маленьких букв в заглавные, но по размеру немного меньшие ЗАГЛАВНЫХ.

font-weight — толщина шрифта. Бывает normal, lighter (чаще всего выглядит как обычный шрифт), bold (полужирный), bolder (обычно выглядит так же, как bold), или задать толщину шрифта от 100 до 700 с шагом в 100 (обычно никто этим не пользуется);

text-align — выравнивание текста, бывает left, center, right или justify;

text-decoration — украшение текста. Может принимать значения none (никаких украшений, убирает даже подчёркивание у ссылок), underline (подчёркнутый текст), line-throught (перечёркнутый текст), overline (текст с линией сверху), blink (мигающий текст, не работает практически ни в одном браузере. Кстати, делать текст мигающим — признак дурного вкуса);

text-transformation — трансформация текста, может принимать значения uppercase (ВСЕ БУКВЫ ЗАГЛАВНЫЕ), lowercase (все буквы строчные), capitalize (Первая Буква Каждого Слова Становится Заглавной);

text-indentation — отступ первой строки текста («красная строка»).

Прочие свойства CSS

Свойств CSS очень много разных, все я их приводить не буду, только наиболее часть используемые, про которые ещё не писал:

  • background — большое свойство для задания фоня элемента. Можно задавать все свойства фона в этом свойстве, перечисляя через пробел, а можно разделить по отдельным подсвойствам:
  • background-color — основной цвет фона;
  • background-image — загрузить картинку на фон элемента. Обычно пишут background-image: url(«path/to/image»); — картинка, разумеется, должна быть доступна через веб-сервер;
  • backhround-repeat — если картинка на фон меньше по размеру, чем элемент, то можно задать правила повторения картинки, чтоб она заполнила весь элемент. Может принимать значения repeat-x (повторить картинку по оси x), repeat-y (повторить картинку по оси y), repeat (повторять картинки по осям) и no-repeat (не повторять);
  • background-position — картинку на фоне можно прижать к какому-либо краю либо к углу элемента, задав это свойство — может принимать значения right, top, bottom, left или комбинации этих свойств, записанные, через пробел, для указания угла;
  • background-attachment — если указать fixed, то картинка на фоне не будет прокручивается вместе с остальной страницей (по умолчанию это свойство имеет значение scroll и фон прокручивается вместе со страницей);

И ещё четыре свойства, которые актуальны только для списков (

    ,
      ) и их элементов (
      ):
  • list-style — задаёт стиль списка. Можно задать весь стиль сразу, записывая значения через пробел, а можно вынести отдельные значения в «подсвойства»;
  • list-style-image — картинка, которая отображается в списке напротив каждого пункта, задаётся как url(«path/to/image»);
  • list-style-position — определяет, входит ли буллет (или картинка, заданная в свойстве выше), в ширину
  • или торчит снаружи (по умолчанию торчит снаружи, и ширина
  • определяет ширину его текста), может принимать значения, соответственно, inside или outside;
  • list-style-type — определяет тип списка. Может принимать почти два десятка различных значений, по умолчанию для
      — decimal, для
        — disk. Меняя их, можно превратить
          в
            и наоборот.

        CSS 3

        Со времён выпуска CSS2 прошло достаточно много лет (стандарт CSS2 был принят в 1998 году), и консорциум W3C выпустил стандарт CSS2.1 в середине 2011 года. Однако, в CSS2.1 нет ни скруглённых уголков, ни всяческих трансформаций элементов (поворотов, наклонов, искажений), а технические возможности и, главное, требования дизайнеров и верстальщиков уже распространяются и на эти всякие искажения, и, главное, на скруглённые уголки. Все эти нововведения входят в разрабатываемый сейчас стандарт CSS3. Большую его часть (наиболее стабильную) поддерживают все последние версии браузеров. Старые браузеры, разумеется, CSS3 не поддерживают или поддерживают крайне ограниченно.

        Наиболее часто употребимым свойством, относящимся к CSS3, является скругление уголков. Оно задаётся свойством border-radius. Это свойство скругляет уголки блока вместе с границей и фоном.

        • border-radius: 50px; — задаст всем 4 уголкам блока радиус скругления 50px
        • border-radius: 5pt 10pt; — верхний левый и правый нижний уголки будут скруглены с радиусом 5pt, верхний правый и нижний левый с радиусом 10pt
        • border-radius: 1px 2px 3px 4px; — всем четырём углам по порядку задаётся свой радиус скругления (начиная с верхнего левого и далее по часовой стрелке)

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

        • border-top-left-radius,
        • border-top-right-radius,
        • border-bottom-left-radius,
        • border-bottom-right-radius.

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

        Некоторые браузеры в предыдущих версиях использовали свои собственные свойства, аналогичные border-radius:

        браузеры, основанные на движке WebKit (Google Chrome, Safari) использовали и до сих пор поддерживают аналогичное свойство «-webkit-border-radius»;

        FireFox и все браузеры, построенные на движке Gecko, использовали и до сих пор поддерживают «-moz-border-radius»;

        Opera использовала и поддерживает «-o-border-radius».

        Поэтому если хочется поддерживать на только новые версии браузеров, а ещё и некоторые более старые (кроме IE), то следует писать так:

        Прочие свойства, появившиеся в CSS3, можно найти в соответствующем руководстве (ссылки ниже), но следует помнить, что их совместимость с более старыми версиями браузерами ограничена.

        Введение в css2

        Каскадные таблицы стилей есть один из способов оформления HTML документа. Ни более, и не менее. Тем не менее, философия этого способа радикально отличается от типично разметочного «сюда мы сунем , а сюда, пожалуй, «. Недостатки такого подхода видны сразу — при попытке сменить оформление сайта придется менять все страницы и все элементы, один за другим.

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

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

        На сегодняшний день официально принятой стандартами W3C версией CSS является 2, а в разработке находится 3 версия. Повторюсь, что не все свойства CSS2 поддерживаются браузерами. Тем не менее, некоторые свойства CSS2 являются краеугольным камнем важных аспектов DHTML программирования — всяких там менюшек всплывающих, бегающих картинок и прочего мельтешения на экране.

        Для начала мы рассмотрим простейший синтаксис CSS и методы подключения таблиц.

        Сама таблица — обычный текстовой файл, обычно сохраняемый с расширением «.css«. Формат таблиц практически свободный, что и будет показано далее. Файл состоит из определений, или правил (rules). В общем виде правило выглядит так — сначала идет selector, я буду называть его определителем, который обозначает, к каким именно элементам HTML нужно применять оформление, затем идет открывающая фигурная скобка, в ней через точку с запятой перечисляются атрибуты оформления CSS, затем фигурная скобка закрывается.

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

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

        Оформление определителя для всех элементов одного типа

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

        В данном случае все параграфы документа, не имеюшие уточняющих классовых или идентификаторных атрибутов, будут иметь выравнивание по правому краю, а аналогичные элементы cite — форматирование моноширинным шрифтом. Обратите внимание, что конкретный шрифт не задан, поскольку на машине пользователя, если он использует один из вариантов Unix, может и не быть, скажем, шрифта Courier (хотя надо сказать его клоны имеются практически на всех Линуксовых дистрибутивах). Тем не менее, текст отобразится корректно — установленным по умолчанию в браузере моноширинным шрифтом.

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

        После точки пишется название класса. Если имя основного тэга не указано (то есть перед точкой ничего нет), то оформление будет применяться для всех типов элементов, имеющих >Следующим способом является задание оформления для именованных (определенный идентификаторами) элементов документа. Выглядит это так:

        А применяется так:

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

        Оформление контекстного определителя

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

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

        Ну и напоследок.

        Группировка определителей

        При необходимости, можно указать общее оформление для целого набора определителей. Ясно будет из примера:

        Элементы a, h2, h3, td, td.menu не будут подчеркиваться, выводится будут шрифтом Arial, а размер у них будет (догадались? :) x-small.

        И самое последнее. Все последующие определения с тем же именем (например, два подряд определения для элемента a) всегда добавляют оформление. То есть если у Вас для элемента a был введен какой-то цвет и шрифт, а впоследствии где-нибудь (не обязательно в той же таблице) было введен атрибут цвета и выравнивания, то цвет и выравнивание изменятся, а шрифт останется прежним. Вообще, любой параметр таблицы стилей можно впоследствии перегрузить (в смысле дополнить).

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL