Sådan ændres skrifttype, størrelse og farve på en webside

Indholdsfortegnelse:

Sådan ændres skrifttype, størrelse og farve på en webside
Sådan ændres skrifttype, størrelse og farve på en webside

Video: Sådan ændre du farve, størrelse og type på din tekst og titler (WordPress Avada) 2024, Kan

Video: Sådan ændre du farve, størrelse og type på din tekst og titler (WordPress Avada) 2024, Kan
Anonim

Denne side indeholder instruktioner om, hvordan du ændrer en skrifttype og dens farve på en webside. Med introduktionen af ​​HTML5 er den rigtige måde at konfigurere webside-skrifttyper på at bruge Cascading Style Sheets. Den gamle metode til at bruge en inline-stilattribut eller -typetag udskrives og bør ikke længere bruges.

Bemærk

Selvom de forældede metoder stadig kan gengives korrekt i moderne internetbrowsere, er de ikke længere garanteret at gøre det. Hvis du vil oprette websider, der vises korrekt for det maksimale antal brugere, skal du bruge CSS-metoderne, der er beskrevet på denne side.

Bemærk

Hvis du leder efter hjælp til at tilpasse fontens udseende i et Microsoft Word-dokument, kan du se, hvordan du ændrer fontfarve, størrelse eller type i Word.

Brug af CSS til en enkelt applikation

Hvis du kun planlægger at ændre fontens ansigt og dens farve kun én gang på en webside, skal du konfigurere dens attributter i elementtaggen. Ved hjælp af stil attribut, kan du angive skrifttype og farve med font-family, farve, og skriftstørrelsen med skriftstørrelse, som vist i nedenstående eksempel.

Eksempel kode

Denne tekst har skrifttypen Courier, er blå og 20px.

Resultat

Denne tekst har Courier-skrifttypen, er blå og 20px i størrelse.

Brug af CSS til en eller flere sider

Tilpasset skrifttype til en side

I hoveddelen af ​​din webside kan du indsætte kode mellem tabbladerne for at ændre udseendet på din tekst i forskellige elementer. Den næste blå boks indeholder eksempelkode, der, når den først blev kaldt, ville ændre dit skrifttype til Courier og farve det rødt. Som du kan se, har vi defineret klassens navn som "brugerdefineret."

.tilpasset {font-family: Courier; farve: rød; font-size: 20px; }

Når den er defineret, kan denne styling anvendes til de fleste elementer på din side ved at vedhæfte klassen "tilpasset" til dem. Følgende felt viser to kodelinjer og deres respektive resultater.

Eksempel

Hele denne sætning er rød og Courier

Kun ordtesten er rød og Courier.

Resultat

Hele denne sætning er rød og Courier.

Kun ordtesten er rød og Courier.

Tilpasset skrifttype til mange sider

Import af en ekstern CSS-fil kan være meget gavnlig, idet den giver brugerne mulighed for at ændre regler for flere sider på samme tid. Det følgende afsnit viser et eksempel til oprettelse af en grundlæggende CSS-fil, der ændrer skrifttypen og dets farve for de fleste elementer. Denne fil kan indlæses på mere end en webside, endda et helt websted.

Ved at bruge en hvilken som helst grundlæggende teksteditor, gemmer følgende tekst som en.css-fil, forbereder den til import.

@charset "utf-8";

.courier {font-family: Courier; farve: # 005CB9; }

Når den foregående tekst er placeret i en.css-fil (vi har opkaldt vores basic.css), kan du linke til den fra enhver anden side ved hjælp af en linje, der ligner det følgende eksempel.

Tip

Brugere kan ændre attributterne for elementer på en side ved at ændre koden i den importerede.css-fil.

Skrifttype-løsning

Skønt den er forældet, kan HTMLtag'en stadig bruges og kan være nødvendig for at blive brugt sammen med nogle onlinetjenester. Når du bruger FONT-mærket, skal du medtage ansigtsattributten, der beskriver den skrifttype, der skal bruges. I eksemplet nedenfor bruger vi Courier-skrifttypen og den hexadecimale farvekode # 005CB9 , som er en mørkeblå.

Eksempel kode

Et specielt skrifteksempel.