Opret og anvend en typografi

En typografi er et sæt formateringsegenskaber, der er defineret i et overlappende typografiark (CSS). Du kan anvende typografier til indhold på et websted, herunder tekst (individuelle tegn eller hele afsnit), grafik, lag, tabeller og endda til brødteksten på hele webstedet. Typografier gør det muligt at genbruge et sæt egenskaber og værdier uden at skulle angive egenskaberne, hver gang du vil bruge dem.

Typografierne i CSS overlapper hinanden i den forstand, at globale typografiregler gælder for HTML-elementer, medmindre lokale typografiregler tilsidesætter dem. Generelt tilsidesætter lokale typografiregler de generelle typografiregler. En typografi, der er defineret i en intern CSS på et websted, tilsidesætter for eksempel en typografi, der er defineret i en ekstern CSS. På samme måde, tilsidesætter en indbygget CSS, der er defineret inden for et enkelt HTML-element på webstedet, alle typografier, der er defineret for det samme element i den interne eller eksterne CSS på webstedet. De dele af globale typografiregler, der ikke er i modstrid med lokale CSS typografiregler, gælder for HTML-elementer, selv når lokale typografier er anvendt.

Denne artikel indeholder

Typografityper

Opret en typografi

Anvend en typografi

Typografityper

En typografi, der er placeret i en ekstern eller intern CSS kan være klassebaseret, elementbaseret eller id-baseret. En typografi er defineret af dens regelsæt, som består af en vælger, efterfulgt af en blok med egenskabserklæringer, der vises mellem en venstre klammeparentes ({}) og en højre klammeparentes (}). Hver typografitype adskiller sig fra de andre typografityper ved dens vælger; et punktum (.) ses foran vælgeren ved et klassebaseret format; et nummertegn (#) ses foran vælgeren ved et id-baseret format; og vælgeren for et elementbaseret format består kun af et HTML-element, f.eks elementet H1.

Klassebaserede typografier

Brug klassebaserede typografier til at definere et sæt egenskaber, du vil bruge i et eller flere elementer på et websted. Hvis du gerne vil redigere en typografi, kan du redigere typografiens regelsæt. Så vil alle elementer, hvor typografien er anvendt, automatisk reflektere ændringerne.

I følgende eksempel er "Introduktion" typografiens vælger, og "skriftstørrelse: lille" er en egenskabserklæring, som er efterfulgt af en anden egenskabserklæring.

Et eksempel på et regelsæt, der er angivet for en klassebaseret typografi

.introduction {font-size: small; color: white}

Et eksempel på et klassebaseret format, der anvendes på et < p >-mærke

<p class="introduction">

Elementbaserede typografier

Brug elementbaserede typografier til at definere et sæt egenskaber, du vil bruge på alt i et bestemt HTML-element på et websted. For eksempel, for at oprette en margen på 25 pixels omkring alle afsnit (indhold omgivet af < p >-mærker) på dit websted, opretter du en elementbaseret typografi, der bruger p-elementet som dets vælger og indeholder angivelser for margenegenskaber, som vist i følgende kode.

Et eksempel på en regel, der er angivet for en elementbaseret typografi

p { margin-left: 25px; margin-right: 25px }

Id-baserede typografier

Brug en id-baseret typografi, når du vil definere et sæt af egenskaber for et enkelt element eller en blok med elementer, du vil skelne fra alt andet indhold i et eller flere websteder. Brug en id-baseret typografi til et enkelt HTML-element i et websted.

Et eksempel på en regel, der er angivet for en id-baseret typografi

#footer {background-color: #CCCCCC; margin: 15px}

Et eksempel på en id-baseret typografi, der anvendes på et < p >-mærke

<p id="footer">

Indbyggede typografier

Brug en indbygget typografi, når du vil definere et sæt af egenskaber for et enkelt element eller en blok med elementer på et websted og ikke ønsker at genbruge den pågældende typografi. I modsætning til id-baserede, elementbaserede og klassebaserede typografier, hvis egenskaber er defineret enten i hovedsektionen på et websted (internt CSS) eller i en ekstern CSS-fil, er egenskaberne for indbyggede typografier (eller indbygget CSS) defineret direkte i det HTML-elementet, du vil anvende typografien.

Et eksempel på en regel, der er angivet for en indbygget typografi

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Toppen af siden

Opret en typografi

Du kan oprette nye typografier, enten fra bunden eller ved at kopiere en eksisterende typografi. Uanset hvad, giver dialogboksen Ny typografi dig mulighed for at definere alt om den nye typografi, herunder vælgertypen, egenskaber og det typografiark, som skal indeholde typografien. Når du vil oprette en ny indbygget typografi, kan du også bruge opgaveruden Egenskaber for CSS. Når du hurtigt vil oprette og anvende en ny typografi på din side uden at angive egenskaber for typografien, kan du også bruge værktøjslinjen typografi.

Opret en typografi, ved hjælp af dialogboksen Rediger typografi

  1. Benyt en af følgende fremgangsmåder:

    • Hvis du vil føje en typografi til en ekstern CSS, skal du åbne .css-filen.

    • Hvis du vil føje en typografi til en intern CSS, skal du åbne webstedet.

    • For at tilføje en indbygget typografi, skal du åbne webstedet og vælge det indhold, du vil anvende typografien på.

  2. Brug en af følgende fremgangsmåder:

    • For at oprette en ny typografi   , skal du klikke på Ny typografi på et af disse steder: opgaveruden Anvend typografier eller opgaveruden Administrer typografier, værktøjslinjen Typografi eller menuen Format.

    • For at kopiere en eksisterende typografi   , skal du gøre et af følgende:

      • Peg på den typografi, du vil kopiere i opgaveruden Anvend typografier, klik på den pil ned, der vises, og vælg derefter Ny typografikopi.

      • Højreklik på den typografi, du vil kopiere i opgaveruden Administrer typografier eller Egenskaber for CSS, og vælg derefter Ny typografikopi.

  3. I dialogboksen Ny typografi, skal du gøre følgende:

Brug dette

Hvis du vil

Vælger

  • For at bruge en klassevælger, skal du skrive et punktum (.), efterfulgt af et unikt navn.

  • For at bruge en id-vælger, skal du skrive et nummertegn (#) efterfulgt af et unikt navn.

    Bemærk: Navne til klasse og id-vælger må ikke indeholde mellemrum, medmindre du opretter en kompleks vælger.

  • Hvis du vil bruge et elementvælger, skal du enten skrive navnet på et HTML-element eller klikke på rullelisten Vælger og vælge et elementnavn.

  • For at bruge en indbygget-vælger, skal du vælge indbygget typografi.

  • For at oprette en kompleks vælger, skal du indtaste vælgeren

Definer i

Vælg en af følgende:

  • Aktuel side føjer den nye typografi til den interne CSS på det aktuelle websted.

  • Nyt typografiark føjer den nye typografi til en ny tom ekstern CSS.

  • Eksisterende typografiark føjer den nye typografi til en eksisterende ekstern CSS, som du angiver.

Tilføj ny typografi til dokumentvalg

Tilføj typografien til det aktuelle valg på det aktuelle websted.

URL-ADRESSE

Hvis du har valgt Eksisterende typografiark i Definer i, skal du angive URL-adressen til .css-filen.

Kategori

Vælg en af følgende og angiv derefter de egenskaber, der vises til højre i dialogboksen:

Tip: Kategorier, der vises med fed i listen Kategori, indeholder angivne egenskaber.

  • Skrifttype indstiller skrifttypeegenskaber, herunder størrelse, vægt, pynt og farve.

  • Blok indstiller linjens højde, tekstjustering, indrykning af tekst og afstanden mellem tekst.

  • Baggrund indstiller baggrundsfarve og egenskaber for baggrundsbillede.

  • Kant indstiller en kant og dens egenskaber.

  • Boks indstiller egenskaber for udfyldning og margen for elementer på boks- og blokniveau.

  • Placering indstiller dimensioner og placering af elementer på boks- og blokniveau.

  • Layout indstiller synligheden, flydende og ombrydende adfærd, udklip og andre layoutegenskaber for elementer på boks- og blokniveau.

  • Liste indstiller egenskaberne for listen over elementer, herunder type, placering og billede.

  • Tabel indstiller egenskaber for tabel-relaterede elementer, herunder linjeafstand, layout, kantegenskaber.

Bemærk: Du kan også kopiere en typografi fra én CSS til en anden. I opgaveruden Administrer typografier, skal du trække typografien fra CSS, der indeholder den pågældende typografi til enten navnet på den CSS, du vil kopiere den til eller til et bestemt punkt på listen over typografier i CSS-destinationen.

Opret en indbygget typografi, ved hjælp af opgaveruden Egenskaber for CSS

  1. I Designvisning eller Kodevisning på dit websted, skal du vælge det indhold, hvor du vil føje en indbygget typografi til.

  2. I opgaveruden Egenskaber for CSS, under Anvendte regler, skal du enten højreklikke på den vælger, du vil tilføje den indbyggede typografi til, eller, hvis "(ingen anvendte regler)" vises, skal du højreklikke på Anvendte regler, og derefter klikke på Ny indbygget typografi i genvejsmenuen.

  3. Under Egenskaber for CSS, skal du angive de ønskede egenskaber.

Opret og anvend en ny udefineret typografi

Du kan oprette typografier og anvende dem på elementerne og definere typografierne senere. For eksempel, hvis du vil arbejde med en designer, som skal designe din side, kan du anvende udefinerede typografier til elementerne på siden, og så kan du definere typografierne senere sammen med designeren.

  1. I Designvisning eller Kodevisning på dit websted, skal du vælge det element, du vil anvende en typografi på.

  2. For at oprette og anvende en ny typografi uden at definere nogen egenskaber, skal du gå til værktøjslinjen Typografi og vælge enten Klasse eller ID, hvor du skal indtaste et unikt navn for typografien.

Toppen af siden

Anvend en typografi

Du kan bruge opgaveruden Anvend typografier, opgaveruden Administrer typografier eller værktøjslinjen Typografi til at anvende klasse- eller id-baserede typografier fra din interne og eksterne, overlappende typografiark (CSS). Opgaveruden Anvend typografier gør det muligt at anvende flere typografier til en markering, mens opgaveruden Administrer typografier og værktøjslinjen Typografi er begrænset til at anvende én typografi. Værktøjslinjen Typografi giver dig mulighed for hurtigt at navngive og anvende en ny udefineret typografi på din side.

Du behøver ikke at anvende typografier, der bruger et element til en vælger (elementbaserede typografier), fordi disse typer typografier anvendes automatisk på deres tilknyttede element overalt på et websted. Opgaveruden Anvend typografier viser elementbaserede typografier under Kontekstafhængige vælgere, og sammen med opgaveruden Administrer typografier viser den en blå prik ud for navnet på typografien. Værktøjslinjen Typografi viser ikke elementbaserede typografier.

  1. I Designvisning eller Kodevisning på dit websted, skal du vælge det element, du vil anvende en typografi på.

  2. Benyt en af følgende fremgangsmåder:

    • For at anvende flere eksisterende typografier   , skal du i opgaveruden Anvend typografier trykke på CTRL, mens du klikker på hver typografi, du vil bruge.

    • For at anvende en enkelt eksisterende typografi   , skal du gøre et af følgende:

      • I opgaveruden Anvend typografier skal du klikke på den ønskede klasse- eller id-typografi.

      • På værktøjslinjen Typografi, i enten Klasse eller ID, skal du klikke på den ønskede typografi.

      • Højreklik på den klasse- eller id-typografi, du ønsker i opgaveruden Administrer typografier, og klik derefter på Anvend typografi i genvejsmenuen.

    • For at oprette og anvende en ny typografi uden at definere nogen egenskaber   , skal du gå til værktøjslinjen Typografi og vælge enten Klasse eller ID, hvor du skal indtaste et unikt navn for typografien.

Toppen af siden

Del Facebook Facebook Twitter Twitter Mail Mail

Var disse oplysninger nyttige?

Fantastisk! Har du mere feedback?

Hvordan kan vi forbedre det?

Tak for din feedback!

×