CSS.Псевдокласи та псевдоелементи І

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

Річ піде про псевдокласи та псевдоелементи  CSS. Це такі селектори, які можуть не бути прописані у HTML, але якщо їх прописати у CSS»і, працювати все одно будуть. До того ж їх можна прикріплювати до основних селекторів, прописаних у коді, створюючи таким чином багато різних варіацій на тему 🙂

Я не торкалася псевдокласів та псевдоелементів у основних уроках, тому що основними браузерами вони поки що підтримуються не повністю. Але про такі, якими на сьогоднішній день вже можна користуватися, я розповім. Деякі вам можуть бути навіть відомими:

:first-letter — відповідає за перший символ елемента (перша цифра, літера)

:first-line — відповідає за перший рядок елемента

:hover — відповідає за відображення елемента, коли над ним знаходиться курсор миші

:link, :visited — відповідають за вигляд посилань на веб-сторінці. Застосовується тільки разом з тегом «А«.

:lang — відповідає за відображення елементів для заданої консолі (мови)

:before — формує складову розмітки перед будь-яким елементом

:after — формує складову розмітки після будь-якого елемента

Правила додавання псевдокласів та псевдоелементів до CSS кода

1. Ви можете додати будь-який елемент просто до тіла  CSS. Тоді він буде відповідати за весь блог загалом. Наприклад, пропишемо елемент :first-letter:

:first-letter{color: blue; font-size: 24px;} — після цього рядка усі перші літери блога наберуть такого вигляду, як на прінтскріні:

Як ми бачимо з цього прикладу, перший символ кожного елемента, навіть навігаційна панелька, став синього кольору та більших ромірів, що не надає блогу охайності.

2. Тому краще користуватися другим способом. Тобто, ми обираємо селектор, для якого хотіли б зробити уточнення за допомогою будь-якого псевдокласу. Наприклад, селектор .BlogEntryItemTitle. І вже до обраного селектора прикріплюємо потрібний псевдоклас, утворюючи таким чином новий працюючий селектор:

.BlogEntryItemTitle:first-letter {padding: 10px; color: black; font-size: 24px; background-color: white; border: 4px double black;}

У наступних випусках «дрібничок» я розберу по черзі можливі використання псевдокласів у блогах,  та дам деякі готові дизайнерські рішення, які вам залишиться тільки скопіювати до CSS-коду свого блога.

Велика перша літера

Сьогодні у цьому блозі з’явилася нова категорія під назвою «дрібнички». У неї будуть потрапляти деякі секрети та трюки CSS-кодування. Ця категорія призначена для тих, хто вивчив усі CSS уроки, але хотів би покарщувати свої знання і далі. Ми обмежилися переглядом селекторів, які прописані у HTML-коді вашого блога. А що буде, якщо ми з вами вирішимо створити свої власні селектори та прописати їх у коді CSS? Той, хто вважає, що це не можливо — помиляється. Подивіться на кожну першу літеру абзаца у цій замітці. Такого вигляду вона набула за допомогою мого власноруч створеного селектора, який я прописала до CSS блога.
Яким чином цього можна досягти? А дуже просто! Давайте розробимо такі гарні літери і для ваших блогів:

1. Вигадайте назву для нового селектора. Це може бути що завгодно, аби тільки нова назва не повторювала вже існуючі, прописані у HTML блога. Нехай назва буде .dropcap

2. Вводимо до щойноствореного селектора такий код:

.dropcap {
float:left; — розташування;
background:khaki; — фоновий колір (введіть будь-який, що вам до вподоби);
border:1px solid darkkhaki; — властивості рамки;
color:olive; — колір елемента (у нашому випадку, літери)
font-size:100px; — розмір шрифта
line-height:70px; — висота
padding-top:2px; — вирівнювання
margin: 5px; — «втоплювання» всередину (потрібно, щоб велика літера не напливала на інший текст)
font-family: Times, serif, Georgia; — шрифт, що буде використовуватися
}

3. Звісно, що сам по собі цей селектор працювати не буде і HTML-теги, що його стосуються, у кожну замітку нам доведеться вводити вручну. Але наскільки простіше перед першою літерою текста написати: |span class=»dropcap»| а після неї закриваючий тег |/span| аніж кожного разу, як нам заманеться виділити таким чином першу літеру у абзаці, вводити довжелезний шмат HTML-кода! (Замість вертикальних ліній потрібно вводити такі лапки: < >)

4. Вводити цей допоміжний клаптик кода потрібно, тицьнувши на кнопочку HTML у графічному редакторі. Ось повна формула:|span class=»назва вашого селектора«|літера|/span| Звісно, таким чином можна робити не тільки з літерами, а й з іншими текстовими частинами блога. Про це я буду писати у наступних замітках з категорії «дрібнички».

Кофейний шаблон

Шаблон Кофейний

Кофейний шаблон для спільноти любителів кави. Всім: у готовому шаблоні за потребою можу змінювати кольори того чи іншого елемента, так що можливі деякі уточнення вже і після завершення роботи 🙂

Для коректного відображення слід скопіювати у блог стандартну тему Kubrick, а вже потім копіювати даний шаблон.

Zen Garden — філософія цсс ;)

Пропоную кожному подивитися на чудовий інтернет-ресурс, присвячений CSS: Zen Garden (Сад Дзен)

На цьому ресурсі ви маєте унікальну можливість приміряти на сайт різні таблиці стилів і передивитися код CSS шаблонів що сподобалися у відкритому режимі. Ці шаблони — досить незвичні. Тим паче цікаво дивитися на один і той самий сайт у різних шаблонах. Які не візьмеш, обов’язково будеш милуватися деякий час. Наприклад, ось ці три:

 

 

 

Здавалося б, зовсім різні, а HTML основу мають одну 🙂 

 

 

 

Шаблон для Аннети

Шаблон Квіткове літо

Шаблон для Annetta і тих, хто чекає на літо 🙂 Всім: у готовому шаблоні за потребою можу змінювати кольори того чи іншого елемента, так що можливі деякі уточнення вже і після завершення роботи 🙂

Для коректного відображення слід скопіювати у блог стандартну тему Connections, а вже потім копіювати даний шаблон.

Шаблон для Think

Шаблон музичний

Шаблон для Think з музичними елементами. Старалася зробити за проханням замовника щось і не веселе, і не сумне водночас. До речі, всім: у готовому шаблоні за потребою можу змінювати кольори того чи іншого елемента, так що можливі деякі уточнення вже і після завершення роботи 🙂

Для коректного відображення слід скопіювати у блог стандартну тему Rin, а вже потім копіювати даний шаблон.

Шаблон для Buzenko

Шаблон книжковий блакитний

Шаблон для buzenko у сіро-блакитних кольорах. За проханням замовника залишила незмінними основу шаблона та його кольорову гаму.

Для коректного відображення слід скопіювати у блог стандартну тему Kubrick, а вже потім копіювати даний шаблон.

Урок 20. CSS vs HTML

Ми вже достатньо довгий час практикувалися у видозміненні своїх блогів за допомогою CSS. Звичайно, розмаїття шаблонів на Blox.ua поширилося, більшість з них доступні для копіювання. Ви дивитеся на гарний шаблон і вирішуєте приміряти його до свого блога. Аж тут такий здавалося, охайний шаблон саме на вашому блозі починає пливти у різні сторони і виглядає зовсім не так, як на тому блозі, з якого пропонувалося скопіювати CSS. У чому справа? Помилки у коді? Щось невірно скопіювалося? А от і ні. Давайте сьогодні розглянемо цю проблему конкретніше.
Подивіться на малюнок:
Як можна побачити з цих шаблонів, їх шпальти знаходяться у різних сторонах розмітки, також по різному виглядають заголовки (хоча у цьому прикладі це не так примітно).
Розкладка блоків шаблона з їх означеннями (body, titletext, BlogMainBox і т. д.) прописується у коді HTML, а вже поверх цього коду, як одежу на тіло, ми одягаємо CSS. Уявіть сорочку з одним тільки правим рукавом (нижній шаблон на малюнку), яку ми одягаємо на дивовижну істоту, якій потрібно сховати не праву, а ліву руку (верхній шаблон на малюнку). Сорочка вдягається шиворіт-навиворіт і буде виглядати некоректно.
Тому перед тим, як копіювати собі новостворений шаблон, дізнайтеся, на основі якого зі стандартних шаблонів його було розроблено. Встановіть потрібний стандартний шаблон до свого блога, а потім поверх нього копіюйте новий.
Пам’ятайте, що за допомогою CSS ви можете докорінно змінити дизайн свого блога, але не його розмітку, хоча звузити, розширити, заховати будь-які елементи блога код  CSS нам дозволяє (про це говорилося у попередніх уроках).
На цьому я ставлю крапку у систематичному вивченні  CSS — все, що потрібно знати про каскадні таблиці стилів при розробці блогового дизайну ви мали змогу дізнатися з цих 20 уроків. Надалі я буду публікувати цікаві нотатки щодо різних стилів дизайну та способів їх розробки, а також надам декілька майстер-класів, що будуть стосуватися корисних дрібничок у CSS дизайнуванні.