Skip to main content

Font-tags versus Cascading Style Sheets (CSS)

CSS video tutorial - 10 - CSS Cascade Vs CSS Inheritance (April 2025)

CSS video tutorial - 10 - CSS Cascade Vs CSS Inheritance (April 2025)
Anonim

Har du kigget på et meget gammelt websted og set et usædvanligt tag inde i HTML'en? For mange år siden ville webdesignere faktisk indstille skrifttyperne på deres websider inde i HTML'en selv, men adskillelsen af ​​struktur (HTML) og stil (CSS) gjorde væk med denne praksis for nogen tid siden.

I webdesign i dag er tagget blevet udskrevet. Dette betyder, at taggen ikke længere er en del af HTML-specifikationen. Mens nogle browsere stadig understøtter dette tag, efter at det blev udskrevet, understøttes det ikke længere i HTML5, hvilket er den seneste iteration af sproget. Dette betyder, at taggen ikke længere skal findes i dine HTML-dokumenter.

Alternativet til skrifttagsmærket

Hvis du ikke kan angive skrifttyperne for tekst inde i HTML-siden med tagget, hvad skal du bruge? Cascading Style Sheets (CSS) er, hvordan du angiver skrifttypestile (og alle visuelle stilarter) på hjemmesider i dag. CSS kan gøre alle de samme ting som taggen kunne gøre, plus så meget mere. Lad os undersøge, hvad taggen kunne gøre, når det var en mulighed for vores HTML-sider (husk, det understøttes slet ikke længere, så det er ikke en mulighed) og sammenligne hvordan man gør det med CSS.

Ændring af fontfamilien

Skrifttypens ansigt er skrifttypens ansigt eller familie. Med skrifttags-taggen, vil du bruge attributten "ansigt", og du vil have brug for at placere dette i et dokument mange gange for at indstille de enkelte skrifttyper for hvert afsnit af teksten. Hvis du havde brug for at foretage en fejende ændring i den skrifttype, måtte du ændre hver enkelt af disse individuelle tags. For eksempel:

denne skrifttype er ikke sans-serif

I CSS i stedet for skrifttype "ansigt" hedder det skrifttypen "familie". Du skriver en CSS-stil, der vil angive skrifttypen. Hvis du f.eks. Ville sætte hele teksten på en side til Garamond, kan du tilføje den visuelle stil som denne:

krop {font-family: Garamond, Times, serif; }

Denne CSS-stil vil anvende skrifttypefamilien Garamond til alt på websiden, da hvert element i dokumentet er en efterkommer af

Ændring af skrifttypens farve

Som i ansigtet bruger du attributten "farve" og hexekoder eller farvenavne til at ændre farve på din tekst. For mange år siden ville du også indstille dette individuelt på tekstelementer, som en header-tag.

denne skrifttype er lilla

I dag vil du bare skrive en linje med CSS.

Dette er så meget mere fleksibelt. Hvis du skulle ændre

På hver side af dit websted kan du lave en ændring i din CSS-fil, og hver side, der bruger den pågældende fil, vil blive opdateret.

Ud med det gamle

Brug af CSS til at diktere visuelle stilarter har været en standard for webdesigner i mange år, så hvis du faktisk ser på en side, der stadig bruger tagget, så er det en meget gammel side, og den skal ombygges for at kunne overholde den aktuelle web udforme bedste praksis og moderne webstandarder.

Redigeret af Jeremy Girard