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.

God dag, platsbyggande nördar. Dagens publikation kommer att diskutera ämnet design av textinnehåll. Det är därför du kommer att lära dig hur du ställer in versaler med hjälp av CSS-verktyg, bekanta dig med flera alternativ för att skapa en drop cap och, naturligtvis, kommer du att kunna prova allt i praktiken. Nåväl, låt oss nu gå vidare till den roliga delen!

Låt oss förvandla texten

Tack vare kaskadformatmallar kan du ändra både det första tecknet i ett block och hela texten. Jag ska berätta hur du kan göra båda. 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 sätta varje första tecken i ett ord till en stor bokstav. Jag skrev mer om värdena i tabellen.

Nu, för att förstärka det teoretiska materialet, titta på ett exempel.

Uppmärksamhet!

!Imorgon är det rabatt på alla kosmetiska produkter!

Kampanjen gäller i alla filialer i din stad.

Skapa en drop cap

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

En stor bokstav (eller ibland säger de också en initial) är den första bokstaven i ett kapitel, som skiljer sig från resten i sin stora storlek, färg och i vissa fall även typsnittsdesign. I verkliga 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 markeras symbolen med en markup language-tagg 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 är mycket mer logiska och bekväma att använda i det här fallet).

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

Så i det här fallet använder vi:första bokstaven. Som alla pseudoelement tilldelas den till en väljare med hjälp av ett kolon. Efter alla regler för stilmallar anges egenskaper. Du kan dock bara använda egenskaper som hänför sig till redigering av teckensnitt, utfyllnad, färg, bakgrund, marginaler och kanter.

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

Detta stycke innehåller en mening med mycket intressant innehåll.

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

Det resulterande 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 programkoden 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 kunskapen du får (och naturligtvis länken till min blogg) med dina vänner. Lycka till!

Hejdå!

Med vänliga hälsningar, Roman Chueshov

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

Standardvärdet är inställt på none , vilket inte har någon effekt på texten. Textens fall förblir densamma. Värdena för versaler och gemener konverterar tecken till versaler respektive gemener. Om du anger versaler kommer bara de första tecknen i varje ord att skrivas med versaler. Inherit ärver värdet av sin förälder.

Exempel

Det här är titeln. Egenskapen text-transform tillämpas på den med värdet versaler. Alla tecken kommer att vara versaler.

Egenskapen för textomvandling med värdet gemener tillämpas på detta stycke, vilket innebär att alla bokstäver kommer att vara gemener.

Och på det sista stycket tillämpas text-transform-egenskapen med egenskapen CAPITALIZE. De första bokstäverna i varje ord kommer att vara versaler, och endast de.

Resultat

Dock inte allt så enkelt. Det finns några nyanser. Om du tittar på det andra stycket i exemplet ovan, kommer du att märka att ordet versal , trots att egenskapen text-transform inställd på versaler tillämpas på stycket, visas helt med versaler, vilket matchar originaltexten. Detta förklaras av det faktum att med det angivna värdet på versaler kontrolleras endast de första bokstäverna i orden, 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 med 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, av vilka det kan vara väldigt, väldigt många.

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

kort information

Beteckningar

Värderingar

versal Det första tecknet i varje ord i en mening kommer att vara versaler. De återstående symbolerna ändrar inte sitt utseende. gemener Alla texttecken blir gemener (små bokstäver). versaler Alla texttecken blir versaler (versaler). ingen Ändrar inte skiftläge för tecken.

Sandlåda

Nalle Puh var alltid inte emot en liten förfriskning, särskilt klockan elva på morgonen, för då hade frukosten för länge sedan tagit slut och lunchen hade ännu inte börjat. Och naturligtvis blev han fruktansvärt glad över att se att Kaninen tog fram koppar och tallrikar.

div (textomvandla: versaler; )

Exempel

Medeltidens kulturminne

Amazonas lågland är omåttligt när det gäller små transporter av katter och hundar, och Hajos Bahia är känt för sina röda viner.

Resultatet av detta exempel visas 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 - Specifikationen har godkänts 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 kräver hjälp från utvecklingsgemenskapen för att implementera standarden.
• Föreslagen rekommendation Föreslagen rekommendation) - i detta skede skickas dokumentet till W3C:s rådgivande råd för slutgiltigt godkännande.
• Working Draft - En mer mogen version av ett utkast som har diskuterats och ändrats för granskning av samhället.
• Redaktörens utkast ( Redaktionellt utkast) - ett utkast till standarden efter ändringar som gjorts av projektredaktörerna.
• Utkast ( Utkast till specifikation) - det första utkastet till standarden.

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.