Drop cap (en drop cap inbäddad i texten) är den första bokstaven i ett stycke, större än resten, och placerad så att dess topp är i nivå med den första raden i stycket. På bilden kan du se ett exempel på en drop cap inbäddad i texten.

WordPress har förresten ett speciellt plugin (wordpress.org/extend/plugins/drop-caps) som låter dig automatiskt skapa text inbäddad (och flyttad ned) stora bokstäver. Fantastisk! Men vad händer om du inte vill använda ett plugin (jag är säker på att du inte gör det) och du bara behöver skapa ett drop cap för flera inlägg, och kanske på en specifik plats?

Den goda nyheten är att du inte behöver ett plugin för att skapa versaler, allt du behöver är lite css och en span-tagg. Öppna din css-fil och lägg till följande kod:

Span.dropcaps ( font-family:Georgia, serif; färg: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0,09em; position: släkting;)

Något som det här. Naturligtvis behöver du en stil som matchar din design och text. Till exempel måste egenskapsvärdena: font-size , margins och line-height väljas baserat på din design och text.

Tag Span

För att stilen ska kunna tillämpas på den stora bokstaven i texten måste du "linda" den stora bokstaven i en span-tagg och ange lämplig klass.

A

Pseudo-element: första bokstaven

Du kan också formatera det första tecknet i texten med pseudoelementet: första bokstaven . Ett begränsat antal egenskaper kan dock tillämpas på:första bokstavens pseudoelement: dessa är egenskaper relaterade till teckensnitt, färg, bakgrund, kanter, marginaler och utfyllnad. En annan sak att notera är att pseudoelementet:första bokstaven inte fungerar i äldre webbläsare.

P:första bokstaven ( font-family:Georgia, serif; färg: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin -höger: 0,09em; position: relativ;)

Här är faktiskt ett par metoder för att redigera versaler med CSS.

Ofta, i all hast när man lägger till material på en webbplats eller till exempel skapar ett nytt ämne på ett forum, kan en användare börja skriva en mening (titel) med en liten (gemen) bokstav. Detta är till viss del ett misstag.

Jag kommer att visa flera alternativ för att lösa detta problem: PHP och CSS är mer lämpade för redan publicerat material, när jQuery kan korrigera situationen före publicering.

Första bokstaven i en sträng med versaler i PHP

I PHP finns det en funktion som heter "ucfirst", som bara konverterar det första tecknet i en rad till versaler, men dess nackdel är att den inte fungerar helt korrekt med kyrilliska.

För att göra detta kommer vi att skriva vår egen lilla funktion. Implementeringen skulle se ut så här:

I den här versionen kommer vi att få en mening som börjar med stor bokstav, vilket i själva verket är vad vi behöver.

Stora första bokstaven i en sträng i CSS

Denna metod visuellt (det vill säga förslagen kommer att visas som de är i webbplatsens källkod) konverterar också det första tecknet till versaler.

Användningen är som följer:

första meningen

andra meningen

tredje meningen

fjärde meningen

#content p:första bokstaven (textomvandling: versaler;)

Med hjälp av pseudoelementet "första bokstaven" och egenskapen "text-transform" ställer vi in ​​designen för varje första bokstav i stycket.

Första bokstaven i en sträng med versaler i jQuery

Som jag sa tidigare är denna konverteringsmetod bäst lämpad för material som ännu inte har publicerats.

Till exempel kommer vi att ta ett textfält (det kommer att fungera som ett fält för att ange en titel) och skriva ett litet skript för det, vilket, när du skriver in en mening med en liten bokstav, gör att den använder stor bokstav:

$(document).ready(function() ( $(".content").on("keyup", function() ( var text = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1); $(this).val(ny_text); )); ));

Manuset fungerar både när man skriver text och när man enkelt infogar den. Glöm inte att för att skript ska fungera på din webbplats måste du ha jQuery-biblioteket aktiverat.

CSS-kapslar hjälper till att bryta upp monotonin i en generisk design där texten ser likadan ut från början till slut.

Inledande bokstäver då och nu

Krönikörer använde versaler i handskrivna manuskript, några av dem går tillbaka till 500-talet. Versaler fortsatte att användas från 700-talet till 1400-talet, när tryckpressar tillät att tryckningen fördes till en industriell nivå. Både handskrivna och tryckta initialbokstäver placerades i början av texten. De var ofta dekorerade med ett dekorativt mönster som låg runt bokstaven.

Upphöjda och tappade bokstäver används än idag. De finns i tidningar, tidskrifter och böcker, samt i digitaltryck. Upphöjd typ kallas ibland för långsträckt typ. De placeras i linje med botten av texten som följer dem. Bortfallna bokstäver placeras i jämnhöjd med textens överkant, ibland i ett lager bakom textinnehållet, eller resten av texten lindas runt dem.

Upphöjda bokstäver är mycket lättare att definiera eftersom de ligger i linje med resten av texten och behöver vanligtvis inte ändra omslaget runt de yttre marginalerna. Utelämnade bokstäver kräver mer finjustering. Det blir lättare för dig att förstå detta om du först förstår hur upphöjda karaktärer hanteras.

Använda klasser

Designers som redan har en förståelse för CSS vet att de måste 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? Du måste faktiskt göra justeringar beroende på de specifika bokstäverna som höjs, 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 CSS-klassen below.myinitialcapsi är marginalen till höger satt till ett negativt värde för att minska avståndet mellan I och n.

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

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

Att ta med en ny klass med negativ marginal drar det närmare.

Beroende på skärmupplösningen i exemplet ovan kan I och n se ut som om de är suddiga tillsammans. Detta beror på seriferna i ändarna av bokstäverna. Så innan du bestämmer dig för dina slutgiltiga CSS-stilar, testa din webbplats på olika enheter för att se hur CSS-kapslartexten ser ut på dem.

Offerter och andra specialfall

Du kan förstora 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 en bokstavsklass med storleken 48 eller en textklass på 20 pixlar lämplig för citattecken. Snarare blir det något mittemellan – 30 pixlar. Vi flyttar citattecken ned 4 pixlar för att optiskt anpassa dem med I:

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

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

Du måste vara mycket försiktig med att ställa in var och en av CSS-versaler tillsammans med citattecken så att deras kerning och anpassning 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 teckenstorlekar på 20, 30 och 48. Men du måste välja storlekar baserat på de specifika teckensnitt du väljer. 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 ett styckeelement. 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 ;)

HTML-kod som innehåller CSS-klasser som tar hänsyn till kerning av bokstäverna N och B skulle 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.

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

Men med en hård retur, och ett nytt stycke startat, skapas alltid ett annat 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 stycket omvandlas till en bokstav.
Den första bokstaven efter en radbrytning konverteras inte till versaler.

o Notera att i HTML-källkoden är den första bokstaven inte versal, utan den konverteras till ett 3,6 em-tecken.

Men även efter en påtvingad radbrytning skapas alltid en bokstav i början av varje nytt stycke. Du kanske frågar dig själv: Hur tar jag hänsyn till detta? Behöver jag lägga till bokstäver för alla dessa fall? Det kan du. Men är detta 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 konverterar den första bokstaven i varje nytt stycke till en CSS-stor bokstav. För vissa kanske det inte är lämpligt eftersom det inte behöver omvandla 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 första bokstäver:

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 ett upphöjt släplock med 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å eller element. Till exempel, som visas i exemplet med upphöjda bokstäver nedan i typsnittet Didot. Lägg märke till hur marginalattributet har lagts till till höger om A. Annars skulle det "limmas 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 anges en upphöjd dropplock för den första bokstaven.

Och ett nytt stycke...

Om du känner dig experimentell 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 dessa eller andra typer av pseudoklasser 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 CSS-pseudoklasserna första barn, :första av typ och :första bokstav, kommer du att kunna ansöka dem korrekt till HTML-element.

I html spelar teckenstorleken en viktig roll. Det låter dig uppmärksamma användaren på viktig information som publiceras på webbplatsens sida. Ä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åk har ett brett utbud av verktyg för att arbeta med typsnitt. När allt kommer omkring är textformatering huvuduppgiften för html.

Anledningen till skapandet av HTML-språket var problemet med att visa textformateringsregler i webbläsare.

Låt oss titta 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 egenskaper för teckensnittet:

• färg – ställer in textfärgen;
• storlek – teckenstorlek i konventionella enheter.

Positiva attributvärden från 1 till 7 stöds.

• ansikte – används för att ställa in texttypsnittsfamiljen som ska användas i . Flera värden stöds, separerade med kommatecken.

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

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

• — sätter fetstil i html. Action-taggen liknar den föregående;
• — storleken är större än standard;
• — mindre teckenstorlek;
• — kursiv text (kursiv). Liknande tagg ;
• — text med understrykning;
• - struken;
• — visa text endast med små bokstäver;
• - i versaler.

Oformatterad text

Miniatyr

Miniatyr

Mer än vanligt

Mindre än vanligt

Kursiv

Kursiv

Med understreck

Struken

Style attribut kapacitet

Utöver de beskrivna taggarna 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 visningsstilen för teckensnitt:

1) font-family – egenskapen anger teckensnittsfamiljen. Det är möjligt att lista flera värden.
Att ändra typsnittet i html till nästa värde kommer att ske om den tidigare familjen inte är installerad på användarens operativsystem.

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 | betydelse | intresse | ärva

Du kan också ställa in teckenstorleken:

• I pixlar;
• I absolut värde (xx-small, x-small, small, medium, large);
• I procent;
• I poäng (pt).

Teckenstorlek: 7

Teckenstorlek: 24px

Teckenstorlek: x-stor

Teckenstorlek: 200 %

Teckenstorlek: 24 pkt

3) font-style – ställer in typsnittets skrivstil. Syntax:

teckensnittsstil: normal | kursiv | snett | ärva

Värden:

• normal – normal stavning;
• kursiv – kursiv;
• snett – typsnitt snett åt höger;
• ärva – ärver stavningen av det överordnade elementet.

Ett exempel på hur man ä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å kepsar | ä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 numerisk motsvarighet.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

teckensnittsvikt:900

font-weight:100

HTML-teckensnittsegenskap och teckensnittsfärg

Font är en annan behållaregenskap. Inuti sig kombinerade den värdena för flera egenskaper avsedda för att ändra teckensnitt. teckensnittssyntax:

font: font-size font-family | ärva

Värdet kan också ställas in på de teckensnitt som används av systemet i etiketterna på olika kontroller:

• bildtext – för knappar;
• ikon – för ikoner;
• meny - meny;
• meddelande-box – för dialogrutor;
• liten bildtext – 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, antingen med ett nyckelord eller i rgb-format. Och även i hexadecimal kod.

Hej alla läsare av denna blogg. Idag ska jag prata om hur du kan göra alla versaler med hjälp av CSS. Naturligtvis, för att göra detta, kan du aktivera Caps Lock 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 färdig artikel?

Göra alla bokstäver stora i css

Det finns en text-transform-egenskap för detta, som, som du kanske har gissat, transformerar text. Den har följande värden:

• gemener – all text visas med små bokstäver
• versaler – alla ord visas med versaler (vad vi behöver)
• versal – den första bokstaven i varje ord är versal

Det är i princip allt du behöver veta. Allt som återstår är att ta reda på hur man kommer åt det önskade elementet. Låt oss föreställa oss det här exemplet: du måste göra det femte stycket i en artikel till alla versaler. Och hur kan detta genomföras?

Hur når man det önskade elementet?

Som du vet skapas ett stycke med hjälp av en parad html-tagg, vars hela innehåll blir ett stycke. Allt som återstår är att definiera en ny stilklass för den:

Nu har vi möjlighet att komma åt denna specifika paragraf via CSS-språket utan att påverka resten. Du kan göra så här:

versaler(
Textomvandling: versaler;
}

Denna metod är lämplig när du behöver markera ett fragment i en viss artikel. Tänk om alla sidor måste ha viss text med versaler. I det här fallet är det bättre att placera blocket i en mallfil för att inte skriva det varje gång.

Eller så kanske du behöver markera det andra stycket i varje artikel med hjälp av CSS med versaler. Då kommer ett annat alternativ att passa dig. Hitta blocket där artikeln visas och gå till andra stycket med pseudoklassen n:te underordnade. I det här exemplet har vårt block med en artikel artikelklassen.

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

Som du kan se finns det olika lösningar för varje specifikt fall. Det viktigaste är att komma ihåg egenskapen text-transform, som ändrar skiftläge för bokstäver.

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

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