Здравствуйте, уважаемые подписчики.
С Вами я, Андрей!
В этом выпуске мы поговорим о каскадных таблицах стилей(CSS).
О том, как и для чего их применяют, как подключать таблицу стилей к HTML файлу, что такое классы, для чего они создаются и какими они бывают.
Как видите, материала много и он достаточно сложный, поэтому будьте внимательны и разберитесь со всем материалом изложенном в данном выпуске, потому что без этого дальше нам двигаться будет сложно.
И так начнем!
С помощью таблиц стилей можно указать правило отображения тега HTML в браузере.
Таблица стилей – это фактически набор правил, которые применяются к HTML тегам. Каждое правило состоит из селектора и определения.
Селектор – это тэг HTML.
Определение – это свойство тега и значение. Определение указывается в фигурных скобках, свойство и значение отделяются двоеточием(:), в конце каждого определения ставится точка с запятой(;).
Пример:
p {color: #FF0000;}
Здесь:
P – это селектор.
color: #FF0000; - это определение. Определение всегда заключается в фигурные скобки, после каждого определения ставится точка с запятой.
сolor- это название свойства (в данном случае цвет).
#FF0000 - это значение свойства.
Свойств таблиц стилей очень много, с ними мы познакомимся в последующих выпусках.
А пока, для того чтобы понять в работе того, о чем пойдет речь в этом выпуске, воспользуемся двумя свойствами:
color- задает цвет текста.
background-color - задает фоновый цвет для элемента.
Итак, рассмотрим каким образом можно встраивать таблицы стилей в документ.
1 Способ:
Можно задать свойство для любого тега при помощи параметра style. В этом случае селектор не нужен.
Пример:
<p style="background-color:#003333;">
Мы изменили фоновый цвет абзаца
2 Способ:
Указать свойство в заголовке документа между тегами <style>….</style>
Пример:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
<!–
p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}
–>
</style>
</head>
<body>
Эти свойства применяются ко всему документу.
Значит, у нас все абзацы будут иметь сероватый фоновый цвет, и красный цвет шрифта, а все заголовки второго уровня будут на черном фоне с желтым цветом шрифта.
Все остальные теги отобразятся без применения стилей.
Если одинаковыми свойствами обладают несколько тегов, то их можно указать через запятую в качестве селектора.(H1, H2, p, li{ color:blue;}).
3 Способ:
Способ позволяет использовать одну таблицу для форматирования нескольких документов.
Смысл заключается в том, что все свойства записываются в отдельном файле с расширением CSS, а затем подключаются в HTML документ.
<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
href=”mystyle.css” – путь к файлу CSS.
А содержимое файла строится по тем же правилам (селектор и определение).
Код файла mystyle.css:
p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}
4 Способ:
Способ позволяет использовать таблицу стилей лежащую на каком-нибудь сервере.
Чтобы подключить CSS файл с какого-либо сервера нужно в заголовке документа, между тегами <style>….</style> прописать следующее:
@import:url(http://www.mysite.ru/style/mystyle.css);
Пример:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
<!–
@import:url(http://www.mysite.ru/style/mystyle.css);
<p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}
–>
</style>
</head>
Вы заметили, что в 4-ом способе реализовано два способа включения таблицы стилей к документу.
Такое допустимо, но при этом надо учитывать приоритет каждого из способов.
Итак, расположение способов в порядке убывания их приоритетов:
1 Способ;
2 Способ;
4 Способ;
3 Способ;
То есть, если в 3-ем или в 4-ом способе указано p {color: red;}, а во 2-ом или в 1-ом p {color: blue;}, то применится к параграфам свойство p {color: blue;}, потому что приоритет 1-ого и 2-ого способа выше, чем 3-го и 4-го.
Пару слов о наследовании и перейдем к классам.
Часто встречается ситуация, когда содержимое одного тега находится целиком внутри другого.
Пример:
Текст абзаца <strong> текст абзаца выделенный жирным</strong> продолжение текста абзаца.
То есть у нас тэг <strong> лежит полностью внутри тега <p>.
И если мы теперь зададим стиль для параграфа, он примениться и к тегу <strong>.
<p style=”color:red;”>
Текст абзаца красными буквами <strong>
текст абзаца красными буквами выделенный жирным</strong> продолжение текста абзаца красными буквами.
Классы.
Классы используются для того, чтобы одному и тому же тегу можно было бы задавать различные правила.
Описываются классы в контейнере <style>….</style>, а применяются к тэгам посредствам параметра CLASS.
Давайте посмотрим на пример, и все станет ясно.
<style type="text/css">
<!–
p.red {color:#FF0000; background-color:#000099;}
p.yellow{color:yellow; background-color:#000000;}
–>
</style>
Описали класс red и yellow для тега <p>
<body> <p class="red">Параграф класса red с красным цветом шрифта и синим фоном.</p> <p class="yellow"> Параграф класса yellow с желтым цветом шрифта и черным фоном.</p> …… </body>
Существуют, также и универсальные классы.
Это классы, которые можно использовать не только для определенного, а для любого тега.
Синтаксис таких классов достаточно прост: сначала идет точка, затем имя класса, и в фигурных скобках определения.
Пример:
<style type="text/css">
<!–
.red {color:#FF0000;}
–>
</style>
…
<body>
<h1 class="red"> Текст заголовка 1-го уровня, класса red</h1>
<h2 class="red"> Текст заголовка 2-го уровня, класса red </h2>
<p class="red"> Текст параграфа класса red </p>
…
</body>
Таким образом, мы применили класс red к трем различным тегам.
На этом предлагаю этот выпуск завершить.
Рекомендую применить стили, например, к нашему второму выпуску со сказками. Сделать там разноцветные абзацы, и заголовки с помощью стилей.
Если возникнут вопросы, задавайте, я объясню подробнее. Если что-то не будет получаться, задавайте вопрос и присылайте листинг кода с тем, что у вас не получилось.
Пишите на E-mail: contact@webformyself.com
Проект webformyself.com – основы самостоятельного сайтостроения
Успехов в учебе!
С Вами был Андрей Бернацкий
Метки: class, css, style, каскадные таблицы стилей, классы
Андрей огромное спасибо,еще не все получается но пытаюсь
Спасибо за урок. А где ссылка для скачивания урока?
Спасибо за предоставленный урок!
Андрей Спасибо! Мне удалось разобраться в каскадных таблицах стилей CSS благодаря Вашему уроку! Большое спасибо!!!
СПАСИБО БУДУ ДАЛЬШЕ ИЗУЧАТЬ
Подскажите, плз, что мне делать. При чтении почты в e-mail при переходе по ссылке упорно выскакивает
——————————————————————————–
Запрашиваемой вами страницы нет на сайте,
возможно, она была удалена, либо вы
ошиблись в написании адреса.
Но ведь раз есть письмо и ссылка на источник, значит…
Какая именно ссылка и в каком письме?
Не очень понятно для чего столько разных способов для одних и тех же функций (почему не использовать просто color и bgcolor), наверно позже прояснится. Благодарю за урок.
Во 2-м способе цвета абзацев и заголовков второго уровня, похоже перепутаны местами…