-
Каскадные таблицы стилей CSS – это довольно позднее нововведение. Если сам HTML появился в 1989 году, то таблицы стилей – только в 1997. Мало того, таблицы стилей не считаются частью HTML, а "гуляют сами по себе", как кошка Киплинга.
-
Что же представляют собой каскадные таблицы стилей? Как они могут помочь нам? Как они создаются, в конце концов? И нужно ли их использовать? | В конце предыдущей главы был приведен пример, когда таблицы стилей могут нам здорово помочь. Вспомним его еще раз.
-
Всего стандарт CSS определяет три способа задания стиля для элемента страницы. Давайте перечислим их и дадим краткое описание каждому способу. | Внешняя (или привязанная) таблица стилей. Стили сохраняются в отдельном файле с расширением .css и привязываются к Web-странице с помощью особого тега <LINK>.
-
В одной и той же Web-странице могут использоваться и внутренние стили, и таблицы стилей обоих видов: внешние и внутренняя. При этом "в работе" будут все определенные в них стили. | Но что делать, если какой-то стиль будет определен одновременно два или три раза?
-
А теперь мы узнаем еще об одной интересной возможности, предлагаемой Web-дизайнеру таблицами стилей. Это псевдостили гиперссылок, позволяющие в достаточно широких пределах менять внешний вид гиперссылок на ваших страницах.
-
Вы уже много узнали о таблицах стилей. И, наверно, вас уже давно мучает вопрос: а что же Dreamweaver? Поддерживает ли он работу с таблицами стилей? И если поддерживает, то насколько? И почему автор не упомянул об этом ни слова, а все заваливал нас примерами на этом ужасном и ни капельки не понятном HTML? Неужели нам все-таки придется создавать стили вручную?!! | Успокойтесь. Все в порядке.
-
Группа переключателей Type задает элементы страницы, к которым будет применен вновь создаваемый стиль: | переключатель Make Custom Style (class) позволяет создать новый стилевой класс. Если вы его включите, то в комбинированном списке Name сможете ввести имя создаваемого стилевого класса, например .cit; | переключатель Redefine HTML Tag позволяет создать стиль переопределения тега.
-
Взгляните еще раз на рис. 10.6. На нем, как вы помните, показана вкладка Type диалогового окна CSS Style Definition. На этой вкладке задаются параметры шрифта текста. | Сам шрифт выбирается в комбинированном списке Font. Вы можете выбрать один из шрифтов либо ввести его имя вручную.
-
Параметры фона элемента страницы задаются на вкладке Background диалогового окна CSS Style Definition. Эта вкладка показана на рис. 10.8. | Рис. 10.8. Вкладка Background диалогового окна CSS Style Definition | Селектор цветов Background Color задает цвет фона.
-
Параметры текстового абзаца задаются на вкладке Block диалогового окна CSS Style Definition. Здесь же задаются параметры, применяемые к нетекстовым элементам страницы, таким как графические изображения и таблицы. Эта вкладка показана на рис. 10.9. | Рис. 10.9.
-
Параметры, задающие размеры и размещение элемента страницы, задаются на вкладке Box диалогового окна CSS Style Definition. Эта вкладка показана на рис. 10.10. | Ширину и высоту элемента страницы вы можете задать в комбинированных списках Width и Height.
-
Параметры, определяющие цвет и толщину рамки вокруг элемента страницы, задаются на вкладке Border диалогового окна CSS Style Definition. Эта вкладка показана на рис. 10.17. | Рис. 10.17. Вкладка Border диалогового окна CSS Style Definition | Рамка рисуется по воображаемой границе элемента страницы (рис. 10.18).
-
Параметры, задающие вид маркеров списка, задаются на вкладке List диалогового окна CSS Style Definition. Эта вкладка показана на рис. 10.22. | Как вы помните, HTML предоставляет возможность создания списков, состоящих из множества позиций, помеченных специальными значками – маркерами или цифрами (буквами). В первом случае список называется маркированным, а во втором – нумерованным.
-
Стандарт CSS предоставляет целый набор дополнительных атрибутов, задающих особые параметры элементов страницы. Эти параметры задаются на вкладке Extensions диалогового окна CSS Style Definition, которая показана на рис. 10.23. | Рис. 10.23.
-
После того как вы зададите атрибуты стиля, нажмите кнопку ОК диалогового окна CSS Style Definition. Вы также можете нажать кнопку Apply, чтобы сохранить стилевые установки без закрытия этого диалогового окна.
-
Осталось рассмотреть, как в Dreamweaver осуществляется управление стилями, в частности, изменение и удаление (как создавать новые стили, вы уже знаете). | В верхней части панели CSS Styles вы уже заметили два переключателя: Apply Styles и Edit Styles. Мы не рассматривали их, т. к.
-
Кроме манипуляций над отдельными стилями, Dreamweaver предоставляет возможность управлять целыми таблицами стилей. Вы можете редактировать их, создавать и удалять, а также присоединять к документу внешние таблицы и экспортировать внутренние таблицы во внешний файл.
-
Вот мы и выяснили все о том, как Dreamweaver поддерживает внутренние и внешние таблицы стилей. А что же внутренние стили? А с внутренними стилями ситуация сложнее. | Дело в том, что Dreamweaver поддерживает внутренние стили не полностью.
-
А теперь представим такую ситуацию. Вы прочитали о замечательных возможностях таблиц стилей и решили переделать свой сайт Sample site 3 с использованием таблиц стилей. Вы задали таблицу стилей (внешнюю или внутреннюю) для шаблона, сохранили его и обновили все основанные на нем Web-страницы.
-
Еще одна из новых возможностей Dreamweaver MX – это поддержка так называемых временных таблиц стилей. Временные таблицы стилей действуют не все время, а только тогда, когда вы редактируете свою Web-страницу в среде Dreamweaver (таблицы времени редактирования), но не действуют в Web-обозревателе.
-
Настала пора поговорить о недостатках таблиц стилей. Всего их два: | сравнительная "молодость" стандарта CSS, из-за которой его поддерживают только сравнительно новые программы Web-обозревателей, выпущенные после 1997 года;