Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17542 / 1636 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Лекция 7:

Основы CSS. Особенности CSS 3

< Лекция 6 || Лекция 7: 12 || Лекция 8 >
Аннотация: Понятие каскадных таблиц стилей. История версий CSS. Отношения между множественными вложенными элементами. Создание CSS стилей. Связь HTML и CSS. Правила написания CSS. Каскадность CSS.

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

  1. каскадные таблицы стилей;
  2. используется для управления внешним видом информации, предоставляемой сайтом.

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

Возникновение CSS

Во второй лекции нашего курса приведена краткая история возникновения HTML. Частично написанное сейчас будет пересекаться с прошлым материалом.

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

С дальнейшим распространением HTML такие компании, как Microsoft и Netscape стали внедрять свои собственные теги или "улучшать" имеющиеся именно с целью управления оформлением html - документов. Часть внесенных изменений прижилась и "ушла" в массы.

После случилось логически неизбежное, а именно, HTML стал представлять собой набор несовместимых между собой тегов и расширений. Результатом исправления ситуации стал стандарт HTML 3.2, "узаконивший" ряд изменений и устранивший проблемы совместимости.

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

Стандарт HTML 3.2 лишь исправил ряд наиболее серьезных недостатков предыдущих версий. Настоящим же решением проблемы явился стандарт HTML 4.0, в рамках которого было предложено отделить описание структуры html документа от его оформления.

Если уж совсем "рыться" в истории, то можно заметить, что и этот подход не нов. SGML, на котором и основывалась первая версия HTML, в числе прочего предполагал наличие отдельного "файла стилей" документа.

Таким образом, возникновение каскадных таблиц стилей является закономерным результатом эволюционного развития стандартов HTML.

Суть и преимущества CSS

CSS (Cascading Style Sheets – каскадные таблицы стилей) – язык описания внешнего вида документа, созданного при помощи языка разметки.

Концепция каскадных таблиц стилей была предложена Хоконом Виум Ли – норвежским ученым и специалистом в области информационных технологий, работавшим в то время на консорциум W3C.

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

К преимуществам использования CSS относятся:

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

Стандарт HTML 4.0 помимо CSS утвердил и объектную модель браузера (Browser Object ModelBOM), о которой следует сказать отдельно.

Объектная модель браузера описывает содержимое веб - документа, т.е. сама модель является набором объектов, описывающих указанное содержимое. Поскольку BOM уникальна для каждого браузера, возникали проблемы с межплатформенными приложениями. В конечном итоге, на место объектной модели браузера пришла объектная модель документа (Document Object Model – DOM), описывающая стандарт представления веб - страниц в виде набора объектов.

Краткая история CSS

Описание возникновения CSS будет неполным, без краткой истории версий каскадных таблиц стилей.

Таблица 6.1.
Версия Дата принятия Предоставляемые возможности
CSS1 17.01.1996
  • Управление способом отображения элемента на странице.
  • Задание настроек обтекания элемента текстом.
  • Управление размерами элемента.
  • Управление внешними и внутренними отступами элемента.
  • Управление вертикальным выравниванием в таблицах.
  • Управление стилями границ элементов.
  • Управление форматированием списков.
  • Управление цветами текста и фона.
  • Управление параметрами шрифтов.
  • Управление свойствами текста.
  • Управление междустрочными интервалами.
CSS2 12.05.1998 Все возможности CSS1 и ряд новых:
  • Управление направлением текста.
  • Управление позиционированием элементов.
  • Управление видимыми областями элементов.
  • Управление отображением элементов, выходящих за границы заданных размеров.
  • Управление внешним видом курсора.
  • Управление расположением элементов по оси z (слои).
  • Задание минимально и максимально возможных размеров элемента.
  • Управление расстоянием между ячейками таблицы.
  • Управление стилями границ элемента (каждой границы в отдельности).
  • Управление размерами элементов таблиц.
  • Управление стилями кавычек.
  • Управление контентом при его печати.
  • Управление звуковым оформлением контента (громкость, паузы и т.п.).
CSS2.1 8.09.2009
  • Исправлен ряд ошибок CSS2.
  • Изменились некоторые моменты, реализация которых в подавляющем большинстве браузеров отличается от спецификации CSS2.
  • Убрали особенности CSS2, которые, в силу того, что не были реализованы, были отвергнуты CSS сообществом.
  • Удалили фрагменты CSS2, которые будут устаревшими в CSS3.
  • Добавили некоторые новые значения свойств.
CSS3 разрабатывается
  • Поддержка закругленных углов.
  • Поддержка градиентных границ.
  • Управление тенями элементов.
  • Поддержка возможности использования изображений, в качестве границ элементов.
  • Управление тенью текста.
  • Поддержка нестандартных шрифтов.
  • Возможность изменения размеров блоков пользователем.
  • Возможность разбиения текста на несколько колонок.
  • Управление фоновыми изображениями.

В настоящее время стандарт CSS3 только разрабатывается. В связи с этим нами перечислен только ряд его новшеств. Подробнее с ними, на данном этапе, предлагается ознакомиться самостоятельно.

< Лекция 6 || Лекция 7: 12 || Лекция 8 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Татьяна Бобошко
Татьяна Бобошко
Россия
Андрей Пшеничных
Андрей Пшеничных
Россия, Санкт-Петербург, НИУ ИТМО