Літера заголовків html і css

Літера заголовків html і css

Основна літера, згідно з визначенням, - це елемент тексту, який збільшено у розмірі відносно рядкових літер. Практично в усіх мовах із заголовної літери починається речення. Вигляд початку абзацу, що виділяється основною літерою, дозволяє структурувати текст і полегшувати його сприйняття. Коли оформляється інтернет-сторінка, текст може бути написаний відповідно до уподобань автора і правил російської мови. Також його вигляд можна "автоматизувати" шляхом внесення певних "команд" до файлу з розширенням css - таблицю стилів - або доповнити Ваш html файл розділом style. CSS зазвичай вивчають додатково з html, щоб швидко змінювати якісь елементи оформлення відразу в усьому тексті. 


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


Якщо ви застосуєте css, заголовні літери на початку кожного абзацу можуть виглядати особливим чином. Наприклад, введений в html без круглих дужок нижченаведений код дозволяє для тексту, що оформляється тегом "р", зробити заголовну букву - first letter - більш великою - 220% від стандартного розміру, жовтого кольору - значення color дорівнює yellow, і написати її шрифтом, відмінним від решти тексту - Ge

(<) style(>)

p {font-family: batangche; font-size:93%;}

p: first-letter {font-family: Georgia; font-size:220%; color: yellow;}

(<)/style(>)

Гарні літери можна отримати, якщо створити власний шрифт у вигляді картинок - на кожну букву окрема картинка, наприклад, у давньоруському або готичному стилі. Їх можна намалювати у графічному редакторі. Тоді можна вставляти код без круглих дужок (<) img src = "посилання на місце, де лежить зображення" (>). Додатковими атрибутами теґу Img будуть heigh і width - ширина та висота зображення, яку можна встановити в пікселях для гармонійного поєднання з іншим текстом. Приклад: (<) img src = "посилання на місце, де лежить картинка" heigh = 12 px width = 6px (>). Круглі дужки навколо < і > прибираємо.


Якщо у вас немає можливості самостійно намалювати алфавіт, то заголовна буква може бути оформлена за допомогою шрифтів, викладених у вільному доступі на "Гуглі" "(розділ Fonts) або інших пошуковиках і ресурсах. Для цього вищенаведений код потрібно оформити наступним чином:

(<) style(>)

p {font-family: batangche; font-size:93%;}

p: first-letter {font-family: Kelly+Slab; font-size:220%; color: blue;}

(<)/style(>)

А в тег "head" додати посилання без круглих дужок для "підключення", де після family вказується вибране сімейство шрифтів, що підставляється, крім того, також в p: first-letter.

(<)link href='http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic' rel='stylesheet' type='text/css' (>).


Сервіс "Гугла" дозволяє вибрати той чи інший вигляд шрифту і надає готові посилання для вставки в html або css. Звертаємо вашу увагу на те, що необхідно обов 'язково вибрати групу шрифтів - латиницю або кирилицю, оскільки майже всі латинські шрифти не працюють при оформленні російськомовного тексту. На даний момент пошуковик надає близько 40 видів російських шрифтів на безкоштовній основі.

Заголовна літера або її прописної антипод можуть бути оформлені за допомогою властивості CSS text transform. Якщо у таблиці стилів встановити значення text transform: none, то текст буде виглядати так, як ви його напишете. Для переведення всіх літер у рядковий регістр потрібно через двокрапку встановити значення text transform: lowercase, а для прописного регістру - uppercase. Встановлення ж для властивості значення text transform: capitalize зробить так, що на початку кожного слова буде головна буква.