Позволява ви да промените регистъра на буквите в текста.

Стойността по подразбиране е none, което няма ефект върху текста. Регистърът на текста остава същият. Стойностите главни и малки букви преобразуват знаците съответно в главни и малки букви. Ако зададете капитализиране, тогава само първите знаци на всяка дума ще бъдат главни. Inherit наследява стойността на родителя.

Пример

h3 (текстова трансформация: главни букви;) .lowercase (текстова трансформация: малки букви;) .capitalize (текстова трансформация: главни букви;)

Това е заглавието. Той има свойство за преобразуване на текст, приложено със стойност главни букви. Всички знаци ще бъдат главни букви.

Този абзац има свойството Text-transform, зададено на Lowercase, което означава, че всички букви ще бъдат с малки букви.

И този последен параграф има свойство за преобразуване на текст, приложено със свойството CAPITALIZE. Първите букви на всяка дума ще бъдат главни и само те.

Резултат

Въпреки това, не всичко е толкова просто. Има някои нюанси. Ако обърнете внимание на втория абзац от горния пример, ще забележите, че думата капитализиране, въпреки приложеното към параграфа свойство за преобразуване на текст със стойност капитализиране, се показва изцяло с главни букви, което съответства на изходния текст. Това се обяснява с факта, че при зададената стойност на главни букви се проверяват само първите букви на думите, а останалите остават непроменени, независимо от първоначалното им състояние.
Въпреки привидната си простота, свойството text-transform може да бъде много полезно. Например, за да направите текста на всички H1 заглавия на вашия сайт главни букви, трябва само да добавите едно свойство към листа със стилове

H1 (преобразуване на текст: главни букви;)

и проблемът ще бъде решен. И не е необходимо ръчно да променяте всички заглавки, които могат да бъдат много, много много.

Добър ден, маниаци за изграждане на сайтове. Днешната публикация ще покрие темата за дизайна. текстово съдържание. Ето защо ще научите как се задават css главни букви - по този начин ще се запознаете с няколко опции за създаване на главна буква и, разбира се, можете да изпробвате всичко на практика. Е, сега да преминем към най-интересното!

Нека трансформираме текста

Благодарение на каскадните таблици със стилове можете да промените както първия знак на блок, така и целия текст. Ще ви кажа как можете да направите и двата варианта. Освен това всички инструменти, споменати в тази статия, се поддържат на три езикови нива: css1, css2, css2.1 и css3.

Ще започна с едно интересно свойство, което променя цялото текстово съдържание в избрания . то преобразуване на текст.

Наименуваният елемент може да преобразува символи в главни, малки букви и също така да задава всеки първи знак от дума като главна буква. Написах повече за стойностите в таблицата.

Сега, за да консолидирате теоретичния материал, помислете за пример.

внимание!

!Утре всички продукти за красота са с намаление!

Промоцията е валидна във всички филиали във вашия град.

Създаване на капачка

Ако не знаете какво означава терминът „писмо писмо“, тогава е време да разберете, тъй като това е пряко свързано с текущата тема.

Началната буква (или понякога казват началната) е първата буква от главата, която се различава от останалите по своята голям размер, цвят и в някои случаи дори дизайн на шрифта. В живота пример за такова писмо може да се намери в стари ръкописи и книги.

Има няколко начина за създаване на инициал. Често даден знак се подчертава с етикет на език за маркиране и след като в стилове предписват определени свойствакоито го променят. Това е добър начин, но тази публикация говори за css механизми (които според мен са много по-логични и удобни за използване в този случай).

За да разрешите този проблем, можете да използвате инструмент като.

И така, в този случай: използва се първа буква. Както всички псевдоелементи, той се добавя към селектора с двоеточие. След всички правила на листовете със стилове се уточняват свойствата. Можете обаче да приложите само онези свойства, които са свързани с редактиране на шрифтове, отстъпи, цветове, заден план, полета и граници.

Предлагам да разгледаме конкретен пример. Изпълнение на представеното малка програма, реших да направя не просто цветна капачка, а да я напълня с цветя. За да направите това, трябва да използвате няколко трудни трика с настройка на цвета на шрифта на прозрачен и запълване на буквата с избраното изображение.

Този параграф съдържа много интересно изречение.

Нека продължим интересната история в следващия параграф.

Полученият резултат изглежда много привлекателен и необичаен, което е идеално решениеза .

Както можете да видите, тази тема е много проста. донесени от мен програмен кодможете лесно да използвате за вашите уеб ресурси, като модифицирате и приспособявате към вашия стил.

Ако представеният материал е бил полезен за вас, тогава се абонирайте за актуализациите на моя блог и не забравяйте да споделите знанията си (и, разбира се, връзка към моя блог) с приятелите си. Късмет!

Чао чао!

С уважение, Роман Чуешов

CSS главни буквипомагат да се разчупи монотонността на еднотипния дизайн, чиито текстове изглеждат еднакви от началото до края.

Писмата някога и сега

Хронистите са използвали главни букви в ръкописни ръкописи, някои от които датират от 5 век. Главните букви продължават да се използват от 8-ми до 15-ти век, когато печатарските преси правят възможно печатането да достигне индустриално ниво. В началото на текста бяха поставени както ръкописни, така и печатни главни букви. Често те бяха украсени с декоративен модел, който беше разположен около буквата.

Повдигнатите и спуснати букви се използват и днес. Те могат да бъдат намерени във вестници, списания и книги, както и в дигитален печат. Повдигнатите букви понякога се наричат ​​удължени. Те са разположени на същото ниво като отдолутекстът, който ги следва. Изпуснатите букви се поставят наравно с горната част на текста, понякога в слой зад основното съдържание на текста, или останалата част от текста се увива около тях.

Изпъкналите букви са много по-лесни за дефиниране, тъй като се изравняват с останалата част от текста и обикновено не е необходимо да се променя обвивката на външните полета. Пропуснатите букви изискват повече фина настройка. Ще ви бъде по-лесно да се справите с това, ако първо разберете как се обработват повдигнатите знаци.

Използване на класове

Дизайнерите, които вече разбират CSS, знаят как да създадат отделен CSS клас за първата главна буква.

CSS кодът за елемента абзац и класа, който създава буквата, ще изглежда така:

p (размер на шрифта:20px; семейство шрифтове: Georgia, "Times New Roman", Times, сериф;) .myinitialcaps (размер на шрифта:48px; семейство шрифтове: Didot;)

И HTML кодът ще изглежда така:

Какво ни дава:

Изглежда твърде лесно? Всъщност ще трябва да правите корекции в зависимост от конкретните релефни букви, тъй като всяка главна буква изисква специален кернинг. След като изберете шрифт за релефните букви и за основния текст, трябва да създадете отделни класове за всяка релефна буква. По-долу CSS class.myinitialcapsiполето отдясно е отрицателно, за да се намали разстоянието между I и n.

Myiniitialcapsi(font-size:48px; font-family: Didot; margin-right:-1px;)

азВ този случай има допълнително разстояние между „I“ и „n“.

азвключването на нов клас с отрицателен марж го приближава.

В зависимост от разделителната способност на екрана в примера по-горе, I и n може да изглеждат така, сякаш са се слели. Това се дължи на серифите в края на буквите. Ето защо, преди да изберете окончателните CSS стилове, тествайте сайта на различни устройстваза да видите как CSS текстът изглежда върху тях.

Цитати и други специални случаи

Можете да увеличите не само буквите в началото на текста. Можете да внедрите друг клас, за да създадете по-голяма версия на кавичките, които ще се показват до буквата. В нашия случай нито класът букви с размер 48, нито класът текст 20 пиксела са подходящи за котировки. По-скоро ще е нещо средно - 30 пиксела. Преместваме кавичките надолу с 4 пиксела, за да ги подравним оптически с I:

Myinitialcapsq (font-size:30px; font-family: Didot; float:left; margin-top:4px;)

“азвключително” нов клас с отрицателен марж го приближава.

Трябва да бъдете много внимателни, когато указвате всяка от CSS главните букви заедно с кавичките, така че тяхното кернинг и подравняване да съответства на заобикалящото маркиране. Например, буквата T ще трябва да се премести наляво, малко отвъд ръба на абзаца, така че нейната напречна линия визуално да се вписва в оформлението. Ще трябва да направите същото с кръгли букви като C, G, O и Q. Този пример използва размери на шрифта 20, 30 и 48. Но ще трябва да коригирате размерите въз основа на конкретните шрифтове, които сте избрали. Както и размерите и резолюциите на екраните, на които ще се гледа сайта.

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

Използвайки CSS псевдоелемента, можете лесно да създадете релефна буква, като добавите ::first-letter към елемента абзац. Използвайте :първа буква ( с едно двоеточие) за наследени браузъри:

p ( размер на шрифта: 1,2 em; семейство шрифтове: Georgia, "Times New Roman", Times, сериф; височина на реда: 2 em; подложка-отдолу: 1,2 em;) p:: първа буква ( размер на шрифта: 3.6em; преобразуване на текст: главни букви; семейство шрифтове: "Monotype Bernard Condensed", serif; margin-right:0.03em;) .initialb (margin-right:-0.1em;) .initialn (margin-right:-0.15 ем ;)

HTML код, който съдържа CSS класове, които вземат предвид кернинга на буквите N и B, ще изглежда така...

Начална буква, като първата буква е главна.
С нов ред, следващият ред няма начална капачка.

нзабележете в източника на HTML как първата буква, а не главна буква в HTML, се оразмерява до първоначалния размер на капачката от 3,6 em. Чисто, а?

бно с твърдо връщане и започване на нов параграф, винаги се създава друга начална капачка. Може би се питате Как ще отчитам това? Трябва ли да имам начална шапка в началото на много нов параграф?Е, можеше. Но искате ли да изглежда по този начин и задължително ли трябва да изглежда по този начин?

Първата главна буква на параграф се преобразува в буква.
Първата буква след нов ред няма да бъде главна.

относноМоля, имайте предвид, че в програмен кодВ HTML първата буква не е главна, но се преобразува в знак 3.6em.

ОВъпреки това, дори след принудително прекъсване на реда, винаги се създава буква в началото на всеки нов параграф. Може да се запитате: Как мога да взема това предвид? Трябва ли да добавя букви за всички тези случаи?Е, можете. Но нужно ли е?

Дори с предимствата, които предоставят псевдоелементите, трябваше да добавим много код, за да дефинираме отделни класове, за да се справим с проблемите с кернинга и подплънките. Но този метод ще преобразува първата буква на всеки нов параграф в главни букви в CSS. За някои може да не е подходящо, защото не е необходимо да преобразувате първата буква на всеки параграф.

Комбиниране на псевдо-класове и псевдо-елементи за създаване на интелигентно оформление

Добавянето на псевдокласа :first-child помага за решаването на проблема с ненужното преобразуване на първите букви:

p (размер на шрифта: 1.2em; семейство шрифтове: Georgia, "Times New Roman", Times, сериф; line-height:2em; padding-bottom:0.5em;) p:first-child::first-letter ( размер на шрифта: 3,6 em; преобразуване на текста: главни букви; семейство шрифтове: "Monotype Bernard Condensed", serif; margin-right: 0,03 em;)

Комбиниране на този код с HTML:

Първата буква, която е дефинирана като първо дете, е единствената буква, която се преобразува в повдигната капачка при този метод.

Тъй като се преобразува само буквата, дефинирана като първо дете, имайте предвид, че този пример се различава от предишния без първо дете. Освен това не преобразуваме първите букви след началото на абзаца и след принудително прекъсване на реда. Това изглежда по-елегантно от начина, по който изглеждаше оформлението, когато преобразувахме всички първи букви на абзаците.

Предимството на използването на псевдо-класове е способността да се обработват различни специални случаи. Какво ще кажете за недостатъците? Има много различни псевдо-класове и те могат да се комбинират по толкова много начини, че може да ви замае главата. Например, псевдо-класовете :first-child и :first-of-type могат да дадат същите резултати. Можете също така да приложите псевдоклас не само към параграф, но и към елементи

или

. Например, както е показано в примера по-долу с релефни букви в шрифта Didot. Забележете как атрибутът margin е добавен отдясно на A . В противен случай ще се „залепи“ с буквата s в началото на раздела:

раздел (размер на шрифта: 1.2em; семейство шрифтове: Georgia, "Times New Roman", Times, сериф; височина на реда:3em;) раздел>p:първо дете:първа буква (размер на шрифта: 4em; преобразуване на текст: главни букви; семейство шрифтове: Didot, сериф; margin-right: 5px;)

И заедно с HTML:

В началото на раздела първата буква е поставена на повдигната главна буква.

И нов параграф...

Ако искате да експериментирате, можете да изследвате различни методив допълнение към :first-child и :first-of-type . Например, като :nth-of-type или :nth-of-child, за да видите как определени типове псевдокласове могат да се използват за CSS текст с главни букви. Независимо дали следвате принципите, изложени в тази статия, или започнете да копаете по-дълбоко, след като научите как да работите с first-child , :first-of-type и :first-letter CSS псевдокласове, ще можете да прилагате правилно към HTML елементи.

В html размерът на шрифта играе важна роля. Привлича вниманието на потребителя към важна информацияпубликувани на страницата на уебсайта. Въпреки че не само размерът на буквите е важен, но и техният цвят, дебелина и дори семейство.

Тагове и атрибути при работа с html шрифтове

Хипертекстовият език има голям комплектинструменти за шрифтове. В крайна сметка форматирането на текст е основната задача на html.

Причина за създаването HTML езикимаше проблем с показването на правилата за форматиране на текст от браузърите.

Помислете за етикетите, които се използват за работа с шрифтове в html и техните атрибути. Основният е етикетът . Използвайки стойностите на неговите атрибути, можете да зададете няколко характеристики на шрифта:

• цвят - задава цвета на текста;
• размер – размер на шрифта в условни единици.

Поддържа се положителна стойност на атрибут от 1 до 7.

• лице - използва се за задаване на семейството шрифтове на текста, който да се използва вътре в тага . Поддържат се множество стойности, разделени със запетаи.

Форматира се само текстът, който се намира между частите сдвоен етикетшрифт.Останалата част от текста се показва с шрифта по подразбиране.

Също така в html има редица сдвоени тагове, които дефинират само едно правило за форматиране. Те включват:

• - задава удебеления шрифт в html. Етикет подобен по действие на предишния;
• - размерът е по-голям от стандартния;
• — по-малък размершрифт;
• - наклонен текст (italic). Подобен етикет ;
• — текст с подчертаване;
• - зачеркнат;
• _{— показване на текст само с малки букви;}
• ^{- с главни букви.}

обикновен текст

Миниатюра

Миниатюра

Повече от обикновено

По-малко от обикновено

Курсив

Курсив

С подчертаване

Зачертано

Възможности за стилови атрибути

В допълнение към описаните етикети, има още няколко начина за промяна на шрифта в html. Един от тях е да използвате атрибута generic style. Използвайки стойностите на неговите свойства, можете да зададете стила на показване на шрифта:

1) font-family - свойството задава семейството на шрифтовете. Възможно е да се изброят множество стойности.
Промяната на шрифта в html към следващата стойност ще се случи, ако предишното семейство не е зададено на операционна системапотребител.

Синтаксис на писане:

семейство-шрифтове: име-на-шрифт [, име-на-шрифт[, ...]]

2) font-size - размерът се задава от 1 до 7. Това е един от основните начини, по които можете да увеличите шрифта в html.
Синтаксис на писане:

размер на шрифта: абсолютен размер | относителен размер | стойност | интерес | наследяват

Можете също да зададете размера на шрифта:

• В пиксели;
• В абсолютно изражение ( xx-малък, x-малък, малък, среден, голям);
• В проценти;
• В точки (pt).

размер на шрифта:7

размер на шрифта: 24px

Размер на шрифта: x-голям

размер на шрифта: 200%

размер на шрифта: 24pt

3) font-style - задава стила на шрифта. Синтаксис:

стил на шрифта: нормален | курсив | наклонен | наследяват

Стойности:

• нормален - нормален правопис;
• курсив - курсив
• наклонен - ​​шрифт с наклон надясно;
• inherit - наследява изписването на родителския елемент.

Пример за това как да промените шрифта в html с помощта на това свойство:

font-style: наследяване

стил на шрифта: курсив

стил на шрифта: нормален

font-style:oblique

4) font-variant - преобразува всички главни букви в главни. Синтаксис:

шрифт-вариант: нормален | малки главни букви | наследяват

Пример за това как да промените шрифта в html с това свойство:

font-variant: inherit

font-variant: нормален

шрифт-вариант: малки главни букви

5) font-weight - позволява ви да зададете дебелината на текста (наситеност). Синтаксис:

тегло на шрифта: удебелен|по-удебелен|по-светъл|нормален|100|200|300|400|500|600|700|800|900

Стойности:

• bold - настройва html шрифта на bold;
• по-смел - по-смел спрямо нормалното;
• по-лек - по-малко наситен спрямо нормалното;
• нормален - нормален правопис;
• 100-900 - задава дебелината на шрифта в числово изражение.

тегло на шрифта: получер

тегло на шрифта: получер

тегло на шрифта: по-лек

тегло на шрифта: нормално

тегло на шрифта: 900

тегло на шрифта: 100

свойство на шрифта и цвят на html шрифт

Шрифтът е друго свойство на контейнера. Вътрешно той комбинира стойностите на няколко свойства, предназначени да променят шрифтове. Синтаксис на шрифта:

шрифт: размер на шрифта семейство шрифтове | наследяват

Също така стойността може да бъде зададена на шрифтовете, използвани от системата в надписите на различни елементиконтроли:

• надпис - за бутони;
• икона - за икони;
• меню - меню;
• message-box - за диалогови прозорци;
• small-caption - за малки контроли;
• status-bar - шрифт на лентата на състоянието.

шрифт: икона

шрифт: надпис

шрифт: меню

шрифт: кутия за съобщения

малък надпис

шрифт: лента на състоянието

шрифт: курсив 50px удебелен "Times New Roman", Times, сериф

За да зададете цвета на шрифта в html, можете да използвате свойството цвят. Позволява ви да зададете цвета, както при ключова дума, както и в rgb формат. А също и под формата на шестнадесетичен код.

или повече за буквите и HTML CSS форматирането

Главата съдържа примери форматиране на буквиот областта за маркиране на хипертекст.

В менюто отляво ще намерите модерни и много подробни HTML уроци.

Те ще ви позволят да създадете вашия уебсайт с на чисто докато гледате малко по-надолу.

Може да е интересно.

Епоха информационно общество

Човечеството навлезе в нов период от своето развитие, в който информационните и мрежови технологии играят изключително важна роля. Живеем в ерата на информационното общество, което се характеризира с бързо развитие на информационните и телекомуникационни технологии. С появата на компютъра и интернет започнаха огромни промени. Компютърът и Интернет тласкат обществото да формулира нови норми на поведение, правила и идеали. Интернет е за новото поколение това, което беше телевизията за предишното поколение. Но Глобалната мрежа е много по-функционална от телевизията, защото предоставя възможност за извършване на покупки, продажби, предлага комуникация и различни начинисебеизразяване, като създаване лични уеб страници и сайтове.

HTML букви: главни и малки букви

Пример за форматиране на букви:

Форматиране на резултат:

Пример за свободен текст, написан с главни букви

Пример за свободен текст, написан с главни букви

етикети - дефинирам главни букви(Тези тагове не се поддържат в HTML 5).

cssкод style="text-transform:uppercase" - определя главни букви.

С други думи, главните букви се определят с използвайки CSS атрибути.

HTML букви и CSS разстояние между тях

Пример за форматиране на букви:

Форматиране на резултат:

Произволно HTML тексти CSS разстояниемежду буквите през 2 пиксела

Описание на атрибути и стойности:

cssкод style="letter-spacing:2px" - определя CSS разстояние между буквите.

Потърсете подобни примери за форматиране в менюто отляво. Благодаря за вниманието.