Slik endrer du skrifttype, størrelse og farge på en webside

Innholdsfortegnelse:

Slik endrer du skrifttype, størrelse og farge på en webside
Slik endrer du skrifttype, størrelse og farge på en webside

Video: Dynify: Hvordan endre farge, font og størrelse på tekst 2024, Kan

Video: Dynify: Hvordan endre farge, font og størrelse på tekst 2024, Kan
Anonim

Denne siden inneholder instruksjoner om hvordan du endrer font og farge på en webside. Med introduksjonen av HTML5 er den riktige måten å konfigurere nettsidefonter på å bruke Cascading Style Sheets. Den gamle metoden, for å bruke en inline stilattributt eller fontkode, er utdatert og bør ikke lenger brukes.

Merk

Selv om de utdaterte metodene fremdeles kan vises korrekt i moderne nettlesere, er de ikke lenger garantert å gjøre det. For å lage websider som vises riktig for maksimalt antall brukere, bruk CSS-metodene som er beskrevet på denne siden.

Merk

Hvis du leter etter hjelp til å tilpasse utseende i et Microsoft Word-dokument, kan du se hvordan du endrer skriftfarge, størrelse eller type i Word.

Bruke CSS for en enkelt applikasjon

Hvis du bare planlegger å endre skriftsiden og fargen bare en gang på en webside, konfigurerer du attributtene i elementkoden. Bruke stil attributt, kan du angi skrifttype og farge med font-family, farge og skriftstørrelsen med font-size, som vist i eksempelet nedenfor.

Eksempelkode

Denne teksten har skriften Courier, er blå og 20px.

Resultat

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

Bruke CSS for en eller flere sider

Tilpasset font for en side

I hoveddelen av websiden din kan du sette inn kode mellom tabbene for å endre utseendet på teksten din i forskjellige elementer. Den neste blå ruten inneholder eksempelkode som, når den ble kalt, ville endre fontens ansikt til Courier og fargelegge den rødt. Som du kan se, har vi definert klassens navn som "tilpasset".

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

Når den er definert, kan denne stylingen brukes på de fleste elementer på siden din ved å knytte klassen "tilpasset" til dem. Følgende boks viser to kodelinjer og deres respektive resultater.

Eksempel

Hele setningen er rød og Courier

Bare ordtesten er rød og Courier.

Resultat

Hele setningen er rød og Courier.

Bare ordtesten er rød og Courier.

Tilpasset font for mange sider

Det kan være veldig gunstig å importere en ekstern CSS-fil ved at den lar brukerne endre regler for flere sider samtidig. Følgende avsnitt viser et eksempel for å lage en grunnleggende CSS-fil som endrer font og farge for de fleste elementer. Denne filen kan lastes inn på mer enn en webside, til og med et helt nettsted.

Ved å bruke hvilken som helst grunnleggende tekstredigerer, vil du lagre følgende tekst som en.css-fil for å forberede den til import.

@charset "utf-8";

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

Når den foregående teksten er plassert i en.css-fil (vi har navngitt vår basic.css), kan du koble til den fra hvilken som helst annen side ved å bruke en linje som ligner på følgende eksempel.

Tips

Brukere kan endre attributtene til elementer på en side ved å endre koden i den importerte.css-filen.

Løsning for font

Selv om den er utdatert, kan HTML-taggen fremdeles brukes og kan være nødvendig å brukes sammen med noen online tjenester. Når du bruker FONT-taggen, må du ta med ansiktsattributtet, som beskriver skriften som skal brukes. I eksemplet nedenfor bruker vi Courier-skrifttypen og den heksadesimale fargekoden # 005CB9 , som er mørkeblå.

Eksempelkode

Et spesielt skrifteksempel.