Особливості запису каскадних таблиць стилів.
Якщо для різних селекторів задані однакові декларації, то для зменшення розміру таблиці стилів використовується групування селекторів. Наприклад, якщо для нумерованого та маркірованого списків необхідно визначити розмір шрифта 24 пункта, то можливо це задати одним правилом:
ol, ul {font-size: 24pt;}
Селектори в цьому випадку розділяються комами.
На HTML-сторінці можуть бути елементи, що вбудовані в інші елементи. Якщо для елементів батьків визначені правила стилів, то елементи нащадки можуть успадкувати деякі із цих правил. Наприклад, якщо для нумерованого списку визначено, що текст списку буде червоного кольору:
<head><style type="text/css"> ol { color: Red;}</style></head>
то текст абзацу, розміщеного в такому списку також буде червоного кольору:
<body><ol><li><p>Текст абзацу червоного кольору</p></ol>
В деяких випадках необхідно для формально однакових елементів (тегів) застосувати різні стилі. При цьому використовувати в якості селекторів теги, як це було в наведених вище прикладах, не доцільно. В цих випадках для визначення правил стилів, які можливо застосувати для одного, або для всіх елементів HTML-сторінки можливо застосувати класи. Ім’я класу використовується як селектор. Якщо стиль буде застосовуватися тільки для одного тегу, то синтаксис запису правила стилю такий - X.class. Де X - ім’я тегу, а class - ім’я класу. Наприклад, необхідно визначити два правила стилів для нумерованого списку. Правило a повинно визначити нумерований список з шрифтом розміром 12 пунктів, а правило b - з шрифтом розміром 16 пунктів:
<head><style type="text/css"> ol.a {font-size: 12pt;} ol.b {font-size: 16pt;}</style>
В тілі HTML-сторінки використання цих стилів відбувається так::
<ol class="a"><li> Текст списку відображається шрифтом розміром 12 пунктів </li></ol>
<ol class="b"><li> Текст списку відображається шрифтом розміром 16 пунктів </li></ol>
Якщо необхідно передбачити можливість застосування стилю для всіх тегів, то синтаксис запису правила стилю - .class. Наприклад, визначимо стиль, що задає червоний колір шрифту:
<head><style type="text/css"> .fontcolor {color: red;}</style>
Використання цього стилю в тілі HTML-сторінки відбувається таким чином:
<ol class="fontcolor"><li>Текст нумерованого списку червоний</li></ol>
<ul class="fontcolor"><li>Текст маркірованого списку червоний</li></ul>
Ще одним цікавим випадком є застосування контекстних селекторів. Вони застосовуються при необхідності визначення стилів для тегів, що вкладені в інші теги. Контекстний селекторскладається із декількох простих селекторів, розділених пробілами:
a b c { визначення 1; визначення 2;...}.
В якості простих селекторів використовуються імена тегів. Стиль з контекстним селектором застосовується для тегу c тільки в тому випадку, коли цей тег знаходиться між тегами a та b.
Наприклад, необхідно щоб відображались червоним кольором тільки ті абзаци, які вкладені в нумеровані списки. В цьому випадку можливо використати стиль:
ol P {color: Red;}
Альтернативою селектору class є селектор id, який призначений для того, щоб призначити кожному правилу стилю оригінальне ім’я. В цьому випадку вказане для id правило стилю буде застосоване для кожного тегу з тим же id. Якщо стиль передбачено використовувати для всіх тегів, то синтаксис визначення правила стилю селектором id такий:
<head><style type="text/css"> #ім’я_id {визначеня1;... } </style>
Якщо необхідно передбачити застосування правила стилю тільки для конкретного тегу , то синтаксис запису наступний:
<head><style type="text/css"> ім’я_тегу#ім’я_id {визначеня1;... } </style>
Для використання такої таблиці стилів в тілі HTML-сторінки необхідно присвоїти атрибуту id, який є в кожному тегу, ім’я визначене в правилі стилів:
<ім’я тегу id= ім’я_id>
Наприклад, визначимо стиль для відображення будь-якого елементу з id="ar" шрифтом Arial та стиль для відображення абзаців з id="ver" шрифтом Verdana.
<head><style type="text/css">
#ar { font-family: Arial; }
p#ver { font-family: Verdana; }
</style></head>
Застосування цих стилів реалізується так:
<h1 id="ar">Текст заголовку першого рівня відображається шрифтом Arial </h1>
<p id="ver"> Текст абзацу відображається шрифтом Verdana </p>
Дата добавления: 2015-08-21; просмотров: 748;