Понеділок, 25.11.2024, 10:42
Головна Реєстрація RSS
Вітаю Вас, Гість
Меню сайту
Реклама
Категорії розділу
Архітектура ПК [1]
Архітектура та експлуатація персонального комп'ютера
СПЗ [12]
Системне програмне забезпечення та операційні системи
Комп'ютерна графіка [25]
КСМ [28]
Комп'ютерні системи та мережі
ІСІТО [1]
Інформаційні системи і технології обліку
Бухгалтерський облік [0]
АМтП [10]
Алгоритмічні мови та програмування
Копирайт рерайт [1]
СУБД [18]
Системи управління базами даних
ОКТ практикум [2]
Основи комп'ютерних технологій практикум
Інформатика (практ) [1]
інформатика практикум, практичні заняття
ТіОБВ [61]
Технологія і організація будівельного виробництва
ОСАПр [6]
Основи систем автоматизованого проектування, AutoCAD, ArchiCAD
ТіОБВ (заочники) [1]
Пошук
Статистика
Яндекс.Метрика
Онлайн всього: 4
Гостей: 4
Користувачів: 0
Форма входу
Календар
«  Грудень 2013  »
ПнВтСрЧтПтСбНд
      1
2345678
9101112131415
16171819202122
23242526272829
3031
Архів записів
Головна » 2013 » Грудень » 4 » Успадкування в CSS
15:13
Успадкування в CSS
Успадкуванням називається перенесення правил форматування для елементів, що знаходяться всередині інших. Такі елементи є дочірніми, і вони успадковують деякі стильові властивості своїх батьків, всередині яких розташовуються. Розберемо успадкування на прикладі таблиці. Особливістю таблиць можна вважати строгу ієрархічну структуру тегів. Спочатку слідує контейнер <TABLE> всередині якого додаються теги <TR>, а потім йде тег <TD>. Якщо в стилях для селектора TABLE задати колір тексту, то він автоматично встановлюється для вмісту осередків, як показано у прикладі 15.1.

Приклад 15.1. Спадкування параметрів кольору

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Успадкування</title> 
<style type="text/css"> 
TABLE { 
color: red; /* Колір тексту */
 background: #333; /* Колір фону таблиці */
 border: 2px solid red; /* Червона рамка навколо таблиці */
 } 
</style>
 </head>
 <body> 
<table cellpadding="4" cellspacing="0">
 <tr> 
<td>Ячейка 1</td>
<td>Ячейка 2</td>
 </tr> 
<tr> 
<td>Ячейка 3</td>
<td>Ячейка 4</td>
 </tr>
 </table>
 </body> 
</html>
У даному прикладі для всієї таблиці встановлений червоний колір тексту, тому в осередках він також застосовується, оскільки тег<TD> успадковує властивості тега <TABLE>. При цьому слід розуміти, що не всі стильові атрибути успадковуються. Так, параметр border задає рамку навколо таблиці в цілому, але ніяк не навколо осередків. Аналогічно не успадковується значення параметра background. Тоді чому колір тла в осередків в даному прикладі чорний, раз він не успадковується? Справа в тому, що у атрибуту background як значення за замовчуванням виступає transparent, тобто прозорість. Таким чином, якщо аргумент явно не заданий, то колір фону батьківського елементу «проглядає» крізь дочірній елемент. Щоб визначити, успадковується значення стильового атрибуту чи ні, потрібно зазирнути в довідник за властивостями CSS і подивитися там. Підключати свою інтуїцію у даному випадку марно, може і підвести. Успадкування дозволяє задавати значення деяких параметрів один раз, визначаючи їх для батьків верхнього рівня. Припустимо, потрібно встановити колір і шрифт для основного тексту. Досить скористатися селектором BODY, додати бажані атрибути для нього, в результаті - колір тексту усередині абзаців та інших текстових елементів поміняється автоматично (приклад 15.2).

Приклад 15.2. Параметри тексту для всієї веб-сторінки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Успадкування</title>
 <style type="text/css">
 BODY { 
font-family: Arial, Helvetica, sans-serif; /* Гарнітура шрифта */
 color: navy; /* Синій колір тексту */
 } 
</style> 
</head>
 <body>
 <p>Колір тексту даного абзаца синій</p>
 </body>
 </html>
У даному прикладі рубаний шрифт і колір тексту абзаців встановлюється за допомогою селектора BODY. Завдяки спадкоємству вже немає потреби ставити колір для кожного елемента документа окремо. Однак бувають варіанти, коли потрібно все-таки змінити колір для окремого контейнера. У цьому випадку доведеться перевизначати потрібні параметри явно, як показано у прикладі 15.3.

Приклад 15.3. Зміна властивостей успадкованого елемента

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Успадкування</title> 
<style type="text/css"> 
BODY { 
font-family: Arial, Helvetica, sans-serif; /* Гарнітура шрифту */
 color: navy; /* Синій колір тексту */
 }
 P.red { 
color: maroon; /* Темно-червоний колір тексту */
 }
 </style> 
</head>
 <body>
 <p>Колір тесту цього абзаца синій</p>
 <p class="red">А у цього абзацу колір тексту вже інший</p> 
</body>
 </html>
У даному прикладі колір першого абзацу успадковується від селектора BODY, а для другого встановлений явно через клас з ім'ям red.

Дякую за урок сайту сайт конструктор
Категорія: КСМ | Переглядів: 648 | Додав: Gryzley | Рейтинг: 0.0/0
Всього коментарів: 0
Ім`я *:
Email *:
Код *: