Yshopnoosa.com

Hur Style en rubrik med CSS

Hur Style en rubrik med CSS

Ge dina rubriker några snapin och pop med CSS-format.

Instruktioner

Använda teckensnitt, kantlinje och stoppning CSS-regler

1 Först, avgöra vilka egenskaper du vill använda teckensnittet.

Möjliga teckensnittsegenskaper du kan Styla är:

Font-family (till exempel Tahoma, Arial, eller Helvetica) Font-style (som inkluderar kursiv och sned) Font-variant (som inkluderar normala och små mössor) Font-weight (normal eller fet) Font-size (storlek kan ges i pixlar, ems, procentsatser eller använda sökord som små, medelstora och stora) 2Hur Style en rubrik med CSS

En möjlig CSS-regel för en h1 rubrik kan vara:

H1 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: stor;}

3 Besluta om du vill ha en kantlinje för din rubrik. De möjliga gränsa stil egenskaperna är:

NoneDottedDashedSolidDoubleGrooveRidge 4 Möjliga kantbredd värden är nyckelord som tunn, medel och tjock eller ett värde som anges i pixlar, ems eller procentsatser.

En ramfärg värde bör också anges. Välja vilken färg du vill.

5Hur Style en rubrik med CSS

Här är h1 regeln med vissa kanttyper läggas till:

H1 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: stor;storlek: tunn;border-style: prickigfärg: röd;

width: 400px;

}

6 Utfyllnaden kan läggas ett värde i pixlar, ems eller i procent. Som gränser, kan utfyllnad läggas till individuellt till varje sida av en rubrik.

7 Här är en möjlig regel lägga stoppning till h1 stil exempel:

H1 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: stor;gränsen: tunn prickad #FF0000;padding-top: 10px;Cellutfyllnad till höger: 0px;padding-botten: 0px;Cellutfyllnad till vänster: 10px;}

Använda bakgrundsfärg eller bakgrunden bild regler

8Hur Style en rubrik med CSS

Varje element kan ha en bakgrundsfärg. För att använda en bakgrundsfärg till h1 exempel rubrik, Använd en regel som denna:

H1 {

font-family: Verdana, Arial, Helvetica, sans-serif; font-size: large; border: thin dotted #FF0000; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; background-color: #CCFFFF;

}

9 I stället för eller tillsammans med en bakgrundsfärg, kan en bild användas som bakgrund för en rubrik. Här är hur regeln skulle se ut med en bakgrundsbild som lagt till:

H1 {

font-family: Verdana, Arial, Helvetica, sans-serif; font-size: large; border: thin dotted #FF0000; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; background-color: #CCFFFF; background-image: url(bgimage.jpg); background-repeat: no-repeat;

}

10 Nu syns den fläckiga bakgrundsbilden bakom h1.

Tips & varningar

  • CSS kan du ersätta texten från en rubrik med en bild. Läs mer om sätt att göra detta genom att använda länken i avsnittet resurser.
  • Rubrikerna kan ersätta Flash-bilder. Läs mer om hur du gör detta genom att använda länken i avsnittet resurser.
  • Det är en god praxis att använda en bakgrundsfärg, även när du använder en bakgrundsbild. Om bilden inte hämta, kommer rubriken fortfarande stå ut från dess bakgrund.