Урок 3. Що то таке і з чим його (правильно!) їдять

Помітила, що навіть редагуючи CSS блога іноді людина не зовсім розуміє, що ж саме вона редагує 🙂 CSS — це зовнішній вигляд, ні в якому разі не структура сторінки. Звичайно, в цьому питанні можна легко помилитися — ми ж за допомогою CSS’у робимо блоги ширшими та вужчими, замість посилань ставимо кнопочки і таке інше. Але! Все це ми робимо на готовому HTML’i. Тобто, звужуючи колонку ми не створюємо її, а лише змінюємо зовнішній вигляд. Так само робимо кнопочки з вже існуючого посилання. Якщо взяти звичайний малюнок, то HTML — то ескіз, а CSS — розфарбовка:

Хто уважний, той помітив, що на розфарбовці з’явилася сережка, якої не було на малюнку. Такі самі невеликі «сережечки» ми можемо додавати до своїх блогів за допомогою HTML-поля.

Будь-якому HTML-тегу в документі можна задати вигляд за допомогою CSS.

Приклад: у нас є тег «р» (абзац). Якщо ми хочемо змінити зовнішній вигляд всіх абзаців блога, у вікно з CSS вписуємо таке: p {background-color: green; width: 400px;} Всі абзаци у блозі (якщо не було зазначено нічого іншого) отримають зелене тло і ширину в 400 пікселів. Тобто кожного разу, коли в HTML-коді блога буде застосовуватися тег «р», на його зовнішній вигляд впливатиме надане вище CSS-правило.

Але ж абзаци в блозі існують не лише в тексті заміток — опис блога, його назва, інформація з вузьких шпальт — все це може мати в собі тег «р».  Завдяки цьому кожному елементу веб-сторінки дається власна назва, що прописується в HTML за допомогою атрибутів «id» та «class».

«id» відповідає за одинарні елементи — наприклад, опис чи назву блога.

За допомогою  «class» позначаються групи елементів, яким потрібно мати ідентичний вигляд — всі заголовки блога, або ж дати над кожною заміткою.

Назви подібних  CSS-селекторів кожен веб-дизайнер вигадує свої, в залежності від того який ресурс створюється. Завдяки цьому назви деяких селекторів у різних шаблонах можуть відрізнятися.

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

Синтаксис CSS:

Таким чином ми можемо:

а) Надати однаковий вигляд при використанні якому-небудь тегові (частіше за все це будуть теги посилань);

б) Змінювати зовнішній вигляд будь-якого елемента блога, що позначено в HTML’і атрибутами  «id» та «class».

Присутня ще одна корисна можливість. Якщо ви хочете, щоб декілька різних елементів мали однаковий вигляд, перед складанням для них правил CSS, перерахуйте їх селектори через кому. Тобто, десь так:

#BlogLinksBox a:hover, #ShareCss a:hover {}

А може бути і навпаки — в готовому дизайні ці селектори вже перераховані, а вам потрібно зробити елементи за які вони відповідають, різними. Нема нічого простішого — розділіть їх:

#BlogLinksBox a:hover {}

#ShareCss a:hover {}

Увага! Наступний урок буде викладено завтра, а через тиждень через день я викладу всі інші уроки, що були зазначені в змісті. Не забувайте перевіряти))

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

*