|
Здесь я расскажу вам о том как грамотно и оптимально использовать
возможности CSS.
К примеру вы создаете страничку и вы хотите чтобы весь текст на ней,
если это не обговорено по иному был написан шрифтом "Verdana". Для этого
вам вовсе не обязательно использовать везде тэг <font
face="Verdana">. Воспользуемся стилями! В своем html-файле, между
тэгом <html> и <body> напишите следующее:
<style>
BODY {font-family: Verdana; font-size: 12px;}
</style>
text
И посмотрите что получилось. Видите? "text" написан шрифтом Verdana и
имеет размер 12px. Теперь разберем, что же это за такой новый тэг
<style>?
Этот тэг говорит браузеру о том, что началось описание стилей для
страницы. Что же означает строчка
BODY {font-family:
Verdana; font-size: 12px;}
А ни что иное как описание стиля
текста, картинок, ссылок или чего угодно содержащихся внутри тэга
<body> и </body>. Параметры font-family и
font-size это те же параметры, о которых я говорил в предыдущей статье и
вы можете использовать здесь любые параметры какие вам нужны. Начинаете
улавливать зачем это все? Еще нет? Поясню. Модифицируйте свой html-файл
следующим образом:
<style>
BODY {font-family: Verdana; font-size: 12px;}
A {text-decoration: none; font-size: 18px; color: red;}
B {text-decoration: underline;}
</style>
Текст, ссылка, жирный текст, еще одна
ссылка
и посмотрите что получилось. Видите? Обычный текст у вас написан шрифтом
"Verdana" и размером 12px, обе ссылки у вас написаны красным цветом, не
подчеркнуты и имеют размер 18px. А текст заключенный в тэг <b>
вдруг стал подчеркнутым. Что это значит? Это значит что мы определили
стили для всех тэгов BODY, A и B находящихся на нашей странице, т.е.,
например, любая ссылка на странице будет написана красным цветом и иметь
все параметры которые мы указали для нее в тэге <style>.
Это избавляет нас от написания параметра style в каждом тэге <A>
на нашей странице, как это описывалось в предыдущей статье. Т.е. без тэга
<style> нам пришлось бы на странице для ссылок писать вот так:
... <a href="#"
style="text-decoration: none;
font-size: 18px;
color: red;">ссылка</a>, <a href="#"
style="text-decoration: none;
font-size: 18px;
color: red;">еще одна ссылка</a> ...
А теперь представьте что у вас на странице сто таких ссылок и вы решили
поменять цвет у них, вам пришлось бы менять цвет в 100 местах на странице,
тогда как с тэгом style вам придется сделать это всего в одном
месте и все ссылки на странице будут иметь тот стиль который вы указали.
НО это всего одна маленькая прелесть тэга <style>. Теперь сделайте
следующее:
Создайте файл style.css и напишите в нем следущие
строки: BODY {font-family: Verdana; font-size: 12px;} A
{text-decoration: none; font-size: 18px; color: red;} B {text-decoration:
underline;}
Положите этот файл туда же где лежит ваш файл html и модифицируйте
html-файл следующим образом:
<link rel=stylesheet type="text/css" href="style.css">
Текст, ссылка,
жирный текст, еще одна
ссылка
Посмотрите что получилось. Видите, получилось тоже самое что и было
когда мы использовали тэг <style>. Отличие в том что теперь мы
поместили наши стили в отдельный файл. Зачем хранить стили в отдельном
файле? Представьте что у вас 100 страниц, и на каждой из них 100 ссылок и
вы захотели поменять цвет у ссылок на всех страницах. Догадываетесь о чем
я? :) Меняете стиль ссылок в единственной строчке в .css файле и у вас
меняется стиль ссылок сразу на всех 100 страницах. Надеюсь я не один
думаю, что это удобно ;) Поехали дальше?
Создайте html-файл с таким содержанием:
<style>
A {text-decoration: none; font-size: 18px; color: red;}
B {text-decoration: underline; color: blue;}
A B {text-decoration: none; color: green;}
</style>
жирный текст ссылка жирный
текст в ссылке конец ссылки
Можно все что содержится в тэге <style> вынести в
отдельный .css файл, теперь вы это делать умеете, я же буду использовать
этот тэг для краткости. Посмотрите что получилось? Видите, фраза "жирный
текст" подчеркнута и написана синим цветом, а фраза "жирный текст в
ссылке" не подчеркнута и имеет зеленый цвет. Как же так? Оба текста
заключены в простейший тэг <b>, а вторая фраза почему-то
имеет другой стиль, как же это получилось?? Да очень просто, смотрим
строчку: A B {text-decoration: none; color:
green;} О чем она говорит? Она говорит о том что все тэги
<b> заключенные в внутри тэгов <a> </a>
имеют стиль {text-decoration: none; color: green;}.
Посмотрите в исходный код нашего html-файла. Видите, фраза "жирный текст"
сама по себе, а фраза "жирный текст в ссылке" заключена внутри ссылки,
т.е. внутри тэгов <a> </a>, а следовательно браузер
понял что нужно использовать для второй фразы тот стиль который вы
указали. Надеюсь что сложности с пониманием этого у вас не возникли. Таких
вложенностей можно определять целую кучу, например можно сделать
так:
TD A B {text-decoration:
underline;}
Этот стиль говорит о том что любой текст заключенный
в тэге <b>, который находится внутри тэга <a>,
который в свою очередь находится внутри тэга <td> (ячейка
таблицы) должен быть подчеркнутым. Ну надеюсь все понятно. Еще можно
определять один и тот же стиль для нескольких тэгов одновременно,
делается это легко. Просто нужно перечислить тэги через запятую. Пример:
BODY, A, B {font-family:
Verdana;} Дерзайте! :)
Автор: Роман Григорович
E-MAIL: atz@atz.msk.ru
Сайт: http://atz.msk.ru
|
