CSS-regler: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
Rad 1: | Rad 1: | ||
CSS-regler består av två delar. | CSS-regler består av två delar. | ||
1) | 1) Först kommer en så kallad selektor, Denna används för att bestämma vilka element som ska påverkas av den specifika CSS-regeln. Det finns många olika typer av selektorer. Se [[Selektor||selektor-sektionen]] för mer information. | ||
2) Efter selektorn följer en | 2) Efter selektorn följer en lista över vilka egenskaper som ska förändras samt de värden som de ska sättas till. | ||
I varje CSS-regel anges egenskaperna inom ett "{}"-block. Inuti blocket deklarerar man sedan egenskaperna var för sig. Detta gör man genom att först ange vilken egenskap man vill förändra, följt av ett ":"-tecken, följt av det värde man vill sätta egenskapen till. Deklarationen avslutas sedan med ett ";"-tecken. Om det är den sista egenskapen som ska sättas i ett block, kan man utelämna ";"-tecknet. Det är dock en bra vana att alltid skriva dit det, då blir det aldrig fel. Låt säga att du utelämnar ";"-tecknet, återkommer för att redigera regeln och lägger till något sist, då är det lätt att glömma att man utelämnat ";":et tidigare och så blir CSS-reglerna fel. | I varje CSS-regel anges egenskaperna inom ett "<code>{}</code>"-block. Inuti blocket deklarerar man sedan egenskaperna var för sig. Detta gör man genom att först ange vilken egenskap man vill förändra, följt av ett "<code>:</code>"-tecken, följt av det värde man vill sätta egenskapen till. Deklarationen avslutas sedan med ett "<code>;</code>"-tecken. Om det är den sista egenskapen som ska sättas i ett block, kan man utelämna "<code>;</code>"-tecknet. Det är dock en bra vana att alltid skriva dit det, då blir det aldrig fel. Låt säga att du utelämnar "<code>;</code>"-tecknet, återkommer för att redigera regeln och lägger till något sist, då är det lätt att glömma att man utelämnat "<code>;</code>":et tidigare och så blir CSS-reglerna fel. | ||
== Exempel == | == Exempel == |
Nuvarande version från 10 januari 2019 kl. 13.05
CSS-regler består av två delar.
1) Först kommer en så kallad selektor, Denna används för att bestämma vilka element som ska påverkas av den specifika CSS-regeln. Det finns många olika typer av selektorer. Se |selektor-sektionen för mer information.
2) Efter selektorn följer en lista över vilka egenskaper som ska förändras samt de värden som de ska sättas till.
I varje CSS-regel anges egenskaperna inom ett "{}
"-block. Inuti blocket deklarerar man sedan egenskaperna var för sig. Detta gör man genom att först ange vilken egenskap man vill förändra, följt av ett ":
"-tecken, följt av det värde man vill sätta egenskapen till. Deklarationen avslutas sedan med ett ";
"-tecken. Om det är den sista egenskapen som ska sättas i ett block, kan man utelämna ";
"-tecknet. Det är dock en bra vana att alltid skriva dit det, då blir det aldrig fel. Låt säga att du utelämnar ";
"-tecknet, återkommer för att redigera regeln och lägger till något sist, då är det lätt att glömma att man utelämnat ";
":et tidigare och så blir CSS-reglerna fel.
Exempel
Ett exempel på en CSS-regel:
p {
background-color: white;
color: black;
}
I ovanstående exempel väljer man ut alla p
-element. Regeln ändrar på två egenskaper: Dels sätter man bakgrundsfärgen till vit, dels sätter man förgrunds-/textfärgen till svart.