Тут ми прописали стилі для всіх елементів p (параграфів). Давайте розглянемо їх докладніше:
- background - задає колір фону. Колір можна задавати ім'ям, кодом.
- width - ширина блоку. Тут задана в пікселях. Зверніть увагу, що напис 250px виконана разом. Якщо одиниці виміру написати окремо від числа - то це викличе помилку CSS
- height - висота елемента.
Досить просто? Так! Стиль задається в форматі властивість: значення. Кінець рядка позначається крапкою з комою.
Виникає питання, а якщо ми хочемо створити елемент параграфа, який буде відрізнятися з оформлення від інших параграфів? Для цього потрібно присвоїти елементу ім'я. Тут можливі два шляхи:
- Присвоїти елементу унікальне ім'я, яке не буде повторюватися в рамках сторінки і буде однозначно характеризувати даний елемент. Таке ім'я називається ідентифікатор. Як задати ідентифікатор:
Як задати оформлення елементу з id і class? Давайте розглянемо приклад:
Як бачите, щоб звернутися до елементу який має id потрібно в CSS перед ім'ям ідентифікатора поставити знак #. Для завдання стилів класу елементів поставте перед ім'ям класу точку. Зверніть увагу #one і .two пишуться разом.
Як записуються селектори
- h2 -стилі описані далі, застосуються для всіх заголовків другого рівня
- p - стилі застосуються для всіх параграфів
- .one - стилі застосуються для всіх елементів мають клас one
- #four - стиль застосуємо для елемента з id = four.
- p.one - стиль застосується для параграфів мають клас one
- h2 # five - стиль застосується тільки до заголовка другого рівня з id рівним five
Подивитися приклади оформлення тексту за допомогою CSS можна в наступному уроці.
CSS - потужний засіб для опису правил оформлення, дозволяє не тільки задавати статичне оформлення, але і анімувати html елементи сторінки. Приклад анімації можна подивитися тут.
Ще статті:
уроки front-end і back-end