Skapa och använda en formatmall

Viktigt!: Den här artikeln är maskinöversatt, se ansvarsfriskrivningen. Den engelska versionen av den här artikeln finns här för din referens.

En formatmall består av en uppsättning formateringsegenskaper som definieras i en övergripande formatmall (CSS). Du kan använda formatmallar på innehållet på en webbsida, bland annat text (enskilda tecken eller hela stycken), grafik, skikt, tabeller och till och med hela webbsidan. Med formatmallar kan du på ett effektivt sätt återanvända en uppsättning egenskaper och värden utan att behöva ange egenskaperna varje gång som du vill använda dem.

Globala formatmallsregler används på HTML-elementen såvida det inte finns lokala regler som åsidosätter dem. I allmänhet har lokala formatmallsregler prioritet över globala formatmallsregler. En formatmall som definieras i en intern CSS på en webbsida har också prioritet framför en formatmall som definieras i en extern CSS. En infogad CSS som definieras i ett enskilt HTML-element på webbsidan har prioritet över alla formatmallar som definieras för samma element i den interna eller externa CSS:en för webbsidan. De delar av globala formatmallsregler som inte står i strid med lokala formatmallsregler tillämpas på HTML-elementen även när lokala formatmallar används.

Artikelinnehåll

Typer av format

Skapa en formatmall

Tillämpa en formatmall

Typer av formatmallar

En formatmall som finns i en extern eller intern CSS kan vara klassbaserad, elementbaserad eller ID-baserad. En formatmall definieras av sin regeluppsättning, som består av en väljare följt av ett block med egenskapsdeklarationer som visas mellan vänster klammerparentes ({) och höger klammerparentes (}). Varje typ av formatmall särskiljs från andra formatmallstyper med dess väljare. En punkt (.) placerar framför väljaren för en klassbaserad formatmall, ett nummertecken (#) placeras framför väljaren för en ID-baserad formatmall och väljaren för en elementbaserad formatmall består enbart av ett HTML-element, till exempel elementet H1.

Klassbaserade formatmallar

Du använder klassbaserade formatmallar när du definierar en uppsättning egenskaper som du vill använda på ett eller flera objekt på en webbsida. Om du vill ändra formatmallen redigerar du formatmallens regeluppsättning. Då återspeglas ändringarna automatiskt på alla objekt som du har använt formatmallen på.

I följande exempel är "introduction" formatmallens väljare och "font-size: small" är en egenskapsdeklaration följt av en andra egenskapsdeklaration.

Exempel på en regeluppsättning för en klassbaserad formatmall

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

Exempel på en klassbaserad formatmall som används på taggen <p>

<p class="introduction">

Elementbaserade formatmallar

Du använder elementbaserade formatmallar om du vill definiera en uppsättning egenskaper som du vill att alla instanser av ett visst HTML-element ska ha på en webbsida. Om du vill skapa en marginal på 25 bildpunkter runt alla stycken (innehåll omges med <p>-taggar) på webbsidan, skapar du en elementbaserad formatmall som använder p-elementet som väljare och innehåller deklarationer för marginalegenskaper, vilket visas i följande kod.

Exempel på en regeluppsättning för en elementbaserad formatmall

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

ID-baserade formatmallar

Du använder en ID-baserad formatmall när du vill definiera en uppsättning egenskaper för ett enskilt objekt eller ett block med objekt som du vill särskilja från allt annat innehåll på en eller flera webbsidor. Använd en ID-baserad formatmall när du vill formatera ett enskilt HTML-element på en webbsida.

Exempel på en regeluppsättning för en ID-baserad formatmall

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

Exempel på en ID-baserad formatmall som används på taggen <p>

<p id="footer">

Infogade format

Du använder infogade format när du vill definiera en uppsättning egenskaper för ett enskilt objekt eller ett block med objekt på en webbsida och inte vill återanvända formatmallen. Till skillnad från ID-baserade, elementbaserade och klassbaserade formatmallar, vars egenskaper definieras antingen i huvudavsnitten på en webbsida (intern CSS) eller i en extern CSS-fil, definieras egenskaperna för infogade format (eller infogad CSS) direkt i HTML-elementet där du vill använda formatet.

Exempel på en regeluppsättning för ett infogat format

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

Överst på sidan

Skapa en formatmall

Du kan skapa nya formatmallar antingen från början eller kopiera en befintlig formatmall. Oavsett vilket sätt du väljer kan du i dialogrutan Nytt format definiera allting om den nya formatmallen, inklusive väljartyp, egenskaper och formatmallslistan som ska innehålla formatmallen. När du vill skapa ett nytt infogat format kan du också använda åtgärdsfönstret CSS-egenskaper. När du snabbt vill skapa och tillämpa en ny formatmall på sidan utan att ange egenskaper för formatmallen kan du också använda verktygsfältet Formatmall.

Skapa ett format med hjälp av dialogrutan Nytt format

  1. Gör något av följande:

    • Om du vill lägga till en extern CSS öppnar du CSS-filen.

    • Om du vill lägga till en intern CSS öppnar du webbsidan.

    • Om du vill skapa ett infogat format öppnar du webbsidan och markerar det innehåll som du vill formatera.

  2. Gör något av följande:

    • Så här skapar du en ny formatmall    Klicka på Nytt format på någon av följande platser: åtgärdsfönstret Använd formatmallar eller åtgärdsfönstret Hantera formatmallar, verktygsfältet Formatmallar eller Format-menyn.

    • Så här kopierar du en befintlig formatmall    Gör något av följande:

      • Peka på formatmallen som du vill kopiera i åtgärdsfönstret Använd formatmallar, klicka på nedpilen som visas och markera Kopiera nytt format.

      • Högerklicka på formatmallen som du vill kopiera i åtgärdsfönstret Hantera formatmallar eller CSS-egenskaper och markera Kopiera nytt format.

  3. Gör följande i dialogrutan Ny formatmall:

Använd detta

Om du vill

Väljaren

  • Om du vill använda en klassväljare skriver du en punkt (.) följt av ett unikt namn.

  • Om du vill använda en ID-väljare skriver du ett nummertecken (#) följt av ett unikt namn.

    Obs!: Namn på klass- och ID-namn kan inte innehålla blanksteg såvida du inte skapar en komplex väljare.

  • Om du vill använda en elementväljare skriver du namnet på ett HTML-element eller klickar på listrutan Väljare och väljer ett elementnamn.

  • Om du vill använda en infogad väljare väljer du infogat format.

  • Om du vill skapa en komplex väljare skriver du väljaren.

Definiera i

Välj ett av följande alternativ:

  • Aktuell sida lägger till den nya formatmallen i en intern CSS på aktuell webbsida.

  • Ny formatmall lägger till den nya formatmallen i en tom extern CSS.

  • Befintlig formatmall lägger till den nya formatmallen i en befintlig extern CSS som du anger.

Tillämpa det nya formatet på dokumentmarkeringen

Använder formatmallen på den aktuella markeringen på den aktuella webbsidan.

URL

Om du väljer Befintlig formatmall i Definiera i skriver du URL:en till CSS-filen.

Kategori

Välj något av följande och ange egenskaperna som visas till höger i dialogrutan:

Tips: Kategorier som visas i fetstil i listan Kategori innehåller angivna egenskaper.

  • Teckensnitt anger teckenegenskaper, bland annat storlek, vikt, dekoration och färg.

  • Block anger radhöjd, textjustering, textindrag och textavstånd.

  • Bakgrund anger egenskaper för bakgrundsfärg och bakgrundsbild.

  • Kantlinje anger en kantlinje och dess egenskaper.

  • Ruta anger utfyllnad och marginalegenskaper för rut- och blocknivåelement.

  • Placering anger dimensioner och placering av rut- och blocknivåelement.

  • Layout anger beteende för synlighet, flytande och figursättning, klippning och andra layoutegenskaper för rut- och blocknivåelement.

  • Lista anger egenskaper för listelement, bland annat typ, placering och bild.

  • Tabell anger egenskaper för tabellrelaterade element, bland annat för avstånd, layout och kantlinje.

Obs!: Du kan också kopiera en formatmall från en CSS till en annan. Dra formatmallen i åtgärdsfönstret Hantera formatmallar från den CSS som innehåller formatmallen till namnet på den CSS som du vill kopiera den till, eller till en viss punkt i listan med formatmallar i mål-CSS:en.

Skapa en infogad stil med hjälp av åtgärdsfönstret CSS-egenskaper

  1. Markera innehållet som du vill använda ett infogat format på i designvyn eller kodvyn på webbsidan.

  2. Högerklicka under Tillämpade regler i åtgärdsfönstret CSS-egenskaper på väljaren som du vill använda det infogade formatet på. Om "(inga regler tillämpade)" visas högerklickar du i stället någonstans under Tillämpade regler och klickar sedan på Nytt infogat format på snabbmenyn.

  3. Ange önskade egenskaper under CSS-egenskaper.

Skapa och använda en ny odefinierad formatmall

Du kan skapa formatmallar och använda dem på objekt och definiera formatmallarna senare. Om du till exempel vill arbeta med en designer för att utforma sidan, kan du använda en odefinierad formatmall på objekten på sidan och sedan definiera formatmallarna tillsammans med designern.

  1. Markera objektet som du använda en formatmall på i designvyn eller kodvyn på webbsidan.

  2. Du skapar och använder en ny formatmall utan att definiera några egenskaper genom att skriva ett unikt namn på den nya formatmallen i rutan Klass eller ID i verktygsfältet Formatmall.

Överst på sidan

Använda en formatmall

Du kan använda åtgärdsfönstret Använd formatmallar, Hantera en formatmall eller verktygsfältet Formatmall när du tillämpar klassbaserade eller ID-baserade formatmallar från interna och externa övergripande formatmallar (CSS). I åtgärdsfönstret Använd formatmallar kan du tillämpa flera formatmallar på en markering, men i åtgärdsfönstret Hantera formatmallar och i verktygsfältet Formatmall kan du bara tillämpa en. I verktygsfältet Formatmall kan du snabbt namnge och använda odefinierade formatmallar på sidan.

Du behöver inte manuellt tillämpa formatmallar som använder ett element som väljare (elementbaserade formatmallar), eftersom dessa typer av formatmallar används automatiskt på rätt element på webbsidan. I åtgärdsfönstret Använd formatmallar visas elementbaserade formatmallar under Sammanhangsbaserade väljare, och i åtgärdsfönstret Hantera formatmallar visas en blå punkt bredvid formatmallens namn. Elementbaserade formatmallar visas inte i verktygsfältet Formatmall.

  1. Markera objektet som du vill använda en formatmall på i designvyn eller kodvyn på webbsidan.

  2. Gör något av följande:

    • Om du vill använda flera befintliga formatmallar    Tryck på CTRL och klicka i åtgärdsfönstret Använd formatmallar på respektive formatmall som du vill använda.

    • Om du vill använda en enda befintlig formatmall    Gör något av följande:

      • Klicka i åtgärdsfönstret Använd formatmallar på önskad klass- eller ID-formatmall.

      • Klicka på önskad formatmall i listrutan Klass eller ID i verktygsfältet Formatmall.

      • Högerklicka i åtgärdsfönstret Hantera formatmallar på önskad klass- eller ID-formatmall och klicka sedan på Använd formatmall på snabbmenyn.

    • Om du vill skapa och använda en ny formatmall utan att definiera några egenskaper    Skriv ett unikt namn på den nya formatmallen i rutan Klass eller ID i verktygsfältet Formatmall.

Överst på sidan

Obs!: Ansvarsfriskrivning för maskinöversättning: Den här artikeln har översatts av ett datorsystem utan mänsklig inblandning. Microsoft erbjuder dessa maskinöversättningar för att hjälpa icke engelskspråkiga användare att ta del av information om Microsofts produkter, tjänster och tekniker. Eftersom artikeln är maskinöversatt kan den innehålla fel i ordval, syntax och grammatik.

Utöka dina kunskaper
Utforska utbildning
Få nya funktioner först
Anslut till Office Insiders

Hade du nytta av den här informationen?

Tack för din feedback!

Tack för din feedback! Det låter som att det kan vara bra att koppla dig till en av våra Office-supportrepresentanter.

×