Здрастуйте, читачі цього блогу. Сьогодні я розповім про те, як можна зробити через css усі великі літери. Звичайно, для цього можна увімкнути Caps Lock і писати потрібний текст, але це досить примітивний метод. А якщо вам треба виділити окремий абзац у вже готовій статті?

Робимо в css всі букви великими

Для цього є властивість text-transform, яка, як ви вже здогадалися, трансформує текст. У нього є такі значення:

• lowercase – весь текст виводиться малими літерами
• uppercase – всі слова виводяться великими (те, що нам потрібно)
• capitalize – перша літера кожного слова виводиться великою

Ось, власне, і все, що вам потрібно знати. Залишається зрозуміти, як звернутися до потрібного елементу. Давайте представимо такий приклад: вам потрібно п'ятому абзацу у статті зробити всі великі літери. І як це можна продати?

Як дістатися до потрібного елемента?

Як ви знаєте, параграф створюється за допомогою парного html-тега, весь вміст якого і стає абзацом. Залишається лише задати новий стильовий клас для нього:

Тепер ми маємо можливість звернутися через мову css до цього конкретного абзацу, не торкнувшись інших. Зробити це можна так:

Uppercase-letter(
Text-transform: uppercase;
}

Цей спосіб підійде, коли вам потрібно в окремій статті виділити фрагмент. А якщо на всіх сторінках повинен бути певний текст великими літерами. У такому разі краще помістити блок у файл шаблону, щоб не писати його щоразу.

А можливо вам потрібно в кожній статті другий абзац виділити за допомогою css великими літерами. Тоді вам підійде інший варіант. Знайдіть блок, у якому виводиться стаття та зверніться до другого абзацу за допомогою псевдокласу nth-child. У цьому прикладі у нас блок зі статтею має клас article .

Article p:nth-child(2)(
Text-transform: uppercase
}

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

Загалом використовувати виводити текст так не рекомендується, тому що це сильно погіршує його сприйняття, але окремі особливо важливі фрагменти виділити можна.

Сьогодні ми розібрали властивість text-transform. Підписуйтесь на блог, щоб отримати нові статті.

Найчастіше в поспіху при додаванні матеріалів на сайт або, наприклад, створення нової теми на форумі користувач може почати писати пропозицію (назва) з маленької (маленької) літери. Це певною мірою є помилкою.

Я покажу кілька варіантів вирішення цієї задачі: PHP і CSS підійдуть більше для вже опублікованих матеріалів, коли jQuery зможе виправити положення ще до публікації.

Перша літера рядка у верхньому регістрі на PHP

На PHP існує функція під назвою « ucfirst», Яка саме перетворює перший символ рядка у верхній регістр, але мінус її в тому, що вона не зовсім коректно працює з кирилицею.

Для цього ми напишемо свою функцію. Реалізація буде виглядати так:

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

Перша літера рядка у верхньому регістрі CSS

Цей метод візуально (тобто у вихідному коді сайту пропозиції будуть виглядати як є) також перетворює перший символ у верхній регістр.

Використання таке:

За допомогою псевдоелементу first-letter» та властивості « text-transform» ми задали оформлення кожної першої літери параграфа.

Перша літера рядка у верхньому регістрі на jQuery

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

Для прикладу ми візьмемо текстове поле (воно виступатиме у нас як поле для введення заголовка) і напишемо для нього невеликий скрипт, який при введенні речення з маленької літери робить його з великої:

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

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

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

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

(<) style(>)

p: first-letter (font-family: Georgia; font-size:220%; color: yellow;)

(<)/style(>)

Гарні великі літери можна отримати, якщо створити власний шрифт у вигляді картинок - на кожну літеру окрема картинка, наприклад, у давньоруському чи готичному стилі. Їх можна намалювати в Тоді в потрібних місцях на місце великої літери можна вставляти код без круглих дужок (<) img src=”ссылка на место, где лежит картинка”(>). Додатковими атрибутами будуть 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(>)

(<)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 зробить так, що на початку кожного слова буде велика літера.

Drop cap (врізана в текст буквиця) – це перша буква абзацу, що має більший розмір, ніж інші, і розміщена так, що її верх знаходиться на рівні першого рядка абзацу. На зображенні можна побачити приклад врізаної в текст буквиці.

До речі, WordPress має спеціальний плагін (wordpress.org/extend/plugins/drop-caps), який дозволяє автоматично створювати врізані в текст (і зміщені вниз) заголовні букви. Чудово! Однак, якщо ви не хочете використовувати плагін (я впевнений, що не хочете), і вам всього лише необхідно створити drop cap до кількох постів, і, можливо, в якомусь певному місці?

Хороша новина: для того щоб створити великі літери не потрібно застосовувати плагін, все, що необхідно, це трохи css і тег span. Відкрийте свій css-файл і додайте наступний код:

Span.dropcaps ( font-family:Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0.09em;

Якось так. Звичайно, вам знадобиться стиль, який би підходив до вашого дизайну та тексту. Наприклад, значення властивостей: font-size, margins і line-height буде необхідно підібрати виходячи з вашого дизайну та тексту.

Тег Span

Для того, щоб стиль застосовувався до великої літери тексту, необхідно «загорнути» заголовну літеру в тег span і прописати відповідний клас.

A

Псевдоелемент:first-letter

Також задати стиль першому символу в тексті можна за допомогою псевдоелемента: first-letter . Однак до псевдоелементу: first-letter можна застосовувати обмежену кількість властивостей: це властивості пов'язані зі шрифтом, кольором, тлом, межами, полями та відступами. Ще слід зазначити, що псевдоелемент:first-letter не працюватиме у старих браузерах.

P:first-letter ( font-family:Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin -right: 0.09em;

Ось, власне, пара методів редагування великих літерза допомогою CSS.

Керує перетворенням тексту елемента на великі або великі символи. Коли значення відрізняється від none, регістр вихідного тексту буде змінено.

коротка інформація

Позначення

Значення

capitalize Перший символ кожного слова в реченні буде великим. Інші символи свого вигляду не змінюють. lowercase Усі символи тексту стають малими (нижній регістр). uppercase Усі символи тексту стають великими (верхній регістр). none Не змінює регістр символів.

Пісочниця

Вінні-Пух був завжди не проти трохи підкріпитися, особливо годин об одинадцятій ранку, тому що в цей час сніданок вже давно скінчився, а обід ще й не думав починатися. І, звичайно, він страшенно зрадів, побачивши, що Кролик дістає чашки та тарілки.

div (text-transform: capitalize;)

Приклад

Культурний пам'ятник Середньовіччя

Амазонська низовина непомірно бере невеликий провіз кішок і собак, а Хайош-Байя славиться червоними винами.

Результат цього прикладу показаний на рис. 1.

Рис. 1. Застосування якості text-transform

Об'єктна модель

Об'єкт.style.textTransform

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

• Recommendation (Рекомендація) - специфікація схвалена W3C та рекомендована як стандарт.
• Candidate Recommendation ( Можлива рекомендація) - група, відповідальна за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.
• Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ подано на розгляд Консультативної ради W3C для остаточного затвердження.
• Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
• Editor"s draft ( Редакторська чернетка) – чорнова версія стандарту після внесення правок редакторами проекту.
• Draft ( Чернівець специфікації) – перша чорнова версія стандарту.