X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Что такое стили CSS и с чем их едят
Mira_mw
Mira_mw
Topic Starter сообщение 21.10.2012, 21:48; Ответить: Mira_mw
Сообщение #1


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

[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
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Iceforce
Iceforce
сообщение 22.10.2012, 14:23; Ответить: Iceforce
Сообщение #2


Отличная статья для новичков -_-
Правда совсем нет картинок. Хоть что-то можно было подобрать. Это могло бы добавить информативности и просто украсить :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Mira_mw
Mira_mw
Topic Starter сообщение 23.10.2012, 16:11; Ответить: Mira_mw
Сообщение #3


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Во что сегодня инвестировать?
Делимся своими приносящими прибыль вариантами
69 traveliver 4457 25.3.2024, 6:48
автор: Skyworker
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВо что Вы играете?
399 Vmir 67507 23.3.2024, 12:51
автор: Alexand3r
Открытая тема (нет новых ответов) "Извините, что ожидание затянулось, но не думайте, пожалуйста, что мы про вас забыли. Мы заводим задачи по всем обращениям и контролируем работу над ними самым тщательным образом."
Вопрос
0 kuz999 1189 5.2.2024, 14:06
автор: kuz999
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3336 25.1.2024, 14:36
автор: malamut
Горячая тема (нет новых ответов) Что приведет к краху всего рынка криптовалют
стейблкоины, прогноз
43 GlazAlmaz 5835 13.1.2024, 17:30
автор: Antarez


 



RSS Текстовая версия Сейчас: 29.3.2024, 14:37
Дизайн