En stor bokstav, per definition, är ett textelement som är relativt förstorat i storlek. Nästan alla språk börjar en mening med en stor bokstav. Och utformningen av början av stycket med en framträdande stor bokstav låter dig strukturera texten och underlättar dess uppfattning. När en webbsida är designad kan texten skrivas i enlighet med författarens preferenser och reglerna för det ryska språket. Dessutom kan dess design "automatiseras" genom att ange vissa "kommandon" i en fil med tillägget css - en stilmall - eller komplettera din html-fil stilsektion. CSS studeras vanligtvis extra med html för att snabbt kunna ändra vissa designelement på en gång i hela texten.

Detta gäller särskilt om webbplatsen har hundratals sidor, och att göra ändringar på var och en av dem är en mycket tidskrävande process.

Om du använder css kan versaler i början av varje stycke se speciella ut. Till exempel, koden nedan, inmatad i html utan parentes, tillåter att texten formaterad med "p"-taggen gör den stora bokstaven - första bokstaven - större - 220% av standardstorleken, gul färg- färgens värde är gult, och skriv det med ett annat teckensnitt än resten av texten - Georgia vs. batangche.

(<) style(>)

p: första bokstaven (font-family: Georgia; font-size:220%; color: yellow;)

(<)/style(>)

Vackra versaler kan fås om du skapar ditt eget typsnitt i form av bilder – för varje bokstav separat bild, till exempel i gammal rysk eller gotisk stil. De kan ritas in. Sedan kan du, på önskade platser, istället för stor bokstav, infoga kod utan parentes (<) img src=”ссылка на место, где лежит картинка”(>). Ytterligare attribut kommer att vara höjd och bredd - bildens bredd och höjd, som kan ställas in i pixlar för att harmonisera med resten av texten. Exempel: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Parentes runt< и >avlägsna.

Om du inte har möjlighet att rita alfabetet själv, så kan den stora bokstaven utformas med hjälp av typsnitt som är fritt tillgängliga på Google (teckensnittssektionen) eller andra sökmotorer och resurser. För att göra detta bör ovanstående kod formateras enligt följande:

(<) style(>)

p (font-family: batangche; font-size:93%;)

p: första bokstaven (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" (>).

Tjänsten Google låter dig välja det ena eller det andra och tillhandahåller färdiga länkar för insättning i html eller css. Vi uppmärksammar dig på det faktum att det är nödvändigt att välja en grupp teckensnitt - latin eller kyrillisk, eftersom. nästan alla latinska teckensnitt fungerar inte när man formaterar ryskspråkig text. På det här ögonblicket Sökmotorn erbjuder cirka 40 typer gratis.

En stor bokstav eller dess motsvarighet kan formateras med CSS-texttransformeringsegenskapen. Om du ställer in värdet för texttransform: ingen i formatmallen, kommer texten att se ut som du skriver den. För att konvertera alla bokstäver till gemener, måste du ställa in värdet text transform: gemener genom ett kolon, och versaler för versaler. Om du ställer in egenskapen på text transform: capitalize kommer att få varje ord att börja med en stor bokstav.

Styr om elementets text konverteras till versaler eller gemener. När värdet är annat än inget ändras skiftläge för originaltexten.

kort information

Notation

	Beskrivning	Exempel
<тип>	Anger typen av värdet.	<размер>
A&&B	Värdena måste matas ut i angiven ordning.	<размер> && <цвет>
A \| B	Indikerar att endast ett av de föreslagna värdena (A eller B) ska väljas.	normal \| små bokstäver
A \|\| B	Varje värde kan användas för sig eller i kombination med andra i valfri ordning.	bredd \|\| räkna
	Grupper värderingar.	[ gröda \|\| korsa]
*	Upprepa noll eller fler gånger.	[,<время>]*
+	Upprepa en eller flera gånger.	<число>+
?	Den angivna typen, ordet eller gruppen är valfri.	infälld?
(A, B)	Upprepa minst A, men inte mer än B gånger.	<радиус>{1,4}
#	Upprepa en eller flera gånger åtskilda med kommatecken.	<время>#

Värderingar

versal Det första tecknet i varje ord i meningen kommer att vara versaler. De återstående karaktärerna ändrar inte sitt utseende. gemener Alla texttecken blir gemener (gemener). versaler Alla texttecken ändras till versaler ( versal). ingen Ändrar inte skiftläge för tecken.

Sandlåda

Nalle Puh var alltid inte emot en liten förfriskning, särskilt vid elvatiden på morgonen, för då var frukosten för länge sedan slutad, och middagen hade inte ens tänkt på att börja. Och naturligtvis blev han fruktansvärt glad över att se att kaninen tog fram koppar och tallrikar.

div (text-omvandla: versal;)

Exempel

textomvandling

Medeltidens kulturminne

Amazonas lågland tar en omåttlig mängd katter och hundar, och Hajos Baia är känt för sina röda viner.

Resultat detta exempel visad i fig. 1.

Ris. 1. Använd egenskapen text-transform

Objektmodell

Ett objekt.style.textTransform

Specifikation

Varje specifikation går igenom flera stadier av godkännande.

Rekommendation (Rekommendation) - specifikationen är godkänd av W3C och rekommenderas som standard.
Kandidatrekommendation ( Möjlig rekommendation) - gruppen som ansvarar för standarden är övertygad om att den uppfyller sina mål, men stöd från utvecklingsgemenskapen krävs för att implementera standarden.
Föreslagen rekommendation ( Föreslagen rekommendation) - i detta skede överlämnas dokumentet till W3C Advisory Board för slutgiltigt godkännande.
Working Draft - Ett mer moget utkast efter diskussion och ändringar för granskning av samhället.
Redaktörens utkast ( Redaktionellt utkast) är ett utkast till standarden efter ändringar har gjorts av projektredaktörerna.
utkast ( Specifikationsutkast) är det första utkastet till standarden.

God dag, platsbyggande nördar. Dagens publikation kommer att täcka ämnet textinnehållsdesign. Det är därför du kommer att lära dig hur css-versaler ställs in - genom att bekanta dig med flera alternativ för att skapa en versal och, naturligtvis, kan du prova allt i praktiken. Nåväl, låt oss nu gå vidare till det mest intressanta!

Låt oss förvandla text

Tack vare kaskadformatmallar kan du ändra både det första tecknet i ett block och hela texten. Jag kommer att berätta hur du kan göra båda alternativen. Dessutom stöds alla verktyg som nämns i den här artikeln på tre språknivåer: css1, css2, css2.1 och css3.

Jag börjar med en intressant egenskap som modifierar allt textinnehåll i den valda . Detta textomvandling.

Det namngivna elementet kan konvertera tecken till versaler, gemener och även ställa in varje första tecken i ett ord som en stor bokstav. Jag skrev mer om värdena i tabellen.

Nu, för att konsolidera det teoretiska materialet, överväg ett exempel.

Textförvandling

Uppmärksamhet!

!Imorgon är alla skönhetsprodukter rabatterade!

Kampanjen gäller i alla filialer i din stad.

Skapa en drop cap

Om du inte vet vad termen "brevbrev" betyder, är det dags att ta reda på det, eftersom detta är direkt relaterat till det aktuella ämnet.

Initialbokstaven (eller ibland säger de initialen) är den första bokstaven i kapitlet, som skiljer sig från resten i sin stora storlek, färg och i vissa fall även typsnittsdesign. I livet kan ett exempel på ett sådant brev hittas i gamla manuskript och böcker.

Det finns flera sätt att skapa en initial. Ofta är ett tecken markerat med en märkningsspråktagg och sedan föreskrivs vissa egenskaper i stilarna som ändrar den. Detta är ett bra sätt, men den här publikationen talar om css-mekanismer (som, enligt min mening, i det här fallet mycket mer logiskt och bekvämt att använda).

För att lösa detta problem kan du använda ett verktyg som t.ex.

Så i det här fallet: första bokstaven används. Liksom alla pseudoelement är det fogat till väljaren med ett kolon. Efter alla regler för stilmallar specificeras egenskaper. Men bara de egenskaper som är relaterade till redigering av teckensnitt, utfyllnad, färg, bakgrund, marginaler och kanter kan tillämpas.

Jag föreslår att vi överväger ett specifikt exempel. Genom att implementera det presenterade lilla programmet bestämde jag mig för att inte bara göra en färgad mössa, utan fylla den med färger. För att göra detta måste du använda några knepiga knep med att ställa in teckensnittsfärgen till transparent och fylla bokstaven med den valda bilden.

Utskjutande initial

Det här stycket innehåller en mycket intressant mening.

Låt oss fortsätta med den intressanta historien i nästa stycke.

Det erhållna resultatet ser väldigt attraktivt och ovanligt ut, vilket är en idealisk lösning för.

Som du kan se är detta ämne väldigt enkelt. Du kan enkelt använda koden jag har tillhandahållit för dina webbresurser, modifiera och anpassa den för att passa din stil.

Om materialet som presenterades var användbart för dig, prenumerera på mina blogguppdateringar och glöm inte att dela din kunskap (och, naturligtvis, en länk till min blogg) med dina vänner. Lycka till!

Hejdå!

Med vänlig hälsning, Roman Chueshov

CSS versaler hjälpa till att bryta monotonin i samma typ av design, vars texter ser likadana ut från början till slut.

Bokstäver förr och nu

Krönikörerna använde versaler i handskrivna manuskript, varav några går tillbaka till 400-talet. Versaler fortsatte att användas från 700-talet till 1400-talet, då tryckpressar gjorde det möjligt att föra tryckningen till en industriell nivå. Både handskrivna och tryckta versaler placerades i början av texten. Ofta var de dekorerade med ett dekorativt mönster som låg runt bokstaven.

De upphöjda och sänkta bokstäverna används än idag. De finns i tidningar, tidskrifter och böcker, samt i digitaltryck. Upphöjda bokstäver kallas ibland för långsträckta. De placeras i linje med botten av texten som följer dem. Utelämnade bokstäver placeras på samma nivå som topp text, ibland i ett lager bakom huvuddelen av textinnehållet, eller resten av texten lindas runt dem.

Upphöjda bokstäver är mycket lättare att definiera eftersom de sitter i jämnhöjd med resten av texten och behöver vanligtvis inte ändra lindningen av de yttre marginalerna. Utelämnade bokstäver kräver mer finjustering. Det blir lättare för dig att hantera detta om du först förstår hur lyfta karaktärer hanteras.

Använda klasser

Designers som redan har en förståelse för CSS vet att skapa en separat CSS-klass för den första stora bokstaven.

CSS-koden för paragrafelementet och klassen som skapar bokstaven skulle se ut så här:

p ( font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (font-size:48px; font-family: Didot;)

Och HTML-koden kommer att se ut så här:

Vad ger oss:

Verkar för lätt? Faktum är att du måste göra justeringar beroende på de specifika upphöjda bokstäverna, eftersom varje stor bokstav kräver speciell kerning. Efter att ha valt ett typsnitt för de upphöjda bokstäverna och för brödtexten måste du skapa separata klasser för varje upphöjd bokstav. I nedanstående CSS class.myinitialcapsi marginalen till höger är negativ för att minska avståndet mellan I och n .

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

jag I det här fallet finns det lite extra utrymme mellan "I" och "n."

jag Att inkludera en ny klass med negativ marginal drar den närmare.

Beroende på skärmupplösningen i exemplet ovan kan I och n se ut som om de har slagits samman. Detta beror på serifferna i ändarna av bokstäverna. Därför innan du väljer det sista alternativet css-stilar, testa webbplatsen på olika enheter för att se hur CSS-text ser ut på dem.

Offerter och andra specialfall

Du kan öka inte bara bokstäverna i början av texten. Du kan implementera en annan klass för att skapa en större version av citattecken som visas bredvid bokstaven. I vårt fall är varken bokstavsklassen med storleken 48 eller textklassen 20 pixlar lämplig för citattecken. Snarare blir det något mittemellan – 30 pixlar. Vi flyttar citattecken ned med 4 pixlar för att optiskt justera dem med I :

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

“jag ninklusive” en ny klass med negativ marginal drar den närmare.

Du måste vara mycket försiktig när du anger var och en av CSS-versalerna tillsammans med citattecken så att deras kerning och justering matchar den omgivande markeringen. Till exempel måste bokstaven T flyttas till vänster, något bortom kanten av stycket, så att dess tvärgående linje visuellt passar in i layouten. Du måste göra samma sak med runda bokstäver som C , G , O och Q . Det här exemplet använder teckenstorlekarna 20, 30 och 48. Men du måste justera storlekarna baserat på de specifika teckensnitten du har valt. Samt storlekarna och upplösningarna på de skärmar som webbplatsen kommer att visas på.

Pseudo-element och pseudo-klasser

Med hjälp av CSS-pseudoelementet kan du enkelt skapa en upphöjd bokstav genom att lägga till ::första bokstaven till paragrafelementet. Använd :första bokstaven ( med ett kolon) för äldre webbläsare:

p ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em; padding-bottom:1.2em;) p::first-letter ( font-size: 3,6em; textomvandling: versaler; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;) .initialb (margin-right:-0.1em;) .initialn (margin-right:-0.15 em ;)

En HTML-kod som innehåller CSS-klasser som tar hänsyn till kerning av bokstäverna N och B kommer att se ut så här...

En initial bokstav, där den första bokstaven är en stor bokstav.
Med en radbrytning har nästa rad inget initialt tak.

n lägg märke till i HTML-källan hur den första bokstaven, inte en stor bokstav i HTML-koden, får storleken på den initiala storleken på 3,6 em. Snyggt, va?

B Ut med en hård avkastning, och ett nytt stycke startat, skapas alltid ett nytt initialt tak. Du kanske frågar dig själv Hur ska jag redogöra för detta? Ska jag ha ett första tak i början av ett nytt stycke? Tja, det kunde du. Men, vill du att det ska se ut så, och måste det absolut se ut så?

Den första versalen i ett stycke omvandlas till en bokstav.
Den första bokstaven efter en radbrytning kommer inte att vara versal.

O Observera att i källkod I HTML är den första bokstaven inte versal, men den konverteras till ett 3,6 em-tecken.

HANDLA OM Men även efter en påtvingad radbrytning skapas alltid en bokstav i början av varje nytt stycke. Du kan fråga dig själv: Hur kan jag ta hänsyn till detta? Behöver jag lägga till bokstäver för alla dessa fall? Det kan du. Men är det nödvändigt?

Även med fördelarna som pseudo-element ger, var vi tvungna att lägga till mycket kod för att definiera separata klasser för att hantera kerning- och utfyllnadsproblem. Men den här metoden kommer att konvertera den första bokstaven i varje nytt stycke till CSS-versaler. För vissa kanske det inte passar, eftersom du inte behöver konvertera den första bokstaven i varje stycke.

Kombinera Pseudo-klasser och Pseudo-element för att skapa en smart layout

Att lägga till pseudoklassen :first-child hjälper till att lösa problemet med onödig konvertering av de första bokstäverna:

p ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em; padding-bottom:0.5em;) p:first-child::first-letter ( font-size: 3,6em; text-transform: versaler; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;)

Kombinera denna kod med HTML:

Den första bokstaven som definieras som första barn är den enda bokstaven som konverteras till en upphöjd droppe i denna metod.

Eftersom endast bokstaven som definieras som första barn konverteras, notera att detta exempel skiljer sig från det föregående utan första barn. Dessutom konverterar vi inte de första bokstäverna efter början av ett stycke och efter en påtvingad radbrytning. Detta ser mer elegant ut än hur layouten såg ut när vi konverterade alla första bokstäverna i styckena.

Fördelen med att använda pseudoklasser är möjligheten att hantera olika specialfall. Hur är det med nackdelarna? Det finns många olika pseudoklasser, och de kan kombineras på så många sätt att det kan få huvudet att snurra. Till exempel kan pseudoklasserna :first-child och :first-of-type ge samma resultat. Du kan också tillämpa en pseudoklass inte bara på ett stycke utan också på element

eller

. Till exempel, som visas i exemplet nedan med upphöjda bokstäver i typsnittet Didot. Lägg märke till hur marginalattributet har lagts till till höger om A . Annars skulle det "hålla ihop" med bokstaven s i början av avsnittet:

section ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;) section>p:first-child:first-letter ( font-size: 4em; text-transform: versaler; font-family:Didot, serif; margin-right:5px;)

Och tillsammans med HTML:

I början av avsnittet är den första bokstaven satt till en upphöjd versal.

Och ett nytt stycke...

Om du känner för att experimentera kan du utforska olika metoder förutom :first-child och :first-of-type . Till exempel, som :nth-of-type eller :nth-of-child , för att se hur vissa pseudoklasstyper kan användas för CSS-versaltext. Oavsett om du följer principerna som beskrivs i den här artikeln eller börjar gräva djupare, när du har lärt dig att arbeta med förstabarns-, :första-av-typ- och :första-bokstavens CSS-pseudoklasser, kommer du att kunna tillämpa korrekt dem till HTML-element.

eller i detalj om bokstäver och HTML CSS-formatering

Kapitlet innehåller exempel bokstavsformatering från området Hypertext Markup.

I menyn till vänster hittar du moderna och mycket detaljerade HTML-handledningar.

De låter dig skapa din webbplats från grunden medan du tittar lite lägre.

Det kan vara intressant.

Epok informationssamhälle

Mänskligheten har gått in i en ny period av sin utveckling, där information och nätverkstekniker spelar en mycket viktig roll. Vi lever i informationssamhällets era, som kännetecknas av den snabba utvecklingen av informations- och telekommunikationsteknik. Med tillkomsten av datorn och internet började enorma förändringar. Datorn och internet driver samhället att formulera nya normer för beteende, regler och ideal. Internet är för den nya generationen vad tv var för den tidigare generationen. Men Globalt nätverk mycket mer funktionell än tv, eftersom den ger möjlighet att göra köp, försäljning, erbjuder kommunikation och olika sätt att uttrycka sig, som att skapa personliga webbsidor och webbplatser.