Робимо великі літери css стилями з використанням псевдоелементів. Як зробити в css всі великі літери Як зробити першу літеру великої літери
Здрастуйте, читачі цього блогу. Сьогодні я розповім про те, як можна зробити через 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. Підписуйтесь на блог, щоб отримати нові статті.
У HTML розмір шрифту відіграє важливу роль. Він дозволяє звернути увагу користувача на важливу інформацію на сторінці сайту. Хоча важливим є не тільки розмір літер, а й їх колір, товщина і навіть сімейство.
Теги та атрибути при роботі зі шрифтами html
Мова гіпертексту має великий набір засобів для роботи зі шрифтами. Адже саме форматування тексту є основним завданням html.
Причиною створення мови HTML стала проблема відображення правил форматування тексту браузерами.
Розглянемо теги, які використовуються для роботи зі шрифтами в HTML та їх атрибути. Основним із них є тег . За допомогою значень його атрибутів можна задати кілька параметрів шрифту:
- color – встановлює колір тексту;
- size – розмір шрифту умовних одиницях.
Підтримується позитивне значення атрибута 1-7.
- face – використовується для встановлення сімейства шрифтів тексту, які будуть використані всередині тега . Підтримується відразу кілька значень, перерахованих через кому.
Форматується лише той текст, розташований між частинами парного тега font.Решта тексту відображається стандартним шрифтом, встановленим за замовчуванням.
Також у html існує ряд парних тегів, що задають лише одне правило форматування. До них відносяться:
- - Задає в html жирний шрифт. Тег по дії аналогічний до попереднього;
- - Розмір більше встановленого за замовчуванням;
- - Менший розмір шрифту;
- - Похилий текст (курсив). Аналогічний йому тег ;
- - Текст з підкресленням;
- Закреслений;- — відображення тексту лише у нижньому регістрі;
- - У верхньому регістрі.
Звичайний текст
Жирний текст
Жирний текст
Більше звичайного
Менше звичайного
Курсив
Курсив
З підкресленням
Закреслений
Можливості атрибуту
Крім описаних тегів існує ще кілька способів, як змінити шрифт у html. Одним із них є застосування універсального атрибуту style. За допомогою значень його властивостей можна задавати стиль відображення шрифтів:
1) font-family – властивість визначає сімейство шрифту. Можливе перерахування кількох значень.
Зміна шрифту в html на наступне значення відбудеться, якщо попередня родина не встановлена в операційній системі користувача.
Синтаксис написання:
font-family: ім'я шрифту [, ім'я шрифту[, ...]]
2) font-size – задається розмір від 1 до 7. Це один із основних способів того, як у html можна збільшити шрифт.
Синтаксис написання:
font-size: абсолютний розмір Відносний розмір | значення | відсотки | inherit
Розмір шрифту можна також задати:
- У пікселях;
- В абсолютному значенні ( xx-small, x-small, small, medium, large);
- У відсотках;
- У пунктах (pt).
Font-size:7
Font-size:24px
Font-size: x-large
Font-size: 200%
Font-size:24pt
3) font-style – встановлює стиль написання шрифту. Синтаксис:
font-style: normal | italic | oblique | inherit
Значення:
- normal -нормальне написання;
- italic – курсив;
- oblique – шрифт із нахилом вправо;
- inherit – успадковує написання батьківського елемента.
Приклад того, як змінити шрифт у html за допомогою цієї властивості:
font-style:inherit
font-style:italic
font-style:normal
font-style:oblique
4) font-variant - переводить всі великі літери в великі. Синтаксис:
font-variant: normal | small-caps | inherit
Приклад того, як змінити шрифт у html цією властивістю:
font-variant:inherit
font-variant:normal
font-variant:small-caps
5) font-weight – дозволяє встановити товщину написання тексту (насиченість). Синтаксис:
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Значення:
- bold – встановлює жирний шрифт html;
- bolder – жирніша щодо normal;
- lighter –менш насичене щодо normal;
- normal – нормальне написання;
- 100-900 - задається товщина шрифту в числовому еквіваленті.
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
font-weight:900
font-weight:100
Властивість font та колір шрифту html
Font є ще однією контейнерною властивістю. Усередині воно об'єднало значення кількох властивостей, призначених зміни шрифтів. Синтаксис :
font: font-size font-family | inherit
Також як значення можуть бути задані шрифти, що використовуються системою в написах різних елементів управління:
- caption – для кнопок;
- icon – для іконок;
- menu – меню;
- message-box –для діалогових вікон;
- small-caption – для невеликих елементів керування;
- status-bar – шрифт рядка стану.
font:icon
font:caption
font:menu
font:message-box
small-caption
font:status-bar
font:italic 50px bold "Times New Roman", Times, serif
Для того щоб задати колір шрифту в HTML можна використовувати властивість color. Воно дозволяє встановлювати колір як за допомогою ключового слова, так і у форматі rgb . А також у вигляді шістнадцяткового коду.
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.
Велика буква, відповідно до визначення, - це елемент тексту, який збільшений у розмірі відносно Практично у всіх мовах з великої літери починається речення. А оформлення початку абзацу великою літерою, що виділяється, дозволяє структурувати текст і полегшує його сприйняття. Коли оформляється інтернет-сторінка, текст може бути написаний відповідно до уподобань автора та правил російської мови. Також його оформлення можна "автоматизувати" шляхом внесення певних "команд" у файл з розширенням 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 зробить так, що на початку кожного слова буде велика літера.
Керує перетворенням тексту елемента на великі або великі символи. Коли значення відрізняється від none, регістр вихідного тексту буде змінено.
коротка інформація
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <размер> |
| A && B | Значення мають виводитися у вказаному порядку. | <размер> && <цвет> |
| A | B | Вказує, що треба вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватись самостійно або спільно з іншими у довільному порядку. | width || count |
| Групує значення. | [crop || cross] | |
| * | Повторювати нуль або більше разів. | [,<время>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Зазначений тип, слово чи група не є обов'язковим. | inset? |
| (A, B) | Повторювати не менш як A, але не більше B разів. | <радиус>{1,4} |
| # | Повторювати один або більше разів через кому. | <время># |
Значення
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 ( Чернівець специфікації) – перша чорнова версія стандарту.