Селектор {Властивість 1: значення;
Власивість 2: значення;}
За допомогою селектора вибираються елементи, на які буде розповсюдено стиль.
Властивість - візуальне, значення - параметр який ми хочемо задати.
H1 {font-family: Arial Narrow;
color:#0000FF; font-size:25px;}
Способи підключення стилів до документу:
Зовнішній:
<!DOCTYPE .....>
<head>
...
<link rel="stylesheet" type="text/CSS" href="style.CSS">
</head>
Рядковий:
< h1 style= "color: #ooF">
Внутрішній:
<head>
<style type="text/css">
h1 {color:red}
</style>
</head>
Для зовнішнього та внутрішнього підключення також можна застосовувати команду @import
"style2.css"
Значення властивостей:
12px, %, pt
em - розмір шрифта потомчного елемента
height: 3em - висота в три висоти шрифта
Типи селекторів
Селектор тегу:
Strong {font-weight: normal; font-size: 120%}
В данному стилі змінюється поведінка тегу <Strong>
Селектор класу:
.MyClass1 {color:red}
B.MyClass1 {....}
Приняття атрибутів класу тільки для <b>
<h1 class="MyClass1">
<B class="....">
ФОН - зображення колор
Шрифт - розмір, фемілі, колір
Границі
Селектор ID
#menu {....}
<ul id="menu">
.....
p#menu
id повинен бути унікальним. Ця властивість використовується в Java Script для доступу до елементів.
На один елемент можна навісити декілька класів:
<h1 class="red MyClass1">
Пріоритетність застосування стіл:
1) Зовнішній (найнижчий пріоритет)
2) Внутрішній
3) INLINE - стиль
<h1 class="red MyClass1" !impotant>
!impotant - зміна в пріоритеті застосування стилів.