CSS


CSS


CSS (Cascading Style Sheets, каскадные таблицы стилей) - это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML).  Он может быть применён и к отдельному тегу - элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.

История возникновения и развития CSS

CSS — одна из широкого спектра технологий, которые одобрены консорциумом W3C (World Wide Web Consortium, возглавляемый Тимати Джоном Бернерсом-Ли) и получили общее название «стандарты Web». Необходимость каким-то образом стандартизировать Web, создать более-менее единые правила, согласно которым работали бы программисты и веб-дизайнеры, возникла еще в 1990-х годах. Тогда был разработан язык HTML 4.01 и XHTML. Немного позже был разработан и стандарт CSS.

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

Собственно термин Cascading Style Sheets в 1994 году предложил Хокон Виум Ли, нынешний главный инженер компании Opera. С того момента Виум Ли совместно с Бертом Босом, одним из разработчиков браузера Argo, занялись развитием стилевого языка CSS. Одним из отличия CSS стал принцип наследования, благодаря которому разработчик может определить стиль на основании более ранних. То есть, в CSS используется наследование от родителя к потомку, поэтому определенные раньше стили дают возможность определить последующие.

Консорциум Всемирной паутины (World Wide Web Consortium, W3C) обратил внимание на стилевой язык CSS уже через пару лет работы над ним. И в 1996 году технология CSS была ободрена. 17 декабря 1996 года также была издана соответствующая рекомендация CSS1, первые коррективы в которую были внесены 11 января 1996 года.

Уровень 1 (CSS1)

Возможности первой CSS, рекомендованной Консорциумом Всемирной паутины:

1.    Параметры шрифтов. Предоставлены возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
2.    Настройка цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
3.    Текстовые атрибуты. Существует возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
4.    Возможность выравнивания текста, изображений, таблиц и других элементов.
5.    Возможность настройки свойств блоков, таких как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки.
6.    Ограниченные средства по позиционированию элементов, такие как float и clear.

Уровень 2 (CSS2)

На основании CSS1 12 мая 1998 года Консорциум принял вторую рекомендацию – CSS2. Была сохранена обратная совместимость.
Добавленные возможности в CSS2:

1.    Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.
2.    Типы носителей. На данном уровне возможно устанавливать разные стили для разных носителей (например отдельно для монитора стационарного компьютера и отдельно – для КПК).
3.    Звуковые таблицы стилей. Ориентируются по голосу, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
4.    Страничные носители. Предоставляют возможность установки различных стилдей постранично (например, отдельно для четных и отдельно для нечетных страниц).
5.    Расширенный механизм селекторов.
6.    Указатели.
7.    Генерируемое содержимое. Позволяет добавлять содержимое, которого нет в исходном документе, до или после нужного элемента.

В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1

Уровень 2, ревизия 1 (CSS2.1)

Данная рекомендация W3C была принята 7 июня 2011 года.

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

Уровень 3 (CSS3)


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

Уровень 4 (CSS4)

Разрабатывается W3C с 29 сентября 2011 года.

Для чего нужен CSS

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

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

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

Отличие CSS от HTML

Главное отличие состоит в том, что задача HTML – структурировать содержимое страницы, а задача CSS – форматирование данного, уже структурированного, содержимого.

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

Такая дизайнерская деятельность в результате привела к тому, что и оригинальные теги, предназначенные для структурирования (такие как, например, <table>) стали применяться для дизайна. Однако возникла проблема – новые дизайнерские теги не поддерживались многими браузерами.

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

Преимущества CSS

Конкретные преимущества, которые дает веб-дизайнеру использование стандарта CSS:

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

Внедрение CSS в HTML документ.

Связать стилевое описание элемента непосредственно с самим элементом, то есть HTML-документом, можно тремя способами.

Способ первый. Написать стилевое описание непосредственно в самом элементе. Данный способ успешно применим лишь в том случае, когда в стилевом описании нуждается один-единственный элемент в HTML документе.

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

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

Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css, либо же обрамлена тегами <style> и размещена в «шапке» той самой веб-страницы, на которую она действует):
p {
  font-family: Garamond, serif;
}
h2 {
  font-size: 110 %;
  color: red;
  background: white;
}
.note {
  color: red;
  background: yellow;
  font-weight: bold;
}
p#paragraph1 {
  margin: 0;
}
a:hover {
  text-decoration: none;
}
#news p {
  color: blue;
}
[type="button"] {
  background-color: green;
}

Здесь приведено семь правил CSS с селекторами p, h2, .note, p#paragraph1, a:hover, #news p и [type="button"].

1.    Первое правило присвоено HTML-элементу p (абзацу) — назначен стиль. Абзацы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»).

2.    Второе правило присвоено HTML-элементу h2 (заголовку второго уровня). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.

3.    Третье правило будет применено к любому элементу, атрибут class которого равен 'note'. Например, к параграфу: <p class="note">Этот абзац будет выведен полужирным шрифтом красного цвета на желтом фоне.</p>

4.    Четвёртое правило будет применяться только к элементу p, атрибут id которого равен paragraph1. Такой элемент не будет иметь внешних отступов (margin).

5.    Пятое правило определяет стиль hover для элементов a — гиперссылок. По умолчанию, в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.

6.    Шестое правило, применяется для элементов p, которые находятся внутри какого-либо элемента с атрибутом id, равным «news» (#news p — это типичный случай селектора потомков, см. 5-й пункт списка выше).

7.    Седьмое правило применяется для всех элементов, у которых атрибут type равен button. Например, это правило будет применено к элементу <input type="button"> (обычная кнопка), изменив его цвет фона на зеленый.

Пример использования CSS


Поддержка CSS браузерами

Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на движках Gecko (такие как Mozilla Firefox), WebKit (такие как, например, Chrome, Safari, Arora) и Presto (браузер Opera).

Кстати, самый распространенный в мире браузер Internet Explorer (шестая версия) поддерживает CSS далеко не полностью.

Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS, но всё ещё содержит значительное количество ошибок.

В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3.

Для проверки поддержки браузером веб-стандартов (в том числе и различных частей стандарта CSS) был разработан тест Acid. Его вторая версия называется Acid2, а третья, соответственно, Acid3.

Расширения CSS


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

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

•    во время запуска страницы на стороне клиента (средствами JavaScript)
•    во время запуска страницы на стороне сервера
•    во время вёрстки сайта средствами специального компилятора

Примеры расширений CSS:

•    Sass (метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей)
•    LESS (динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и оказал влияние новый синтаксис Sass «SCSS», в котором также использован синтаксис, являющийся расширением СSS)
•    Stylus



Это нравится:0Да/0Нет

Новые темыОбъявленияСвободное общение
03:17 Тема CleanWP не выводит картинки в рубриках 
02:48 Вопрос насчет ссылок с форумов 
02:45 Как расторгнуть договор с РСЯ 
02:06 Отсутствует поле "position" 
20:03 Можно ли переопубликовать статьи на своём сайте? 
19:41 Поисковый робот 
17:43 Исправьте разметку типа "Строки навигации" на сайте 
02:26 Web-мастер (wordpress, joomla, dle, ucoz, modx, соц сети и прочие) 
01:27 Софт на заказ 
23:41 Дизайн | Редизайн | Верстка - сайтов, банеров, логотипов 
23:36 Создание сайтов / Верстка / Доработка сайтов 
22:53 Профильный прогон по трастовым сайтам с ИКС до 47000 
20:12 Размещение вечных "Белых" ссылок в Яндекс.Коллекциях - Повышение ИКС сайта 
19:49 Куплю адалт сайты 
21:37 Как я отдыхал в другой стране, видел много коров, коз и не одной улитки. 
21:23 Наши машинки 
12:41 Plussy - лучшая партнерка для гемблинг 
11:50 Цель: 100 000 руб. в месяц с 1-го канала на Яндекс Дзен © БЛОГ НЕ БЛОГЕРА 
18:02 Бесплатно за отзыв можем сделать 1 услугу в соц сетях 
15:44 Прошу помощи по составлению семитического ядра (взаимообмен) 
13:52 4 ключа к Elite-Board 2.3 (400 руб.)