История CSS
CSS – это аббревиатура от английского Cascading Style Sheets, что переводится как каскадные таблицы стилей.
Это один из стандартов, одобренных W3C – Консорциумом Всемирной паутины. W3C создан мировыми корпорациями в компьютерной индустрии для того, чтобы обеспечить совместимость выпускаемых продуктов и разработок для World Wide Web.
В 1990-е годы каждый браузер имел свои стили для отображения веб страниц. Концепция каскадных таблиц появилась в 1994 году благодаря специалисту в области информатики Хокон Виум Ли, который в то время работал для W3C.
17 декабря 1996 года W3C издает первую рекомендацию CSS1. Там были описаны возможности параметров шрифтов, цвета элементов таблиц, атрибуты и выравнивание текста, свойства блоков, позиционирование элементов при помощи float и clear.
12 мая 1998 года года W3C на основе CSS1 издает вторую рекомендацию - CSS2. Которая теперь позволяет управлять блочными элементами без табличной верстки, имеет расширенный механизм селекторов и др. Хотя, эта версия так и не стала «официальной» рекомендацией CSS.
7 июня 2011 года появился стандарт CSS2.1, который используется в настоящее время.
Наиболее известные браузеры, поддерживающие этот стандарт: Mozilla Firefox на базе движка Gecko; Google Chrome, Safari - на WebKit, Opera – на Presto. Удивительно, что браузер Internet Explorer 8 (IE8) на новом движке, выпущенный в 2009 году, полностью поддерживает всю спецификацию CSS2.1 и частично CSS3.
Через год после публикации CSS2 началась работа над CSS3. Однако реализация CSS2 происходила несогласованно. W3C приостановил все работы над новой версией и стал заниматься CSS2.1. В 2005 году CSS3 был возвращен статус черновых и до сих пор ведется разработка стандартов.
В новой версии много нововведений. Это визуальные эффекты, не зависящие от изображений, трансформация полей, уникальные шрифты, мощные селекторы, переходы и анимация, медиазапросы, градиенты и многое другое.
CSS3- это не единая спецификация, а отдельные модули. Каждый модуль разрабатывается отдельной командой авторов, в собственном темпе.
Список всех модулей, а так же текущий статус (уровень зрелости или maturity level) можно посмотреть тут:
http://www.w3.org/St...SS/current-workПитер Гастон, профессиональный веб-разработчик и автор книги «CSS3 Руководство для разработчика» сделал подборку приложений со ссылками на ресурсы, с дополнительными сведениями и инструментами, позволяющими пользоваться возможностями CSS3.
Webkithttp://developer.app...troduction.htmlFirefoxhttps://developer.mo...illa_ExtensionsOperahttp://www.opera.com...specs/presto27/Internet Explorerhttp://msdn.microsof...e/ff468705.aspxCSS3, Please! http://css3please.com/CSS3 Generatorhttp://www.css3generator.com/Более подробный список вы найдете на сайте Питера Гастона (
http://thebookofcss3.com/)
С 29 сентября 2011 года началась работа над версией CSS4.
В чём разница между CSS и HTML?
HTML - это своего рода каркас, который используется для структурированного вывода содержимого страницы, где в основном используются теги, например, <h1>, <p> и др. А CSS – это стилевое оформление, дополняющее HTML и позволяющее сделать дизайн сайта более красивым и эффектным.
Очень наглядно это демонстрирует сайт css Zen Garden. Одному и тому же документу, написанному на HTML, можно создать совершенно разные дизайны.
Примеры: 1. Исходный файл тут:
http://www.csszengar...den-sample.html[img]http://www.infoorel.ru/images/html_23_10.jpg[/img]
2. Различное оформление при помощи CSS и картинок тут:
http://www.mezzoblue...den/alldesigns/[img]http://www.infoorel.ru/images/css_23_10.jpg[/img]
Включение CSS в HTML документ
CSS можно подключить двумя способами:
1. Разместить CSS на странице между тегами head и после тега title. Описание самого стиля располагается между тегами style.<title>Название страницы</title>
<style type="”text/css”">
CSS – код размещается здесь.
</style>
</p><p>Использование CSS при оформлении текста</p>
Однако если у вашего сайта будет много страниц, то придется редактировать CSS код для каждой страницы.
2. Разместить CSS в отдельном файле при помощи элемента link. <title>Название страницы</title>
<link href="style.css" rel="stylesheet" type="text/css">
<p>Использование CSS при оформлении текста</p>
Теперь вы можете менять оформление на всех страницах, редактируя только один файл.
Что такое CSS селекторы
Селекторы – это указатели, к которым применяются правила CSS.
Основные виды селекторов:
- HTML селекторы,
- Селекторы класса
- Идентификаторы (ID селекторы).
HTML селекторы применяются к тегам, например: body, p, h1, h2 и другие.
р {color:#cccccc;}, где
р –
селектор,{color:#cccccc;} –
блок объявления селектора,
color –
свойство,
#cccccc -
значение[img]http://www.infoorel.ru/images/selector.jpg[/img]
Селекторы класса позволяют к каждому тегу применить свой класс. Например:
В HTML это будет выглядеть
<p class="red">. Название класса может быть любое.
В CSS пишем:
.red { color:red; }Каждый идентификатор применяется в HTML-документе только один раз. Стиль для него задается при помощи параметра id. Например:
В HTML это будет выглядеть
</p><p id="red">. Название класса может быть любое.
В CSS пишем:
p#red { color:red; }Я не могу полностью охватить тему CSS. Но если вы решили создать свой сайт с применением стилей, то в интернете можно найти много сайтов и учебников по CSS, которые серьезно облегчат вам жизнь и помогут найти необходимую информацию.</p>
При поддержке:
SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой.
Обсудить на форуме.
[img]http://www.masterwebs.ru/sp/seopult.gif[/img]
Сообщение отредактировал Mira - 23.10.2012, 16:33