Добър ден, отрепки от изграждането на сайта. В днешната публикация ще разгледаме тема, свързана с проектирането на текстово съдържание. Ето защо ще научите как да задавате главни букви в css - по този начин ще се запознаете с няколко опции за създаване на капачка и, разбира се, можете да изпробвате всичко на практика. Сега нека преминем към забавната част!
Нека трансформираме текста
С каскадни стилови таблици можете да промените както първия знак на блок, така и целия текст. Ще ви покажа как можете да направите и двете. Освен това всички посочени в тази статия инструменти се поддържат на три нива на езика: css1, css2, css2.1 и css3.
Ще започна с интересно свойство, което променя цялото текстово съдържание в селекцията. то преобразуване на текст.
Именованият елемент може да преобразува знаци в главни, малки букви и също така да изписва с главни букви всеки първи знак на думата. Написах повече за стойностите в таблицата.
Сега, за да затвърдите теоретичния материал, вземете пример.
Внимание!
! Утре отстъпка за всички козметични продукти!
Промоцията е валидна във всички клонове, разположени във вашия град.
Създаване на капачка
Ако не знаете какво означава терминът „drop cap“, тогава е моментът да разберете, тъй като той е пряко свързан с текущата тема.
Капачката (или понякога те казват началната) е първата буква от главата, която се различава от останалите с големия си размер, цвят и в някои случаи дори с дизайна на шрифта. В реалния живот пример за такова писмо може да се намери в стари ръкописи и книги.
Има няколко начина за създаване на инициал. Често знакът е маркиран с маркер на език за маркиране и след това се предписват определени свойства в стиловете, които го модифицират. Това е добър начин, но тази публикация говори за механизмите на css (които според мен в този случай са много по -логични и удобни за използване).
За да разрешите проблема, можете да използвате инструмент като.
Така че, в този случай: използва се първа буква. Както всички псевдоелементи, той се присвоява на селектора, разделен с двоеточия. След, според всички правила на стиловите таблици, свойствата са посочени. Можете обаче да приложите само онези свойства, свързани с редактиране на шрифтове, подложки, цвят, фон, полета и рамки.
Предлагам да разгледам конкретен пример. Докато изпълнявах представената малка програма, реших да направя не просто цветна капачка, а да я напълня с цветя. За да направите това, трябва да използвате няколко хитри трика с задаване на прозрачен цвят на шрифта и запълване на буквата с избраното изображение.
Този параграф съдържа изречение с много интересно съдържание.
Нека продължим една интересна история в следващия параграф.
Резултатът изглежда много привлекателен и необичаен, което е идеалното решение за.
Както можете да видите, тази тема е много проста. Можете лесно да използвате програмния код, даден от мен, за вашите уеб ресурси, променяйки и приспособявайки към вашия стил.
Ако горният материал ви е бил полезен, абонирайте се за актуализации в моя блог и не забравяйте да споделите придобитите знания (и разбира се връзка към моя блог) с приятелите си. Късмет!
Чао чао!
С уважение, Роман Чуешов
Според дефиницията главна буква е елемент от текста, който се увеличава относително по размер. В почти всички езици изречението започва с главна буква. А дизайнът на началото на абзаца с видна главна буква ви позволява да структурирате текста и улеснява четенето. Когато се изготвя уеб страница, текстът може да бъде написан в съответствие с предпочитанията на автора и правилата на руския език. Също така неговият дизайн може да бъде „автоматизиран“ чрез въвеждане на определени „команди“ във файл с разширението css - таблица със стилове - или допълване на вашия html файл със раздел за стил. CSS обикновено се изучава допълнително с html, за да се променят бързо някои елементи на дизайна в целия текст наведнъж.
Това е особено вярно, ако сайтът има стотици страници и извършването на промени във всяка от тях е много отнемащ време процес.
Ако приложите css, главните букви в началото на всеки параграф могат да изглеждат специални. Например, кодът по -долу, въведен в html без скоби, позволява текстът, декориран с етикета "p", да направи главната буква - първата буква - по -голяма - 220% от стандартния размер, жълта - стойността на цвета е жълт и го напишете с шрифт, различен от останалия текст - Джорджия срещу батанче.
(<) style(>)
p: първа буква (семейство шрифтове: Джорджия; размер на шрифта: 220%; цвят: жълт;)
(<)/style(>)
Можете да получите красиви главни букви, като създадете свой собствен шрифт под формата на картини - за всяка буква отделна картина, например в староруски или готически стил. Те могат да бъдат изтеглени в След това, на необходимите места на мястото на главната буква, можете да вмъкнете кода без скоби (<) img src=”ссылка на место, где лежит картинка”(>). Допълнителни атрибути ще бъдат височина и ширина - ширината и височината на изображението, които могат да бъдат зададени в пиксели, за да се смесят хармонично с останалия текст. Пример: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Скоби наоколо< и >премахваме.
Ако нямате възможност сами да нарисувате азбуката, тогава главната буква може да бъде форматирана с помощта на свободно достъпни в Google шрифтове (раздел Шрифтове) или други търсачки и ресурси. За да направите това, горният код трябва да бъде форматиран, както следва:
(<) style(>)
p (семейство шрифтове: batangche; размер на шрифта: 93%;)
p: първа буква (семейство шрифтове: Kelly + Slab; размер на шрифта: 220%; цвят: син;)
(<)/style(>)
(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).
Услугата Google ви позволява да изберете едно или друго и предоставя готови връзки за вмъкване в html или css. Обръщаме ви внимание на факта, че е необходимо да изберете група шрифтове - латински или кирилица, защото почти всички латински шрифтове не работят за текст на руски език. В момента търсачката предоставя около 40 вида безплатно.
Главна буква или нейният аналог с главни букви могат да бъдат оформени с помощта на свойството CSS преобразуване на текст. Ако зададете текстовото преобразуване: няма стойност в стиловата таблица, тогава текстът ще изглежда, докато го пишете. За да конвертирате всички букви в малки, задайте текстовото преобразуване: малка стойност, разделена с двоеточие, и главни за главни. Задаването на свойството за текстово преобразуване: с главни букви ще го направи така, че в началото на всяка дума има главна буква.
Позволява ви да променяте регистъра на буквите в текста.
По подразбиране стойността е зададена на none, което няма ефект върху текста. Случаят на текста остава същият. Стойностите на главни и малки букви преобразуват символите съответно в главни и малки букви. Ако посочите стойност с главни букви, тогава само първите знаци на всяка дума ще бъдат написани с главни букви. Наследяване наследява стойността от родителя.
Пример
h3 (преобразуване на текст: главни букви;). малки букви (преобразуване на текст: малки букви;).Това е заглавието. Той има свойство за преобразуване на текст, зададено на главни букви. Всички знаци ще бъдат главни.
Свойството за преобразуване на текст е приложено към този параграф с малка стойност, което означава, че всички букви ще бъдат с малки букви.
И този последен параграф има свойство за преобразуване на текст с приложено свойство CAPITALIZE. Първите букви на всяка дума ще бъдат главни и само това.