Интернет, компьютеры, софт и прочий Hi-Tech

Что такое каскадные таблицы стилей CSS

Предположим, вы вознамерились создать свой собственный сайт. Освоили язык гипертекстовой разметки (HTML), можете форматировать текст, вставлять картинки, создавать гиперссылки.

Однако наступит такой момент, когда вам надоест вручную прописывать оформление каждого элемента. Их, элементов, может быть очень много: абзацы, которые следует выделять отдельным начертанием, границы таблиц, вызывающие немало мучений, рамки вокруг картинок, ну и так далее. Так вот, всё это можно сделать гораздо проще с помощью каскадных таблиц стилей (Cascading Style Sheets, CSS).

Почему каскадных? Потому что оформление разных элементов страницы происходит поэтапно, каскадом. Вы указываете первое правило, например, ссылки должны быть голубыми, а их текст подчёркивается только при наведении указателя мыши. Всё, теперь все ссылки действительно будут такими, совершенно не нужно прописывать это правило для каждой из них отдельно.

Следующий этап — назначаете, каким должен быть обычный текст, каким — курсив, полужирный, каждый заголовок и содержимое ячеек таблиц. Далее — сами таблицы, оформление границ, их цвет. Таким образом можно одним махом оформить практически всё, что имеется на веб-странице (и, собственно говоря, поддаётся оформлению).

Таблицу стилей можно вставлять как непосредственно в заголовок веб-страницы (обычно её размещают до body и заключают в комментарий), так и отдельным файлом, подгружаемым при открытии страницы в браузере (что очень удобно, особенно если на сайте много страниц).

Кроме того, элементы стиля можно вставлять непосредственно в теги HTML.

Например, один абзац следует выделить иначе. Он, абзац, как известно, начинается с латинской буквы <p> в угловых скобках. Так вот, в тех же угловых скобках, отделив от <p, пробелом, пишем style="text-align: justify", и тогда весь абзац выровняется по ширине. Независимо от того, что указано в таблице стилей, какое там установлено «глобальное» правило для выравнивания всех абзацев.

Если же нужно создать иное оформление не просто для абзаца, а целого блока, участка страницы, тогда в угловых скобках пишем то же самое, но только не с <p>, а с <div> (потом не забываем в конце ставить </div> в тех же угловых скобках, обозначив окончание блока).

В общем, CSS очень легко и просто интегрируется с HTML. Формат создания таблицы стилей очень прост. Каждый каскад выглядит следующим образом: селектор {свойство: значение;}. Селекторов, свойств и значений может быть несколько:

селектор, селектор, селектор {свойство: значение;
                              свойство: значение;
                              свойство: значение;}

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

Например, чтобы сделать все заголовки (допустим, <h2>, <h3>) полужирными и зелёными, пишем

h2, h3 {font-weight: bold; color: green;}

А чтобы текст ссылок под указателем мыши становился синим и не подчёркнутым, переходим на следующую строку и пишем:

a:hover {text-decoration: none; color: blue;}

Существует невообразимое количество справочных материалов по каскадным таблицам стилей. Как для начинающих, с азами и простейшими примерами (вроде показанных выше), так и со сложными конструкциями, слоями и настоящими каскадами, жутко заумными, с распределением элементов на классы и прочими наворотами.

Однако первые шаги лучше всего делать скромно и без излишеств. Полезно сохранять страницы на диск и смотреть файлы с таблицами стилей, созданные профессиональными веб-мастерами. (Эти файлы будут в папке с элементами страницы, картинками и скриптами, а расширение у них, как нетрудно догадаться, css. Открываются в любом редакторе простого текста, например, в Блокноте.)

Теоретически современные браузеры обязаны более менее адекватно отображать оформление, заданное в таблицах CSS. Но раньше с этим возникали проблемы. Первый стандарт CSS (под названием CSS1) был принят ещё в 1996-м.

С тех пор много воды утекло, многое изменилось к лучшему, но иногда какой-нибудь не совсем удачный релиз Opera (особенно в версии для Linux) отрисовывает некоторые сайты весьма криво. Хотя, конечно, такое случается всё реже. Злые языки утверждают, что это из-за движка Presto.

Проблемы случаются и с Internet Explorer 8. Ну а Chrome и Safari на движке WebKit, а также Firefox на Gecko отображают страницы с CSS сравнительно неплохо.

Автор: vanilinkin, специально для xBB.uz, 29.05.2011

Предыдущие публикации:

Последнее редактирование: 2011-05-29 20:23:48

Метки материала: таблицы, css, таблицы стилей, каскадные таблицы стилей, таблицы стилей css, каскадные таблицы стилей css, что такое каскадные таблицы стилей, что такое каскадные таблицы стилей css

Оставьте, пожалуйста, свой комментарий к публикации

Представиться как

Антибот:

Просьба не постить мусор. Если вы хотите потестить xBB, воспользуйтесь кнопкой предварительного просмотра на панели инструментов xBBEditor-а.