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

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

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

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

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

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

Внимание!

!Отстъпка за всички продукти за красота утре!

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

Създайте капачка

Ако не знаете какво означава терминът "drop cap", тогава е моментът да разберете, тъй като е пряко свързан с актуалната тема.

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

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

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

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

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

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

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

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

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

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

Чао чао!

С най-добри пожелания, Роман Чуешов

Прочети: 236 пъти

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

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

Обозначения

Стойностите

главна буква Първият знак на всяка дума в изречението ще бъде с главни букви. Останалите символи не променят външния си вид. малки букви Всички текстови знаци стават малки (малки). главни букви Всички текстови знаци са главни (главни). none Не променя регистъра.

Пясъчник

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

div (текст-трансформиране: главни букви;)

Пример

Паметник на културатаСредна възраст

Амазонските низини приемат малък транспорт от котки и кучета, а заливът Хайош е известен със своите червени вина.

Резултат този примерпоказано на фиг. 1.

Ориз. 1. Прилагане на свойството text-transform

Обектен модел

Предмет.style.text Трансформирайте

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

Всяка спецификация преминава през няколко етапа на одобрение.

• Препоръка - Тази спецификация е одобрена от W3C и се препоръчва като стандарт.
• Препоръка за кандидати ( Възможна препоръка ) - групата, отговорна за стандарта, е удовлетворена, че е в съответствие с целите му, но е необходима помощта на общността на разработчиците за прилагане на стандарта.
• Предложена препоръка ( Предложена препоръка) - В този момент документът се представя на Консултативния съвет на W3C за окончателно одобрение.
• Работен проект - По-зряла версия на проекта след обсъждане и изменения за преглед от общността.
• Чернова на редактора ( Редакционен проект) - чернова версия на стандарта след редактиране от редакторите на проекта.
• Чернова ( Проект на спецификация) е първата чернова на стандарта.

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

По-рано и сега свалете шапки

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

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

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

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

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

CSS за елемента на параграфа и класа, който създава писмото, ще изглежда така:

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

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

Което ни дава:

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

Myinitialcapsi (размер на шрифта: 48px; семейство шрифтове: Didot; поле вдясно: -1px;)

азв този случай има малко допълнително място между"I" и "n."

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

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

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

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

Myinitialcapsq (размер на шрифта: 30px; семейство шрифтове: Didot; float: вляво; margin-top: 4px;)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

p (размер на шрифта: 1,2em; семейство шрифтове: Georgia, "Times New Roman", Times, сериф; височина на реда: 2em; padding-bottom: 0,5em;) p: първо дете :: първа буква ( размер на шрифта: 3.6em; преобразуване на текст: главни букви; семейство шрифтове: "Monotype Bernard Condensed", сериф; поле вдясно: 0.03em;)

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

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

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

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