Урок 2. Базові селектори

Здрастуй, шановний читачу.

Відео: Урок 2. jQuery селектори

Це другий урок вивчення CSS (базові селектори). З даного уроку ви дізнаєтесь що таке селектор, які бувають селектори, а також зможете надати перший стиль блоку.

Перед вивченням CSS пройдіть перший урок:

Урок 1. Що таке CSS?

Теорія та практика

Для того щоб визначити властивість в CSS з елементом на сторінці необхідна якась зв`язок. Даний зв`язок здійснюється через СЕЛЕКТОР.

1) Щоб визначити властивості для певних елементів, можна скористатися наступним способом. Селектором може бути назва тега. Як це виглядає на практиці:

1234567

body{background-color:# C1BAFF-}p{color:# 4600BF-}

З прикладу видно. Що ми визначили два селектора body і p. І прописали кожному певні властивості.

Подивитися прімерСкачать

Якщо ви задаєте за допомогою цього способу атрибути, то стиль застосується до всіх тегам

на сторінці. На тегу він застосується один раз, так як він завжди повинен бути один на сторінці. Для того щоб задати обраного абзацу певний стиль існує другий спосіб.

2) Також зв`язок реалізується в html за допомогою двох атрибутів, які пишуться для елемента, який має певний стиль. Дані два атрибута необхідно завжди пам`ятати. Це атрибути: id = "" і class = "".

Відео: CSS. Теорія. Урок 2. Селектори

Приклад html коду:

12345678910111213

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;div id="Content"gt;lt;p class="Title"gt; Вивчення CSSlt;/pgt;lt;pgt; Vivamus nec nulla a ipsum vulputate interdum. Nunc fermentum lacus velit, id dapibus sapien porttitor sit amet.lt;/pgt;lt;/divgt;lt;/bodygt;lt;/htmlgt;

І приклад CSS коду:

123456789101112131415

body{background-color:# C1BAFF-}p{color:# 4600BF-}#content{background-color:# E4E3ED-}.title{color:# F20020-}

Відразу подивіться що вийшло

Подивитися прімерСкачать

Про все, що ми зробили, по порядку ...

В html сторінці ми задали для тега div атрибут id = "content" і для тега p атрибут class = "title". Даними атрибутами ми вказали що хочемо застосувати стиль лише до даних двом тегам. Далі в коді CSS через решітку "#" Content вказали селектор прописаний в id і далі застосували властивості.

Схожа ситуація і з другим селектором. Тільки його ми записали через точку і потім значення селектора .title class в коді html.

Давайте ще раз повторимо!

Якщо в html коді використовуємо селектор
• id - тоді в CSS коді він починається з решітки "#"
• class - тоді в CSS коді він починається з точки "."

Тут немає нічого складного. Якщо коротко то: задаємо стиль для елемента в html, а потім описуємо стиль для цього елемента в селекторі CSS.

Ми розглянули як створюються перші селектори і побачили приклад на реальній html сторінці. Пробуйте все прописати руками. Тоді ви краще запам`ятайте матеріал.

Більше практикуйтеся!