 |
Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | |
Ступенька 44-ая
|
|
В двух прошлых главах мы обсуждали с вами возможность вставки объектов в наш документ. Однако, вы должны понимать, что музыка, видеоклипы, flash и другие объекты – не единственное, чем мы можем оживить и сделать страницы нашего сайта интереснее. В этой и следующей главе мы поговорим с вами еще об одном средстве, которые позволяет нам делать наши документы более гибкими, дает нам больше возможностей в работе над нашим сайтом – это Таблицы Каскадных Стилей (CSS - Cascading Style Sheets), еще один стандарт и разработка Консорциума, организации занимающейся разработкой стандартов и спецификаций для веб.
Первое, что нам следует понять – CSS отличный от HTML стандарт. Почему же мы говорим о нем в рамках учебника о HTML, потому что CSS – это стандарт, расширяющий возможности HTML. Как мы уже с вами знаем – используя только HTML, мы весьма ограничены в средствах. Вспомним пример с елкой – так вот, CSS зажигает на нашей елочке огоньки, заставляет нашу елку искриться, сверкать. Однако, чтобы гирлянда горела на елке, надо ее прежде повесить на елку, вкрутить все лампочки, куда надо, и воткнуть в розетку.
Чтобы ввести CSS в наши HTML-документы, нам опять же, как и в случае с объектами, понадобятся связующие звенья – специальные тэги и их атрибуты. Но о них мы будем говорить в следующей главе, в этой же главе я вам дам представление о том, что такое CSS.
Давайте, подумаем, что вызывало у вас удивление, когда вы сталкивались с этим на других страницах, а потом хотели реализовать то же самое у себя на сайте, но не могли понять как. Это могли быть ссылки, которые изменяют цвет при наведении, ссылки у которых убрано подчеркивание, текст, который увеличивается в размере при наведении на него, ячейки таблицы, которые меняют цвет при наведении, картинки и текст, которые наслаиваются друг на друга – и многое другое. Теперь вы знаете, что такие и подобные трюки реализуются при помощи CSS.
Что же именно можно сделать при помощи CSS:
- Использовать собственные расширения HTML (так, например, вы можете окрасить текст в синий цвет при помощи атрибута color тэга FONT, а можете использовать Таблицы Каскадных стилей, для того, чтобы сделать тоже самое, преимущество в этом, что стили могут быть вынесены в отдельный файл, и, чтобы потом поменять цвет указанных блоков текста во всех документах вашего сайта, достаточно изменить одну строку в одном файле, а так вам бы пришлось вручную менять код многих страниц).
- Свободно управлять содержимым веб-страниц (позиционировать блоки текста, таблицы, картинки, как вам угодно, например, наложить текст и картинки друг на друга, в любом месте страницы).
- Различные визуальные эффекты (прозрачность, смена цвета при наведении и прочее)
- И так далее
Как вы сами теперь можете понять, CSS стоит того, чтобы вы его изучили, вы даже должны его изучить, если хотите создавать профессионально свои странички, в этом вам поможет спецификация по CSS, а также различные учебники и статьи, ссылки на которые вы по традиции найдете в правой колонке. А пока что мы с вами вернемся на землю, и продолжим осваивать HTML, ведь мы можем с вами перейти к изучению других, более сложных технологий не раньше, чем мы освоим с вами простейшие, но все-таки нужные, такие как HTML.
Итак, в этой главе у меня была цель ознакомить вас с CSS, что я и сделала, в следующей же главе мы поговорим с вами о том, как внедрять CSS в наш документ, поэтому шагаем на следующую ступеньку за новыми знаниями. Ступенька 45-ая.
Об одном из способов внедрения CSS в наш документ я почти проговорилась в прошлой главе, когда упомянула о том, что стили могут быть вынесены в отдельный файл, а это значит, что нам остается лишь указать путь к этому файлу, и указать, что это файл с CSS:
| <head> <link href="special.css" rel="stylesheet" type="text/css"> </head> |
Итак, когда стили вынесены в отдельный файл – это называется внешние таблицы стилей. Их мы вводим в документ при помощи тэга <link>, который размещается внутри тэга <head></head>, а не <body>, как мы привыкли.
Давайте ознакомимся с атрибутами тэга <link>:
1 – href=”http://…” – пусть к файлу со стилями
2 - rel="stylesheet" – указывает, является ли подгружаемые таблицы стилей постоянными, предпочитаемыми или альтернативными. В нашем случае мы установили постоянные таблицы стилей для документа. Подробнее об атрибуте rel и его значениях вам расскажетспецификация по HTML.
3 - type="text/css" – тип содержимого, подгружаемой информации, в нашем случае мы указываем, что это CSS.
Но не надо думать, что если вы связали документ с внешней таблицей стилей через тэг <link> – этого достаточно, чтобы все заработало. Надо еще указать для каких тэгов (элементов нашего документа) мы используем таблицы стилей.
Допустим, некоторая таблица стилей (которая у нас хранится в файле special.css) устанавливает красный цвет для абзаца, вот такой код будет у нее (в файле special.css):
| P.special { color: red; } |
Однако, в данном случае, таблица стилей указывает, что не все блоки текста, заключенные в параграфы (<p>текст</p>), будут выделены красным цветом, а только те блоки, которым мы это укажем.
| <html> <head> <title>Документ с CSS</title> <link href="special.css" rel="stylesheet" type="text/css"> </head> <body> <p class="special">В этом абзаце текст должен быть красным.</p> <p>А в этом абзаце нет, потому что мы не указали это при помощи атрибута class.</p> </body> </html> |
Посмотрите на код нашего документа, при помощи атрибута class мы задали тэгу <p> имя класса. Затем, когда мы писали код таблицы стилей (в файле special.css), мы указали, что этот стиль будет применяться только к тем тэгам (атрибутам) <p>, для которых мы задали имя класса special. Вот теперь у нас все связано между собой.
Таблицы стилей не обязательно должны быть вынесены во внешний файл, вы можете внедрять их непосредственно в ваш документ при помощи тэга <style>, в котором вы разместите код ваших таблиц стилей (<style>код таблицы стилей</style>):
| <html> <head> <title>Документ с CSS</title> <style type="text/css">P.special { color: red; } </style> </head> <body> <p class="special">В этом абзаце текст должен быть красным.</p> <p>А в этом абзаце нет, потому что мы не указали это при помощи атрибута class.</p> </body> </html> |
Обратите внимание, тэг <style>, как и тэг <link>, размещается внутри тэга <head></head>, а не <body>.
Есть еще и третий способ внедрения CSS в ваш документ, когда при помощи атрибута (не путать с тэгом) style код CSS вводится непосредственно для какого-либо тэга:
| <html> <head> <title>Документ с CSS</title> </head> <body> <p style="color: red">В этом абзаце текст должен быть красным.</p> <p>А в этом абзаце нет, потому что мы не задали для него стиля.</p> </body> </html> |
color: red – это код таблицы стилей, задающей красный цвет для абзаца, ее мы ввели в наш документ при помощи атрибута style, естественно, что в атрибут style вы будете помещать уже свои, другие, таблицы стилей.
Вот и вся премудрость с внедрением стилей в наш HTML-документ. Уже не все так просто, как хотелось бы, но и не сложно при этом. Напоминаю вам, что о том, как писать коды таблиц стилей вы узнаете из спецификации по CSS, а также из учебников и пособий, ссылки на которые вы найдете в правой колонке.
Дата публикования: 2014-10-25; Прочитано: 288 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!
