В якості селектора може виступати будь-який тег HTML, для якого визначаються правила форматування, такі як: колір, фон, розмір і т. д. Правила задаються в наступному вигляді.
Тег {свойство1: значення; властивість2: значення; ...}
Спочатку вказується ім'я тега, оформлення якого буде перевизначити, великими або малими символами не має значення. Усередині фігурних дужок пишеться стильова властивість, а після двокрапки — його значення. Набір властивостей поділяється між собою крапкою з комою і може розташовуватися як в один рядок, так і в кілька (приклад 7.1).
Приклад 7.1. Зміна стилю тега абзацу
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
селектори тегів </title>
<style>
P {text-align: justify; /* Вирівнювання по ширині */ color: green; /* Зелений колір тексту */ } </style>
</head>
<body>
<p>
Більш ефективним способом лову лева в пустелі є метод золотого перетину. При його використанні пустеля ділиться на дві нерівні частини, розмір яких підпорядковується правилу золотого перетину. </p>
</body>
</html>
В даному прикладі змінюється колір і вирівнювання тексту абзацу. Стиль буде застосовуватися тільки до тексту, який розташовується усередині контейнера <p> .
варто розуміти, що хоча стиль можна застосувати до будь-якого тегу, результат буде помітний тільки для тегів, які безпосередньо відображаються в контейнері <body> .
Питання для перевірки
1. В якому рядку міститься помилка?
- h1 {margin-left: 20px; }
- p {margin-left: 20px; padding-left: 20px; }
- h2 {margin-right: 20px; }
- head {color: #rob; }
- body {font-size: 11pt; color: #aaa; }
2. Таня для фону веб-сторінки і кольору тексту вибрала кольору #ffe9f2 і #6e143b і в стилях використовувала наступний код, проте потрібні кольори не проявилися. У чому причина?
body { background-color:#ffe9f2 color:#6e143b }
- body написаний малими літерами.
- Властивість background-color невірне, варто писати background.
- Значення кольорів вказані неправильно.
- як селектора застосовувати body некоректно.
- бракує крапки з комою.
3. Яка рядок написана правильно?
- <P> {Color: #333; }
- P {color:#333; }
- P: {color:#333;}
- P {color: 333; }
- P {color:#3333; }
4. До якого селектору варто застосувати властивість margin, щоб змінити відступи на веб-сторінці?
- ! DOCTYPE
- A
- HEAD
- TITLE
- BODY
5. Як додати фоновий колір до всіх елементів <h1> ?
- h1 {background-color: white}
- h1.all {background-color: white }
- h1: all {background-color: white}
- h1 [all] {background-color: white}
- h1 #all {background-color : white}
Відповіді
1. head {color: #rob; }
2. Бракує крапки з комою.
3. P {color:#333; }
4. BODY
5. h1 {background-color: white}