Indholdsfortegnelse:
Video: Web Development - Computer Science for Business Leaders 2016 2025
Nogle gange vil du måske have en række elementer på din HTML5 og CSS3-baserede webside for at dele lignende stilarter. Tag et kig på dette eksempel for at se dette i aktion.
De tre øverste overskrifter har alle meget lignende stilarter. Oprettelse af tre forskellige stilarter ville være trættende, så CSS indeholder en genvej:
multiStyle. html h1, h2, h3 {text-align: center; font-familie: "Bradley Hand ITC", kursiv; baggrundsfarve: gul;} h3 {font-familie: monospace;}
H1 Overskrift
H2 Overskrift
H3 Overskrift
Et stilelement (den der begynder h1, h2, h3) giver alle oplysningerne for alle tre overskriftstyper. Hvis du indeholder mere end et element i en stilvælger adskilt af kommaer, gælder stilen for alle elementer i listen. I dette eksempel anvendes den centrerede cursive skrifttype med en gul baggrund til overskriftsniveauer 1, 2 og 3 alle i samme stil.
Hvis du vil foretage ændringer, kan du gøre det. Style regler anvendes i rækkefølge, så du kan altid starte med den generelle regel og derefter ændre bestemte elementer senere i stilen, hvis du ønsker det.
Hvis du har flere elementer i en vælgerregel, gør det en stor forskel, om du bruger kommaer. Hvis du adskiller elementer med mellemrum (men ingen kommaer), søger CSS efter et element, der er nestet inden for et andet element. Hvis du inkluderer kommaer, anvender CSS reglen til alle de listede elementer.
Det er muligt at få endnu mere specifikke om vælgere med tegnsætning. For eksempel beskriver + vælgeren søskendeforhold. Se f.eks. Følgende regel:
h1 + p
Dette mål er kun det afsnit, der umiddelbart følger et niveau-et overskrift. Alle andre afsnit vil blive ignoreret. Der er også andre selektorer, men de der er nævnt her, er nok til de fleste applikationer.
Du vil måske undre dig over, hvorfor udviklere har brug for så mange forskellige slags selektorer. Du kan bruge tagnavnet til de fleste elementer, og bare anbringe en klasse eller et ID på ethvert element, der kræver særlig opmærksomhed. Det er sandt, men et mål med CSS er at holde din HTML-kode så ren som muligt. Du vil bruge strukturen på selve siden til at hjælpe dig med at bestemme stilen.
