Goede dag, geeks van het bouwen van sites. In de publicatie van vandaag zullen we een onderwerp behandelen dat verband houdt met het ontwerp van tekstinhoud. Daarom leer je vragen hoofdletters css - maak daarbij kennis met verschillende mogelijkheden voor het maken van een drop-cap en natuurlijk kun je alles in de praktijk uitproberen. Laten we nu naar het leuke gedeelte gaan!

Laten we de tekst transformeren

Met trapsgewijze stylesheets kunt u zowel het eerste teken van een blok als de hele tekst wijzigen. Ik laat je zien hoe je beide kunt doen. Bovendien worden alle tools die in dit artikel worden genoemd, ondersteund in drie taalniveaus: css1, css2, css2.1 en css3.

Ik zal beginnen met een interessante eigenschap die alle tekstinhoud in de selectie wijzigt. het tekst-transformatie.

Het benoemde element kan tekens converteren naar hoofdletters, kleine letters en ook elk eerste teken van het woord als hoofdletter gebruiken. Ik schreef meer over de waarden in de tabel.

Neem nu een voorbeeld om het theoretische materiaal te consolideren.

Aandacht!

Morgen korting op alle beautyproducten!

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 erachter te komen, omdat het direct gerelateerd is aan het huidige onderwerp.

De drop-cap (of soms ook de initiaal) is de eerste letter van het hoofdstuk, die verschilt van de rest door zijn grote formaat, kleur en, in sommige gevallen, zelfs lettertypeontwerp. 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 teken gemarkeerd met een opmaaktaaltag en daarna worden bepaalde eigenschappen voorgeschreven in de stijlen die het wijzigen. Dit is echter geen slechte manier deze publicatie praat over de css-mechanismen (die, naar mijn mening, in in dit geval het is veel logischer en handiger in gebruik).

Om het probleem op te lossen, kunt u een hulpmiddel gebruiken zoals.

Dus in dit geval: de eerste letter wordt gebruikt. Zoals alle pseudo-elementen wordt het toegewezen aan de selector, gescheiden door dubbele punten. Daarna worden, volgens alle regels van stylesheets, eigenschappen gespecificeerd. U kunt echter alleen die eigenschappen toepassen die betrekking hebben op het bewerken van lettertypen, inspringingen, kleuren, achtergrond, velden en randen.

Ik stel voor om te overwegen specifiek voorbeeld... Door het implementeren van de gepresenteerde klein programma, Ik besloot om niet alleen een gekleurde drop-cap te maken, maar deze te vullen met bloemen. Om dit te doen, moet u meerdere lastige trucs met installatie transparante kleur lettertype en vul de letter met de geselecteerde afbeelding.

Deze paragraaf bevat een zin met een zeer interessante inhoud.

Laten we in de volgende paragraaf verder gaan met een interessant verhaal.

Het resultaat ziet er zeer aantrekkelijk en ongewoon uit, en dat is de perfecte oplossing voor.

Zoals je kunt zien dit onderwerp erg makkelijk. Door mij gebracht programmacode: u kunt het veilig gebruiken voor uw webbronnen, wijzigen en aanpassen aan uw stijl.

Als het gepresenteerde materiaal nuttig voor je was, abonneer je dan op updates op mijn blog en vergeet niet om de opgedane kennis (en natuurlijk een link naar mijn blog) met je vrienden te delen. Veel geluk!

Tot ziens!

Met vriendelijke groet, Roman Chueshov

Lezen: 236 keer

Regelt de conversie van elementtekst naar hoofdletters of kleine letters. Wanneer de waarde anders is dan geen, is het geval brontekst zal veranderd worden.

korte info

Benamingen

De waarden

hoofdletter Het eerste teken van elk woord in de zin wordt met een hoofdletter geschreven. De rest van de symbolen veranderen niet van uiterlijk. kleine letters Alle teksttekens worden kleine letters (kleine letters). hoofdletters Alle teksttekens zijn hoofdletters (hoofdletters). geen Verandert niet van hoofdletter.

Zandbak

Winnie de Poeh was altijd niet vies van een beetje verfrissing, vooral niet om elf uur 's ochtends, want dan was het ontbijt al lang afgelopen en de lunch had er niet eens aan gedacht om te beginnen. En natuurlijk was hij ontzettend blij om te zien hoe Konijn kopjes en borden tevoorschijn haalde.

div (tekst-transformatie: hoofdletter;)

Voorbeeld

Cultureel monument Middeleeuwen

De laaglanden van de Amazone nemen een klein transport van katten en honden op zich, en Hayosh Bay is beroemd om zijn rode wijnen.

Resultaat dit voorbeeld getoond in afb. 1.

Rijst. 1. De eigenschap text-transform toepassen

Objectmodel

Een voorwerp.style.textTransform

Specificatie

Elke specificatie doorloopt verschillende stadia van goedkeuring.

• Aanbeveling - Deze specificatie is goedgekeurd door de W3C en wordt aanbevolen als standaard.
• Kandidaat-aanbeveling ( Mogelijke aanbeveling ) - de groep die verantwoordelijk is voor de standaard is ervan overtuigd dat deze in overeenstemming is met zijn doelstellingen, maar de hulp van de ontwikkelaarsgemeenschap is vereist om de standaard te implementeren.
• Voorgestelde aanbeveling ( Voorgestelde aanbeveling) - Op dit punt wordt het document ter definitieve goedkeuring voorgelegd aan de W3C-adviesraad.
• Working Draft - Een meer volwassen versie van het concept na discussie en wijzigingen voor beoordeling door de community.
• Editor's concept ( Redactioneel ontwerp) - een conceptversie van de standaard na bewerking door de projectredactie.
• Droogte ( Ontwerpspecificatie) is de eerste versie van de standaard.

CSS hoofdletters helpen de eentonigheid van een uniform ontwerp te doorbreken, waarvan de teksten er van begin tot eind hetzelfde uitzien.

Vroeger en nu drop-caps

De kroniekschrijvers gebruikten hoofdletters in handgeschreven manuscripten, waarvan sommige dateren uit de 5e eeuw. Hoofdletters bleef in gebruik van de 8e tot de 15e eeuw, toen de drukpersen het drukken naar een industrieel niveau brachten. Aan het begin van de tekst werden zowel handgeschreven als bedrukte drop-caps geplaatst. Ze waren vaak versierd met een decoratief patroon dat rond de letter was geplaatst.

Verhoogde en verlaagde letters zijn nog steeds in gebruik. Ze zijn te vinden in kranten, tijdschriften en boeken, maar ook in digitale typografie. Verhoogde letters worden soms verlengd genoemd. Ze worden gelijk met de onderkant van de tekst die erop volgt geplaatst. Weggelaten letters worden gelijk met . geplaatst bovenkant tekst, soms in een laag achter het hoofdgedeelte van de tekstinhoud, of de rest van de tekst loopt er omheen.

Verhoogde letters zijn veel gemakkelijker te definiëren, omdat ze gelijk liggen met de rest van de tekst, en meestal hoeft u de stroom rond de buitenste marges niet te wijzigen om dit te doen. Weggelaten letters vereisen meer scherpstellen... Het zal gemakkelijker voor je zijn om dit uit te zoeken als je eerst begrijpt hoe verheven karakters worden behandeld.

Klassen gebruiken

Ontwerpers die al bekend zijn met CSS weten een aparte CSS-klasse te maken voor de eerste hoofdletter.

De CSS voor het alinea-element en de klasse die de letter maakt, ziet er als volgt uit:

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

En de HTML-code ziet er als volgt uit:

Wat ons geeft:

Lijkt te makkelijk? In feite zult u aanpassingen moeten maken op basis van de specifieke verhoogde letters, aangezien elke hoofdletter een speciale tekenspatiëring vereist. Nadat u een lettertype voor de verhoogde letters en voor de hoofdtekst hebt gekozen, moet u voor elke verhoogde letter aparte klassen maken. In het onderstaande CSS class.myinitialcapsi het vak aan de rechterkant heeft negatieve betekenis om de afstand tussen I en n te verkleinen.

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

l In dit geval is er wat extra ruimte tussen de"Ik" en "n."

l het toevoegen van een nieuwe klasse met een negatieve marge brengt het dichterbij.

Afhankelijk van de schermresolutie, kunnen I en n er in het bovenstaande voorbeeld uitzien alsof ze zijn samengevoegd. Dit komt door de schreven aan de uiteinden van de letters. Test daarom, voordat u beslist over de uiteindelijke CSS-stijlen, de site met: verschillende apparaten om te zien hoe de tekst eruitziet in CSS in hoofdletters.

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 ​​extra grote versie te maken van de aanhalingstekens die naast de letter verschijnen. In ons geval is noch de 48-pixelklasse, noch de 20-pixel tekstklasse geschikt voor aanhalingstekens. Het zal eerder iets zijn tussen - 30 pixels. We verplaatsen de aanhalingstekens 4 pixels naar beneden om ze optisch uit te lijnen met I:

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

“l inclusief "een nieuwe klasse met een negatieve marge trekt het dichterbij.

Je moet heel voorzichtig zijn met het specificeren van elk van de CSS-caps, samen met de aanhalingstekens, zodat hun tekenspatiëring en uitlijning overeenkomen met de omringende opmaak. De letter T moet bijvoorbeeld naar links worden verschoven, iets voorbij de rand van de alinea, zodat de dwarslijn visueel in de lay-out past. Hetzelfde doe je met ronde letters zoals C, G, O en Q. In dit voorbeeld zijn de gebruikte lettergroottes 20, 30 en 48. Maar u moet de lettergrootte kiezen op basis van de specifieke kenmerken van de lettertypen die u hebt gekozen. Evenals de formaten en resoluties van de schermen waarop de site zal worden bekeken.

Pseudo-elementen en pseudo-klassen

Met een CSS-pseudo-element kun je eenvoudig een verhoogde letter maken door :: first-letter toe te voegen aan het alinea-element. Gebruik: eerste letter ( met één dubbele punt) voor verouderde browsers:

p (font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height: 2em; padding-bottom: 1.2em;) p :: eerste letter (font-size: 3.6em; text-transform: hoofdletters; font-familie: "Monotype Bernard Condensed", serif; marge-rechts: 0.03em;) .initialb (marge-rechts: -0.1em;) .initialn (marge-rechts: -0.15 ik ;)

HTML-code die bevat CSS-klassen rekening houdend met de tekenspatiëring van de letters N en B ziet er als volgt uit ...

Een beginletter, waarbij de eerste letter een hoofdletter is.
Bij een regeleinde heeft de volgende regel geen beginlimiet.

N op de hoogte de HTML bron hoe de eerste letter, niet een hoofdletter in de HTML, wordt verkleind tot de initiële limiet van 3.6em. Netjes, hè?

B met een harde return, en een nieuwe alinea begonnen, wordt er altijd een andere initiële limiet gemaakt. Je vraagt ​​je misschien af, Hoe ga ik dit verantwoorden? Moet ik een initiaal aan het begin van een heel nieuwe paragraaf hebben? Nou, dat zou je 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 met een hoofdletter geschreven.

O Houd er rekening mee dat in broncode HTML de eerste letter wordt niet met een hoofdletter geschreven, maar wordt geconverteerd naar een 3.6em-teken.

O Maar zelfs daarna gedwongen pauze regels, en er wordt altijd een letter gemaakt aan het begin van elke nieuwe alinea. Je vraagt ​​je misschien af: Hoe kan ik hier rekening mee houden? Moet ik voor al deze gevallen letters toevoegen? Nou, dat kan. Maar is het nodig?

Zelfs met de voordelen die pseudo-elementen bieden, moesten we veel code toevoegen om aparte klassen te definiëren om problemen met tekenspatiëring en inspringing op te lossen. Maar deze methode zet de eerste letter van elke nieuwe alinea om in CSS, een hoofdletter. Voor sommigen werkt het misschien niet, omdat je niet de eerste letter van elke alinea hoeft te transformeren.

Combineren van pseudo-klassen en pseudo-elementen om een ​​slimme lay-out te maken

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

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: hoofdletters; font-family: "Monotype Bernard Condensed", serif; marge-rechts: 0.03em;)

Deze code combineren met HTML:

De eerste letter, die is gedefinieerd als eerste kind, is de enige letter die bij deze methode wordt omgezet in een verhoogde drop-cap.

Aangezien alleen de letter die als eerste kind is gedefinieerd, wordt geconverteerd, moet u er rekening mee houden dat dit voorbeeld verschilt van het vorige, zonder eerste kind. Bovendien converteren we de eerste letters niet na het begin van een alinea en na een geforceerd regeleinde. 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 verschillende speciale gevallen af ​​te handelen. Hoe zit het met de minpunten? Er zijn veel verschillende pseudo-klassen, en ze kunnen op zoveel manieren worden gecombineerd dat je hoofd er van gaat tollen. De pseudo-klassen: first-child en: first-of-type kunnen bijvoorbeeld dezelfde resultaten geven. U kunt de pseudo-klasse ook niet alleen op de alinea toepassen, maar ook op de elementen