Тег заголовні букви html. Робимо великі літери css стилями з використанням псевдоелементів. Культурний пам'ятник Середньовіччя
Доброго времени суток, гіки сайтобудування. У сьогоднішній публікації буде розглянута тема, що стосується оформлення текстового контенту. Саме тому ви дізнаєтеся, як задаються заголовні букви css - засобами, ознайомитеся з декількома варіантами створення буквиці і звичайно ж зможете все випробувати на практиці. Ну а тепер давайте переходити до найцікавішого!
Займемося трансформацією тексту
Завдяки каскадним стильовим таблиць можна змінювати як перший символ блоку, так і весь текст. Я розповім вам, як можна зробити обидва варіанти. При цьому всі названі в даній статті інструменти підтримуються в трьох рівнях мови: css1, css2, css2.1 і css3.
Почну з цікавого властивості, яке видозмінює весь текстовий контент в обраному. це text-transform.
Названий елемент може перетворювати символи до прописних, рядковим, а також задавати кожен перший символ слова у вигляді великої літери. Детальніше про значеннях я написав в таблиці.
Ось тепер для закріплення теоретичного матеріалу розберіть приклад.
Увага!
! Завтра на всі косметичні товари знижка!
Акція діє у всіх філіях, розташованих у Вашому місті.
створення буквиці
Якщо ви не знаєте, що має на увазі під собою термін «буквиця», то як раз настав час дізнатися, так як це безпосередньо пов'язано з поточною темою.
Буквиця (або ще іноді говорять ініціал) - це перша буква глави, яка відрізняється від інших своїм великим розміром, кольором і в деяких випадках навіть дизайном шрифту. У житті приклад такої літери можна зустріти в старих рукописах і книгах.
Існує кілька способів створення ініціал. Часто символ виділяють тегом мови розмітки і після в стилях прописують певні властивості, які його видозмінюють. Це непоганий спосіб, однак дана публікація розповідає про механізми css (які, на мою думку, в даному випадку використовувати набагато логічніше і зручніше).
Для вирішення поставленого завдання можна скористатися таким інструментом, як.
Так, в даному випадку використовується: first-letter. Як і всі псевдоелементи, він приписується до селектора через двокрапку. Після за всіма правилами таблиць стилів вказуються властивості. Однак застосувати можна тільки ті властивості, які відносяться до редагування шрифтів, відступів, кольору, заднього фону, полів і кордонів.
Пропоную розглянути конкретний приклад. Реалізуючи представлену невелику програму, я вирішив зробити не просто кольорову буквицу, а заповнити її квітами. Для цього потрібно використовувати кілька хитрих прийомів з установкою прозорого кольору шрифту і заливкою букви вибраними зображеннями.
У цьому абзаці написано пропозицію з дуже цікавим змістом.
Продовжимо цікаву розповідь і в наступному абзаці.
Отриманий результат виглядає дуже привабливо і незвично, що є ідеальним рішенням для.
Як бачите дана тема дуже проста. наведений мною програмний кодви спокійно можете використовувати для своїх веб-ресурсів, модифікуючи і підганяючи під свій стиль.
Якщо викладений матеріал був вам корисний, то підписуйтесь на оновлення мого блогу і не забувайте ділитися отриманими знаннями (і звичайно ж посиланням на мій блог) з друзями. Бажаю удачі!
Бувай!
З повагою, Роман Чуєшов
В html розмір шрифту грає важливу роль. Він дозволяє звернути увагу користувача на важливу інформацію, розміщену на сторінці сайту. Хоча важливий не тільки розмір букв, але і їх колір, товщина і навіть сімейство.
Теги та атрибути при роботі зі шрифтами html
Мова гіпертексту володіє великим набором засобів для роботи зі шрифтами. Адже саме форматування тексту є основним завданням html.
причиною створення мови HTMLстала проблема відображення правил форматування тексту браузерами.
Розглянемо теги, які використовуються для роботи зі шрифтами в html і їх атрибути. Основним з них є тег . За допомогою значень його атрибутів можна задати кілька характеристик шрифту:
- color - встановлює колір тексту;
- size - розмір шрифту в умовних одиницях.
Підтримується позитивне значення атрибута від 1 до 7.
- face - використовується для установки сімейства шрифтів тексту, які будуть використані всередині тега . Підтримується відразу кілька значень перерахованих через кому.
Форматується тільки той текст, який розташований між частинами парного тега font.Решта тексту відображається стандартним шрифтом, встановленим за замовчуванням.
Також в html існує ряд парних тегів, які задають лише одне правило форматування. До них відносяться:
- - задає в html жирний шрифт. тег за дією аналогічний попередньому;
- - розмір більше встановленого за замовчуванням;
- — менший розміршрифту;
- - курсив (курсив). Аналогічний йому тег ;
- - текст з підкресленням;
- закреслений;- - відображення тексту тільки в нижньому регістрі;
- - в верхньому регістрі.
звичайний текст
жирний текст
жирний текст
більше звичайного
менше, ніж звичайно
курсив
курсив
З підкресленням
закреслений
Можливості атрибута style
Крім описаних тегів існує ще кілька способів, як змінити шрифт в 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: 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. А також у вигляді шістнадцятирічного коду.
Управляє перетворенням тексту елемента в заголовні або прописні символи. Коли значення відмінно від 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 ( чернетка специфікації) - перша чорнова версія стандарту.
Найчастіше в поспіху при додаванні матеріалів на сайт або, наприклад, створення нової темина форумі користувач може почати писати пропозицію (назва) з маленькою (рядкової) літери. Це в якійсь мірі є помилкою.
Я покажу кілька варіантів вирішення цього завдання: PHP і CSS підійдуть більше для вже опублікованих матеріалів, коли як jQuery зможе виправити становище ще до публікації.
Перша літера рядка в верхньому регістрі на PHP
На PHP існує функція під назвою « ucfirst», Яка як раз перетворює перший символ рядка в верхній регістр, але мінус її в тому, що вона не зовсім коректно працює з кирилицею.
Для цього ми напишемо свою невелику функцію. Реалізація буде виглядати наступним чином:
У такому варіанті ми отримаємо пропозицію, яке починається з великої літери, що, власне кажучи, нам і необхідно.
Перша літера рядка в верхньому регістрі на CSS
Цей метод візуально (тобто в вихідному кодісайту пропозиції будуть виглядати як є) також перетворює перший символ у верхній регістр.
Використання наступне:
перше речення
друге речення
третє речення
четверте речення
За допомогою псевдоелемента « first-letter»І властивості« text-transform»Ми задали оформлення для кожної першої літери параграфа.
Перша літера рядка в верхньому регістрі на jQuery
Як я вже говорив раніше, цей спосіб перетворення найкраще підійде для матеріалів, які ще тільки будуть публікуватися.
Для прикладу ми візьмемо текстове поле (воно буде виступати у нас в якості поля для введення заголовка) і напишемо для нього невеликий скрипт, який при введенні пропозиції з маленької літери робить його з великою:
Скрипт спрацьовує як при написанні тексту, так і простий його вставці. Не забувайте, що для роботи скриптів на вашому сайті необхідна наявність підключеного бібліотеки jQuery.
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; position: relative;)
Якось так. Звичайно, вам знадобиться стиль, який би підходив до вашого дизайну і тексту. Наприклад, значення властивостей: 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; position: relative;)
Ось, власне, пара методів редагування заголовних буквза допомогою CSS.