Windows.  Virus.  Anteckningsböcker.  Internet.  kontor.  Verktyg.  Förare

Hej alla läsare av denna blogg. Idag ska jag prata om hur du kan göra alla versaler genom css. Naturligtvis kan du aktivera Caps Lock för detta och skriva önskad text, men det här är en ganska primitiv metod. Men vad händer om du behöver markera ett separat stycke i en redan färdig artikel?

Gör alla bokstäver versaler i css

Det finns en text-transform-egenskap för detta, som, du gissade rätt, transformerar texten. Den har dessa värden:

  • gemener - all text visas med gemener
  • versaler - alla ord visas med versaler (vad vi behöver)
  • versal - använd den första bokstaven i varje ord med stor bokstav

Här är faktiskt allt du behöver veta. Det återstår bara att förstå hur man kommer åt det önskade elementet. Låt oss föreställa oss det här exemplet: du vill att det femte stycket i en artikel ska vara bokstäver. Och hur kan detta göras?

Hur når man det nödvändiga elementet?

Som du vet skapas ett stycke med hjälp av en parad html-tagg, vars hela innehåll blir ett stycke. Det återstår bara att ställa in en ny stilklass för det:

Nu har vi möjlighet att via css-språket hänvisa till just detta stycke utan att påverka resten. Du kan göra så här:

versaler(
text-transform: versaler;
}

Denna metod är lämplig när du behöver markera ett fragment i en separat artikel. Tänk om alla sidor borde ha specifik text stora bokstäver. I det här fallet är det bättre att placera blocket i mallfilen för att inte skriva det varje gång.

Eller så kanske du behöver markera det andra stycket i varje artikel med css med versaler. Då finns det ett annat alternativ för dig. Leta reda på blocket som visar artikeln och hänvisa till andra stycket med pseudoklassen nth-child. I detta exempel Vårt artikelblock har artikelklassen.

Artikel p:nth-child(2)(
Textomvandling: versaler
}

Som du kan se har varje fall sin egen lösning. Det viktigaste att komma ihåg är egenskapen text-transform, som ändrar skiftläge för bokstäver.

I allmänhet rekommenderas det inte att använda utdatatext på detta sätt, eftersom det kraftigt försämrar dess uppfattning, men några särskilt viktiga fragment kan urskiljas.

Idag har vi tagit upp egenskapen text-transform. Prenumerera på bloggen för att få nya artiklar.

Låter dig ändra skiftläge för textbokstäver.

Standardvärdet är ingen , vilket inte har någon effekt på texten. Textens fall förblir densamma. Värdena versaler och gemener konverterar tecken till versaler respektive gemener. Om du anger versaler kommer bara de första tecknen i varje ord att vara versaler. Arv ärver förälderns värde.

Exempel

h3 ( text-transform: versaler; ) .lowercase ( text-transform: gemener; ) .capitalize ( text-transform: versaler; ) textomvandling

Det här är titeln. Den har en text-transform-egenskap som tillämpas med ett värde på versaler. Alla tecken kommer att vara versaler.

Det här stycket har egenskapen Text-transform inställd på Små bokstäver, vilket betyder att alla bokstäver kommer att vara gemener.

Och det här sista stycket har en text-transform-egenskap som tillämpas med egenskapen CAPITALIZE. De första bokstäverna i varje ord kommer att vara versaler, och bara de.

Resultat

Dock inte allt så enkelt. Det finns några nyanser. Om du uppmärksammar andra stycket i exemplet ovan kommer du att märka att ordet capitalize , trots text-transform-egenskapen som tillämpas på stycket med värdet capitalize , visas helt och hållet med versaler, vilket motsvarar källtexten. Detta förklaras av det faktum att med det angivna värdet på versaler kontrolleras endast de första bokstäverna i ord, och resten förblir oförändrade, oavsett deras initiala tillstånd.
Trots sin uppenbara enkelhet kan text-transform-egenskapen vara mycket användbar. Till exempel, för att göra texten i alla H1-rubriker på din webbplats versaler, behöver du bara lägga till en egenskap i stilmallen

H1 (text-transform: versaler;)

och problemet kommer att lösas. Och du behöver inte manuellt ändra alla rubriker, som kan vara väldigt, väldigt många.

I html spelar teckenstorleken en viktig roll. Det drar användarens uppmärksamhet till viktig information publiceras på hemsidan. Även om inte bara storleken på bokstäverna är viktig, utan också deras färg, tjocklek och till och med familj.

Taggar och attribut när du arbetar med html-teckensnitt

Hypertextspråket har en stor uppsättning verktyg för att arbeta med typsnitt. När allt kommer omkring är textformatering huvuduppgiften för html .

Orsaken till skapandet HTML-språk det uppstod ett problem med att visa textformateringsregler av webbläsare.


Tänk på taggarna som används för att arbeta med typsnitt i html och deras attribut. Den viktigaste är taggen . Med hjälp av värdena för dess attribut kan du ställa in flera teckensnittsegenskaper:

  • färg - ställer in färgen på texten;
  • storlek – teckenstorlek i konventionella enheter.

Ett positivt attributvärde från 1 till 7 stöds.

  • ansikte - används för att ställa in teckensnittsfamiljen för texten som ska användas inuti taggen . Flera värden stöds, separerade med kommatecken.

Endast texten som finns mellan delarna av den parade teckensnittstaggen formateras. Resten av texten visas i standardteckensnittet.

Även i html finns det ett antal parade taggar som bara definierar en formateringsregel. Dessa inkluderar:

  • - ställer in fetstil i html. Märka liknande i aktion som den föregående;
  • - storleken är större än standard;
  • - mindre teckenstorlek;
  • - kursiv text (kursiv). Liknande tagg ;
  • — text med understrykning;
  • - struken;
  • — visar endast text med små bokstäver;
  • - i versaler.

oformatterad text

Miniatyr

Miniatyr

Mer än vanligt

Mindre än vanligt

Kursiv

Kursiv

Med understrykning

Genomstruken

Funktioner för stilattribut

Utöver taggarna som beskrivs finns det flera sätt att ändra typsnittet i html . En av dem är att använda det generiska stilattributet. Med hjälp av värdena för dess egenskaper kan du ställa in teckensnittets visningsstil:

1) font-family - egenskapen ställer in teckensnittsfamiljen. Det är möjligt att räkna upp flera värden.
Att ändra teckensnittet i html till nästa värde kommer att ske om den tidigare familjen inte är inställd på operativ system användare.

Skriva syntax:

font-family: font-name [, font-name[, ...]]

2) font-size - storleken är inställd från 1 till 7. Detta är ett av de viktigaste sätten att öka teckensnittet i html.
Skriva syntax:

font-size: absolut storlek | relativ storlek | värde | intresse | ärva

Du kan också ställa in teckenstorleken:

  • I pixlar;
  • I absoluta tal ( xx-small, x-small, small, medium, large);
  • I procent;
  • I poäng (pt).

teckenstorlek:7

teckenstorlek: 24px

Teckenstorlek: x-stor

teckenstorlek: 200 %

teckenstorlek: 24pt

3) teckensnittsstil - ställer in teckensnittsstilen. Syntax:

teckensnittsstil: normal | kursiv | snett | ärva

Värden:

  • normal - normal stavning;
  • kursiv - kursiv
  • sned - teckensnitt med en lutning till höger;
  • ärva - ärver stavningen av det överordnade elementet.

Ett exempel på hur du ändrar typsnittet i html med den här egenskapen:

font-style:herit

teckensnittsstil:kursiv

font-style:normal

font-style:oblique

4) font-variant - konverterar alla versaler till versaler. Syntax:

teckensnittsvariant: normal | små kapslar | ärva

Ett exempel på hur man ändrar typsnittet i html med denna egenskap:

font-variant:herit

font-variant:normal

font-variant:small-caps

5) font-weight - låter dig ställa in tjockleken på texten (mättnad). Syntax:

font-weight: fet|fjärvare|lättare|normal|100|200|300|400|500|600|700|800|900

Värden:

  • fet - ställer in html-teckensnittet till fet;
  • djärvare - djärvare i förhållande till normal;
  • lättare - mindre mättad i förhållande till normalt;
  • normal - normal stavning;
  • 100-900 - ställer in teckensnittets tjocklek i numeriska termer.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

teckensnittsvikt:900

font-weight:100

teckensnittsegenskap och html-typsnittsfärg

Font är en annan behållaregenskap. Internt kombinerade det värdena för flera egenskaper utformade för att ändra teckensnitt. Teckensnittssyntax:

font: font-size font-family | ärva

Teckensnitten som används av systemet i etiketterna på olika kontroller kan också ställas in som ett värde:

  • bildtext - för knappar;
  • ikon - för ikoner;
  • meny - meny;
  • meddelande-box - för dialogrutor;
  • small-caption - för små kontroller;
  • statusfält - teckensnitt för statusfält.

teckensnitt:ikon

font:caption

font:meny

font:meddelande-box

liten bildtext

teckensnitt:statusfält

font:italic 50px fet "Times New Roman", Times, serif

För att ställa in teckensnittsfärgen i html kan du använda egenskapen color. Det låter dig ställa in färgen, som med nyckelord, och i rgb-format. Och även i form av en hexadecimal kod.

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 (Sektionen Teckensnitt) 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 en eller annan 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 gemena motsvarighet kan utformas med css-egenskaper textförvandling. 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.

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å seriferna i ändarna av bokstäverna. Därför, innan du väljer de slutliga CSS-stilarna, testa sidan 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.

Om du upptäcker ett fel, välj en textbit och tryck på Ctrl + Retur
DELA MED SIG: