Перейти к содержимому

Реферальная программа Мегаплана


Что такое стили CSS и с чем их едят

#1 Mira

Mira
  • Пользователь
  • 14 сообщений
  • Репутация: 3
0

Отправлено 21 Октябрь 2012 - 20:48

История 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.


Webkit
http://developer.app...troduction.html

Firefox
https://developer.mo...illa_Extensions

Opera
http://www.opera.com...specs/presto27/

Internet Explorer
http://msdn.microsof...e/ff468705.aspx

CSS3, Please!
http://css3please.com/

CSS3 Generator
http://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

Изображение

2. Различное оформление при помощи CSS и картинок тут: http://www.mezzoblue...den/alldesigns/

Изображение


Включение 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 - значение

Изображение

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

В HTML это будет выглядеть <p class="red">. Название класса может быть любое.
В CSS пишем: .red { color:red; }

Каждый идентификатор применяется в HTML-документе только один раз. Стиль для него задается при помощи параметра id. Например:

В HTML это будет выглядеть </p><p id="red">. Название класса может быть любое.
В CSS пишем: p#red { color:red; }

Я не могу полностью охватить тему CSS. Но если вы решили создать свой сайт с применением стилей, то в интернете можно найти много сайтов и учебников по CSS, которые серьезно облегчат вам жизнь и помогут найти необходимую информацию.</p>

При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

Изображение

 

 

Сообщение отредактировал Mira: 23 Октябрь 2012 - 15:33

  • 1

#2 Iceforce

Iceforce
  • Пользователь
  • 20 сообщений
  • Репутация: 2

Отправлено 22 Октябрь 2012 - 13:23

Отличная статья для новичков -_-
Правда совсем нет картинок. Хоть что-то можно было подобрать. Это могло бы добавить информативности и просто украсить :)
  • 0

#3 Mira

Mira
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 3

Отправлено 23 Октябрь 2012 - 15:11

Спасибо за оценку и совет. Немного картинок добавила. :)
  • 0


Оформление форума – IPBSkins.ru