Урок 10 CSSПаранойя современного интернета и не менее современных технологий "зачала" в своих недрах страсть к красивому.
Результатом этого, своего рода безумства, стало рождение каскадных таблиц стилей CSS (Cascading Style Sheets).
Помоему ничего полезнее для html придумать было нельзя, эта "штука" позволяет задавать каждому элементу в документе собственное оформление, причем эти оформления заносятся в одну таблицу и позволяют сэкономить тонну байтов :-) Естественно меняя только эту таблицу Вы в можете менять стиль или по другому дизайн своего сайта в считанные секунды.
Давайте разберемся с тем, как эти таблицы встраиваются в документ html. Существует три таких способа:
* Используя тег <link> с указанием URL внешней таблицы стилей.
* Используя тег <style> внутри заголовка документа, т.е. внутри тега <head>.
* Используя атрибут style в параметрах тега.
Посредством тега <link> таблица стилей прописывается следующим образом:
<link rel="stylesheet" type="text/css"
href="http://you.com/anyfile.css">
Здесь атрибут href задает тот самый URL файла таблицы со стилями. Файл таблицы стилей текстовый. Что в нем содержится мы увидим потом.
Второй метод использует, как мы уже разобрались, тег <style>. При этом рекомендуется для задания следующий формат:
<style type="text/css">
....
таблица стилей
....
</style>
Таблица стилей это запись атрибутов тегов в довольно простом формате:
имя_тега {параметр_тега1: значение; ... }
имя_тега.класс {параметр_тега1: значение; ... }
.класс {параметр_тега1: значение; ... }
Имя тега, для которого будут действовать заданные настройки указывается в поле имя_тега. В фигурных скобках указываются параметры тега с их значениями, с ними мы будем знакомиться постепенно.
Воспользовавшись описанием в первом формате Вы обеспечиваете всем тегам с этим именем одинаковое отображение. Если же Вас не устраивает, что все теги с одинаковым именем в документе отображаются одинаково, то Вы можете создать класс, или даже лучше сказать подкласс тегов с таким именем, но имеющих другое оформление. Для задания имени этого нового подкласса строка таблицы стилей записывается по второму формату. Но теперь Вы в теге с именем имя_тега для использования нового класса должны будете использовать атрибут class. Можем рассмотреть следующий пример:
<style type="text/css">
p {color: red;}
</style>
После создания такой таблицы стилей все параграфы в документе будут отображаться красным цветом. Естественно это может показаться не нужным для всего документа. Тогда будем использовать второй формат:
<style type="text/css">
p.red {color: red;}
</style>
При таком задании таблицы все параграфы документа будут отображаться по умолчанию, или с ранее заданными настойками. Для того, чтобы окрасить параграф в красный цвет нам придется использовать тег с атрибутом class:
<p class=red> Red paragraph.</p>
В данном случае класс red будет распространяться только на теги параграфов <p>. Если же Вам захотелось использовать этот класс в любых других тегах, то используйте запись по третьему формату, т.е. без указания имени тега. При этом использование атрибута class у любого из тегов будет ему соответствующий класс для отображения из таблицы стилей.
В такой технологии раскрашивания есть еще очень большая и хорошая возможность по заданию стиля только определенным тегам. Заключается она в том, что если перед именем тега, для которого Вы составляете стиль, Вы напишите какой-то список других тегов, то будет действовать принцип вложенности. Т.е. придуманный вами стиль будет действовать только на теги с заданным именем и еще вложенным внутрь тех тегов, имена которых Вы записали ранее. Пример:
p b { color : green}
При такой записи тег <b> будет окрашиваться в зеленый цвет если он находится внутри параграфа:
<p>Обычный текст, а это <b>зеленый текст</b>.</p>
<b>А это всеже обычный текст...</b>
Осталось теперь поговорить о третьем способе задания стиля. Он как Вы помните (?!) задается атрибутом style. Приведем пример красных параграфов :-)
<p style="color: red;">Красный параграф.
Я обещал рассказать о формате файла с внешней таблицей стилей. Так вот оформляется она точно также как и тег <style>. При этом даже иногда многие само название тега и не указывают, всем ясно что там таблица со стилями :-) Чем такой метод задания стилей интересен ?! Да тем, что он располагается в отдельном файле, и его можно использовать для любых других документов не расписывая его внутрь, что экономит место и время загрузки.
