Drop cap (en drop cap innebygd i teksten) er den første bokstaven i et avsnitt, større enn resten, og plassert slik at toppen er på nivå med den første linjen i avsnittet. På bildet kan du se et eksempel på en drop cap innebygd i teksten.

WordPress har forresten en spesiell plugin (wordpress.org/extend/plugins/drop-caps) som lar deg automatisk lage tekst innebygd (og flyttet nedover) store bokstaver. Fantastisk! Men hva om du ikke vil bruke en plugin (jeg er sikker på at du ikke gjør det), og du bare trenger å lage en drop cap på flere innlegg, og kanskje på et bestemt sted?

Den gode nyheten er at du ikke trenger en plugin for å lage store bokstaver, alt du trenger er litt css og en span-tag. Åpne css-filen og legg til følgende kode:

Span.dropcaps ( font-family:Georgia, serif; farge: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0,09em; stilling: slektning;)

Noe sånt som dette. Selvfølgelig trenger du en stil som matcher design og tekst. For eksempel må egenskapsverdiene: font-size , marginer og linjehøyde velges basert på design og tekst.

Tag Span

For at stilen skal brukes på den store bokstaven i teksten, må du "pakke inn" den store bokstaven i en span-tag og spesifisere passende klasse.

EN

Pseudo-element: første bokstav

Du kan også style det første tegnet i teksten ved å bruke pseudo-elementet: første bokstav . Imidlertid kan et begrenset antall egenskaper brukes på:førstebokstavens pseudoelement: dette er egenskaper relatert til skrifttype, farge, bakgrunn, kantlinjer, marger og utfylling. En annen ting å merke seg er at pseudo-elementet:first-letter ikke vil fungere i eldre nettlesere.

P:første bokstav ( font-family:Georgia, serif; farge: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin -høyre: 0,09em; posisjon: relativ;)

Her er faktisk et par metoder for å redigere store bokstaver ved hjelp av CSS.

Ofte, i en hast når han legger til materiale på et nettsted eller for eksempel oppretter et nytt emne på et forum, kan en bruker begynne å skrive en setning (tittel) med en liten (små bokstav). Dette er til en viss grad en feil.

Jeg vil vise flere alternativer for å løse dette problemet: PHP og CSS er mer egnet for allerede publisert materiale, når jQuery kan rette opp situasjonen før publisering.

Første bokstav i en streng med store bokstaver i PHP

I PHP er det en funksjon kalt "ucfirst", som bare konverterer det første tegnet i en linje til store bokstaver, men dens ulempe er at den ikke fungerer helt riktig med kyrillisk.

For å gjøre dette, vil vi skrive vår egen lille funksjon. Implementeringen vil se slik ut:

I denne versjonen vil vi motta en setning som begynner med stor bokstav, som faktisk er det vi trenger.

Stor første bokstav i en streng i CSS

Denne metoden visuelt (det vil si at forslagene vises slik de er i nettstedets kildekode) konverterer også det første tegnet til store bokstaver.

Bruken er som følger:

første setning

andre setning

tredje setning

fjerde setning

#content p:første bokstav (teksttransform: store bokstaver;)

Ved å bruke pseudoelementet "første bokstav" og egenskapen "tekst-transform", angir vi designet for hver første bokstav i avsnittet.

Første bokstav i en streng med stor bokstav i jQuery

Som jeg sa tidligere, er denne konverteringsmetoden best egnet for materialer som ennå ikke skal publiseres.

For eksempel vil vi ta et tekstfelt (det vil fungere som et felt for å skrive inn en tittel) og skrive et lite skript for det, som, når du skriver inn en setning med en liten bokstav, får den til å bruke 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_tekst); )); ));

Manuset fungerer både når du skriver tekst og når du enkelt setter den inn. Ikke glem at for at skript skal fungere på nettstedet ditt, må du ha jQuery-biblioteket aktivert.

CSS-caps hjelper til med å bryte opp monotonien til en generisk design der teksten ser lik ut fra start til slutt.

Startbokstaver før og nå

Kronikere brukte store bokstaver i håndskrevne manuskripter, noen av dem dateres tilbake til 500-tallet. Store bokstaver fortsatte å bli brukt fra 800- til 1400-tallet, da trykkpresser tillot trykking å bringes til et industrielt nivå. Både håndskrevne og trykte forbokstaver ble plassert i begynnelsen av teksten. De var ofte dekorert med et dekorativt mønster som var plassert rundt bokstaven.

Opphøyde og droppede bokstaver brukes fortsatt i dag. De finnes i aviser, magasiner og bøker, samt i digitaltrykk. Hevet type kalles noen ganger langstrakt type. De plasseres i flukt med bunnen av teksten som følger dem. Droppede bokstaver plasseres i flukt med toppen av teksten, noen ganger i et lag bak innholdet i teksten, eller resten av teksten går rundt dem.

Forhøyede bokstaver er mye lettere å definere fordi de er i flukt med resten av teksten og vanligvis ikke trenger å endre omslag rundt de ytre margene. Utelatte bokstaver krever mer finjustering. Det vil være lettere for deg å forstå dette hvis du først forstår hvordan oppvokste karakterer håndteres.

Bruke klasser

Designere som allerede har en forståelse av CSS vet at de må lage en egen CSS-klasse for den første store bokstaven.

CSS-koden for avsnittselementet og klassen som lager bokstaven vil se slik ut:

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

Og HTML-koden vil se slik ut:

Hva gir oss:

Virker det for lett? Du må faktisk gjøre justeringer avhengig av de spesifikke bokstavene som er hevet, siden hver stor bokstav krever spesiell kerning. Etter å ha valgt en font for de hevede bokstavene og for brødteksten, må du lage separate klasser for hver hevet bokstav. I CSS-klassen under.myinitialcapsi er margen til høyre satt til en negativ verdi for å redusere avstanden mellom I og n.

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

I dette tilfellet er det litt ekstra mellomrom mellom "I" og "n."

Å inkludere en ny klasse med negativ margin trekker den nærmere.

Avhengig av skjermoppløsningen i eksemplet ovenfor, kan I og n se ut som om de er uskarpe sammen. Dette skyldes serifene i enden av bokstavene. Så før du bestemmer deg for de endelige CSS-stilene dine, test nettstedet ditt på forskjellige enheter for å se hvordan teksten med CSS-kapsler ser ut på dem.

Sitater og andre spesielle tilfeller

Du kan forstørre ikke bare bokstavene i begynnelsen av teksten. Du kan implementere en annen klasse for å lage en større versjon av anførselstegn som vises ved siden av bokstaven. I vårt tilfelle er verken en bokstavklasse med en størrelse på 48 eller en tekstklasse på 20 piksler egnet for anførselstegn. Snarere vil det være noe i mellom – 30 piksler. Vi flytter anførselstegnene ned 4 piksler for å justere dem optisk med I:

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

Å "inkludere" en ny klasse med negativ margin trekker den nærmere.

Du må være veldig forsiktig med å angi hver av CSS-store bokstaver sammen med anførselstegnene slik at deres kerning og justering samsvarer med den omkringliggende markeringen. For eksempel må bokstaven T flyttes til venstre, litt utenfor kanten av avsnittet, slik at dens tverrgående linje visuelt passer inn i oppsettet. Du må gjøre det samme med runde bokstaver, for eksempel C, G, O og Q. Dette eksemplet bruker skriftstørrelser på 20, 30 og 48. Men du må velge størrelser basert på de spesifikke skriftene du velger. Samt størrelsene og oppløsningene til skjermene som nettstedet vil bli vist på.

Pseudo-elementer og pseudo-klasser

Ved å bruke CSS-pseudo-elementet kan du enkelt lage en hevet bokstav ved å legge til ::first-letter til et avsnittselement. Bruk :første bokstav (med ett kolon) for eldre nettlesere:

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; teksttransformasjon: store bokstaver; fontfamilie: "Monotype Bernard Condensed", serif; margin-right:0.03em;).initialb (margin-right:-0.1em;).initialn (margin-right:-0.15 em ;)

HTML-kode som inneholder CSS-klasser som tar hensyn til kerning av bokstavene N og B vil se slik ut...

En forbokstav, hvor den første bokstaven er en stor bokstav.
Med et linjeskift har neste linje ingen startgrense.

Legg merke til i HTML-kilden hvordan den første bokstaven, ikke en stor bokstav i HTML-en, blir dimensjonert til den opprinnelige cap-størrelsen på 3.6em. Ryddig, ikke sant?

Men med en hard retur, og et nytt avsnitt startet, blir det alltid opprettet en ny startgrense. Du kan spørre deg selv: Hvordan skal jeg forklare dette? Skal jeg ha en innledende cap i begynnelsen av et nytt avsnitt? Vel, du kunne. Men, vil du at det skal se slik ut, og må det absolutt se slik ut?

Den første store bokstaven i avsnittet konverteres til en bokstav.
Den første bokstaven etter et linjeskift vil ikke bli konvertert til stor.

oMerk at i HTML-kildekoden er den første bokstaven ikke stor, men den konverteres til et 3,6 em-tegn.

Men selv etter et tvungen linjeskift, opprettes det alltid en bokstav i begynnelsen av hvert nytt avsnitt. Du kan spørre deg selv: Hvordan tar jeg hensyn til dette? Må jeg legge til bokstaver for alle disse sakene? Vel, du kan. Men er dette nødvendig?

Selv med fordelene som pseudo-elementer gir, måtte vi legge til mye kode for å definere separate klasser for å håndtere kerning og padding problemer. Men denne metoden konverterer den første bokstaven i hvert nytt avsnitt til en CSS-stor bokstav. For noen er det kanskje ikke egnet fordi det ikke trenger å transformere den første bokstaven i hvert avsnitt.

Kombinere pseudo-klasser og pseudo-elementer for å lage en smart layout

Å legge til :first-child pseudo-klassen hjelper til med å løse problemet med unødvendig konvertering av første bokstaver:

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 ( skriftstørrelse: 3.6em; teksttransformasjon: store bokstaver; fontfamilie: "Monotype Bernard Condensed", serif; margin-right:0.03em;)

Ved å kombinere denne koden med HTML:

Den første bokstaven som er definert som førstebarn er den eneste bokstaven som konverteres til en hevet drop cap ved denne metoden.

Siden bare bokstaven som er definert som førstebarn blir konvertert, merk at dette eksemplet er forskjellig fra det forrige, uten førstebarn. I tillegg konverterer vi ikke de første bokstavene etter begynnelsen av et avsnitt og etter et tvungen linjeskift. Dette ser mer elegant ut enn hvordan oppsettet så ut da vi konverterte alle de første bokstavene i avsnittene.

Fordelen med å bruke pseudoklasser er muligheten til å håndtere ulike spesialtilfeller. Hva med ulempene? Det finnes mange forskjellige pseudo-klasser, og de kan kombineres på så mange måter at det kan få hodet til å snurre. For eksempel kan pseudoklassene :first-child og :first-of-type gi de samme resultatene. Du kan også bruke en pseudoklasse ikke bare på et avsnitt, men også på eller elementer. For eksempel, som vist i eksemplet med hevede bokstaver nedenfor i Didot-fonten. Legg merke til hvordan margattributtet er lagt til til høyre for A. Ellers vil det "limes sammen" med bokstaven s i begynnelsen 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; tekst-transform: store bokstaver; font-family: Didot, serif; margin-right:5px;)

Og sammen med HTML:

I begynnelsen av avsnittet er det spesifisert en hevet drop cap for den første bokstaven.

Og et nytt avsnitt...

Hvis du føler deg eksperimentell, kan du utforske ulike metoder i tillegg til :first-child og :first-of-type . For eksempel, for eksempel :nth-of-type eller :nth-of-child for å se hvordan disse eller andre typer pseudo-klasser kan brukes for CSS-store bokstaver. Enten du følger prinsippene som er skissert i denne artikkelen eller begynner å grave dypere, når du har lært å jobbe med CSS-pseudoklassene førstebarn , :første-av-type og :førstebokstav , vil du kunne søke dem riktig til HTML-elementer.

I html spiller skriftstørrelse en viktig rolle. Den lar deg trekke brukerens oppmerksomhet til viktig informasjon som er lagt ut på siden. Selv om ikke bare størrelsen på bokstavene er viktig, men også deres farge, tykkelse og til og med familie.

Tagger og attributter når du arbeider med html-fonter

Hypertekstspråk har et bredt spekter av verktøy for å jobbe med fonter. Tross alt er tekstformatering hovedoppgaven til html.

Årsaken til opprettelsen av HTML-språket var problemet med å vise tekstformateringsregler i nettlesere.

La oss se på kodene som brukes til å jobbe med fonter i HTML og deres attributter. Den viktigste er taggen. Ved å bruke verdiene til attributtene kan du angi flere egenskaper for skriften:

• farge – setter tekstfargen;
• størrelse – skriftstørrelse i konvensjonelle enheter.

Positive attributtverdier fra 1 til 7 støttes.

• ansikt – brukes til å angi tekstfontfamilien som skal brukes i . Flere verdier støttes, atskilt med komma.

Bare teksten som er plassert mellom delene av den sammenkoblede font-taggen er formatert. Resten av teksten vises i standard standardfont.

Også i html er det en rekke parede tagger som spesifiserer kun én formateringsregel. Disse inkluderer:

• — setter fet skrift i html. Handlingskoden ligner på den forrige;
• — størrelsen er større enn standarden;
• — mindre skriftstørrelse;
• — kursiv tekst (kursiv). Lignende tag ;
• — tekst med understreking;
• - krysset ut;
• — vis tekst bare med små bokstaver;
• - med store bokstaver.

Ren tekst

Miniatyrbilde

Miniatyrbilde

Mer enn vanlig

Mindre enn vanlig

Kursiv

Kursiv

Med understrek

Krysset ut

Egenskaper for stilattributter

I tillegg til de beskrevne kodene, er det flere måter å endre fonten i html på. En av dem er å bruke det generiske stilattributtet. Ved å bruke verdiene til egenskapene kan du angi visningsstilen til fonter:

1) font-family – egenskapen setter fontfamilien. Det er mulig å liste opp flere verdier.
Endring av fonten i html til neste verdi vil skje hvis den forrige familien ikke er installert på brukerens operativsystem.

Skrive syntaks:

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

2) font-size – størrelsen er satt fra 1 til 7. Dette er en av hovedmåtene du kan øke fonten i HTML.
Skrive syntaks:

font-size: absolutt størrelse | relativ størrelse | betydning | interesse | arve

Du kan også angi skriftstørrelsen:

• I piksler;
• I absolutt verdi (xx-liten, x-liten, liten, middels, stor);
• I prosenter;
• I poeng (pt).

Skriftstørrelse: 7

Skriftstørrelse: 24px

Skriftstørrelse: x-stor

Skriftstørrelse: 200 %

Skriftstørrelse: 24 pkt

3) skriftstil – angir skriftstilen. Syntaks:

skriftstil: normal | kursiv | skrå | arve

Verdier:

• normal – normal stavemåte;
• kursiv – kursiv;
• skrå – skrift skråstilt til høyre;
• arv – arver stavemåten til det overordnede elementet.

Et eksempel på hvordan du endrer fonten i html ved å bruke denne egenskapen:

font-style:herit

skriftstil:kursiv

font-style:normal

font-style: oblique

4) font-variant – konverterer alle store bokstaver til store bokstaver. Syntaks:

font-variant: normal | small-caps | arve

Et eksempel på hvordan du endrer fonten i html med denne egenskapen:

font-variant:herit

font-variant:normal

font-variant:small-caps

5) font-weight – lar deg angi tykkelsen på teksten (metning). Syntaks:

font-weight: bold|bolder|lettere|normal|100|200|300|400|500|600|700|800|900

Verdier:

• fet – setter html-fonten til fet;
• dristigere – dristigere i forhold til normalen;
• lettere – mindre mettet i forhold til normalt;
• normal – normal stavemåte;
• 100-900 – angir skrifttykkelsen i numerisk ekvivalent.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

skriftvekt: 900

font-vekt:100

HTML-fontegenskap og skriftfarge

Font er en annen beholderegenskap. Inne i seg selv kombinerte den verdiene til flere egenskaper beregnet på å endre fonter. skriftsyntaks:

font: font-size font-family | arve

Verdien kan også settes til skriftene som brukes av systemet i etikettene på ulike kontroller:

• bildetekst – for knapper;
• ikon – for ikoner;
• meny - meny;
• meldingsboks – for dialogbokser;
• liten bildetekst – for små kontroller;
• statuslinje – skrifttype for statuslinje.

font:ikon

font:caption

font:meny

font:meldingsboks

liten bildetekst

font:statuslinje

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

For å angi skriftfarge i HTML, kan du bruke fargeegenskapen. Den lar deg angi fargen, enten ved hjelp av et nøkkelord eller i rgb-format. Og også i heksadesimal kode.

Hei lesere av denne bloggen. I dag skal jeg snakke om hvordan du kan lage alle store bokstaver ved hjelp av CSS. For å gjøre dette kan du selvfølgelig slå på Caps Lock og skrive ønsket tekst, men dette er en ganske primitiv metode. Men hva om du trenger å markere et eget avsnitt i en ferdig artikkel?

Gjør alle bokstaver store i css

Det er en teksttransformeringsegenskap for dette, som, som du kanskje har gjettet, transformerer tekst. Den har følgende verdier:

• små bokstaver – all tekst vises med små bokstaver
• store bokstaver – alle ord vises med store bokstaver (det vi trenger)
• storbokstav – den første bokstaven i hvert ord er stor

Det er i grunnen alt du trenger å vite. Alt som gjenstår er å finne ut hvordan du får tilgang til ønsket element. La oss forestille oss dette eksemplet: du må gjøre det femte avsnittet i en artikkel til store bokstaver. Og hvordan kan dette implementeres?

Hvordan nå ønsket element?

Som du vet, opprettes et avsnitt ved hjelp av en sammenkoblet html-tag, hvor hele innholdet blir et avsnitt. Alt som gjenstår er å definere en ny stilklasse for den:

Nå har vi muligheten til å få tilgang til denne spesifikke paragrafen gjennom CSS-språket uten å påvirke resten. Du kan gjøre det slik:

Stor bokstav(
Tekst-transform: store bokstaver;
}

Denne metoden er egnet når du trenger å fremheve et fragment i en bestemt artikkel. Hva om alle sider måtte ha bestemt tekst med store bokstaver. I dette tilfellet er det bedre å plassere blokken i en malfil for ikke å skrive den hver gang.

Eller kanskje du må markere andre avsnitt i hver artikkel ved å bruke CSS med store bokstaver. Da vil et annet alternativ passe deg. Finn blokken der artikkelen vises og få tilgang til andre avsnitt ved å bruke pseudoklassen nth-child. I dette eksemplet har blokken vår med en artikkel artikkelklassen.

Artikkel p:nth-child(2)(
Teksttransformasjon: store bokstaver
}

Som du kan se, er det en annen løsning for hvert enkelt tilfelle. Det viktigste er å huske på tekst-transform-egenskapen, som endrer størrelsen på bokstaver.

Generelt anbefales det ikke å vise tekst på denne måten, fordi det i stor grad svekker oppfatningen, men noen spesielt viktige fragmenter kan fremheves.

I dag så vi på tekst-transform-egenskapen. Abonner på bloggen for å motta nye artikler.