Hallo lezers van deze blog. Vandaag zal ik het hebben over hoe je alle hoofdletters kunt maken met behulp van CSS. Om dit te doen, kun je natuurlijk Caps Lock inschakelen en de gewenste tekst schrijven, maar dit is een nogal primitieve methode. Maar wat als u een afzonderlijke paragraaf in een voltooid artikel moet markeren?

Alle letters hoofdletters maken in css

Hiervoor bestaat een eigenschap text-transform, die, zoals je misschien al geraden hebt, tekst transformeert. Het heeft de volgende waarden:

• kleine letters – alle tekst wordt weergegeven in kleine letters
• hoofdletters – alle woorden worden in hoofdletters weergegeven (wat we nodig hebben)
• hoofdletters – de eerste letter van elk woord wordt met een hoofdletter geschreven

Dat is eigenlijk alles wat u moet weten. Het enige dat overblijft is om erachter te komen hoe u toegang krijgt tot het gewenste element. Laten we ons dit voorbeeld voorstellen: u moet de vijfde alinea van een artikel geheel in hoofdletters maken. En hoe kan dit worden geïmplementeerd?

Hoe bereik je het gewenste element?

Zoals u weet, wordt een alinea gemaakt met behulp van een gepaarde html-tag, waarvan de volledige inhoud een alinea wordt. Het enige dat overblijft is om er een nieuwe stijlklasse voor te definiëren:

Nu hebben we de mogelijkheid om toegang te krijgen tot deze specifieke paragraaf via de CSS-taal zonder de rest te beïnvloeden. Je kunt het als volgt doen:

Hoofdletter( Teksttransformatie: hoofdletter; )

Deze methode is geschikt wanneer u een fragment in een bepaald artikel wilt markeren. Wat als alle pagina’s een bepaalde tekst in hoofdletters zouden moeten hebben? In dit geval is het beter om het blok in een sjabloonbestand te plaatsen, zodat u het niet elke keer hoeft te schrijven.

Of misschien moet u de tweede alinea in elk artikel markeren met behulp van CSS in hoofdletters. Dan past een andere optie bij u. Zoek het blok waarin het artikel verschijnt en open de tweede alinea met behulp van de nde-kind pseudo-klasse. In dit voorbeeld heeft ons blok met een artikel de klasse Article.

Artikel p:nth-child(2)( Teksttransformatie: hoofdletter )

Zoals u kunt zien, is er voor elk specifiek geval een andere oplossing. Het belangrijkste is dat u de eigenschap text-transform onthoudt, die het hoofdlettergebruik van letters verandert.

Over het algemeen wordt het niet aanbevolen om tekst op deze manier weer te geven, omdat dit de perceptie ervan aanzienlijk schaadt, maar enkele bijzonder belangrijke fragmenten kunnen worden benadrukt.

Vandaag hebben we gekeken naar de eigenschap text-transform. Abonneer u op de blog om nieuwe artikelen te ontvangen.

Goedendag, nerds voor het bouwen van sites. In de publicatie van vandaag wordt het onderwerp ontwerp van tekstinhoud besproken. Daarom leer je hoofdletters instellen met behulp van CSS-tools, maak je kennis met verschillende mogelijkheden voor het maken van een drop cap en kun je uiteraard alles in de praktijk uitproberen. Nou, laten we nu verder gaan met het leuke gedeelte!

Laten we de tekst transformeren

Dankzij trapsgewijze stijlbladen kunt u zowel het eerste teken van een blok als de gehele tekst wijzigen. Ik vertel je hoe je beide kunt doen. Bovendien worden alle in dit artikel genoemde tools ondersteund in drie taalniveaus: css1, css2, css2.1 en css3.

Ik begin met een interessante eigenschap die alle tekstinhoud in het geselecteerde . Dit is teksttransformatie.

Het benoemde element kan tekens omzetten in hoofdletters en kleine letters, en ook elk eerste teken van een woord in een hoofdletter zetten. Ik schreef meer over de waarden in de tabel.

Bekijk nu een voorbeeld om het theoretische materiaal te versterken.

Teksttransformatie body ( tekst-uitlijning: centreren; ) h1 ( tekst-transformatie: hoofdletters; ) h3 ( tekst-transformatie: hoofdletters; ) Let op! !Morgen is er korting op alle cosmeticaproducten!

De actie is geldig in alle vestigingen in jouw stad.

Een drop-cap maken

Als je niet weet wat de term 'drop cap' betekent, dan is dit het moment om daar achter te komen, aangezien het direct verband houdt met het huidige onderwerp.

Een hoofdletter (of soms zeggen ze ook een initiaal) is de eerste letter van een hoofdstuk, die van de rest verschilt door het grote formaat, de kleur en, in sommige gevallen, zelfs het lettertype. In het echte leven is een voorbeeld van zo'n brief te vinden in oude manuscripten en boeken.

Er zijn verschillende manieren om een ​​initiaal te maken. Vaak wordt een symbool gemarkeerd met een opmaaktaaltag en worden vervolgens bepaalde eigenschappen gespecificeerd in de stijlen die het wijzigen. Dit is een goede manier, maar deze publicatie spreekt over CSS-mechanismen (die naar mijn mening in dit geval veel logischer en handiger in gebruik zijn).

Om dit probleem op te lossen, kunt u een tool gebruiken zoals.

In dit geval gebruiken we dus:eerste letter. Zoals alle pseudo-elementen wordt het met behulp van een dubbele punt aan een selector toegewezen. Na alle regels van stylesheets worden eigenschappen aangegeven. U kunt echter alleen eigenschappen toepassen die betrekking hebben op het bewerken van lettertypen, opvulling, kleur, achtergrond, marges en randen.

Ik stel voor een specifiek voorbeeld te overwegen. Bij de implementatie van het gepresenteerde kleine programma besloot ik niet alleen een gekleurde beginletter te maken, maar deze te vullen met bloemen. Om dit te doen, moet je een paar lastige trucjes gebruiken door de kleur van het lettertype op transparant in te stellen en de letter te vullen met de geselecteerde afbeelding.

Uitstekende initiële p ( lettergrootte: 26px; lettertypefamilie: fantasie; ) P:eerste letter ( /*schrijf stijlregels voor de eerste letter van een alinea*/ lettertypefamilie: sant-serif; lettertypegewicht: 900 ; kleur: transparant; achtergrond: url(http://dreempics.com/img/picture/Mar/26/51a6ff79968c93a6542e88e464368bce/1.jpg); achtergrondgrootte: 99%; lettergrootte: 119px; -webkit-background- fragment: tekst; )

Deze paragraaf bevat een zin met een zeer interessante inhoud.

Laten we het interessante verhaal in de volgende paragraaf voortzetten.

Het resulterende resultaat ziet er zeer aantrekkelijk en ongebruikelijk uit, wat een ideale oplossing is.

Zoals u kunt zien, is dit onderwerp heel eenvoudig. U kunt eenvoudig de programmacode gebruiken die ik voor uw webbronnen heb verstrekt, en deze aanpassen en aanpassen aan uw stijl.

Als het gepresenteerde materiaal nuttig voor je was, abonneer je dan op mijn blogupdates en vergeet niet de kennis die je opdoet (en natuurlijk de link naar mijn blog) met je vrienden te delen. Succes!

Tot ziens!

Met vriendelijke groet, Roman Chueshov

Lezen: 236 keer

Een hoofdletter is volgens de definitie een tekstelement dat relatief groter wordt. In bijna alle talen begint een zin met een hoofdletter. En door het begin van een alinea met een prominente hoofdletter te ontwerpen, kunt u de tekst structureren en gemakkelijker waarnemen. Wanneer een internetpagina wordt ontworpen, kan de tekst worden geschreven in overeenstemming met de voorkeuren van de auteur en de regels van de Russische taal. U kunt het ontwerp ook “automatiseren” door bepaalde “opdrachten” in te voeren in een bestand met een css-extensie – een stylesheet – of door een stijlsectie toe te voegen aan uw html-bestand. CSS wordt meestal naast html bestudeerd om snel enkele ontwerpelementen in de tekst in één keer te kunnen wijzigen.

Dit is vooral het geval als de site honderden pagina's heeft en het aanbrengen van wijzigingen op elk van deze pagina's een zeer arbeidsintensief proces is.

Als je css toepast, kunnen de hoofdletters aan het begin van elke alinea er speciaal uitzien. Met de onderstaande code, ingevoerd in html zonder haakjes, kan tekst die is opgemaakt met de tag 'p' bijvoorbeeld de hoofdletter - eerste letter - groter maken - 220% van de standaardgrootte, geel - de kleurwaarde is geel, en schrijf het in een ander lettertype dan de rest van de tekst - Georgia versus Batangche.

()

p: eerste letter (lettertypefamilie: Georgia; lettergrootte: 220%; kleur: geel;)

()

Je kunt prachtige hoofdletters krijgen door je eigen lettertype te maken in de vorm van afbeeldingen - voor elke letter is er een aparte afbeelding, bijvoorbeeld in de oud-Russische of gotische stijl. Ze kunnen worden ingetekend. Vervolgens kunt u op de gewenste plaatsen in plaats van de hoofdletter de code zonder haakjes invoegen (). Bijkomende attributen zijn hoogte en breedte: de breedte en hoogte van de afbeelding, die in pixels kunnen worden ingesteld voor een harmonieuze combinatie met de rest van de tekst. Voorbeeld: (). Haakjes rond< и >wij verwijderen.

Als u niet de mogelijkheid heeft om het alfabet zelf te tekenen, kan de hoofdletter worden ontworpen met behulp van lettertypen die gratis beschikbaar zijn op Google (sectie Lettertypen) of andere zoekmachines en bronnen. Om dit te doen, moet de bovenstaande code als volgt worden opgemaakt:

()

p (lettertypefamilie: batangche; lettergrootte:93%;)

p: eerste letter (lettertypefamilie: Kelly+Slab; lettergrootte: 220%; kleur: blauw;)

()

().

Met de Google-service kunt u het een of het ander kiezen en worden kant-en-klare links aangeboden die u in html of css kunt invoegen. Wij vestigen uw aandacht op het feit dat het noodzakelijk is om een ​​lettertypegroep te selecteren: Latijn of Cyrillisch, omdat... Bijna alle Latijnse lettertypen werken niet bij het opmaken van Russischtalige tekst. Op dit moment biedt de zoekmachine ongeveer 40 soorten gratis aan.

Een hoofdletter of de hoofdletter ervan kan worden opgemaakt met behulp van de CSS-teksttransformatie-eigenschap. Als u in het stijlblad de waarde teksttransformatie: geen instelt, ziet de tekst eruit zoals u deze schrijft. Om alle letters naar kleine letters te converteren, moet u de waarde voor teksttransformatie instellen: kleine letters, gescheiden door een dubbele punt, en voor hoofdletters - hoofdletters. Door de eigenschap in te stellen op teksttransformatie: hoofdlettergebruik wordt ervoor gezorgd dat elk woord aan het begin een hoofdletter heeft.

Vaak kan een gebruiker, als hij materiaal aan een site toevoegt of bijvoorbeeld een nieuw onderwerp op een forum aanmaakt, een zin (titel) beginnen te schrijven met een kleine (kleine letter). Dit is tot op zekere hoogte een vergissing.

Ik zal verschillende opties laten zien om dit probleem op te lossen: PHP en CSS zijn geschikter voor reeds gepubliceerd materiaal, wanneer jQuery de situatie vóór publicatie kan corrigeren.

Eerste letter van een string in hoofdletters in PHP

In PHP is er een functie genaamd “ucfirst”, die alleen het eerste teken van een regel naar hoofdletters converteert, maar het nadeel is dat deze niet helemaal correct werkt met Cyrillisch.

Om dit te doen, zullen we onze eigen kleine functie schrijven. De implementatie zou er als volgt uit zien:

In deze versie ontvangen we een zin die begint met een hoofdletter, wat in feite is wat we nodig hebben.

Eerste hoofdletter van een tekenreeks in CSS

Deze methode converteert visueel (dat wil zeggen dat de suggesties verschijnen zoals ze in de broncode van de site staan) het eerste teken ook naar hoofdletters.

Het gebruik is als volgt:

eerste zin

tweede zin

derde zin

vierde zin

#content p:eerste letter ( teksttransformatie: hoofdletter; )

Met behulp van het pseudo-element “eerste letter” en de eigenschap “text-transform” stellen we het ontwerp voor elke eerste letter van de alinea in.

Eerste letter van een string in hoofdletters in jQuery

Zoals ik al eerder zei, is deze conversiemethode het meest geschikt voor materiaal dat nog moet worden gepubliceerd.

We nemen bijvoorbeeld een tekstveld (het zal fungeren als een veld voor het invoeren van een titel) en schrijven er een klein script voor, waardoor het bij het invoeren van een zin met een kleine letter een hoofdletter wordt:

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

Het script werkt zowel bij het schrijven van tekst als bij het eenvoudig invoegen ervan. Vergeet niet dat scripts alleen op uw site kunnen werken als de jQuery-bibliotheek is ingeschakeld.

CSS-hoofdletters helpen de eentonigheid van een generiek ontwerp te doorbreken, waarbij de tekst er van begin tot eind hetzelfde uitziet.

Beginletters toen en nu

Kroniekschrijvers gebruikten hoofdletters in handgeschreven manuscripten, waarvan sommige dateren uit de 5e eeuw. Hoofdletters werden nog steeds gebruikt van de 8e tot de 15e eeuw, toen drukpersen het mogelijk maakten om het drukken naar een industrieel niveau te brengen. Zowel handgeschreven als gedrukte beginletters werden aan het begin van de tekst geplaatst. Ze waren vaak versierd met een decoratief patroon dat zich rond de letter bevond.

Opgeheven en neergelaten letters worden nog steeds gebruikt. Ze zijn te vinden in kranten, tijdschriften en boeken, maar ook in digitaal drukwerk. Het verhoogde type wordt soms het langwerpige type genoemd. Ze worden gelijk met de onderkant van de tekst die erop volgt geplaatst. Weggelaten letters worden gelijk met de bovenkant van de tekst geplaatst, soms in een laag achter de hoofdtekst van de tekstinhoud, of de rest van de tekst loopt eromheen.

Opstaande letters zijn veel gemakkelijker te definiëren omdat ze gelijk liggen met de rest van de tekst en de omloop rond de buitenmarges meestal niet hoeft te worden gewijzigd. Weggelaten letters vereisen meer verfijning. Het zal gemakkelijker voor u zijn om dit te begrijpen als u eerst begrijpt hoe met verhoogde karakters wordt omgegaan.

Gebruik maken van klassen

Ontwerpers die al verstand hebben van CSS weten dat ze een aparte CSS-klasse moeten maken voor de eerste hoofdletter.

De CSS-code voor het paragraafelement en de klasse die de letter maakt, zou er als volgt uitzien:

p (lettergrootte:20px; lettertypefamilie: Georgia, "Times New Roman", Times, serif;).myinitialcaps (lettergrootte:48px; lettertypefamilie: Didot;)

En de HTML-code ziet er als volgt uit:

Wat geeft ons:

Lijkt te gemakkelijk? U zult feitelijk aanpassingen moeten maken, afhankelijk van de specifieke letters die zijn opgeworpen, aangezien elke hoofdletter een speciale spatiëring vereist. Nadat u een lettertype voor de verhoogde letters en voor de hoofdtekst heeft gekozen, moet u voor elke verhoogde letter aparte klassen maken. In de CSS-klasse below.myinitialcapsi is de marge aan de rechterkant ingesteld op een negatieve waarde om de afstand tussen I en n te verkleinen.

Mijninitialcapsi (lettergrootte:48px; lettertypefamilie: Didot; marge-rechts:-1px;)

In dit geval is er wat extra ruimte tussen de 'I' en 'n'.

Het opnemen van een nieuwe klasse met een negatieve marge brengt het dichterbij.

Afhankelijk van de schermresolutie in het bovenstaande voorbeeld kunnen de I en n er samen wazig uitzien. Dit komt door de schreven aan de uiteinden van de letters. Dus voordat u een besluit neemt over uw definitieve CSS-stijlen, test u uw site op verschillende apparaten om te zien hoe CSS-tekst er op deze apparaten uitziet.

Offertes en andere speciale gevallen

U kunt niet alleen de letters aan het begin van de tekst vergroten. U kunt een andere klasse implementeren om een ​​grotere versie van aanhalingstekens te maken die naast de letter verschijnen. In ons geval is noch een letterklasse met een grootte van 48, noch een tekstklasse van 20 pixels geschikt voor aanhalingstekens. Het zal eerder iets tussen de 30 pixels zijn. We verplaatsen de aanhalingstekens 4 pixels naar beneden om ze optisch uit te lijnen met I:

Myinitialcapsq (lettergrootte:30px; lettertypefamilie: Didot; float:left; margin-top:4px;)

Het ‘opnemen’ van een nieuwe klasse met een negatieve marge brengt het dichterbij.

U moet heel voorzichtig zijn bij het instellen van elk CSS-hoofdlettergebruik samen met de aanhalingstekens, zodat hun tekenspatiëring en uitlijning overeenkomen met de omringende markeringen. De letter T moet bijvoorbeeld naar links worden verplaatst, iets voorbij de rand van de alinea, zodat de dwarslijn visueel in de lay-out past. Hetzelfde moet je doen met ronde letters, zoals C, G, O en Q. In dit voorbeeld worden de lettergroottes 20, 30 en 48 gebruikt. Maar u moet de lettergroottes selecteren op basis van de specifieke lettertypen die u kiest. Evenals de formaten en resoluties van de schermen waarop de site bekeken zal worden.

Pseudo-elementen en pseudo-klassen

Met behulp van het CSS-pseudo-element kunt u eenvoudig een verhoogde letter maken door ::first-letter aan een alinea-element toe te voegen. Gebruik :eerste letter (met één dubbele punt) voor oudere browsers:

p ( lettergrootte: 1,2em; lettertypefamilie: Georgia, "Times New Roman", Times, serif; regelhoogte:2em;opvulling-onder:1,2em;) p::eerste letter ( lettergrootte: 3.6em; teksttransformatie: hoofdletters; lettertypefamilie: "Monotype Bernard Condensed", serif; marge-rechts:0.03em;).initialb (marge-rechts:-0.1em;).initialn (marge-rechts:-0.15 em;)

HTML-code die CSS-klassen bevat die rekening houden met de spatiëring van de letters N en B, zou er als volgt uitzien...

Een beginletter, waarbij de eerste letter een hoofdletter is.
Bij een regeleinde heeft de volgende regel geen initiële limiet.

merk op in de HTML-bron hoe de eerste letter, en niet een hoofdletter in de HTML, de grootte krijgt van de initiële hoofdlettergrootte van 3.6em. Netjes, hè?

Maar met een harde return en het starten van een nieuwe paragraaf, wordt er altijd een nieuwe initiële limiet aangemaakt. U vraagt ​​zich misschien af: hoe ga ik dit verantwoorden? Moet ik een beginlimiet hebben aan het begin van een hele nieuwe paragraaf? Nou ja, dat zou kunnen. Maar wil je dat het er zo uitziet, en moet het er absoluut zo uitzien?

De eerste hoofdletter van de alinea wordt omgezet in een letter.
De eerste letter na een regeleinde wordt niet omgezet in hoofdletters.

oMerk op dat in de HTML-broncode de eerste letter geen hoofdletter is, maar wordt omgezet naar een 3.6em-teken.

Maar zelfs na een geforceerde regeleinde wordt er altijd een letter aan het begin van elke nieuwe alinea gemaakt. U vraagt ​​zich misschien af: hoe houd ik hier rekening mee? Moet ik voor al deze gevallen letters toevoegen? Nou, dat kan. Maar is dit nodig?

Zelfs met de voordelen die pseudo-elementen bieden, moesten we veel code toevoegen om afzonderlijke klassen te definiëren om problemen met tekenspatiëring en opvulling op te lossen. Maar deze methode converteert de eerste letter van elke nieuwe paragraaf naar een CSS-hoofdletter. Voor sommigen is het misschien niet geschikt omdat het niet nodig is om de eerste letter van elke paragraaf te transformeren.

Het combineren van pseudo-klassen en pseudo-elementen om een ​​slimme lay-out te creëren

Het toevoegen van de :first-child pseudo-klasse helpt het probleem van onnodige conversie van eerste letters op te lossen:

p ( lettergrootte: 1,2em; lettertypefamilie: Georgia, "Times New Roman", Times, serif; regelhoogte:2em;opvulling-onder:0,5em;) p:eerste kind::eerste letter ( lettergrootte: 3,6em; teksttransformatie: hoofdletters; lettertypefamilie: "Monotype Bernard Condensed", serif; marge rechts: 0,03em;)

Combineer deze code met HTML:

De eerste letter die als eerste kind wordt gedefinieerd, is de enige letter die op deze manier wordt omgezet in een verhoogde sierkap.

Aangezien alleen de letter die als eerste kind is gedefinieerd, wordt geconverteerd, moet u er rekening mee houden dat dit voorbeeld anders is dan het vorige, zonder eerste kind. Bovendien converteren we de eerste letters na het begin van een alinea en na een geforceerde regeleinde niet. Dit ziet er eleganter uit dan hoe de lay-out eruit zag toen we alle eerste letters van de alinea's converteerden.

Het voordeel van het gebruik van pseudo-klassen is de mogelijkheid om met verschillende speciale gevallen om te gaan. Hoe zit het met de nadelen? Er zijn veel verschillende pseudo-klassen, en ze kunnen op zoveel manieren worden gecombineerd dat je er duizelig van wordt. De pseudo-klassen :first-child en :first-of-type kunnen bijvoorbeeld dezelfde resultaten opleveren. Je kunt een pseudo-klasse ook niet alleen op een alinea toepassen, maar ook op of-elementen. Bijvoorbeeld zoals weergegeven in het voorbeeld met verhoogde letters hieronder in het lettertype Didot. Merk op hoe het marge-attribuut rechts van de A is toegevoegd. Anders zou het “aan elkaar plakken” met de letter s aan het begin van de sectie:

sectie ( lettergrootte: 1,2em; lettertypefamilie: Georgia, "Times New Roman", Times, serif; regelhoogte:3em;) sectie>p:eerste kind:eerste letter ( lettergrootte: 4em; teksttransformatie: hoofdletter; lettertypefamilie: Didot, serif; marge-rechts: 5px;)

En samen met HTML:

Aan het begin van het gedeelte wordt voor de eerste letter een verhoogde sierkap gespecificeerd.

En een nieuwe paragraaf...

Als je experimenteel bent, kun je naast :first-child en :first-of-type ook andere methoden verkennen. Bijvoorbeeld: :nth-of-type of :nth-of-child om te zien hoe deze of andere soorten pseudo-klassen kunnen worden gebruikt voor CSS-hoofdlettertekst. Of u nu de principes volgt die in dit artikel worden uiteengezet of dieper gaat graven, zodra u leert werken met de CSS-pseudoklassen first-child , :first-of-type en :first-letter , kunt u deze toepassen correct omzetten naar HTML-elementen.

De lijn tekenen

Het gebruik van afzonderlijke klassen samen met pseudo-klassen om verschillende letters te verwerken is een proces van vallen en opstaan, waarbij positieve en negatieve opvulling wordt berekend. En dit vergt veel geduld. Letters zoals F, G, O, P, Q, T, W, V en Y vereisen ook aparte spatiëringklassen.