CSS in your life, краткое описание

CSS
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. CSS используется преимущественно для оформления HTML- и XHTML-документов, но иногда и для других XML-структурированных документов

История, кратко
CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web».[1] В 90-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS.

CSS1 - W3C принята 17 декабря 1996, откорректирована 11 января 1999
CSS2 - W3C принята 12 мая 1998. Построена на CSS1 с сохранением обратной совместимости.
CSS2.1 - W3C от 6 ноября 2006. Построена на CSS2, содержит исправления ошибок.

Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
Выравнивание для текста, изображений, таблиц и других элементов.
Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.
И другое…

Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox и др.) и WebKit (Safari), а также браузер Opera. К сожалению, самый распространенный на данный момент браузер Internet Explorer 6 поддерживает CSS далеко не полностью. Вышедший спустя 7 лет предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS но всё ещё содержит значительное количество ошибок

ЗЛО

Самый не удачный браузер в мире, мое мнение и не только.

Это IE6

Кривая поддержка вообще всех стандартов W3C

Рейтинг браузеров, не мнение 1%

1. IE 6 - 39.5388%
2. IE 7 - 24.3206%
3. FireFox 2 - 16.4076%
4. Opera 9 - 14.2244%
5. Opera 8 - 1.8341%
6. FireFox - 1 1.0090%

Итого: IE6 + IE7 = 63.8% и FF2 + FF1.1 = 17.4%

Включение в HTML

Подключение CSS находящиеся в отдельном файле

<link rel="stylesheet" type="text/css" href="style.css">

<style type="text/css" media="all">@import "style.css";</style>

Непосредственно в HTML-документе

<style type="text/css"> body { color: red; } </style>

Непосредственно в элемент:

<p style="font-size: 21px; color: green;"> IE6 – это зло! </p>

Базовый синтаксис

2. Базовый синтаксис
Селектор { свойство1: значение; свойство2: значение; ... }

3. Селектор тегов
Тег { свойство1: значение; свойство2: значение; ... }

4. Классы
Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

5. Идентификаторы
#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
<div id=“Name_of_ID"> ...</div>

6. Дочерние селекторы
Селектор 1 > Селектор 2 { Описание правил стиля }

7. Селекторы атрибутов
[атрибут] { Описание правил стиля }Селектор[атрибут] { Описание правил стиля }

8. Псевдоклассы
Элемент:Псевдокласс { Описание правил стиля }

9. Группирование
Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }

Инструменты для разработки – IE

Сущиствует множество платных и без платных инструментов для тестирования и разработки стилей и внешнего вида веб-страницы

Для IE, был выпущено бесплатное дополнение от Microsoft под названием Internet Explorer Developer Toolbar, его можно скачать с сайта Microsoft и установить.

Инструменты для разработки - Firefox

Для FF, был выпущено бесплатное дополнение от Joe Hewitt и Parakey под названием Firebug, его можно загрузить с сайта http://www.getfirebug.com или с сайта Mozilla.