HTML (HyperText Markup Language) innehåller sex speciella taggar för att visa rubriker på olika nivåer. Alla har standardparametrar (typsnittets storlek och stil, antalet indrag från föregående och nästa element etc.). Dessa alternativ kan åsidosättas med CSS-instruktioner (Cascading Style Sheets) och ändrar därmed utseendet på rubriker i texten på en webbsida.
Instruktioner
Steg 1
Placera rubriker på olika nivåer mellan motsvarande inledande och stängande taggar, om de inte redan har gjorts i källkoden på webbsidan. Till exempel bör den viktigaste rubriken (första nivån) vara mellan taggarna
och
:
Rubrik på första nivån
Nästa viktigaste nivårubrik ska placeras mellan taggarna
och
etc. Den sista av de planerade nivåerna är den sjätte -
och
Steg 2
Placera i rubrikdelen av källkoden (mellan taggarna och) ett uttalande som berättar besökarens webbläsare att det finns en beskrivning av stilarna i CSS på denna plats:
/ * CSS-instruktioner kommer att finnas här * /
Steg 3
Mellan de inledande och stängande stiltaggarna, lägg till stilbeskrivningar för rubrikerna på varje nivå du vill ändra utseendet på. Till exempel, om du bara behöver ändra utseendet på rubrikerna på första nivån, kan den här koden se ut så här:
h1 {
färgen röd;
teckenstorlek: 20 pixlar;
typsnitt: kursiv;
font-vikt: fet;
margin-top: 30px;
marginal-botten: 20 pixlar;
}
Här indikerar h1 att beskrivningen i lockiga hängslen hänvisar till h1-taggen och kallas en "väljare". Färgparametern ställer in textens färg, parametern för fontstorlek är fontstorleken, typsnittet med det kursiva värdet är det kursiva typsnittet, fontens vikt med fetstil är fet, marginalstoppen är toppen marginal och marginalbotten är bottenmarginalen. För rubriker på andra nivån, lägg till ett liknande block med en H2-väljare etc.
Steg 4
Använd förkortningssyntaxen om det finns många nivåer att beskriva. Till exempel kan teckensnittsbeskrivningar placeras i en parameter, liksom beskrivningar av indragstorlekar. Prov:
h1 {
färgen röd;
teckensnitt: fet 20px arial;
marginal: 30px 0 20px 0;
}
h2 {
färgen orange;
teckensnitt: fet 18px arial;
marginal: 25px 0 15px 0;
}
I marginalparametern måste marginalerna anges medurs, med början från den övre marginalen, genom ett mellanslag (längst upp till höger till vänster).
