Hvordan å gjøre en Drop Cap forbokstav i HTML

Tilsett en dråpe cap til websiden din for å gjøre den første bokstaven i et avsnitt vises som de store bokstavene som finnes i aviser og manuskripter. En dråpe cap må være større enn resten av teksten, og andre bokstaver skal brytes rundt det. Du kan implementere en dråpe cap ved hjelp av en CSS-stil i et HTML webside.

Bruksanvisning

1 Åpne din foretrukne HTML editor. Last HTML-filen du ønsker å legge til drop cap til.

2 Legg til en ny stilark, eller CSS, klasse i "<head>" en del av HTML-filen. Det viktige er at din stil "flyter", slik at annen tekst brytes rundt brevet. Et eksempel på hvordan du gjør dette på er med koden:

<Style type = "text / css" media = "all">

.my_drop_cap {

float: left;

line-height: 1;

font-size: 4em;

margin-right: 0.1em;

font-weight: bold;

}

</ Style>

3 Omgi bokstaven du ønsker å lage en dråpe cap i "<span>" koder som tilsvarer den klassen du opprettet i spissen. Ved hjelp av vår forrige eksempel legge til denne koden i HTML kropp seksjon:

<Span class = "my_drop_cap"> M </ span> y dråpe cap brev.

4 Lagre HTML-fil og legge det i en nettleser for å se på rulle cap.

Hint

  • Eldre versjoner av nettlesere kan vise viss CSS-koden på uventede måter. Last HTML-siden i flere nettlesere for å sikre at det viser riktig.